/* ==========================================================================
   Jauno Blocks — styles front
   Toutes les couleurs passent par des variables : surchargez-les dans le
   thème enfant ou Oxygen pour adapter le kit à chaque client.
   ========================================================================== */

:root {
	--jn-accent: #2f5d50;
	--jn-accent-clair: #e7efeb;
	--jn-encre: #401e02;
	--jn-encre-douce: #401e02;
	--jn-papier: #ffffff;
	--jn-surface: #f4f5f3;
	--jn-trait: #dfe2de;
	--jn-rayon: 10px;
	--jn-gap: 2rem;
	--jn-decalage-ancre: 90px; /* hauteur d'un header collant */
}

/* Couleur par défaut des titres de blocs : sans cette règle, ces classes
   n'ont aucun color déclaré et c'est la règle globale du thème
   (h1,h2,h3,h4,h5,h6 { color: var(--wp--preset--color--contrast) }) qui
   s'applique — d'où le noir au lieu du marron. */
.jn-titre,
.jn-mt__titre,
.jn-etapes__titre,
.jn-etapes__titre-principal,
.jn-faq__titre,
.jn-comparatif__titre {
	color: var(--jn-encre-douce);
}

/* Décalage pour que l'ancre ne passe pas sous un header fixe */
[id^=""],
.jn-section,
.jn-mt,
.jn-encadre,
.jn-points,
.jn-etapes,
.jn-faq,
.jn-comparatif,
.jn-cta {
	scroll-margin-top: var(--jn-decalage-ancre);
}

/* --------------------------------------------------------------- Sommaire */

.jn-sommaire {
	margin-block: 2.5rem;
}

.jn-sommaire__titre {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #401e02;
	margin: 0 0 0.9rem;
}

.jn-sommaire__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: jn-n1 jn-n2 jn-n3;
}

.jn-sommaire__item {
	margin: 0;
	padding: 0;
}

.jn-sommaire__lien {
	display: block;
	padding: 0.4rem 0;
	color: #04473c;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease;
}

.jn-sommaire__lien:hover,
.jn-sommaire__lien:focus-visible {
	color: #401e02;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Numérotation hiérarchique :
   niveau 1 → 1. 2. 3.   (titres principaux)
   niveau 2 → a. b. c.   (sous-titres, redémarrent sous chaque titre)
   niveau 3 → a.1 a.2    (sous-sous-titres : lettre du parent + numéro) */
.jn-sommaire.is-numerote .jn-niveau-1 {
	counter-increment: jn-n1;
	counter-reset: jn-n2 jn-n3;
}

.jn-sommaire.is-numerote .jn-niveau-2 {
	counter-increment: jn-n2;
	counter-reset: jn-n3;
}

.jn-sommaire.is-numerote .jn-niveau-3 {
	counter-increment: jn-n3;
}

.jn-sommaire.is-numerote .jn-sommaire__lien::before {
	display: inline-block;
	min-width: 1.8em;
	color: #04473c;
	font-variant-numeric: tabular-nums;
}

.jn-sommaire.is-numerote .jn-niveau-1 .jn-sommaire__lien::before {
	content: counter( jn-n1 ) ". ";
}

.jn-sommaire.is-numerote .jn-niveau-2 .jn-sommaire__lien::before {
	content: counter( jn-n2, lower-alpha ) ". ";
}

.jn-sommaire.is-numerote .jn-niveau-3 .jn-sommaire__lien::before {
	content: counter( jn-n2, lower-alpha ) "." counter( jn-n3 ) " ";
}

.jn-sommaire .jn-niveau-2 .jn-sommaire__lien {
	padding-left: 1.6rem;
	font-size: 0.95em;
	color: #04473c;
}

.jn-sommaire .jn-niveau-3 .jn-sommaire__lien {
	padding-left: 3rem;
	font-size: 0.92em;
	color: #04473c;
}

/* Section en cours de lecture */
.jn-sommaire.is-suivi .jn-sommaire__lien[aria-current="true"] {
	color: #401e02;
	font-weight: 600;
}

/* Variantes d'apparence */
.jn-sommaire--carte {
	background: var(--jn-surface);
	border: 1px solid var(--jn-trait);
	border-radius: var(--jn-rayon);
	padding: 1.4rem 1.6rem;
}

.jn-sommaire--filet {
	border-left: 2px solid var(--jn-accent);
	padding-left: 1.4rem;
}

.jn-sommaire--colonnes .jn-sommaire__liste {
	columns: 2;
	column-gap: 2.5rem;
}

.jn-sommaire--colonnes .jn-sommaire__item {
	break-inside: avoid;
}

.jn-sommaire__pliage > summary {
	cursor: pointer;
	list-style: none;
}

.jn-sommaire__pliage > summary::-webkit-details-marker {
	display: none;
}

.jn-sommaire__pliage > summary::after {
	content: "▾";
	margin-left: 0.5rem;
	display: inline-block;
	transition: transform 0.2s ease;
}

.jn-sommaire__pliage[open] > summary::after {
	transform: rotate( 180deg );
}

/* --------------------------------------------------------------- Section  */

.jn-section--esp-compact { margin-block: 1.5rem; }
.jn-section--esp-normal  { margin-block: 3rem; }
.jn-section--esp-aere    { margin-block: 4.5rem; }

.jn-section--fond-clair,
.jn-section--fond-accent {
	padding: 2rem;
	border-radius: var(--jn-rayon);
}

.jn-section--fond-clair  { background: var(--jn-surface); }
.jn-section--fond-accent { background: var(--jn-accent-clair); }

/* --------------------------------------------------------- Média & texte  */

.jn-mt {
	margin-block: 3rem;
}

.jn-mt__grille {
	display: flex;
	gap: var(--jn-gap);
	align-items: flex-start;
}

.jn-mt--align-centre .jn-mt__grille {
	align-items: center;
}

.jn-mt--image-droite .jn-mt__grille {
	flex-direction: row-reverse;
}

.jn-mt--image-haut .jn-mt__grille,
.jn-mt--image-bas .jn-mt__grille {
	flex-direction: column;
}

.jn-mt--image-bas .jn-mt__grille {
	flex-direction: column-reverse;
}

.jn-mt__media {
	flex: 0 0 var(--jn-mt-largeur, 40%);
	margin: 0;
	min-width: 0;
}

.jn-mt--image-haut .jn-mt__media,
.jn-mt--image-bas .jn-mt__media {
	flex-basis: auto;
	width: 100%;
}

.jn-mt__image {
	display: block;
	width: 100%;
	height: auto;
}

.jn-mt.is-arrondi .jn-mt__image {
	border-radius: var(--jn-rayon);
}

.jn-mt__legende {
	margin-top: 0.55rem;
	font-size: 0.85rem;
	color: var(--jn-encre-douce);
}

.jn-mt__contenu {
	flex: 1 1 auto;
	min-width: 0;
}

.jn-mt__titre {
	margin-top: 0;
}

.jn-mt__lien a {
	color: var(--jn-accent);
	font-weight: 600;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------- Encadré  */

.jn-encadre {
	margin-block: 2rem;
	padding: 1.35rem 1.5rem;
	background: var(--jn-encadre-fond, var(--jn-surface));
	color: var(--jn-encadre-texte, var(--jn-encre));
	border-radius: var(--jn-rayon);
}

.jn-encadre__titre {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 700;
	color: inherit;
}

.jn-encadre__texte > *:last-child {
	margin-bottom: 0;
}

/* Les liens à l'intérieur restent lisibles quel que soit le fond */
.jn-encadre a { color: inherit; text-underline-offset: 3px; }

.jn-encadre--marron  { --jn-encadre-fond: #401e02; --jn-encadre-texte: #ffffff; }
.jn-encadre--caramel { --jn-encadre-fond: #b57f41; --jn-encadre-texte: #401e02; }
.jn-encadre--vert    { --jn-encadre-fond: #04473c; --jn-encadre-texte: #ffffff; }
.jn-encadre--jaune   { --jn-encadre-fond: #ffed8f; --jn-encadre-texte: #401e02; }

/* ----------------------------------------------------------- Points clés  */

.jn-points {
	margin-block: 2.5rem;
	padding: 1.5rem 1.7rem;
	background: var(--jn-points-fond, var(--jn-accent-clair));
	color: var(--jn-points-texte, var(--jn-encre));
	border-radius: var(--jn-rayon);
}

/* Couleur du fond (mêmes couleurs que l'encadré) */
.jn-points--fond-marron  { --jn-points-fond: #401e02; }
.jn-points--fond-caramel { --jn-points-fond: #b57f41; }
.jn-points--fond-vert    { --jn-points-fond: #04473c; }
.jn-points--fond-jaune   { --jn-points-fond: #ffed8f; }

/* Couleur du texte (blanc + palette encadré) */
.jn-points--texte-blanc   { --jn-points-texte: #ffffff; }
.jn-points--texte-marron  { --jn-points-texte: #401e02; }
.jn-points--texte-caramel { --jn-points-texte: #b57f41; }
.jn-points--texte-vert    { --jn-points-texte: #04473c; }
.jn-points--texte-jaune   { --jn-points-texte: #ffed8f; }

.jn-points__titre {
	margin: 0 0 0.8rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.85;
}

.jn-points__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.jn-points__liste li {
	position: relative;
	padding-left: 1.6rem;
}

.jn-points__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
}

/* Variante sans puces */
.jn-points--sans-puces .jn-points__liste li { padding-left: 0; }
.jn-points--sans-puces .jn-points__liste li::before { display: none; }

/* ---------------------------------------------------------------- Étapes  */

.jn-etapes { margin-block: 3rem; }

.jn-etapes__liste {
	list-style: none;
	margin: 0;
	margin-left: 15px; /* décalage appliqué aux étapes seulement, pas au titre */
	padding: 0;
	display: grid;
	gap: 1.6rem;
	counter-reset: jn-etape;
}

.jn-etapes__item {
	display: block;
}

/* Ligne d'en-tête : numéro + titre alignés au centre verticalement */
.jn-etapes__tete {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.jn-etapes__num {
	/* Dimensions figées sur les deux axes : évite l'ovale sur Safari,
	   qui ne conserve pas toujours la hauteur d'un flex-item basé sur flex-basis. */
	flex: 0 0 auto;
	width: 2.2rem;
	height: 2.2rem;
	min-width: 2.2rem;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	/* Centrage via flex plutôt que place-items : rendu identique sur tous les WebKit. */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #b57f41;
	color: #fff;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.jn-etapes__titre {
	margin: 0;
	font-size: 1.1rem;
}

/* La description s'aligne sous le titre (largeur du cercle + gap) */
.jn-etapes__texte {
	/*margin-top: 0.35rem;*/
	padding-left: calc( 2.2rem + 1.1rem );
}

.jn-etapes__texte > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- FAQ  */

.jn-faq { margin-block: 3rem; }

.jn-faq__item {
	border-bottom: 1px solid var(--jn-trait);
}

.jn-faq__question {
	cursor: pointer;
	padding: 1rem 2rem 1rem 0;
	font-weight: 600;
	position: relative;
	list-style: none;
}

.jn-faq__question::-webkit-details-marker { display: none; }

.jn-faq__question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
	width: 1.6rem;
	height: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #F2C235;
	color: #401e02;
	font-size: 1.15rem;
	line-height: 1;
}

.jn-faq__item[open] .jn-faq__question::after { content: "–"; }

.jn-faq__reponse {
	padding: 0 0 1.1rem;
	color: var(--jn-encre-douce);
}

.jn-faq__reponse > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ Comparatif  */

.jn-comparatif { margin-block: 3rem; }

.jn-comparatif__grille {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.2rem;
}

.jn-comparatif__col {
	padding: 1.3rem 1.5rem;
	border-radius: var(--jn-rayon);
	background: var(--jn-surface);
	border-top: 3px solid var(--jn-trait);
}

.jn-comparatif__col--positif { border-top-color: #2f7d4f; background: #f1f8f3; }
.jn-comparatif__col--negatif { border-top-color: #b3541e; background: #fdf4ee; }

.jn-comparatif__soustitre {
	margin: 0 0 0.7rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.jn-comparatif__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.jn-comparatif__col li {
	position: relative;
	padding-left: 1.5rem;
}

.jn-comparatif__col--positif li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #2f7d4f;
	font-weight: 700;
}

.jn-comparatif__col--negatif li::before {
	content: "✕";
	position: absolute;
	left: 0;
	color: #b3541e;
	font-weight: 700;
}

/* -------------------------------------------------------------- Citation  */

.jn-citation {
	margin-block: 3rem;
	margin-left: 20px;
	padding: 1.5rem 1.8rem;
	/* Bord gauche : couleur pleine de l'encadré ; fond : même couleur à 20 % */
	border-left: 4px solid var(--jn-cit-bord, var(--jn-accent));
	background: var(--jn-cit-fond, transparent);
	border-radius: 0 var(--jn-rayon) var(--jn-rayon) 0;
}

/* Reprise des couleurs de l'encadré (bord = couleur pleine, fond = 20 %) */
.jn-citation--marron  { --jn-cit-bord: #401e02; --jn-cit-fond: rgba( 64, 30, 2, 0.2 ); }
.jn-citation--caramel { --jn-cit-bord: #b57f41; --jn-cit-fond: rgba( 181, 127, 65, 0.2 ); }
.jn-citation--vert    { --jn-cit-bord: #04473c; --jn-cit-fond: rgba( 4, 71, 60, 0.2 ); }
.jn-citation--jaune   { --jn-cit-bord: #ffed8f; --jn-cit-fond: rgba( 255, 237, 143, 0.2 ); }

.jn-citation__texte {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp( 1.15rem, 2.4vw, 1.5rem );
	line-height: 1.45;
	font-style: italic;
}

.jn-citation__signature {
	margin-top: 0.9rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #401e02;
}

.jn-citation__role a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jn-citation__role {
	display: block;
	font-weight: 400;
	color: #401e02;
}

/* ------------------------------------------------------------------- CTA  */

.jn-cta {
	margin-block: 3rem;
	padding: 2rem;
	border-radius: var(--jn-rayon);
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	align-items: center;
	justify-content: space-between;
}

/* Couleur du bandeau (mêmes couleurs que l'encadré) */
.jn-cta--c-marron  { --jn-cta-fond: #401e02; --jn-cta-texte: #ffffff; }
.jn-cta--c-caramel { --jn-cta-fond: #b57f41; --jn-cta-texte: #401e02; }
.jn-cta--c-vert    { --jn-cta-fond: #04473c; --jn-cta-texte: #ffffff; }
.jn-cta--c-jaune   { --jn-cta-fond: #ffed8f; --jn-cta-texte: #401e02; }

.jn-cta--plein {
	background: var(--jn-cta-fond, var(--jn-accent));
	color: var(--jn-cta-texte, #fff);
}

.jn-cta--plein .jn-cta__bouton {
	background: var(--jn-cta-texte, #fff);
	color: var(--jn-cta-fond, var(--jn-accent));
}

.jn-cta--contour {
	border: 1px solid var(--jn-cta-fond, var(--jn-accent));
}

.jn-cta--contour .jn-cta__bouton {
	background: var(--jn-cta-fond, var(--jn-accent));
	color: var(--jn-cta-texte, #fff);
}

.jn-cta__titre {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
	color: inherit;
}

.jn-cta__texte > *:last-child,
.jn-cta__texte { margin-bottom: 0; }

.jn-cta__bouton {
	display: inline-block;
	padding: 0.8rem 1.6rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.jn-cta__bouton:hover { opacity: 0.9; }

/* ----------------------------------------------------------- Responsive   */

@media ( max-width: 782px ) {
	.jn-mt__grille {
		flex-direction: column !important;
	}
	.jn-mt__media {
		flex-basis: auto;
		width: 100%;
	}
	.jn-comparatif__grille,
	.jn-sommaire--colonnes .jn-sommaire__liste {
		grid-template-columns: 1fr;
		columns: 1;
	}
	.jn-cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	* { scroll-behavior: auto !important; }
}

/* Ligne de sommaire sans cible (intertitre) */
.jn-sommaire__intertitre{
	display:block;padding:.6rem 0 .2rem;
	font-size:.75rem;font-weight:700;letter-spacing:.09em;
	text-transform:uppercase;color:var(--jn-encre-douce);
}

/* --------------------------------------------------------- Texte & espaces */

.jn-texte { margin-block: 1.5rem; }

.jn-texte__bloc > *:first-child { margin-top: 0; }
.jn-texte__bloc > *:last-child { margin-bottom: 0; }
.jn-texte__bloc {line-height: 1.8; }

/* L'espacement est purement visuel : hauteur réglée en ligne (style="height:Npx") */
.jn-texte__espace { width: 100%; }