/* ==========================================================================
   Accueil JDK Concept, autonome (sans Elementor).
   Contenu de la production, exécution modernisée : houle de fonds sombres,
   sur-titres Oswald or, titres Roboto, révélations douces au défilement.
   Rayon 0 : rendu v1 cohérent avec le reste du site tant que le kit figé
   impose le sien ; à passer à 5px en phase DA.
   ========================================================================== */
.jdk-acc,
.jdk-acc * { box-sizing: border-box; }

.jdk-acc {
	font-family: "Montserrat", sans-serif;
	color: #D8D5D5;
	background-color: #1B1B1B;
	overflow-x: clip;
}

.jdk-acc-wrap {
	max-width: 1180px;
	margin-inline: auto;
	padding: clamp(56px, 8vw, 96px) 24px;
}

/* --- houle des fonds : jamais deux fonds identiques qui se suivent --- */
.jdk-acc-sec { position: relative; background-color: #1B1B1B; }
.jdk-acc-sec--fonce { background-color: #161616; }
.jdk-acc-sec .jdk-acc-wrap { position: relative; z-index: 1; }

/* image d'ambiance en fond de section, sous un voile sombre */
.jdk-acc-fond { position: absolute; inset: 0; }
.jdk-acc-fond img { width: 100%; height: 100%; object-fit: cover; display: block; }

.jdk-acc-fond-voile {
	position: absolute;
	inset: 0;
	background: radial-gradient(900px 420px at 15% 0%, rgba(210, 175, 135, .10), transparent 60%),
		linear-gradient(180deg, rgba(17, 20, 24, .93), rgba(17, 20, 24, .88));
}

/* --- en-têtes de section --- */
.jdk-acc-eyebrow {
	margin: 0 0 12px;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #D2AF87;
}

.jdk-acc-titre {
	margin: 0;
	font-family: "Roboto", sans-serif;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	color: #FFFAFA;
}

.jdk-acc-chapo {
	margin: 16px 0 0;
	max-width: 72ch;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.7;
}

.jdk-acc-tete { margin-bottom: clamp(28px, 4vw, 44px); }

.jdk-acc p { line-height: 1.75; }

/* --- boutons --- */
.jdk-acc-btn {
	display: inline-block;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: 0;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s, transform .25s;
}

.jdk-acc-btn--or { background-color: #D2AF87; border-color: #D2AF87; color: #1B1B1B; }
.jdk-acc-btn--or:hover { background-color: #E0C4A3; border-color: #E0C4A3; color: #1B1B1B; }
.jdk-acc-btn--ghost { background-color: transparent; border-color: rgba(255, 255, 255, .35); color: #FFFAFA; }
.jdk-acc-btn--ghost:hover { border-color: #D2AF87; color: #D2AF87; background-color: transparent; }
.jdk-acc-btn:active { transform: translateY(1px); }
.jdk-acc-btn:focus-visible { outline: 2px solid #D2AF87; outline-offset: 3px; }

.jdk-acc-centre { text-align: center; margin: 36px 0 0; }

.jdk-acc-plus {
	display: inline-block;
	margin-top: 10px;
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #D2AF87;
	text-decoration: none;
	transition: transform .25s;
}

.jdk-acc-plus:hover { transform: translateX(3px); }

/* --- 1. hero --- */
.jdk-acc-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 88vh, 860px);
	overflow: hidden;
	background: linear-gradient(135deg, #11161C, #1B1B1B);
}

/* ⛔ isolation OBLIGATOIRE : les diapositives portent des z-index (1 et 2)
   pour que le fondu croisé ne creuse pas, et le voile comme le bloc de contenu
   sont en z-index auto. Sans contexte d'empilement propre au slider, la
   diapositive active passe AU-DESSUS du voile et du texte, et le hero se
   retrouve nu. Mesuré : elementFromPoint au centre du hero renvoyait l'image. */
.jdk-acc-hero__slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	isolation: isolate;
}

.jdk-acc-diapo {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	opacity: 0;
	will-change: opacity;
}

/* ⛔ Le fondu croisé ne fait monter QUE l'entrante, par-dessus la sortante
   restée opaque : si les deux opacités se croisent, leur somme composite passe
   sous 1 au milieu du fondu et la luminosité se creuse visiblement.
   La sortante porte est-precedente le temps du fondu, puis la classe tombe. */
.jdk-acc-diapo.est-active {
	opacity: 1;
	z-index: 2;
	transition: opacity 1.4s cubic-bezier(.33, 0, .2, 1);
}

.jdk-acc-diapo.est-precedente { opacity: 1; z-index: 1; }

.jdk-acc-diapo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.001);
	will-change: transform;
}

/* Respiration lente de l'image active.
   ⛔ La durée est CALÉE SUR LE CYCLE (6s) : quand elle valait 5,2s pour un
   cycle de 4s, le retrait de est-active supprimait l'animation et le transform
   retombait d'un coup de 1,047 à 1,001, en pleine sortie. C'était LA saccade.
   Le JavaScript fige en plus la valeur exacte au moment de la sortie, pour que
   même un clic sur une flèche en milieu de course ne produise aucun bond. */
.jdk-acc-diapo.est-active img { animation: jdkAccKen 6s linear forwards; }

@keyframes jdkAccKen {
	from { transform: scale(1.001); }
	to   { transform: scale(1.06); }
}

/* --- pilotage du diaporama, en bas à droite : étiquette puis flèches --- */
.jdk-acc-hero__pilote {
	position: absolute;
	right: clamp(16px, 3vw, 40px);
	bottom: 18px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 20px);
}

/* règle compagnon indispensable : les flèches sont masquées par l'attribut
   hidden tant que le JavaScript ne les a pas branchées, et toute règle auteur
   posant un display l'écraserait sans bruit */
.jdk-acc-hero__pilote [hidden] { display: none; }

.jdk-acc-hero__etiquette {
	position: static;
	margin: 0;
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 250, 250, .82);
}

.jdk-acc-hero__fleches { display: flex; gap: 8px; }

.jdk-acc-hero__fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 250, 250, .45);
	border-radius: 0;
	background-color: rgba(16, 19, 22, .42);
	color: #FFFAFA;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.jdk-acc-hero__fleche svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ⛔ Le reset de Hello Elementor peint les boutons en rose #CC3366 au survol
   ET au focus, en (0,2,0) : tout bouton maison doit redéclarer fond ET couleur
   en (0,3,0), sur :hover ET :focus. */
.jdk-acc-hero__pilote .jdk-acc-hero__fleche:hover,
.jdk-acc-hero__pilote .jdk-acc-hero__fleche:focus,
.jdk-acc-hero__pilote .jdk-acc-hero__fleche:focus-visible {
	background-color: #D2AF87;
	border-color: #D2AF87;
	color: #1B1B1B;
}

.jdk-acc-hero__pilote .jdk-acc-hero__fleche:focus-visible {
	outline: 2px solid #FFFAFA;
	outline-offset: 2px;
}

@media (max-width: 680px) {
	/* l'étiquette est purement ornementale (aria-hidden) : sur un téléphone
	   elle poussait le pilote sur 354px de large, à 10px du bord gauche.
	   Seules les flèches restent, elles sont la commande utile. */
	.jdk-acc-hero__etiquette { display: none; }
	.jdk-acc-hero__pilote { gap: 10px; }
	.jdk-acc-hero__fleche { width: 38px; height: 38px; }
}

/* Voile vertical, dense en bas : le contenu étant aligné en bas, c'est là que
   la lisibilité se joue. Le haut du cadre reste ouvert pour que la photo
   respire, un voile uniforme éteindrait l'image.

   ⛔ Aligner le contenu en bas a REMONTÉ le haut du bloc de texte dans le ciel
   clair : contraste mesuré à 2,97 sur l'image réelle, sous le seuil. C'est le
   DÉGRADÉ LINÉAIRE qui porte la lisibilité, parce qu'il est le seul calque
   modélisable exactement ; les deux radiaux ne font qu'ajouter de la
   profondeur. ⚠️ À re-mesurer à chaque ajout de contenu dans le hero. */
.jdk-acc-hero__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(1100px 460px at 84% -12%, rgba(210, 175, 135, .14), transparent 62%),
		radial-gradient(120% 78% at 6% 104%, rgba(9, 12, 16, .70), transparent 64%),
		linear-gradient(180deg, rgba(11, 14, 19, .30) 0%, rgba(11, 14, 19, .30) 16%, rgba(10, 13, 17, .60) 40%, rgba(10, 13, 17, .80) 74%, rgba(9, 12, 16, .94) 100%);
}

.jdk-acc-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding: 150px 24px 104px;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 396px);
	gap: clamp(28px, 3.4vw, 56px);
	align-items: end;
}

.jdk-acc-hero__texte { min-width: 0; }

/* filet or sous le titre, comme le filet de La Loco */
.jdk-acc-hero__filet {
	display: block;
	width: 64px;
	height: 2px;
	margin: 26px 0 0;
	background-color: #D2AF87;
}

.jdk-acc-hero__h1 {
	margin: 0;
	max-width: 17ch;
	font-family: "Roboto", sans-serif;
	font-size: clamp(34px, 5vw, 60px);
	font-weight: 800;
	line-height: 1.06;
	color: #FFFAFA;
}

.jdk-acc-hero__sub {
	margin: 22px 0 0;
	max-width: 52ch;
	font-size: clamp(16px, 1.6vw, 19px);
	line-height: 1.65;
	color: #E9E6E0;
}

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

/* Panneau de repères en verre, à droite du titre.
   ⛔ Aucune bordure colorée ni liseré d'accent : le client de La Loco a jugé
   ce signal « trop cliché IA ». Les séparateurs sont des filets blancs très
   légers, la profondeur vient du fond translucide et du flou. */
.jdk-acc-hero__panneau {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: rgba(10, 13, 17, .56);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
}

.jdk-acc-hero__atout {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(20px, 2vw, 26px);
}

.jdk-acc-hero__atout:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .13); }
.jdk-acc-hero__atout:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .13); }

.jdk-acc-hero__atout .ic {
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: #D2AF87;
}

.jdk-acc-hero__atout .ic svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.jdk-acc-hero__atout-nom {
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.35;
	color: #FFFAFA;
}

@media (max-width: 980px) {
	.jdk-acc-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.jdk-acc-hero__panneau { max-width: 560px; }
}

/* --- 2. intro et piliers --- */
.jdk-acc-intro {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

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

.jdk-acc-piliers li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, .12);
	background-color: #161A1F;
	color: #FFFAFA;
	font-weight: 500;
	transition: border-color .3s, transform .3s;
}

.jdk-acc-piliers li:hover { border-color: rgba(210, 175, 135, .5); transform: translateX(4px); }

/* pictogrammes : relief doux, réaction au survol, apparition en ressort */
.jdk-acc .ic {
	display: inline-flex;
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(210, 175, 135, .45);
	background: linear-gradient(160deg, rgba(210, 175, 135, .16), rgba(210, 175, 135, .04) 55%, rgba(255, 255, 255, .02));
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .08);
	color: #D2AF87;
	transition: transform .35s ease, border-color .35s, box-shadow .35s;
}

.jdk-acc .ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s ease; }

.jdk-acc-atout:hover .ic,
.jdk-acc-piliers li:hover .ic {
	transform: translateY(-4px) scale(1.06);
	border-color: #D2AF87;
	box-shadow: 0 16px 30px -12px rgba(210, 175, 135, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.jdk-acc-atout:hover .ic svg,
.jdk-acc-piliers li:hover .ic svg { transform: rotate(-6deg) scale(1.05); }

@keyframes jdkAccPop {
	from { transform: scale(.55); opacity: 0; }
	to   { transform: none; opacity: 1; }
}

.jdk-rev-init [data-rev].est-vu .ic { animation: jdkAccPop .55s cubic-bezier(.34, 1.56, .64, 1) .12s backwards; }

/* --- 3. extension, avant/après --- */
.jdk-acc-duocol {
	display: grid;
	grid-template-columns: 1.02fr .98fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.jdk-acc-points {
	margin: 22px 0 28px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.jdk-acc-points li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.6; }
.jdk-acc-points li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 4px; stroke: #D2AF87; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.jdk-acc-ba-note { margin: 12px 0 0; font-size: .82rem; opacity: .7; }

/* la colonne du comparateur occupe toute la hauteur de la colonne de texte :
   plus de vide au-dessus ni en dessous, la section est équilibrée */
.jdk-acc-sec--extension .jdk-acc-duocol { align-items: stretch; }
.jdk-acc-duocol__media { display: flex; flex-direction: column; justify-content: center; }
.jdk-acc-duocol__media .jdk-aa { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0; }
.jdk-acc-sec--extension .jdk-real-ba { flex: 1 1 auto; max-width: none; margin: 0; aspect-ratio: auto; min-height: 440px; }
.jdk-aa-note { flex: 0 0 auto; margin: 12px 0 0; font-size: .82rem; opacity: .7; }

@media (max-width: 900px) {
	.jdk-acc-sec--extension .jdk-real-ba { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --- 4. logos : la bande vient du shortcode [jdk_logos], style embarqué --- */
.jdk-acc-sec--logos .jdk-acc-wrap { padding-bottom: clamp(48px, 6vw, 72px); }

/* --- 6. sur-mesure : accordéons à gauche, vidéo d'ambiance à droite --- */
.jdk-acc-duocol--surmesure { align-items: stretch; }

.jdk-acc-surmesure-cta { margin: 32px 0 0; }

.jdk-acc-videofond {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	border: 1px solid rgba(255, 255, 255, .14);
	background-color: #0d1116;
}

/* l'iframe garde le ratio 16/9 du lecteur et couvre tout le panneau :
   aucune bande noire, quelle que soit la hauteur de la colonne */
.jdk-acc-videofond iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	aspect-ratio: 16 / 9;
	width: auto;
	height: auto;
	min-width: 101%;
	min-height: 101%;
	border: 0;
	pointer-events: none;
}

.jdk-acc-videofond .voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(13, 17, 22, .12), rgba(13, 17, 22, .34));
}

@media (max-width: 900px) {
	.jdk-acc-videofond { min-height: 240px; aspect-ratio: 16 / 9; }
}

/* --- 6. plis (accordéons natifs) --- */
.jdk-acc-plis { display: grid; gap: 14px; max-width: 920px; }

.jdk-acc-pli {
	border: 1px solid rgba(255, 255, 255, .14);
	background-color: #161A1F;
	transition: border-color .3s;
}

.jdk-acc-pli[open],
.jdk-acc-pli:hover { border-color: rgba(210, 175, 135, .45); }

.jdk-acc-pli summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	cursor: pointer;
	list-style: none;
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	font-size: clamp(15px, 1.5vw, 17px);
	color: #FFFAFA;
}

.jdk-acc-pli summary::-webkit-details-marker { display: none; }

.jdk-acc-pli__signe { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.jdk-acc-pli__signe::before,
.jdk-acc-pli__signe::after { content: ""; position: absolute; inset: 6px 0; background: #D2AF87; transition: transform .3s; }
.jdk-acc-pli__signe::after { transform: rotate(90deg); }
.jdk-acc-pli[open] .jdk-acc-pli__signe::after { transform: rotate(0deg); }

.jdk-acc-pli__corps { padding: 0 22px 22px; }
.jdk-acc-pli__corps h3 { margin: 0 0 10px; font-family: "Roboto", sans-serif; font-size: 1.02rem; color: #D2AF87; }
.jdk-acc-pli__corps p { margin: 0; }

/* --- 7. atouts --- */
.jdk-acc-atouts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }

.jdk-acc-atout {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid rgba(255, 255, 255, .12);
	background-color: #1B1B1B;
	transition: border-color .3s, transform .3s;
}

.jdk-acc-atout:hover { border-color: rgba(210, 175, 135, .5); transform: translateY(-4px); }

/* titres de cartes affirmés : plus grands, soulignés d'un trait or vivant */
.jdk-acc-atout h3,
.jdk-acc-studios h3 {
	position: relative;
	margin: 18px 0 14px;
	padding-bottom: 12px;
	font-family: "Roboto", sans-serif;
	font-size: clamp(1.25rem, 1.8vw, 1.45rem);
	font-weight: 700;
	color: #FFFAFA;
}

.jdk-acc-atout h3::after,
.jdk-acc-studios h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 2px;
	background: linear-gradient(90deg, #D2AF87, rgba(210, 175, 135, 0));
	transition: width .35s ease;
}

.jdk-acc-atout:hover h3::after,
.jdk-acc-studios article:hover h3::after { width: 86px; }

.jdk-acc-atout p { margin: 0; }

/* --- 8. studios et bannières --- */
.jdk-acc-studios { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); margin-bottom: clamp(28px, 4vw, 44px); }
.jdk-acc-studios h3 { margin-top: 0; }
.jdk-acc-studios p { margin: 0; }

.jdk-acc-bannieres { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }

.jdk-acc-banniere {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 240px;
	padding: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	text-decoration: none;
	transition: border-color .3s;
}

.jdk-acc-banniere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jdk-acc-banniere:hover img { transform: scale(1.06); }
.jdk-acc-banniere:hover { border-color: rgba(210, 175, 135, .55); }
.jdk-acc-banniere .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 15, .04) 30%, rgba(10, 12, 15, .88) 100%); }
.jdk-acc-banniere .titre { position: relative; font-family: "Roboto", sans-serif; font-size: 1.08rem; font-weight: 600; color: #FFFAFA; }
.jdk-acc-banniere .jdk-acc-plus { position: relative; }

/* --- 9. prose collectif --- */
.jdk-acc-prose p { margin: 0 0 16px; }
@media (min-width: 900px) {
	.jdk-acc-sec--collectif .jdk-acc-prose > p { columns: 2; column-gap: 48px; }
}

/* --- 10. DRESS --- */
.jdk-acc-dress { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px); }

.jdk-acc-dresscarte {
	position: relative;
	overflow: hidden;
	padding: 26px 20px 22px;
	border: 1px solid rgba(255, 255, 255, .12);
	background-color: #161A1F;
	background-size: cover;
	background-position: center;
	background-blend-mode: soft-light;
	transition: border-color .3s, transform .3s;
}

.jdk-acc-dresscarte:hover { border-color: rgba(210, 175, 135, .55); transform: translateY(-5px); }

.jdk-acc-dresscarte .lettre {
	position: absolute;
	top: -18px;
	right: 2px;
	font-family: "Roboto", sans-serif;
	font-size: 96px;
	font-weight: 800;
	line-height: 1;
	color: rgba(210, 175, 135, .16);
}

.jdk-acc-dresscarte h3 { position: relative; margin: 0 0 10px; font-family: "Roboto", sans-serif; font-size: 1rem; color: #D2AF87; }
.jdk-acc-dresscarte p { position: relative; margin: 0; font-size: .88rem; line-height: 1.6; }

/* --- 11. témoignage vidéo --- */
.jdk-acc-duocol--video { align-items: center; }

.jdk-acc-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .14);
	background-color: #0d1116;
}

.jdk-acc-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s, opacity .3s; }
.jdk-acc-video:hover img { transform: scale(1.03); }

.jdk-acc-video__lire {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border: 0;
	background: linear-gradient(180deg, rgba(10, 12, 15, .1), rgba(10, 12, 15, .55));
	color: #FFFAFA;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.jdk-acc-video__lire .ic { width: 64px; height: 64px; border-color: #D2AF87; background: rgba(27, 27, 27, .6); transition: transform .3s, background-color .3s; }
.jdk-acc-video__lire .ic svg { width: 30px; height: 30px; }
.jdk-acc-video__lire:hover .ic { transform: scale(1.08); background: #D2AF87; color: #1B1B1B; }
.jdk-acc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- 15. appel final --- */
.jdk-acc-final {
	background:
		radial-gradient(900px 420px at 85% 0%, rgba(210, 175, 135, .14), transparent 60%),
		linear-gradient(135deg, #161616, #1B1B1B);
	border-top: 1px solid rgba(210, 175, 135, .3);
	text-align: center;
}

.jdk-acc-final h2 { margin: 0; font-family: "Roboto", sans-serif; font-size: clamp(26px, 3vw, 38px); color: #FFFAFA; }
.jdk-acc-final p { margin: 14px auto 0; max-width: 58ch; }
.jdk-acc-final .jdk-acc-hero__cta { justify-content: center; }

/* --- révélation au défilement : uniquement quand le JavaScript est là --- */
.jdk-rev-init [data-rev] { opacity: 0; transform: translateY(14px); }
.jdk-rev-init [data-rev].est-vu { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }

/* --- harmonisation des boucles vivantes sur cette page --- */
.jdk-acc .jdk-arch-latest { background: none; padding: 0; }
.jdk-acc .jdk-acc-sec--realisations .jdk-acc-wrap > section { padding: 0; }

/* --- petits écrans --- */
@media (max-width: 1024px) {
	.jdk-acc-dress { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.jdk-acc-intro,
	.jdk-acc-duocol { grid-template-columns: 1fr; }
	.jdk-acc-duocol__media { order: -1; }
	.jdk-acc-atouts,
	.jdk-acc-studios { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.jdk-acc-hero { min-height: 78vh; }
	/* le retrait bas réserve l'air au-dessus des flèches du diaporama :
	   mesuré à 56px, le contenu touchait le pilote à 0px */
	.jdk-acc-hero__inner { padding: 110px 20px 96px; }
	.jdk-acc-hero__panneau { max-width: none; }
	.jdk-acc-hero__atout { gap: 9px; }
	.jdk-acc-bannieres { grid-template-columns: 1fr; }
	.jdk-acc-banniere { min-height: 190px; }
	.jdk-acc-dress { grid-template-columns: 1fr 1fr; }
	.jdk-acc-marquee img { max-height: 40px; }
}

@media (max-width: 480px) {
	.jdk-acc-dress { grid-template-columns: 1fr; }
}

/* --- animations coupées à la demande --- */
@media (prefers-reduced-motion: reduce) {
	.jdk-acc-marquee ul { animation: none; }
	.jdk-acc-marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
	.jdk-rev-init [data-rev] { opacity: 1; transform: none; transition: none; }
	.jdk-acc *, .jdk-acc *::after, .jdk-acc *::before { transition: none !important; animation-duration: .01s !important; }
}


/* ==========================================================================
   Separateurs de sections de l accueil : LE FILET INTERROMPU

   Reecrits le 2026-08-22. L ancien mu-plugin jdk-home-sep visait un
   selecteur Elementor et ne dessinait plus rien depuis la depose : la
   page avait perdu ses filets sans que cela se voie.

   DEMANDE DU CLIENT : un motif DISTINCT des autres pages, et RAFFINE.
   Les 24 pages de service portent deja leur separateur, declare dans
   jdk-service.css : un filet PLEINE LARGEUR coupe au centre par un
   losange de 9 px. Le reprendre ici serait redondant.

   Trois partis auront ete essayes avant celui-ci :
     - la CANNELURE, sept nervures verticales : REFUSEE, trop mecanique ;
     - le DOUBLE FILET, deux traits inegaux : pose puis abandonne ;
     - le FILET INTERROMPU, retenu le 22/08.

   Le trait s ecarte au centre et laisse un VIDE de douze pour cent de sa
   largeur ; un point de 3 px habite ce vide. L accent est l absence.
   Deux choses le distinguent du separateur des pages de service : il ne
   fait jamais la pleine largeur, et son accent central est un CARRE de
   3 px, non tourne, la ou celui des pages de service est un losange de 9.

   Pseudo-elements ABSOLUS : hauteur zero dans le flux, donc aucune bande
   ni aucun vide ajoute entre les sections.
   Le hero n est jamais concerne, le selecteur portant sur * + *.
   La section finale etait en position static : passee en relative, sans
   effet mesure, elle ne contient aucun enfant absolu.
   ========================================================================== */

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

.jdk-acc > * + *::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(520px, 82vw);
	height: 1px;
	transform: translate(-50%, -50%);
	z-index: 6;
	pointer-events: none;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(210, 175, 135, .30) 34%,
		transparent 44%,
		transparent 56%,
		rgba(210, 175, 135, .30) 66%,
		transparent 100%);
}

.jdk-acc > * + *::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 3px;
	height: 3px;
	transform: translate(-50%, -50%);
	z-index: 7;
	pointer-events: none;
	background-color: #D2AF87;
}