/* ==========================================================================
   Next stop-World — Composants (reproduction de la maquette Claude Design)
   CSS vanilla, mobile-first. Aucun framework, aucune dépendance.
   Source visuelle : maquette/01-site-complet + source-react/*.jsx.
   Breakpoints : 48em (768 px) tablette · 64em (1024 px) desktop.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base typographique
   -------------------------------------------------------------------------- */
body {
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.65;
	color: var(--color-text);
	background: var(--color-bg);
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

nav, button, .btn, input, select, textarea, .nsw-meta {
	font-family: var(--font-ui);
}

::selection { background: var(--nsw-or); color: var(--nsw-nuit-900); }

/* --------------------------------------------------------------------------
   2. Largeurs utilitaires
   -------------------------------------------------------------------------- */
.nsw-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); }
.nsw-container--text { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--space-m); }

/* Section pleine largeur avec respiration verticale standard */
.nsw-section { padding-block: var(--space-l); }
@media (min-width: 48em) { .nsw-section { padding-block: var(--space-xl); } }

/* --------------------------------------------------------------------------
   3. Signature de section : surtitre Raleway + titre à filet or
   -------------------------------------------------------------------------- */
.nsw-surtitre {
	display: inline-block;
	position: relative;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: var(--tracking-surtitre);
	text-transform: uppercase;
	color: var(--nsw-terre);
	padding-top: calc(var(--space-xs) + 4px);
	margin: 0 0 var(--space-xs);
}

/* Filet or « signature de section » : court trait de 56px posé AU-DESSUS du
   surtitre (charte — cf. design-system/tokens/base.css). Remplace l'ancien filet
   porté par le titre (border-top), qui s'étirait sur toute la largeur du titre
   (« grand trait »). Le hero (.nsw-hero__surtitre) en est exclu : pas de filet
   sur la photo plein cadre. */
.nsw-surtitre:not(.nsw-hero__surtitre)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 2px;
	background: var(--nsw-or);
}
/* En-têtes centrés (services, témoignages, CTA…) : filet centré sur le surtitre. */
.nsw-section-head--center .nsw-surtitre::before,
.nsw-surtitre.has-text-align-center:not(.nsw-hero__surtitre)::before {
	left: 50%;
	transform: translateX(-50%);
}

.nsw-section-title {
	/* Le filet or n'est plus porté par le titre mais par le surtitre (::before) :
	   il reste court (56px) au lieu de s'étirer sur toute la largeur du titre. */
	margin: 0;
	max-width: 100%;
	font-size: var(--step-3);
	color: var(--nsw-nuit);
}

/* En-tête centré */
.nsw-section-head--center { text-align: center; }
.nsw-section-head--center .nsw-section-title { margin-inline: auto; }

/* En-tête « titre à gauche / bouton à droite » (grille destinations) */
.nsw-section-head--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-m);
	flex-wrap: wrap;
	margin-bottom: var(--space-l);
}

/* Kadence impose `.single-content h2 { margin: 1.5em }` (spécificité 0,1,1) qui
   écrase le margin:0 du titre → écart démesuré entre le surtitre et le titre de
   section (cf. « Mes services »). On reprend la main avec `.nsw-reveal` (0,2,0)
   pour coller le titre au surtitre dans TOUTES les sections, comme la maquette. */
.nsw-reveal .nsw-section-title { margin-top: var(--space-2xs); }

/* Variantes sur fond sombre */
.nsw-surtitre--dark { color: var(--nsw-or); }
.nsw-section-title--dark { color: var(--nsw-papier); }

/* --------------------------------------------------------------------------
   4. Citation / accroche éditoriale
   -------------------------------------------------------------------------- */
.nsw-quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--step-1);
	color: var(--nsw-nuit);
}
.nsw-quote::before {
	content: "\2726"; /* ✦ rappel des étoiles du logo */
	color: var(--nsw-or);
	margin-right: 0.4em;
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-secondary {
	/* inline-flex centré + min-height : garantit une zone tactile >= 44px (§9)
	   sans décaler le texte. No-op en desktop (déjà >44px), corrige le mobile. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font: 600 var(--step--1) / 1 var(--font-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.95em 2.2em;
	border-radius: var(--radius-s);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-editorial),
	            color var(--dur-fast) var(--ease-editorial),
	            border-color var(--dur-fast) var(--ease-editorial);
}
.btn-primary {
	background: var(--nsw-nuit);
	color: var(--nsw-papier);
	border: 1px solid var(--nsw-nuit);
}
.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--nsw-or);
	border-color: var(--nsw-or);
	color: var(--nsw-nuit-900);
}
.btn-secondary {
	background: transparent;
	color: var(--nsw-nuit);
	border: 1px solid var(--nsw-or);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
	background: var(--nsw-or);
	color: var(--nsw-nuit-900);
}
/* CTA posé sur fond sombre (hero, cta-final) */
.btn-primary--dark {
	background: var(--nsw-or);
	border-color: var(--nsw-or);
	color: var(--nsw-nuit-900);
}
.btn-primary--dark:hover,
.btn-primary--dark:focus-visible {
	background: var(--nsw-papier);
	border-color: var(--nsw-papier);
	color: var(--nsw-nuit-900);
}

/* --------------------------------------------------------------------------
   5 bis. Intégration Kadence — neutraliser les défauts du thème parent
   -------------------------------------------------------------------------- */

/* Boutons : Kadence émet `button, .wp-block-button__link, .wp-element-button
   { color: var(--global-palette-btn); background: var(--global-palette-btn-bg) }`
   (spécificité 0,1,0, palette bleue → texte blanc invisible sur fond clair).
   Nos boutons Gutenberg portent ces mêmes classes ; on rehausse la spécificité
   à 0,2,0 pour que la charte NSW gagne QUEL QUE SOIT l'ordre de chargement des
   feuilles (LiteSpeed peut recombiner/réordonner et casser un simple départage
   par ordre de cascade). */
.wp-block-button__link.btn-primary {
	background: var(--nsw-nuit);
	color: var(--nsw-papier);
	border: 1px solid var(--nsw-nuit);
}
.wp-block-button__link.btn-primary:hover,
.wp-block-button__link.btn-primary:focus-visible {
	background: var(--nsw-or);
	border-color: var(--nsw-or);
	color: var(--nsw-nuit-900);
}
.wp-block-button__link.btn-secondary {
	background: transparent;
	color: var(--nsw-nuit);
	border: 1px solid var(--nsw-or);
}
.wp-block-button__link.btn-secondary:hover,
.wp-block-button__link.btn-secondary:focus-visible {
	background: var(--nsw-or);
	border-color: var(--nsw-or);
	color: var(--nsw-nuit-900);
}
.wp-block-button__link.btn-primary--dark {
	background: var(--nsw-or);
	border: 1px solid var(--nsw-or);
	color: var(--nsw-nuit-900);
}
.wp-block-button__link.btn-primary--dark:hover,
.wp-block-button__link.btn-primary--dark:focus-visible {
	background: var(--nsw-papier);
	border-color: var(--nsw-papier);
	color: var(--nsw-nuit-900);
}

/* Contenu « boxed » : Kadence pose un fond blanc + ombre sur l'article de
   contenu (`.content-bg{background:#fff}`). Il déborde en rectangle blanc au-
   dessus / autour des sections pleine largeur (fond papier attendu). On repasse
   en transparent — le fond papier du body reprend la main — sans toucher au
   réglage Customizer (fix versionné, déterministe). `body .content-bg` (0,1,1)
   bat le fond `.content-bg` (0,1,0) ; `body .content-bg.entry` (0,2,1) bat l'ombre
   `.entry.single-entry` (0,2,0) — le tout sans !important. */
body .content-bg,
body .content-bg.entry {
	background: transparent;
	box-shadow: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--nsw-or);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Badges (sur photo, engagement, nature)
   -------------------------------------------------------------------------- */
.nsw-badge {
	display: inline-block;
	font: 600 var(--step--1) var(--font-ui);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.35em 0.8em;
	border-radius: var(--radius-s);
	line-height: 1.2;
}
.nsw-badge--photo { color: var(--nsw-papier); background: rgb(27 63 89 / 0.85); }
.nsw-badge--commitment { color: var(--nsw-terre); background: var(--nsw-creme); }
.nsw-badge--sage { color: var(--nsw-sauge); background: transparent; border: 1px solid rgb(100 138 88 / 0.5); }

/* --------------------------------------------------------------------------
   7. Hero d'accueil — photo plein cadre, texte centré (jamais de vidéo)
   -------------------------------------------------------------------------- */
.nsw-hero {
	position: relative;
	min-height: 88svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	color: var(--nsw-papier);
}
.nsw-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nsw-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(18 44 63 / 0.25), rgb(18 44 63 / 0.65));
}
.nsw-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-m);
	text-align: center;
}
.nsw-hero__surtitre { color: var(--nsw-or); padding-top: 0; margin: 0 0 var(--space-s); }
.nsw-hero__title {
	font-size: var(--step-3);
	line-height: 1.08;
	color: var(--nsw-papier);
	margin: 0 0 var(--space-s);
	text-wrap: balance; /* répartit harmonieusement quand le titre passe sur 2 lignes */
}
.nsw-hero__subtitle {
	font-family: var(--font-body);
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--nsw-papier);
	opacity: 0.92;
	max-width: 34ch;
	margin: 0 auto var(--space-l);
}
/* Une seule ligne uniquement quand le conteneur est assez large pour l'accueillir
   sans troncature (≥ desktop). En dessous, le titre wrappe (text-wrap: balance).
   L'ancien seuil 40em tronquait le H1 entre ~640 et ~1000 px (hero overflow:hidden). */
@media (min-width: 75em) { .nsw-hero__title { white-space: nowrap; } }

/* --------------------------------------------------------------------------
   8. Process « Comment ça marche » — 4 étapes, filet pointillé or (desktop)
   -------------------------------------------------------------------------- */
.nsw-process { position: relative; }

/* Signature de la section process alignée à GAUCHE, fidèle à la maquette :
   filet or 56px → surtitre → titre, tous calés sur le bord gauche de la timeline.
   Gutenberg centre par défaut les enfants directs d'un groupe « constrained »
   (`.wp-container-…-is-layout > :where(…){margin-inline:auto}`, spécificité 0,1,0,
   imprimé APRÈS components.css → il gagnait, d'où le titre centré). On rétablit
   l'alignement gauche avec une spécificité supérieure via :has(), scopé à la SEULE
   section process (présence d'un `.nsw-process` enfant) pour ne pas toucher les
   autres sections (services centré, destinations en split). */
.nsw-reveal:has(> .nsw-process) > .nsw-surtitre,
.nsw-reveal:has(> .nsw-process) > .nsw-section-title {
	display: block;
	width: auto;
	max-width: 72rem; /* = contentSize du pattern : cale l'en-tête sur la grille */
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
.nsw-reveal:has(> .nsw-process) > .nsw-section-title {
	/* Le filet or est porté par le surtitre (voir ::before), pas par le titre. */
	border-top: none;
	padding-top: 0;
	margin-top: var(--space-2xs);
}
.nsw-reveal:has(> .nsw-process) > .nsw-surtitre {
	position: relative;
	padding-top: calc(var(--space-xs) + 4px);
	margin: 0 auto var(--space-xs);
}
.nsw-reveal:has(> .nsw-process) > .nsw-surtitre::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 56px;
	height: 2px;
	background: var(--nsw-or);
}

.nsw-process__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	position: relative;
}
.nsw-step { text-align: left; }
.nsw-step__num {
	/* flex (bloc) et non inline-flex : le numéro occupe sa propre ligne, le badge
	   se place dessous (inline-flex rendrait le <p> inline → badge collé à côté). */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	border: 2px solid var(--nsw-or);
	border-radius: 50%;
	/* Fond opaque = masque le filet pointillé qui passe derrière le rond
	   (la section process est en creme). */
	background: var(--nsw-creme);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--step-1);
	color: var(--nsw-or);
	line-height: 1;
	margin: 0 0 var(--space-s);
	position: relative;
	z-index: 1;
}
/* Badge d'engagement — maquette : CONTOUR LÉGER uniforme (fond papier, fine
   bordure or, texte terre). Pas d'alternance pleine navy/or (ancien rendu). */
.nsw-step__badge {
	/* inline-flex + min-height de 2 lignes : tous les badges ont la même hauteur,
	   que le libellé tienne sur 1 ou 2 lignes (ex. « Assistance 24h/24 » seul).
	   Le texte est centré verticalement ; la largeur reste calée sur le contenu. */
	display: inline-flex;
	align-items: center;
	/* Hauteur de 2 lignes en border-box (Kadence force box-sizing:border-box) :
	   2×line-height(1.25em) + 2×padding(0.45em) + 2×bordure(1px). */
	min-height: calc(3.4em + 2px);
	font: 600 var(--step--1) var(--font-ui);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.45em 0.9em;
	background: var(--nsw-papier);
	border: 1px solid rgb(202 141 46 / 0.55);
	color: var(--nsw-terre);
	border-radius: var(--radius-s);
	margin: 0 0 var(--space-s);
	line-height: 1.25;
}
.nsw-step__title {
	font-size: var(--step-1);
	color: var(--nsw-nuit);
	margin: 0 0 var(--space-2xs);
}
.nsw-step__desc {
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--nsw-ardoise);
	margin: 0;
}
@media (min-width: 48em) {
	.nsw-process__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-l); }
}
@media (min-width: 64em) {
	.nsw-process__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
	/* Filet pointillé reliant le centre des numéros, derrière le contenu */
	.nsw-process__rule {
		position: absolute;
		top: 1.7rem;   /* centre vertical des ronds (3.4rem / 2) */
		left: 1.7rem;  /* centre horizontal du 1er rond */
		width: calc(75% + var(--space-m) * 0.75); /* jusqu'au centre du 4e rond */
		border-top: 2px dotted var(--nsw-or);
		opacity: 0.55;
		z-index: 0;
	}
}

/* --------------------------------------------------------------------------
   9. Cartes destination / récit + grille
   -------------------------------------------------------------------------- */
.nsw-dest-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	align-items: stretch;
}
@media (min-width: 48em) { .nsw-dest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .nsw-dest-grid { grid-template-columns: repeat(3, 1fr); } }

.nsw-card {
	background: var(--nsw-blanc);
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: inherit;
	/* height:100% = la carte remplit la hauteur de sa rangée de grille → toutes les
	   cartes d'une même rangée ont le même cadre, même si une a plus de texte
	   (ex. Macédoine). flex-column pour que le corps absorbe l'espace restant. */
	display: flex;
	flex-direction: column;
	height: 100%;
}
.nsw-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.nsw-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-editorial); }
.nsw-card:hover .nsw-card__media img { transform: scale(1.04); }
.nsw-card__badge { position: absolute; top: var(--space-s); left: var(--space-s); }
.nsw-card__body { flex: 1 0 auto; padding: var(--space-s); display: flex; flex-direction: column; gap: var(--space-2xs); }
.nsw-card__title { font-size: var(--step-2); color: var(--nsw-nuit); margin: 0; line-height: 1.15; }
.nsw-card__excerpt {
	font-family: var(--font-body);
	color: var(--nsw-ardoise);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.nsw-card__link {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--step--1);
	color: var(--nsw-terre);
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   10. Récit à la une (pleine largeur, photo + texte)
   -------------------------------------------------------------------------- */
.nsw-featured {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--nsw-blanc);
	border-radius: var(--radius-m);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	text-decoration: none;
	color: inherit;
}
.nsw-featured__media { position: relative; min-height: 260px; }
.nsw-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.nsw-featured__badge { position: absolute; top: var(--space-s); left: var(--space-s); }
.nsw-featured__body {
	padding: var(--space-l);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-s);
}
.nsw-featured__surtitre { margin: 0; }
.nsw-featured__title { font-size: var(--step-3); color: var(--nsw-nuit); margin: 0; line-height: 1.12; }
.nsw-featured__excerpt { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--nsw-ardoise); margin: 0; max-width: 48ch; }
.nsw-featured__link { font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1); color: var(--nsw-terre); letter-spacing: 0.04em; }
@media (min-width: 48em) {
	.nsw-featured { grid-template-columns: 1fr 1.15fr; }
	.nsw-featured__media { min-height: 300px; }
}

/* --------------------------------------------------------------------------
   11. Mes services — 4 cartes crème, illustrations d'Elisa
   -------------------------------------------------------------------------- */
.nsw-services {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	align-items: stretch;
}
@media (min-width: 48em) { .nsw-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .nsw-services { grid-template-columns: repeat(4, 1fr); } }
.nsw-service {
	background: var(--nsw-creme);
	border-radius: var(--radius-m);
	padding: var(--space-m) var(--space-s) var(--space-l);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* hauteur égale entre cartes d'une même rangée (cf. « Assistance permanente »
	   plus haute car le texte est plus long). */
	height: 100%;
}
.nsw-service__icon {
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-s);
}
.nsw-service__icon img { max-height: 130px; max-width: 100%; width: auto; display: block; }
.nsw-service__title { font-size: var(--step-1); color: var(--nsw-nuit); margin: 0 0 var(--space-2xs); line-height: 1.2; }
.nsw-service__text { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5; color: var(--nsw-ardoise); margin: 0; }

/* --------------------------------------------------------------------------
   12. Témoignages — 3 cartes crème
   -------------------------------------------------------------------------- */
.nsw-temoignages {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	align-items: stretch;
}
@media (min-width: 48em) { .nsw-temoignages { grid-template-columns: repeat(3, 1fr); } }
.nsw-temoignage {
	background: var(--nsw-creme);
	border-radius: var(--radius-m);
	padding: var(--space-l);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	/* hauteur égale entre cartes d'une même rangée (le dernier témoignage est
	   plus long). */
	height: 100%;
}
.nsw-temoignage__quote { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.4; color: var(--nsw-nuit); margin: 0; }
.nsw-temoignage__quote::before { content: "\2726"; color: var(--nsw-or); margin-right: 0.4em; }
.nsw-temoignage__auteur { font-family: var(--font-ui); font-size: var(--step--1); color: var(--nsw-ardoise); font-style: normal; }

/* --------------------------------------------------------------------------
   13. CTA final — fond bleu nuit profond, centré
   -------------------------------------------------------------------------- */
.nsw-cta { background: var(--nsw-nuit-900); }
.nsw-cta__inner { max-width: var(--container-text); margin-inline: auto; padding-inline: var(--space-m); text-align: center; }
.nsw-cta__sub { font-family: var(--font-body); font-size: var(--step-1); line-height: 1.5; color: var(--nsw-ciel); max-width: 40ch; margin: 0 auto var(--space-l); }

/* --------------------------------------------------------------------------
   14. Profils voyageur + e-books (6 cartes blanches, mini-couverture)
   -------------------------------------------------------------------------- */
.nsw-profils { display: grid; grid-template-columns: 1fr; gap: var(--space-m); }
@media (min-width: 48em) { .nsw-profils { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .nsw-profils { grid-template-columns: repeat(3, 1fr); } }
.nsw-profil {
	background: var(--nsw-blanc);
	border-radius: var(--radius-m);
	padding: var(--space-m);
	box-shadow: var(--shadow-card);
	display: flex;
	gap: var(--space-m);
	align-items: flex-start;
}
.nsw-ebook-cover {
	flex: none;
	width: 78px;
	height: 106px;
	border-radius: var(--radius-s);
	overflow: hidden;
	position: relative;
	box-shadow: var(--shadow-card);
	background: var(--nsw-nuit-900);
}
.nsw-ebook-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsw-ebook-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(18 44 63 / 0.08) 30%, rgb(18 44 63 / 0.85));
	outline: 1px solid rgb(202 141 46 / 0.55);
	outline-offset: -4px;
	border-radius: var(--radius-s);
}
.nsw-ebook-cover__label {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 8px;
	z-index: 1;
	text-align: center;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 600;
	font-size: 11px;
	color: var(--nsw-papier);
	line-height: 1.1;
}
.nsw-ebook-cover__label::before { content: "\2726"; display: block; color: var(--nsw-or); font-size: 9px; margin-bottom: 3px; }
.nsw-profil__body { flex: 1; min-width: 0; }
.nsw-profil__name { font-size: var(--step-1); line-height: 1.15; color: var(--nsw-nuit); margin: 0 0 0.35em; }
.nsw-profil__desc { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5; color: var(--nsw-ardoise); margin: 0 0 0.6em; }
.nsw-ebook-link, .nsw-guide-link {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--step--1);
	color: var(--nsw-terre);
	text-decoration: none;
	letter-spacing: 0.04em;
}

/* Ligne quiz (« Vous hésitez entre deux profils ? ») */
.nsw-quiz-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-m);
	margin-top: var(--space-l);
	flex-wrap: wrap;
	text-align: center;
}
.nsw-quiz-row p { font-family: var(--font-body); font-style: italic; font-size: var(--step-0); color: var(--nsw-ardoise); margin: 0; }

/* Intro de section (paragraphe sous le titre) */
.nsw-section-intro { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; color: var(--nsw-ardoise); max-width: 62ch; margin: 0 0 var(--space-l); }

/* --------------------------------------------------------------------------
   15. Guides offerts (4 couvertures 3:4)
   -------------------------------------------------------------------------- */
.nsw-guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-m); }
@media (min-width: 64em) { .nsw-guides { grid-template-columns: repeat(4, 1fr); } }
.nsw-guide {
	background: var(--nsw-blanc);
	border-radius: var(--radius-m);
	padding: var(--space-s);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}
.nsw-guide-cover {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--nsw-nuit-900);
}
.nsw-guide-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsw-guide-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(18 44 63 / 0.05) 40%, rgb(18 44 63 / 0.85));
	outline: 1px solid rgb(202 141 46 / 0.55);
	outline-offset: -5px;
	border-radius: var(--radius-s);
}
.nsw-guide-cover__label {
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 12px;
	z-index: 1;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.nsw-guide-cover__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); color: var(--nsw-papier); line-height: 1.1; }
.nsw-guide-cover__name::before { content: "\2726"; display: block; color: var(--nsw-or); font-size: 11px; }
.nsw-guide-cover__kicker { font-family: var(--font-ui); font-weight: 600; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: rgb(243 237 226 / 0.65); }
.nsw-guide-link { text-align: center; }
.nsw-guides__erreurs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-s);
	margin-top: var(--space-l);
	flex-wrap: wrap;
	text-align: center;
}
.nsw-guides__erreurs p { font-family: var(--font-body); font-style: italic; font-size: var(--step-0); color: var(--nsw-nuit); margin: 0; }
.nsw-guides__erreurs .nsw-star { color: var(--nsw-or); }

/* --------------------------------------------------------------------------
   16. Lead magnets — formulaire e-mail compact (profils + guides)
   Branché sur MailerLite à la mise en ligne (voir docs/integrations.md).
   -------------------------------------------------------------------------- */
.nsw-leadform { display: flex; flex-direction: column; gap: var(--space-2xs); }
.nsw-leadform input[type="email"] {
	font-family: var(--font-ui);
	font-size: var(--step--1);
	color: var(--nsw-nuit);
	background: var(--nsw-papier);
	border: 1px solid var(--nsw-ligne);
	border-radius: var(--radius-s);
	padding: 0.65em 0.9em;
	width: 100%;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   17. Page « Qui suis-je » — portrait + récit (split)
   -------------------------------------------------------------------------- */
.nsw-apropos {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	align-items: center;
}
.nsw-apropos__media { border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card); }
.nsw-apropos__media img { width: 100%; display: block; aspect-ratio: 4 / 5; object-fit: cover; }
.nsw-apropos__lead { font-family: var(--font-body); font-size: var(--step-1); line-height: 1.6; color: var(--nsw-nuit); margin: 0 0 var(--space-s); }
.nsw-apropos__text { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--nsw-ardoise); margin: 0 0 var(--space-l); }
@media (min-width: 64em) {
	.nsw-apropos { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); }
}

/* --------------------------------------------------------------------------
   18. Page Récit — hero éditorial + corps en colonne 44rem
   -------------------------------------------------------------------------- */
.nsw-recit-hero {
	position: relative;
	height: 60vh;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.nsw-recit-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsw-recit-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 44 63 / 0.15), rgb(18 44 63 / 0.7)); }
.nsw-recit-hero__inner { position: relative; width: 100%; max-width: var(--container-text); margin-inline: auto; padding: 0 var(--space-m) var(--space-xl); }
.nsw-recit-hero__badge { margin-bottom: var(--space-s); }
.nsw-recit-hero__title { font-size: var(--step-4); line-height: 1.08; color: var(--nsw-papier); margin: 0; }

.nsw-recit-article { background: var(--nsw-papier); padding-block: var(--space-xl) var(--space-2xl); }
.nsw-recit__meta { font-family: var(--font-ui); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--nsw-ardoise); margin: 0 0 var(--space-m); }
.nsw-recit__lead { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--step-2); line-height: 1.35; color: var(--nsw-nuit); margin: 0 0 var(--space-l); }
.nsw-recit-article h2 { font-size: var(--step-2); color: var(--nsw-nuit); margin: var(--space-l) 0 var(--space-s); }
.nsw-recit-article p { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--nsw-nuit); margin: 0 0 var(--space-s); }
.nsw-recit__figure { margin: var(--space-l) 0; }
.nsw-recit__figure img { width: 100%; border-radius: var(--radius-m); display: block; }
.nsw-recit__figure figcaption { font-family: var(--font-ui); font-style: italic; font-size: var(--step--1); color: var(--nsw-ardoise); margin-top: var(--space-xs); }
.nsw-recit__outro {
	margin-top: var(--space-l);
	padding-top: var(--space-l);
	border-top: 1px solid var(--nsw-ligne);
	display: flex;
	gap: var(--space-s);
	flex-wrap: wrap;
	align-items: center;
}
.nsw-recit__outro-q { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--nsw-nuit); }

/* --------------------------------------------------------------------------
   19. Page Contact — photo en fond, overlay nuit, infos + formulaire
   -------------------------------------------------------------------------- */
.nsw-contact { position: relative; background: var(--nsw-creme); overflow: hidden; }
.nsw-contact__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nsw-contact__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(18 44 63 / 0.78), rgb(18 44 63 / 0.9)); }
.nsw-contact__grid {
	position: relative;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-m);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
	align-items: start;
}
.nsw-contact__intro { font-family: var(--font-body); font-size: var(--step-1); line-height: 1.55; color: rgb(250 247 241 / 0.88); margin: 0 0 var(--space-l); }
.nsw-contact__points { display: flex; flex-direction: column; gap: var(--space-s); }
.nsw-contact__point { display: flex; gap: var(--space-s); align-items: center; }
.nsw-contact__point span { font-family: var(--font-body); color: rgb(250 247 241 / 0.88); }
.nsw-contact__form { background: var(--nsw-blanc); border-radius: var(--radius-m); box-shadow: var(--shadow-card); padding: var(--space-l); }
@media (min-width: 64em) {
	.nsw-contact__grid { grid-template-columns: 1fr 1.1fr; gap: var(--space-2xl); }
}

/* Champs de formulaire (contact) */
.nsw-field-group { display: flex; flex-direction: column; gap: var(--space-s); }
.nsw-label { font-family: var(--font-ui); font-weight: 600; font-size: var(--step--1); color: var(--nsw-nuit); margin-bottom: 0.4em; display: block; }
.nsw-field {
	font-family: var(--font-ui);
	font-size: var(--step-0);
	color: var(--nsw-nuit);
	background: var(--nsw-blanc);
	border: 1px solid var(--nsw-ligne);
	border-radius: var(--radius-s);
	padding: 0.8em 1em;
	min-height: 44px; /* zone tactile >= 44px a11y (§9) — sensible à 360px */
	width: 100%;
	box-sizing: border-box;
}
textarea.nsw-field { min-height: 110px; resize: vertical; font-family: var(--font-body); }

/* Consentement RGPD (case + libellé) */
.nsw-consent { display: flex; gap: var(--space-xs); align-items: flex-start; }
.nsw-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.2em; accent-color: var(--nsw-terre); }
.nsw-consent label { font-family: var(--font-ui); font-size: var(--step--1); line-height: 1.5; color: var(--nsw-ardoise); }
.nsw-consent a { color: var(--nsw-terre); text-decoration: underline; }

/* Honeypot anti-spam : hors écran, invisible à l'humain, présent pour les bots */
.nsw-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Retour de soumission (Post/Redirect/Get) */
.nsw-contact__status {
	font-family: var(--font-ui);
	font-size: var(--step-0);
	line-height: 1.5;
	border-radius: var(--radius-s);
	padding: 0.9em 1.1em;
	margin: 0 0 var(--space-s);
}
.nsw-contact__status--ok { color: var(--nsw-sauge); background: rgb(100 138 88 / 0.12); border: 1px solid rgb(100 138 88 / 0.35); }
.nsw-contact__status--error { color: var(--nsw-terre); background: rgb(182 115 45 / 0.10); border: 1px solid rgb(182 115 45 / 0.35); }

/* --------------------------------------------------------------------------
   20. Apparition au scroll (assets/js/reveal.js) — respecte reduced-motion
   -------------------------------------------------------------------------- */
/* État initial masqué UNIQUEMENT si le JS est actif (.nsw-js posé en <head>).
   Sans JS, aucune règle ne s'applique → contenu visible (pas de page blanche). */
.nsw-js .nsw-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s var(--ease-editorial), transform 0.6s var(--ease-editorial);
	will-change: opacity, transform;
}
.nsw-js .nsw-reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. Header / Footer Kadence — alignement charte
   (structure construite dans le Header/Footer Builder Kadence ; voir
   docs/kadence-header-footer.md. Ici : finitions visuelles fidèles à la maquette.)
   -------------------------------------------------------------------------- */
.site-header-row-container-inner { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#main-header { background: rgb(250 247 241 / 0.92); }
/* Soulignement or du lien de navigation actif */
.header-navigation .menu-item.current-menu-item > a,
.header-navigation .menu-item.current_page_item > a { color: var(--nsw-terre); box-shadow: inset 0 -1.5px 0 0 var(--nsw-or); }
/* Fine bordure révélée au scroll (header sticky figé) */
#masthead.item-is-fixed #main-header,
#masthead .item-is-fixed { border-bottom: 1px solid var(--nsw-ligne); }

/* CTA « Appel découverte » — item de menu stylé bouton (maquette : navy → or au hover) */
.header-navigation .menu-item.nsw-cta-button > a,
.nsw-cta-button > a {
	background: var(--nsw-nuit);
	color: var(--nsw-papier);
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.7em 1.6em;
	border-radius: 4px;
	box-shadow: none;
	transition: background-color var(--dur-fast, 0.2s) var(--ease-editorial, ease), color var(--dur-fast, 0.2s) var(--ease-editorial, ease);
}
.header-navigation .menu-item.nsw-cta-button > a:hover,
.header-navigation .menu-item.nsw-cta-button > a:focus-visible,
.nsw-cta-button > a:hover,
.nsw-cta-button > a:focus-visible { background: var(--nsw-or); color: var(--nsw-nuit-900); }

/* Fusion CTA final + footer (maquette : un seul bloc nuit-900, sans bande papier
   entre les deux). Kadence insère `.content-area{margin-bottom:5rem}` +
   `.entry-content-wrap{padding:2rem}` (boxed) → 92px de papier entre la section CTA
   sombre et le footer sombre. On annule cet écart UNIQUEMENT sur l'accueil (corps
   `.home`, spécificité 0,2,0 > 0,1,0 inline) où la page se termine par le CTA sombre ;
   les autres gabarits gardent leur respiration Kadence. Dark-sur-dark = jointure
   invisible. */
.home .content-area { margin-bottom: 0; }
.home .entry-content-wrap { padding-bottom: 0; }

/* Footer — 3 colonnes sur fond nuit-900 (cf. maquette Footer.jsx) */
.site-footer .footer-widget-area,
.site-footer .footer-widget-area p,
.site-footer .footer-widget-area li { color: var(--nsw-papier); }
.nsw-footer-wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--nsw-blanc);
	font-size: var(--step-2);
	line-height: 1.1;
	margin: 0 0 var(--space-xs);
}
/* Paragraphe descriptif sous la signature (ciel). Spécificité (0,3,1) pour
   battre `.site-footer .footer-widget-area p` (0,2,1) qui force le papier. */
.site-footer .footer-widget-area p.nsw-footer-tagline {
	font-family: var(--font-body);
	color: var(--nsw-ciel);
	max-width: 34ch;
	line-height: 1.6;
	margin: 0;
}
/* Signature de marque sous le logo (maquette : Logo showTagline).
   Idiome surtitre du design-system (Raleway 600, capitales, tracking .18em, or).
   Spécificité (0,3,1) pour battre `.footer-widget-area p` qui force le papier. */
.site-footer .footer-widget-area p.nsw-footer-signature {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nsw-or);
	margin: var(--space-s) 0 var(--space-xs);
}
.nsw-footer-heading {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nsw-or);
	margin: 0 0 var(--space-s);
}
.nsw-footer-links { list-style: none; margin: 0; padding: 0; }
.nsw-footer-links li { margin-bottom: var(--space-xs); }
.nsw-footer-links a {
	font-family: var(--font-ui);
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	color: var(--nsw-ciel);
	text-decoration: none;
}
.nsw-footer-links a:hover,
.nsw-footer-links a:focus-visible { color: var(--nsw-blanc); text-decoration: underline; }
/* Crédit bas de page : lien AI SXM en or */
.site-footer .footer-html a { color: var(--nsw-or); text-decoration: none; }
.site-footer .footer-html a:hover { text-decoration: underline; }

/* Ratio des colonnes du footer top — fidélité maquette (Footer.jsx : 1.4fr / 1fr / 1fr).
   Kadence rend la rangée à 3 colonnes ÉGALES via la règle de base
   `.site-footer-row-columns-3 { grid-template-columns: minmax(0,1fr)×3 }` (footer.min.css).
   On surcharge UNIQUEMENT en desktop (>=1025px) : sous 1024px Kadence empile déjà les
   colonnes (tablet/mobile column-layout -> 1 colonne via @media max-width:1024px), on ne
   touche donc pas le responsive.
   Spécificité : `.site-top-footer-inner-wrap.site-footer-row-columns-3` = (0,2,0) bat la
   règle Kadence (0,1,0) sans !important. minmax(0,…) conserve la protection anti-débordement. */
@media (min-width: 1025px) {
	.site-top-footer-inner-wrap.site-footer-row-columns-3 {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Bande vide sous le header (home) — fidélité maquette : le hero démarre sous le header.
   Cause : sur la home, la 1re section est un hero pleine largeur (.nsw-hero, alignfull),
   mais Kadence applique l'espacement vertical de contenu standard au-dessus :
   `.content-area { margin-top: 5rem }` (3rem puis 2rem aux breakpoints inférieurs) + le
   padding du conteneur boxed (.entry-content-wrap, padding:2rem). D'où la fine bande.
   Correction ciblée HOME UNIQUEMENT (body.home) pour ne pas casser l'espacement des autres
   pages. Spécificité `body.home .content-area` = (0,2,0) > `.content-area` (0,1,0) : pas de
   !important nécessaire, l'emporte aux 3 breakpoints (5/3/2rem).
   On neutralise la marge haute du content-area + le padding haut du conteneur boxed pour que
   le hero soit flush sous le header ; marge basse et espacement latéral restent intacts. */
body.home .content-area { margin-top: 0; }
body.home .content-wrap .entry-content-wrap { padding-top: 0; }

/* --------------------------------------------------------------------------
   22. Réductions de mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nsw-js .nsw-reveal { opacity: 1; transform: none; transition: none; }
	.nsw-card__media img { transition: none; }
	.nsw-card:hover .nsw-card__media img { transform: none; }
	html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   23. Fidélité sous-pages (v0.6.6) — corrigés après revue Destinations,
       Qui-suis-je, Récits, Contact (toutes contrôlées en cache-bust).
   -------------------------------------------------------------------------- */

/* (b) Bouton header « Appel découverte » : Kadence colore les liens de nav en
   #4a5568 (gris) à une spécificité qui battait notre `color` (le fond nuit, lui,
   passait) → texte gris sur nuit, illisible. On scope par `#masthead` : un ID bat
   les classes Kadence sans recourir à !important. Restaure papier sur nuit, et
   nuit-900 au hover (fond or). */
#masthead .header-navigation .menu-item.nsw-cta-button > a {
	color: var(--nsw-papier);
}
#masthead .header-navigation .menu-item.nsw-cta-button > a:hover,
#masthead .header-navigation .menu-item.nsw-cta-button > a:focus-visible {
	color: var(--nsw-nuit-900);
}

/* (f) Puces engagement du hero Contact : `.nsw-contact__point span` (0,1,1) — qui
   colore le texte descriptif en papier — écrasait la couleur propre des badges
   (0,1,0), d'où un texte papier quasi invisible sur le fond crème du badge
   « commitment ». On remonte la spécificité du badge (0,2,0) pour restaurer les
   couleurs de la charte. */
.nsw-contact__point .nsw-badge--commitment { color: var(--nsw-terre); }
.nsw-contact__point .nsw-badge--sage { color: var(--nsw-sauge); }

/* (e) Crédit bas de footer (« © 2026 … Elisa Azevedo. ») : aligné sur la maquette
   = crème à 85 %, au lieu du papier plein hérité. Les liens internes (« AI SXM
   Agency », « Mentions légales ») restent or (règle .site-footer .footer-html a). */
.site-footer .site-info-inner .footer-html-inner p {
	color: rgb(243 237 226 / 0.85);
}

/* --------------------------------------------------------------------------
   21. Lead magnets — modale de capture email (assets/js/leadmagnet.js)
   -------------------------------------------------------------------------- */
.nsw-lead-modal[hidden] { display: none; }
.nsw-lead-modal {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: var(--space-m);
}
.nsw-lead-modal__overlay { position: absolute; inset: 0; background: rgb(18 44 63 / 0.6); }
.nsw-lead-modal__dialog {
	position: relative;
	width: 100%; max-width: 30rem;
	max-height: 90vh; overflow-y: auto;
	background: var(--nsw-blanc);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-card);
	padding: var(--space-l);
}
.nsw-lead-modal__close {
	position: absolute; top: 0.35rem; right: 0.5rem;
	width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer;
	font-size: 1.7rem; line-height: 1; color: var(--nsw-ardoise);
}
.nsw-lead-modal__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--nsw-nuit); margin: 0.15em 0 0.25em; }
.nsw-lead-modal__intro { font-family: var(--font-body); color: var(--nsw-ardoise); margin: 0 0 var(--space-m); }
.nsw-lead-form { display: flex; flex-direction: column; gap: var(--space-s); }
.nsw-lead-form[hidden] { display: none; }
.nsw-lead-form__status { font-family: var(--font-ui); font-size: var(--step--1); margin: 0.2em 0 0; }
.nsw-lead-form__status.is-pending { color: var(--nsw-ardoise); }
.nsw-lead-form__status.is-error { color: var(--nsw-terre); }
.nsw-lead-form__status.is-ok { color: var(--nsw-sauge); font-size: var(--step-0); }