/* ==========================================================================
   Composants JDK Concept - reconstruits a l'identique le 2026-08-18
   Remplacent les widgets des extensions Unlimited Elements et Premium Addons.
   Valeurs relevees sur le rendu de production, pas reinventees.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Carte a revelation au survol
   remplace : ucaddon_hover_text_reveal_content_box (Unlimited Elements)
   -------------------------------------------------------------------------- */
.jdk-reveal,
.jdk-reveal * { box-sizing: border-box; }

.jdk-reveal { overflow: hidden; direction: ltr; }

.jdk-reveal__holder { position: relative; overflow: hidden; text-align: left; }

.jdk-reveal__box { position: relative; }

.jdk-reveal__image {
	position: relative;
	width: 100%;
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #6a6a6a;
}

.jdk-reveal__overlay {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	width: 100%; height: 100%;
	z-index: 2;
	opacity: .6;
	transition: 1s;
}

.jdk-reveal__holder:hover .jdk-reveal__overlay { opacity: .4; }

.jdk-reveal__content {
	position: absolute;
	left: 0; bottom: 0;
	margin: 0;
	width: 100%; height: 100%;
	z-index: 3;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
	transition: .5s;
	transform: translateY(10px);
}

.jdk-reveal__open { transition: .5s; }
.jdk-reveal__holder:hover .jdk-reveal__open { transform: translateY(-10px); }

.jdk-reveal__title {
	transition: .5s;
	font-family: "Roboto", sans-serif;
	font-size: clamp(2.2rem, 1.8rem + 2.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.2em;
	color: #D2AF87;
}

.jdk-reveal__hidden {
	overflow: hidden;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: .5s;
	max-height: 0;
	opacity: 0;
}

.jdk-reveal__holder:hover .jdk-reveal__hidden {
	max-height: 100%;
	transform: scaleY(1);
	overflow: visible;
	opacity: 1;
}

.jdk-reveal__desc {
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: clamp(0.9rem, 0.88rem + 0.2vw, 0.95rem);
}

.jdk-reveal__desc p { margin: 0; }

@media (max-width: 1024px) {
	.jdk-reveal__desc { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Banniere image avec texte revele au survol
   remplace : premium-addon-banner (Premium Addons), animation1 + zoomin
   -------------------------------------------------------------------------- */
.jdk-banniere {
	position: relative;
	overflow: hidden;
	width: 100%;
	border: 1px solid #D2AF878C;
}

.jdk-banniere img {
	display: block;
	position: relative;
	min-width: 100%;
	max-width: 100%;
	height: auto;
	opacity: 1;
	transition: opacity .35s, transform .35s;
}

.jdk-banniere:hover img {
	opacity: .3;
	transform: translate3d(0, 0, 0) scale(1.1);
}

.jdk-banniere__desc {
	position: absolute;
	left: 0; bottom: 0; top: auto;
	width: 100%;
	min-height: 25%;
	height: auto;
	max-height: 100%;
	padding: 15px;
	text-align: left;
	z-index: 2;
}

.jdk-banniere__titre,
.jdk-banniere__contenu {
	transform: translate3d(0, 40px, 0);
	transition-delay: 50ms;
	transition-duration: .35s;
}

.jdk-banniere__titre {
	margin: 0;
	background: none;
	color: #FFFAFA;
	font-family: "Roboto", sans-serif;
	font-size: clamp(2.2rem, 1.8rem + 2.5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.2em;
	transition: transform .35s;
}

.jdk-banniere__contenu {
	margin-top: 10px;
	opacity: 0;
	font-family: "Montserrat", sans-serif;
	font-size: clamp(0.98rem, 0.92rem + 0.2vw, 1.3rem);
	font-weight: 400;
	transition: opacity .2s, transform .35s;
}

.jdk-banniere__contenu p { margin: 0; }

.jdk-banniere:hover .jdk-banniere__titre,
.jdk-banniere:hover .jdk-banniere__contenu {
	transform: translate3d(0, 0, 0);
	transition-delay: 50ms;
	transition-duration: .35s;
}

.jdk-banniere:hover .jdk-banniere__contenu { opacity: 1; }

.jdk-banniere__lien {
	position: absolute;
	left: 0; top: 0;
	display: block;
	width: 100%; height: 100%;
	z-index: 1000;
	font-size: 0;
	opacity: 0;
}


/* --- largeur du main : les paliers de Hello Elementor (500/600/800/1140) ne
   correspondent pas au rendu de la production. Un contenu classique garde une
   boite stable de 1140px (comme le modele 2200) ; les pages figees et les
   gabarits pleine largeur (.jdk-main--pleine) la levent. --- */
main#content.jdk-main { width: 100%; max-width: 1140px; margin-inline: auto; }
main#content.jdk-main--pleine { max-width: none; margin-inline: 0; padding-inline: 0; }


/* --- Texte reserve aux lecteurs d ecran.
   2026-08-21 : REPRIS de theme.css de Hello Elementor, qui n etait charge
   que pour ces deux regles (5 Ko pour 2 regles utiles). La feuille du parent
   est desormais desenfilee par jdk-theme-allege.php.
   ⛔ Le bloc :focus est INDISPENSABLE : sans lui, le lien d evitement
   « Aller au contenu » reste invisible au clavier. --- */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #333;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 12px 24px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ============================================================================
 * ARCHIVES : conteneur et colonne de lecture — posé le 2026-08-22
 *
 * ⛔ LE CONSTAT, mesuré à 1440 px sur /actualites-maison-container/ :
 *   #content, .page-header, h1, .page-content et article.post étaient TOUS à
 *   gauche = 0 sur 1425 px de large. Aucun conteneur.
 *   Lignes réelles mesurées par Range.getClientRects() : **179 caractères par
 *   ligne en moyenne, jusqu'à 198**, contre **63** sur une page de service.
 *   Presque trois fois trop large.
 *
 * ⚠️ Ce n'était pas une régression : le gabarit de Hello Elementor n'avait
 * aucun conteneur, et il a été reproduit fidèlement lors du passage du thème
 * en autonomie. Le défaut est donc d'origine.
 *
 * ⭐ LE CADRE REPREND CELUI DU RESTE DU SITE : 1180 px, marge intérieure 24 px,
 * centré — exactement .jdk-pp__cadre. ⚠️ Les variables --jdk-pp-* vivent dans
 * jdk-service.css, qui n'est PAS chargée sur les archives : les valeurs sont
 * donc écrites en clair ici. Si le cadre du site change, penser à cet endroit.
 *
 * ⭐ POURQUOI DEUX COLONNES, ET NON UNE COLONNE ÉTROITE CENTRÉE
 * Une colonne de lecture de 70ch dans un cadre de 1180 laisserait plus de
 * 400 px de vide à droite. L'image à gauche et le texte à droite occupent le
 * cadre entier tout en gardant une ligne lisible.
 * ========================================================================= */

.jdk-archive {
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 24px;
}

.jdk-archive .page-header {
	margin: 0 0 44px;
}

.jdk-archive .page-header .entry-title {
	margin: 0;
	max-width: 24ch;
	line-height: 1.15;
}

.jdk-archive .archive-description {
	max-width: 68ch;
	margin: 14px 0 0;
}

.jdk-archive .page-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* --- Une entrée de liste : visuel à gauche, texte à droite --- */
.jdk-archive article.post {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 28px;
	align-items: start;
	margin: 0;
	padding: 0 0 40px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.jdk-archive article.post:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* ⚠️ L'image est le PREMIER enfant visuel mais le SECOND dans le HTML : le
   gabarit sort le titre avant la vignette. On la replace sans toucher au
   balisage, qui garde ainsi un ordre de lecture correct pour un lecteur
   d'écran. */
.jdk-archive article.post > a:has(img) {
	grid-column: 1;
	grid-row: 1 / span 3;
	display: block;
}

.jdk-archive article.post .entry-title,
.jdk-archive article.post p {
	grid-column: 2;
}

.jdk-archive article.post img {
	display: block;
	width: 100%;
	height: auto;
}

/* ⚠️ Aucun border-radius ici : jdk-noradius.php injecte en ligne
   `*, ::before, ::after { border-radius: 0 !important }`. La charte du site est
   a angles vifs. Une declaration de rayon serait ecrasee, donc trompeuse. */

.jdk-archive article.post .entry-title {
	margin: 0 0 10px;
	max-width: 26ch;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.22;
}

.jdk-archive article.post p {
	margin: 0;
	max-width: 68ch;
}

/* --- Pas de vignette : le texte occupe toute la largeur du cadre --- */
.jdk-archive article.post:not(:has(img)) {
	display: block;
}

.jdk-archive article.post:not(:has(img)) .entry-title,
.jdk-archive article.post:not(:has(img)) p {
	max-width: 68ch;
}

/* --- Archive sans contenu --- */
.jdk-archive .jdk-archive-vide {
	max-width: 68ch;
}

.jdk-archive .jdk-archive-vide p {
	margin: 0 0 12px;
}

/* --- Pagination --- */
.jdk-archive .pagination {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 48px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.jdk-archive .pagination .nav-next {
	margin-inline-start: auto;
	text-align: right;
}

/* --- Sous 900 px : une seule colonne --- */
@media (max-width: 900px) {
	.jdk-archive article.post {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.jdk-archive article.post > a:has(img) {
		grid-column: 1;
		grid-row: auto;
		order: -1;
	}

	.jdk-archive article.post .entry-title,
	.jdk-archive article.post p {
		grid-column: 1;
	}
}

@media (max-width: 600px) {
	.jdk-archive {
		padding-inline: 18px;
	}

	.jdk-archive .page-header {
		margin-bottom: 28px;
	}

	.jdk-archive .page-content {
		gap: 28px;
	}

	.jdk-archive article.post {
		padding-bottom: 28px;
	}
}

/* ----------------------------------------------------------------------------
 * Archives, second passage — 2026-08-22
 * ------------------------------------------------------------------------- */

/* ⛔ Le titre etait COLLE au menu : ecart mesure = 0 px entre le bas de
   l'en-tete et le haut du h1. Une archive n'a pas de hero, contrairement aux
   pages de service : il lui faut donc son propre air. */
.jdk-archive {
	padding-block-start: clamp(32px, 4vw, 64px);
	padding-block-end: clamp(48px, 6vw, 88px);
}

/* ⛔⛔ Le reset repris de Hello Elementor peint TOUS les liens en rose :
   `a { color: #c36 }` et `a:hover { color: #336 }`. Hors charte. Le piege est
   deja documente dans jdk-entete.css, qui le neutralise pour ses boutons ;
   ici on le neutralise pour les archives.
   ⭐ Charte JDK : encre #1B1B1B, or #D2AF87. L'or sur fond clair ne donne
   qu'un contraste d'environ 1,9 : il est donc reserve aux fonds sombres, et
   le texte des archives reste a l'encre. */
.jdk-archive a {
	color: #1B1B1B;
}

.jdk-archive a:hover,
.jdk-archive a:focus-visible {
	color: #1B1B1B;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* Le lien qui enveloppe la vignette ne se souligne pas. */
.jdk-archive a:has(img),
.jdk-archive a:has(img):hover,
.jdk-archive a:has(img):focus-visible {
	text-decoration: none;
}

/* Le titre d'une entree ne se souligne qu'au survol. */
.jdk-archive article.post .entry-title a {
	text-decoration: none;
}

/* Les deux liens d'action gardent un soulignement permanent : ce sont des
   invitations, elles doivent se voir. */
.jdk-archive .jdk-archive-vide__lien,
.jdk-archive .pagination a {
	text-decoration: underline;
	text-underline-offset: 3px;
}