/* ==========================================================================
   JDK Concept - Systeme des PAGES DE SERVICE

   Feuille COMMUNE a toutes les pages de service refondues. Le prefixe des
   classes reste `.jdk-pp`, herite de la premiere page traitee : il vaut
   desormais « page de service », pas « plain-pied ». Ne pas le renommer sans
   reprendre tous les modules qui s en servent.

   Modules qui l enfilent : `jdk-plain-pied.php` (4279), `jdk-a-etage.php`
   (4294).

   Cette page ne charge plus ni `kit.css` ni `page-4279.css` : le postmeta
   `_jdk_fige` est retire. Elle est donc la PREMIERE page de service a porter
   le rayon de 5px de la charte v2, que la regle `* { border-radius: 0
   !important }` du kit interdisait partout ailleurs.

   ⛔ Le reset de Hello Elementor peint les liens au survol (`a:active,
   a:hover { color: #336 }`, specificite (0,1,1)) et souligne tous les liens.
   Chaque lien maison redeclare donc couleur ET decoration en (0,2,0), sur
   :visited, :hover, :focus ET :active.

   ⛔ Aucune image de fond n est posee en CSS : les visuels passent par
   wp_get_attachment_image(), qui donne srcset, sizes et alt.

   Toutes les respirations descendent de quatre variables : bande, gouttiere,
   titre-liste, marge-x. Corriger l air, c est corriger une valeur.

   ⭐ VOILES : un SEUL voile uniforme par scene, sans variante par point de
   rupture. Les versions a rideau lateral ou a bandeau central donnaient de
   plus beaux chiffres a 1440 et s effondraient ailleurs : le rideau suppose
   un texte cale a gauche, le bandeau suppose des bords sans texte. Mesure :
   jeton de frise a 3,06 a 768px, sur-titre du hero a 4,40 a 1024px. Un voile
   uniforme fait MIEUX partout, avec une piece de moins.

   ⚠️ MESURE : le `ch` de Montserrat vaut 0,66 em, alors que la largeur MOYENNE
   d un caractere vaut 0,535 em (mesuree au canvas). Une colonne de 72ch fait
   donc 92 caracteres, pas 72. Les colonnes de lecture sont calees a 56-58ch,
   soit 71 a 74 caracteres reels, dans la cible de 70 a 80.
   ========================================================================== */

.jdk-pp {
	--jdk-pp-or: #D2AF87;
	--jdk-pp-or-clair: #E3C9A9;
	--jdk-pp-neige: #FFFAFA;
	--jdk-pp-texte: #D8D5D5;
	--jdk-pp-sourdine: #9AA0A0;

	--jdk-pp-fond: #1B1B1B;
	--jdk-pp-creux: #141618;
	--jdk-pp-onyx: #242627;
	--jdk-pp-surface: rgba(255, 255, 255, .035);
	--jdk-pp-surface-haute: rgba(255, 255, 255, .06);
	--jdk-pp-bord: rgba(255, 255, 255, .10);
	--jdk-pp-bord-fort: rgba(255, 255, 255, .16);

	--jdk-pp-rayon: 5px;

	--jdk-pp-cadre: 1180px;
	--jdk-pp-cadre-etroit: 820px;
	--jdk-pp-marge-x: 24px;
	--jdk-pp-bande: clamp(56px, 6vw, 96px);
	--jdk-pp-gouttiere: clamp(20px, 2.4vw, 32px);
	--jdk-pp-titre-liste: clamp(28px, 3vw, 44px);

	background-color: var(--jdk-pp-fond);
	font-family: "Montserrat", sans-serif;
	color: var(--jdk-pp-texte);
}

/* --------------------------------------------------------------------------
   ⛔ MESURE : a 390px, Hello Elementor pose `padding-inline: 10px` sur
   `body:not([class*=elementor-page-]) .site-main`. La parade maison de
   `jdk-composants.css` neutralise bien le `max-width` et la marge de
   `.jdk-main--pleine`, mais PAS ce retrait. Resultat mesure : les bandes
   pleine largeur allaient de 10 a 380 alors que l en-tete et le pied
   allaient de 0 a 390 : la page paraissait encadree.

   Corrige ICI et pas dans jdk-composants.css : cette feuille n est enfilee
   que sur la page 4279, donc les autres gabarits en pleine largeur (404,
   recherche, archives, articles) ne bougent pas. Le meme defaut les touche,
   il est signale a part.

   `main#content.jdk-main--pleine` vaut (1,2,1) : la regle du theme, en
   (0,2,1), passe dessous sans `!important`.
   -------------------------------------------------------------------------- */
main#content.jdk-main--pleine { padding-inline: 0; }

.jdk-pp *,
.jdk-pp *::before,
.jdk-pp *::after { box-sizing: border-box; }

.jdk-pp img { max-width: 100%; height: auto; }

.jdk-pp [hidden] { display: none; }

.jdk-pp__cadre {
	max-width: var(--jdk-pp-cadre);
	margin-block: 0;
	margin-inline: auto;
	padding-inline: var(--jdk-pp-marge-x);
}

.jdk-pp__cadre--etroit { max-width: var(--jdk-pp-cadre-etroit); }

.jdk-pp__hors-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jdk-pp__picto {
	width: 1em;
	height: 1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   Titres et amorces communs
   ========================================================================== */

.jdk-pp__surtitre {
	margin: 0;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--jdk-pp-or);
}

.jdk-pp__h1 {
	max-width: 20ch;
	margin: 14px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(30px, 4.2vw, 50px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--jdk-pp-neige);
}

.jdk-pp__h2 {
	max-width: 24ch;
	margin: 14px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(25px, 2.6vw, 36px);
	font-weight: 700;
	line-height: 1.18;
	color: var(--jdk-pp-neige);
}

.jdk-pp__h3 {
	margin: var(--jdk-pp-titre-liste) 0 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--jdk-pp-neige);
}

.jdk-pp__filet {
	display: block;
	width: 64px;
	height: 2px;
	margin: 24px 0 0;
	background-color: var(--jdk-pp-or);
}

.jdk-pp__intro,
.jdk-pp__chapo {
	max-width: 58ch;
	margin: 20px 0 0;
	font-size: clamp(15px, 1.05vw, 16.5px);
	line-height: 1.75;
	color: var(--jdk-pp-texte);
}

.jdk-pp p { margin: 16px 0 0; }
.jdk-pp p:first-child { margin-top: 0; }

/* ==========================================================================
   Boutons et liens
   ========================================================================== */

.jdk-pp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.jdk-pp__actions--centre { justify-content: center; }

.jdk-pp .jdk-pp__btn,
.jdk-pp .jdk-pp__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	border: 1px solid var(--jdk-pp-or);
	border-radius: var(--jdk-pp-rayon);
	background-color: var(--jdk-pp-or);
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #1B1B1B;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.jdk-pp .jdk-pp__btn:hover,
.jdk-pp .jdk-pp__btn:focus,
.jdk-pp .jdk-pp__btn:active {
	background-color: var(--jdk-pp-or-clair);
	border-color: var(--jdk-pp-or-clair);
	color: #1B1B1B;
}

.jdk-pp .jdk-pp__btn:hover .jdk-pp__picto { transform: translateX(5px); }
.jdk-pp .jdk-pp__btn .jdk-pp__picto { transition: transform .25s ease; }

.jdk-pp .jdk-pp__btn--ghost,
.jdk-pp .jdk-pp__btn--ghost:visited {
	background-color: transparent;
	color: var(--jdk-pp-or);
}

.jdk-pp .jdk-pp__btn--ghost:hover,
.jdk-pp .jdk-pp__btn--ghost:focus,
.jdk-pp .jdk-pp__btn--ghost:active {
	background-color: var(--jdk-pp-or);
	color: #1B1B1B;
}

.jdk-pp .jdk-pp__lien,
.jdk-pp .jdk-pp__lien:visited {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jdk-pp-or);
	text-decoration: none;
	transition: color .25s ease;
}

.jdk-pp .jdk-pp__lien:hover,
.jdk-pp .jdk-pp__lien:focus,
.jdk-pp .jdk-pp__lien:active { color: var(--jdk-pp-or-clair); }

.jdk-pp .jdk-pp__lien:hover .jdk-pp__picto { transform: translateX(5px); }
.jdk-pp .jdk-pp__lien .jdk-pp__picto { transition: transform .25s ease; }

/* --------------------------------------------------------------------------
   Anneau de focus clavier

   Le reset de Hello Elementor est correct sur ce point : il ne coupe le
   contour que sur `:focus:not(:focus-visible)`, l anneau du navigateur
   survit donc. Mais l anneau par defaut se pose MAL sur le bouton or plein.
   On le redeclare, en neige, POSE A L EXTERIEUR : partout ou un bouton or est
   pose, ce qui l entoure est sombre.
   -------------------------------------------------------------------------- */

.jdk-pp a:focus-visible,
.jdk-pp summary:focus-visible,
.jdk-pp button:focus-visible {
	outline: 2px solid var(--jdk-pp-neige);
	outline-offset: 3px;
	border-radius: var(--jdk-pp-rayon);
}

/* ==========================================================================
   1. Hero

   Contenu aligne en bas, sur l image. ⚠️ Le voile est un FRERE du texte, pas
   un ancetre : il est a RE-MESURER a tout changement de composition.

   ⭐ CALIBRE PAR LA MESURE (canvas, recadrage cover identique, degrade LINEAIRE
   seul compose donc borne BASSE ; pire pixel de chaque bloc) :
     fil d Ariane 5,34 · sur-titre 5,10 · H1 12,71 · chapo 10,43 · gages 17,03
   Le premier jet donnait 1,45 au fil d Ariane et 2,96 au sur-titre : le point
   faible est TOUJOURS le haut du bloc, jamais le titre. D ou un degrade qui
   part deja a 0,52 et atteint 0,84 des 30 % de hauteur.
   ========================================================================== */

.jdk-pp__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* ⭐ Le retrait HAUT est le vrai levier de lisibilite de la photo : il
	   repousse le bloc de texte vers le bas, dans la partie sombre, et libere
	   le ciel. Mesure a 1440 : le haut du texte passe de 17 % a 31 % de la
	   hauteur, le voile peut alors etre bien plus leger et la photo conservee
	   passe de 26 % a 38 % de sa luminance d origine.
	   ⚠️ Un retrait, pas une `min-height` en vh : la hauteur d ecran varie, le
	   retrait non. Avec une min-height, le rapport texte/cadre changeait avec
	   le viewport et le contraste devenait imprevisible. */
	/* ⭐ Le hero tient DANS le viewport, en-tete comprise : celle-ci mesure
	   121px a toutes les largeurs (barre 40 + menu 80, plus une bordure). Sans
	   cela il debordait de 58px sur un ecran de 900. On retranche 140 et non
	   121 : la marge laisse entrevoir le haut de la section suivante, ce qui
	   annonce au visiteur qu il y a de la suite.
	   ⚠️ `svh` et non `vh` : sur mobile, `vh` compte la barre d URL qui
	   disparait ensuite, et le hero deborderait au premier defilement. */
	min-height: min(760px, calc(100svh - 140px));
	padding-block: clamp(90px, 12vh, 150px) clamp(40px, 4.4vw, 68px);
	background-color: #101316;
	isolation: isolate;
}

.jdk-pp__hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.jdk-pp__hero-media img {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	display: block;
}

.jdk-pp__hero-voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* ⭐ Voile ancré en PIXELS DEPUIS LE BAS, pas en pourcentages : le bloc de
	   texte mesure toujours 577px depuis le bas du hero, quelle que soit la
	   hauteur de la section. Un dégradé en % suivait la section et lâchait le
	   texte dès que l'écran raccourcissait — mesure : 3,04 au fil d'Ariane sur
	   un hero de 687px. Ancré en pixels, le pire contraste tient entre 5,78 et
	   6,33 de 687px à 1000px de hauteur, et la photo reste visible à 35-51 %. */
	background:
		radial-gradient(900px 420px at 88% -10%, rgba(210, 175, 135, .10), transparent 62%),
		linear-gradient(0deg,
			rgba(10, 13, 17, .82) 0,
			rgba(10, 13, 17, .78) 520px,
			rgba(10, 13, 17, .62) 600px,
			rgba(10, 13, 17, .26) 700px,
			rgba(10, 13, 17, .12) 800px,
			rgba(10, 13, 17, .08) 100%);
}

.jdk-pp__hero-inner { position: relative; z-index: 2; width: 100%; }

.jdk-pp__bc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-family: "Oswald", sans-serif;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* ⛔ Mesure : en sourdine il tombait a 2,67 sur le ciel, et meme en couleur
	   de texte il plafonnait a 4,35 une fois le voile allege. En neige il
	   remonte a 6,31 et cesse de commander la densite du voile. */
	color: var(--jdk-pp-neige);
}

.jdk-pp .jdk-pp__bc a,
.jdk-pp .jdk-pp__bc a:visited {
	color: var(--jdk-pp-neige);
	text-decoration: none;
	transition: color .25s ease;
}

.jdk-pp .jdk-pp__bc a:hover,
.jdk-pp .jdk-pp__bc a:focus,
.jdk-pp .jdk-pp__bc a:active { color: var(--jdk-pp-or); }

.jdk-pp__hero .jdk-pp__chapo { max-width: 62ch; }

/* ⚠️ L or de la charte, #D2AF87, est le maillon faible des sur-titres poses
   sur photo : il commandait a lui seul la densite du voile. Sur les scenes,
   et LA SEULEMENT, il passe a l or clair. Sur fond plein il ne bouge pas. */
.jdk-pp__hero .jdk-pp__surtitre,
.jdk-pp__scene .jdk-pp__surtitre,
.jdk-pp__final .jdk-pp__surtitre { color: var(--jdk-pp-or-clair); }

.jdk-pp__gages {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__gages li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: "Oswald", sans-serif;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jdk-pp-neige);
}

.jdk-pp__gages .jdk-pp__picto { color: var(--jdk-pp-or); font-size: 15px; }

/* ==========================================================================
   Bandes de section. ⛔ Jamais deux fonds identiques qui se suivent.
   ========================================================================== */

.jdk-pp__bande { padding-block: var(--jdk-pp-bande); }

.jdk-pp__bande--fond { background-color: var(--jdk-pp-fond); }
.jdk-pp__bande--creux { background-color: var(--jdk-pp-creux); }
.jdk-pp__bande--onyx { background-color: var(--jdk-pp-onyx); }

/* ==========================================================================
   2. Les chiffres
   ========================================================================== */

.jdk-pp__bande--chiffres {
	padding-block: clamp(30px, 3vw, 44px);
	background-color: var(--jdk-pp-onyx);
	border-block: 1px solid var(--jdk-pp-bord);
}

.jdk-pp__chiffres {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--jdk-pp-gouttiere);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__chiffres li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 18px;
	border-left: 2px solid var(--jdk-pp-or);
}

.jdk-pp__chiffres strong {
	font-family: "Roboto", sans-serif;
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1;
	color: var(--jdk-pp-neige);
}

.jdk-pp__chiffres span {
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jdk-pp-texte);
}

/* ==========================================================================
   3. Le concept : texte et visuel cote a cote
   ========================================================================== */

.jdk-pp__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.jdk-pp__duo-texte .jdk-pp__h2 { max-width: 20ch; }

.jdk-pp__encadre {
	margin-top: 26px;
	padding: 18px 22px;
	border-left: 2px solid var(--jdk-pp-or);
	border-radius: 0 var(--jdk-pp-rayon) var(--jdk-pp-rayon) 0;
	background-color: var(--jdk-pp-surface);
	font-size: 15px;
	line-height: 1.7;
	color: var(--jdk-pp-neige);
}


/* ==========================================================================
   Traits de separation entre sections

   Reprise du motif maison de `jdk-home-sep.php` : filet degrade or, plus un
   losange de 9px au centre.

   ⛔ Sur l accueil le losange porte un halo `box-shadow: 0 0 0 5px #161616`,
   valable la-bas parce que TOUTES les sections partagent ce fond. Ici les
   fonds alternent, et le filet est a cheval sur DEUX couleurs : aucun halo
   uni ne peut convenir. Le vide est donc menage dans le degrade lui-meme.

   ⛔ Les sections a photo ne portent plus `overflow: hidden` : il coupait le
   separateur en deux, puisque celui-ci deborde de la moitie de sa hauteur.
   Le rognage est descendu sur `.jdk-pp__*-media`.
   ========================================================================== */

.jdk-pp > * { position: relative; }

.jdk-pp > * + *::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	transform: translateY(-50%);
	z-index: 6;
	pointer-events: none;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(210, 175, 135, .07) 16%,
		rgba(210, 175, 135, .55) 44%,
		transparent 46.5%,
		transparent 53.5%,
		rgba(210, 175, 135, .55) 56%,
		rgba(210, 175, 135, .07) 84%,
		transparent 100%);
}

.jdk-pp > * + *::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 9px;
	height: 9px;
	background-color: var(--jdk-pp-or);
	transform: translate(-50%, -50%) rotate(45deg);
	z-index: 7;
	pointer-events: none;
}

/* ==========================================================================
   Scenes sur photo : le concept et la methode

   Le contenu se pose sur un panneau presque opaque, ce qui rend le contraste
   INDEPENDANT de la photo. Mesure faite malgre tout, le voile restant a sa
   part sur la pastille de lieu.
   ========================================================================== */

.jdk-pp__scene {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 72vh, 760px);
	padding-block: clamp(56px, 6vw, 96px);
	background-color: #101316;
	isolation: isolate;
}

.jdk-pp__scene-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.jdk-pp__scene-media img {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	display: block;
}

.jdk-pp__scene-voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(9, 12, 16, .58) 0%, rgba(9, 12, 16, .30) 38%, rgba(9, 12, 16, .58) 100%);
}

.jdk-pp__scene-voile--dense {
	background:
		radial-gradient(900px 420px at 50% -10%, rgba(210, 175, 135, .08), transparent 62%),
		linear-gradient(180deg, rgba(10, 13, 17, .66) 0%, rgba(10, 13, 17, .72) 14%, rgba(10, 13, 17, .74) 100%);
}

.jdk-pp__scene-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
}

.jdk-pp__panneau {
	grid-column: 2;
	padding: clamp(26px, 3.2vw, 44px);
	background-color: rgba(20, 22, 26, .93);
	border: 1px solid rgba(255, 255, 255, .10);
}

.jdk-pp__panneau .jdk-pp__h2 { max-width: 22ch; }
.jdk-pp__panneau p { font-size: 15px; line-height: 1.75; }

.jdk-pp__scene-badge {
	position: absolute;
	left: clamp(16px, 2vw, 30px);
	bottom: clamp(16px, 2vw, 30px);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 15px;
	background-color: rgba(9, 12, 16, .82);
	border: 1px solid rgba(255, 255, 255, .16);
	font-family: "Oswald", sans-serif;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jdk-pp-neige);
}

/* ⚠️ `jdk-noradius.php` impose `*{border-radius:0 !important}` sur tout le
   site, en conservant explicitement les CERCLES. Ce point et les jetons de la
   frise en sont : `!important` a specificite superieure, sinon ils sortent
   carres. */
.jdk-pp__scene-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	background-color: var(--jdk-pp-or);
	border-radius: 50% !important;
}

/* --- variante « methode » : contenu centre, pas de panneau --- */

.jdk-pp__scene--methode .jdk-pp__scene-inner {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.jdk-pp__scene--methode .jdk-pp__h2 { max-width: 26ch; }

.jdk-pp__frise {
	position: relative;
	display: grid;
	gap: clamp(20px, 2.4vw, 30px);
	max-width: 620px;
	margin: clamp(32px, 3.4vw, 48px) auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Le rail s arrete AVANT le premier jeton et APRES le dernier : sans ces
   retraits il depasse des cercles et pend dans le vide. */
.jdk-pp__frise::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 20px;
	bottom: 20px;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgba(210, 175, 135, .55) 10%, rgba(210, 175, 135, .55) 90%, transparent);
}

.jdk-pp__frise li { position: relative; padding-left: 64px; }

.jdk-pp__frise-num {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	border: 1px solid var(--jdk-pp-or);
	border-radius: 50% !important;
	background-color: #0F1215;
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--jdk-pp-or);
}

.jdk-pp__frise h3 {
	margin: 8px 0 0;
	font-family: "Oswald", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--jdk-pp-neige);
}

.jdk-pp__frise p {
	margin: 7px 0 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--jdk-pp-texte);
}

.jdk-pp__frise-pied {
	max-width: 56ch;
	margin: clamp(26px, 3vw, 38px) auto 0;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--jdk-pp-sourdine);
}

/* ==========================================================================
   10. Les realisations : cartes du module maison

   `.jdk-latest-grid` et `.jdk-rc` viennent de `jdk-real.css`. On ne redecrit
   rien, on se contente de poser l air au-dessus de la grille.
   ========================================================================== */

.jdk-pp .jdk-pp__reals { margin-top: var(--jdk-pp-titre-liste); }

.jdk-pp__suite { margin-top: 28px; }

/* ==========================================================================
   Cartes (atouts, avantages)
   ========================================================================== */

.jdk-pp__cartes {
	display: grid;
	gap: var(--jdk-pp-gouttiere);
	margin: var(--jdk-pp-titre-liste) 0 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jdk-pp__cartes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jdk-pp__cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Cartes « phare » : sur une page mere, les deux grandes familles de projet
   doivent se distinguer des cartes d argument ordinaires. */
.jdk-pp__carte--phare {
	padding: clamp(28px, 3vw, 40px);
	border-color: var(--jdk-pp-bord-fort);
	background-color: var(--jdk-pp-surface-haute);
}

.jdk-pp__carte--phare .jdk-pp__picto { font-size: 32px; }

.jdk-pp__carte--phare h3 {
	font-size: clamp(20px, 1.7vw, 25px);
	line-height: 1.2;
}

.jdk-pp__carte--phare p { font-size: 15px; }

/* `margin-top: auto` aligne les liens des deux cartes sur une meme ligne,
   quelle que soit la longueur des textes au-dessus. */
.jdk-pp__carte-suite {
	margin-top: auto;
	padding-top: 20px;
}

.jdk-pp__carte {
	display: flex;
	flex-direction: column;
	padding: 26px 24px 28px;
	border: 1px solid var(--jdk-pp-bord);
	border-radius: var(--jdk-pp-rayon);
	background-color: var(--jdk-pp-surface);
	transition: border-color .25s ease, background-color .25s ease;
}

.jdk-pp__carte:hover {
	border-color: var(--jdk-pp-or);
	background-color: var(--jdk-pp-surface-haute);
}

.jdk-pp__carte .jdk-pp__picto {
	font-size: 26px;
	color: var(--jdk-pp-or);
}

.jdk-pp__carte h3,
.jdk-pp__carte h4 {
	margin: 16px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--jdk-pp-neige);
}

.jdk-pp__carte p {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.7;
}

/* ==========================================================================
   4. Le comparatif
   ========================================================================== */

.jdk-pp__tableau-cadre {
	margin-top: var(--jdk-pp-titre-liste);
	overflow-x: auto;
	border: 1px solid var(--jdk-pp-bord);
	border-radius: var(--jdk-pp-rayon);
}

.jdk-pp__tableau {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 14.5px;
}

.jdk-pp__tableau th,
.jdk-pp__tableau td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--jdk-pp-bord);
}

.jdk-pp__tableau tbody tr:last-child th,
.jdk-pp__tableau tbody tr:last-child td { border-bottom: 0; }

.jdk-pp__tableau thead th {
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jdk-pp-sourdine);
	background-color: rgba(255, 255, 255, .03);
}

.jdk-pp__tableau tbody th {
	font-family: "Montserrat", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--jdk-pp-neige);
}

.jdk-pp__tableau td { color: var(--jdk-pp-texte); line-height: 1.6; }

.jdk-pp__tableau .jdk-pp__col-fort {
	background-color: rgba(210, 175, 135, .07);
	color: var(--jdk-pp-neige);
}

.jdk-pp__tableau thead .jdk-pp__col-fort { color: var(--jdk-pp-or); }

/* ==========================================================================
   5. Les modeles
   ========================================================================== */

.jdk-pp__modele {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-top: var(--jdk-pp-titre-liste);
	padding-top: var(--jdk-pp-titre-liste);
	border-top: 1px solid var(--jdk-pp-bord);
}

.jdk-pp__modele-texte .jdk-pp__h3 { margin-top: 0; }

.jdk-pp__modele--inverse .jdk-pp__modele-texte { order: 2; }
.jdk-pp__modele--inverse .jdk-pp__modele-media { order: 1; }

/* La section « modeles » recoit soit une photo reelle, soit le cadre
   « emplacement a fournir ». Les deux occupent la meme colonne. */
.jdk-pp__modele-media img {
	display: block;
	width: 100%;
	border-radius: var(--jdk-pp-rayon);
}

.jdk-pp__liste {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__liste li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: var(--jdk-pp-texte);
}

.jdk-pp__liste .jdk-pp__picto { font-size: 16px; color: var(--jdk-pp-or); }

/* Emplacement photo a fournir par le client. ⚠️ Pas d aspect-ratio : sur une
   rangee de grille etiree, la LARGEUR deriverait de la hauteur. */
.jdk-pp__a-fournir {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: clamp(240px, 26vw, 340px);
	padding: 28px;
	border: 1px dashed var(--jdk-pp-bord-fort);
	border-radius: var(--jdk-pp-rayon);
	background-color: var(--jdk-pp-surface);
	text-align: center;
}

.jdk-pp__a-fournir .jdk-pp__picto { font-size: 34px; color: var(--jdk-pp-sourdine); }

.jdk-pp__a-fournir p {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	font-family: "Oswald", sans-serif;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jdk-pp-sourdine);
}

.jdk-pp__a-fournir span {
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--jdk-pp-sourdine);
}

/* ==========================================================================
   8. Les freins
   ========================================================================== */

.jdk-pp__freins {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jdk-pp-gouttiere);
	margin: var(--jdk-pp-titre-liste) 0 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__freins li {
	padding: 24px 26px;
	border: 1px solid var(--jdk-pp-bord);
	border-radius: var(--jdk-pp-rayon);
	background-color: var(--jdk-pp-surface);
}

.jdk-pp__freins h3 {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--jdk-pp-or);
}

.jdk-pp__freins p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; }

/* ==========================================================================
   9. Le prix
   ========================================================================== */

.jdk-pp__duo--prix { align-items: start; }

.jdk-pp__facteurs {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__facteurs li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	border: 1px solid var(--jdk-pp-bord);
	border-radius: var(--jdk-pp-rayon);
	background-color: rgba(0, 0, 0, .22);
}

.jdk-pp__facteurs span {
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--jdk-pp-or);
}

.jdk-pp__facteurs h3 {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--jdk-pp-neige);
}

/* ==========================================================================
   11. Le constructeur
   ========================================================================== */

.jdk-pp__piliers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jdk-pp-gouttiere);
	margin: var(--jdk-pp-titre-liste) 0 0;
	padding: 0;
	list-style: none;
}

.jdk-pp__piliers li {
	padding: 26px 24px 28px;
	border-top: 2px solid var(--jdk-pp-or);
	background-color: var(--jdk-pp-surface);
	border-radius: 0 0 var(--jdk-pp-rayon) var(--jdk-pp-rayon);
}

.jdk-pp__piliers span {
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--jdk-pp-or);
}

.jdk-pp__piliers h3 {
	margin: 10px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--jdk-pp-neige);
}

.jdk-pp__piliers p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; }

.jdk-pp__citation {
	margin: var(--jdk-pp-titre-liste) 0 0;
	padding: 26px 30px;
	border-left: 2px solid var(--jdk-pp-or);
	border-radius: 0 var(--jdk-pp-rayon) var(--jdk-pp-rayon) 0;
	background-color: var(--jdk-pp-surface);
}

.jdk-pp__citation p {
	max-width: 62ch;
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(16px, 1.3vw, 19px);
	font-style: italic;
	line-height: 1.6;
	color: var(--jdk-pp-neige);
}

.jdk-pp__aussi-titre {
	margin: var(--jdk-pp-titre-liste) 0 0;
	font-family: "Oswald", sans-serif;
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	/* ⛔ En sourdine, mesuree a 2,62 une fois le voile allege. */
	color: var(--jdk-pp-texte);
}

.jdk-pp__aussi {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.jdk-pp .jdk-pp__aussi a,
.jdk-pp .jdk-pp__aussi a:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border: 1px solid var(--jdk-pp-bord);
	border-radius: var(--jdk-pp-rayon);
	background-color: var(--jdk-pp-surface);
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--jdk-pp-neige);
	text-decoration: none;
	transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}

.jdk-pp .jdk-pp__aussi a:hover,
.jdk-pp .jdk-pp__aussi a:focus,
.jdk-pp .jdk-pp__aussi a:active {
	border-color: var(--jdk-pp-or);
	background-color: var(--jdk-pp-surface-haute);
	color: var(--jdk-pp-or);
}

.jdk-pp__aussi .jdk-pp__picto { font-size: 16px; color: var(--jdk-pp-or); }

/* ==========================================================================
   12. La FAQ

   `details` / `summary` natifs : la FAQ reste depliable SANS JavaScript.
   Le picto est trace en CSS, ce qui evite toute dependance a une fonte
   d icones et tout risque de SVG sans dimension.
   ========================================================================== */

.jdk-pp__faq {
	display: grid;
	gap: 14px;
	margin-top: var(--jdk-pp-titre-liste);
}

.jdk-pp__faq-item {
	border: 1px solid var(--jdk-pp-bord);
	border-radius: var(--jdk-pp-rayon);
	background-color: var(--jdk-pp-surface);
	overflow: hidden;
	transition: border-color .25s ease;
}

.jdk-pp__faq-item:hover,
.jdk-pp__faq-item[open] { border-color: var(--jdk-pp-or); }

.jdk-pp__faq-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
}

.jdk-pp__faq-tete::-webkit-details-marker { display: none; }

/* ⚠️ Anneau INTERIEUR ici : les cartes de FAQ ne sont distantes que de 14px,
   un contour pose a 3px vers l exterieur mordrait la carte voisine. */
.jdk-pp .jdk-pp__faq-tete:focus-visible {
	outline: 2px solid var(--jdk-pp-neige);
	outline-offset: -3px;
	border-radius: var(--jdk-pp-rayon);
}

.jdk-pp__faq-titre {
	font-family: "Roboto", sans-serif;
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jdk-pp-neige);
	transition: color .25s ease;
}

.jdk-pp__faq-item[open] .jdk-pp__faq-titre { color: var(--jdk-pp-or); }

.jdk-pp__faq-icone {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.jdk-pp__faq-icone::before,
.jdk-pp__faq-icone::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background-color: #D2AF87;
	transform: translate(-50%, -50%);
	transition: transform .25s ease, opacity .25s ease;
}

.jdk-pp__faq-icone::after { transform: translate(-50%, -50%) rotate(90deg); }

.jdk-pp__faq-item[open] .jdk-pp__faq-icone::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.jdk-pp__faq-corps { padding: 0 22px 20px; }

.jdk-pp__faq-corps p {
	max-width: 56ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--jdk-pp-texte);
}

/* ==========================================================================
   13. Appel final
   ========================================================================== */

.jdk-pp__final {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(360px, 42vh, 460px);
	padding-block: clamp(56px, 6vw, 88px);
	background-color: #101316;
	isolation: isolate;
	text-align: center;
}

.jdk-pp__final-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.jdk-pp__final-media img {
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	display: block;
}

.jdk-pp__final-voile {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(760px 340px at 50% 0%, rgba(210, 175, 135, .10), transparent 66%),
		linear-gradient(180deg, rgba(10, 13, 17, .72) 0%, rgba(10, 13, 17, .80) 50%, rgba(10, 13, 17, .84) 100%);
}

.jdk-pp__final-inner { position: relative; z-index: 2; width: 100%; }

.jdk-pp__final-inner .jdk-pp__surtitre,
.jdk-pp__final-inner .jdk-pp__h2,
.jdk-pp__final-inner .jdk-pp__chapo { margin-inline: auto; }

.jdk-pp__final-inner .jdk-pp__h2 { max-width: 22ch; }
.jdk-pp__final-inner .jdk-pp__chapo { max-width: 52ch; }

.jdk-pp__mention {
	margin-top: 16px;
	font-family: "Oswald", sans-serif;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jdk-pp-sourdine);
}

/* ==========================================================================
   Adaptation. Points de rupture alignes sur le reste du site : 1024 et 767.
   ========================================================================== */

@media (max-width: 1024px) {
	.jdk-pp__cartes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jdk-pp__cartes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jdk-pp__cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jdk-pp__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jdk-pp__reals { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.jdk-pp__piliers { grid-template-columns: 1fr; }
	.jdk-pp__aussi { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.jdk-pp__duo,
	.jdk-pp__modele { grid-template-columns: minmax(0, 1fr); }

	/* Le panneau cesse d etre une colonne flottante et occupe la scene. */
	.jdk-pp__scene-inner { grid-template-columns: minmax(0, 1fr); }
	.jdk-pp__panneau { grid-column: 1; }
	.jdk-pp__scene { min-height: 0; }

	/* Sur une colonne, le texte passe toujours avant le visuel. */
	.jdk-pp__modele--inverse .jdk-pp__modele-texte { order: 0; }
	.jdk-pp__modele--inverse .jdk-pp__modele-media { order: 0; }
}

@media (max-width: 767px) {
	.jdk-pp { --jdk-pp-marge-x: 20px; }

	/* ⛔ MESURE : a 390px le bloc de texte du hero fait 603px a lui seul, les
	   boutons s empilant et les gages passant sur deux lignes. En-tete
	   comprise, le hero sortait a 865px pour 844 de viewport. Le rythme se
	   resserre : bloc a 567px, hero a 723px, total 844 — pile dans l ecran. */
	.jdk-pp__hero .jdk-pp__surtitre { margin-top: 10px; }
	.jdk-pp__hero .jdk-pp__h1 { margin-top: 10px; }
	.jdk-pp__hero .jdk-pp__filet { margin-top: 16px; }
	.jdk-pp__hero .jdk-pp__chapo { margin-top: 12px; }
	.jdk-pp__hero .jdk-pp__actions { margin-top: 20px; }
	.jdk-pp__hero .jdk-pp__gages { margin-top: 18px; }

	/* Le bloc etant plus haut ici, les paliers du voile remontent d autant :
	   le texte court jusqu a 607px depuis le bas, contre 577px sur grand
	   ecran. Mesure : pire contraste 5,64, photo conservee 37 %. */
	.jdk-pp__hero-voile {
		background:
			radial-gradient(700px 340px at 88% -10%, rgba(210, 175, 135, .08), transparent 62%),
			linear-gradient(0deg,
				rgba(10, 13, 17, .80) 0,
				rgba(10, 13, 17, .74) 600px,
				rgba(10, 13, 17, .52) 670px,
				rgba(10, 13, 17, .20) 750px,
				rgba(10, 13, 17, .08) 820px,
				rgba(10, 13, 17, .06) 100%);
	}

	/* ⛔ RESTAUREES : ces regles avaient ete emportees par une suppression
	   chirurgicale trop large lors du remplacement des anciens voiles mobiles.
	   Consequence mesuree a 390px : cartes et chiffres restaient sur DEUX
	   colonnes de 165px, et les boutons ne prenaient pas la largeur. */
	.jdk-pp__cartes--4,
	.jdk-pp__cartes--3,
	.jdk-pp__cartes--2,
	.jdk-pp__chiffres,
	.jdk-pp__reals,
	.jdk-pp__freins,
	.jdk-pp__aussi { grid-template-columns: minmax(0, 1fr); }

	.jdk-pp .jdk-pp__btn { justify-content: center; width: 100%; }

	.jdk-pp__actions { gap: 12px; }

	.jdk-pp__gages { gap: 10px 18px; }

	.jdk-pp__scene { padding-block: clamp(48px, 9vw, 72px); }
	.jdk-pp__panneau { padding: 22px 20px; }
	.jdk-pp__frise li { padding-left: 54px; }
	.jdk-pp__frise-num { width: 36px; height: 36px; font-size: 14px; }
	.jdk-pp__frise::before { left: 18px; }

	/* ⛔ MESURE : la pastille est un enfant direct de la scene, qui est en
	   `flex`. La repasser en `position: static` en faisait un SECOND element
	   flex, place a cote du contenu : le panneau tombait a 177px de large sur
	   390px de viewport. La scene passe donc en `block`, et les deux blocs
	   s empilent. */
	.jdk-pp__scene { display: block; }

	.jdk-pp__scene-badge {
		position: static;
		display: inline-flex;
		margin: 18px var(--jdk-pp-marge-x) 0;
	}

}

@media (prefers-reduced-motion: reduce) {
	.jdk-pp *,
	.jdk-pp *::before,
	.jdk-pp *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ==========================================================================
   Correctifs du 2026-08-20. Poses ICI, en une fois, parce que cette feuille
   est partagee par NEUF pages : les corriger page par page aurait diverge.
   ========================================================================== */

/* 1. Entre 768 et 1024 px, `.jdk-pp__modele` bascule sur UNE colonne et la
   liste s etale sur 705 px, soit une centaine de caracteres par ligne.
   ⛔ On ne la BRIDE pas : un max-width creerait le vide a droite que le
   client refuse. On la passe en DEUX colonnes — la largeur reste occupee et
   la ligne redevient courte. Ce bloc est en fin de feuille : a specificite
   egale il passe apres le @media (max-width: 1024px) qui precede. */
@media (min-width: 768px) and (max-width: 1024px) {
	/* ⛔ La liste n etait que la partie visible du probleme : dans cette plage
	   TOUS les paragraphes du modele s etalaient sur 837 px, soit 112 caracteres
	   par ligne, mesures sur les neuf pages. La vraie cause est la bascule du
	   modele sur UNE colonne des 1024 px, trop tot. On le maintient a DEUX
	   colonnes : le texte retombe autour de 55 caracteres et l image occupe
	   l autre moitie, donc aucune zone vide n apparait. */
	.jdk-pp__modele,
	.jdk-pp__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	/* Meme plage, meme cause : le panneau de scene cessait d etre une colonne
	   bornee et occupait toute la largeur, 777 px, soit 111 caracteres par
	   ligne. On lui rend sa largeur de lecture de 620 px, celle qu il a en
	   grand ecran. ⭐ Ici la contrainte de largeur ne cree AUCUN vide : ce qui
	   apparait a cote du panneau, c est la photo de la scene. */
	.jdk-pp__panneau { max-width: 620px; margin-left: auto; }
}

/* 2. La sourdine #9AA0A0 ne tient PAS le contraste AA sur une PHOTO, meme
   sous le voile le plus dense du systeme : mesure 3,14 sur le bandeau final
   et 3,21 sur la frise de pied. Sur fond plein elle reste conforme et ne
   bouge donc pas ; on ne la remplace que dans un contexte photographique,
   ou la couleur de texte remonte la meme mesure a 5,71.
   Specificite (0,2,0) contre (0,1,0) : la surcharge passe sans !important. */
.jdk-pp__hero .jdk-pp__mention,
.jdk-pp__scene .jdk-pp__mention,
.jdk-pp__final .jdk-pp__mention,
.jdk-pp__hero .jdk-pp__frise-pied,
.jdk-pp__scene .jdk-pp__frise-pied,
.jdk-pp__final .jdk-pp__frise-pied { color: var(--jdk-pp-texte); }

/* 3. Les listes et encadres poses en enfant DIRECT du cadre, hors modele et
   hors duo, prennent toute sa largeur : 772 px a 1024, soit 114 caracteres
   par ligne (mesure sur la page 580, section urbanisme).
   ⭐ La liste passe en DEUX colonnes des qu il y a la place : la largeur
   reste occupee et la ligne redevient courte. L encadre, lui, est un bloc
   d alerte a filet : il garde une largeur de lecture, ce qui est sa forme
   normale et non un vide subi. */
@media (min-width: 700px) {
	.jdk-pp__cadre > .jdk-pp__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px; }
}
.jdk-pp__cadre > .jdk-pp__encadre { max-width: 62ch; }