/* Mise en page des articles — Welding Design
   Charte : noir, blanc, craie #EFE7D8, craie soutenue #CBB893.
   Titres en Roboto Condensed, texte courant en Open Sans. */

:root {
	--wdr-art-noir: #000000;
	--wdr-art-craie: #efe7d8;
	--wdr-art-craie-soutenue: #cbb893;
	--wdr-art-texte: #4a4a4a;
	--wdr-art-gris: #666666;
	--wdr-art-filet: #e2ded6;
}

/* ---- Bandeau de titre ---- */
.wdr-art-hero .wdr-art-fil,
.wdr-art-hero .wdr-art-meta {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	color: #d8d5cf;
	margin: 0;
}
.wdr-art-hero .wdr-art-fil { font-size: 12px; color: #9a948a; margin-bottom: 18px; }
.wdr-art-hero .wdr-art-fil a { color: #9a948a; text-decoration: none; }
.wdr-art-hero .wdr-art-fil a:hover { color: var(--wdr-art-craie); }
.wdr-art-hero .wdr-art-fil span { color: var(--wdr-art-craie-soutenue); margin: 0 6px; }
.wdr-art-hero .wdr-art-etiquette {
	display: inline-block;
	background: var(--wdr-art-craie);
	color: var(--wdr-art-noir);
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 12px;
	margin-bottom: 20px;
}
.wdr-art-hero h1 {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.12;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #ffffff;
	margin: 0 0 18px;
	padding: 0;
}
.wdr-art-hero .wdr-art-meta span.sep { color: var(--wdr-art-craie-soutenue); margin: 0 6px; }

/* ---- Sommaire latéral ---- */
.wdr-sommaire { position: sticky; top: 24px; }
.wdr-sommaire-titre {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wdr-art-gris);
	margin: 0 0 16px;
}
.wdr-sommaire-liste { display: flex; flex-direction: column; border-top: 1px solid var(--wdr-art-filet); }
.wdr-sommaire-liste a {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.35;
	color: var(--wdr-art-gris);
	text-decoration: none;
	padding: 12px 10px 12px 14px;
	border-bottom: 1px solid var(--wdr-art-filet);
	transition: background .15s ease, color .15s ease;
}
.wdr-sommaire-liste a:hover { color: var(--wdr-art-noir); }
.wdr-sommaire-liste a.is-active { background: var(--wdr-art-craie); color: var(--wdr-art-noir); }
.wdr-sommaire-liste a:focus-visible { outline: 3px solid var(--wdr-art-noir); outline-offset: 2px; }
.wdr-sommaire-cta {
	display: block;
	margin-top: 28px;
	background: var(--wdr-art-noir);
	color: #ffffff !important;
	text-align: center;
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	padding: 17px 20px;
	text-decoration: none;
}
.wdr-sommaire-cta:hover { background: var(--wdr-art-craie-soutenue); color: var(--wdr-art-noir) !important; }
.wdr-sommaire-partage-titre { margin-top: 28px; }
.wdr-sommaire-partage { display: flex; gap: 8px; }
.wdr-sommaire-partage a,
.wdr-sommaire-partage button {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid #d9d5cd;
	background: transparent;
	color: var(--wdr-art-noir);
	cursor: pointer;
	padding: 0;
}
.wdr-sommaire-partage a:hover,
.wdr-sommaire-partage button:hover { background: var(--wdr-art-craie); }

/* ---- Corps de l'article ---- */
.wdr-article h2 {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wdr-art-noir) !important;
	margin: 52px 0 18px;
	padding: 0;
	scroll-margin-top: 110px;
}
.wdr-article h2:first-child { margin-top: 0; }
.wdr-article h3 {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wdr-art-noir) !important;
	margin: 32px 0 10px;
	padding: 0;
}
.wdr-article h4 {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 17px; font-weight: 700; color: var(--wdr-art-noir) !important;
	margin: 24px 0 8px; padding: 0;
}
.wdr-article p {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	color: var(--wdr-art-texte);
	margin: 0 0 18px;
	padding: 0;
}
.wdr-article > p:first-of-type { font-size: 19px; line-height: 1.75; color: #333333; }
.wdr-article ul, .wdr-article ol {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 15px; line-height: 1.8; color: var(--wdr-art-texte);
	margin: 0 0 22px; padding-left: 20px;
}
.wdr-article li { margin-bottom: 8px; }
.wdr-article a:not([class*="button"]):not(.et_pb_button) { color: var(--wdr-art-noir); text-decoration: underline; text-underline-offset: 3px; }
.wdr-article a:not([class*="button"]):not(.et_pb_button):hover { color: var(--wdr-art-gris); }
.wdr-article img { height: auto; display: block; }
.wdr-article figure { margin: 32px 0; }
.wdr-article figcaption { font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; color: var(--wdr-art-gris); margin-top: 10px; }

/* Tableaux : Divi ne les habille pas */
.wdr-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0 28px;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 15px;
}
.wdr-article thead tr { background: var(--wdr-art-noir); }
.wdr-article table:not(:has(thead)) tr:first-child { background: var(--wdr-art-noir); }
.wdr-article th {
	text-align: left;
	padding: 15px 18px;
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wdr-art-craie) !important;
	border: 0;
}
.wdr-article tbody th {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
	color: var(--wdr-art-texte);
	padding: 14px 18px;
	border-bottom: 1px solid var(--wdr-art-filet);
}
.wdr-article td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--wdr-art-filet);
	color: var(--wdr-art-texte);
}
.wdr-article tbody tr { background: #ffffff; }
.wdr-article tbody tr:nth-child(even) { background: #faf8f5; }
.wdr-article tbody tr:last-child th,
.wdr-article tbody tr:last-child td { border-bottom: 2px solid var(--wdr-art-noir); }
.wdr-article td:last-child {
	text-align: right;
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--wdr-art-noir);
	white-space: nowrap;
}

/* ---- Appel à l'action de fin ---- */
.wdr-art-cta h2 {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
	color: #ffffff; margin: 0 0 12px; padding: 0;
}
.wdr-art-cta p { font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 1.8; color: #d8d5cf; margin: 0; }

/* ---- Sous le niveau tablette ---- */
@media (max-width: 980px) {
	.wdr-art-hero h1 { font-size: 32px; }
	.wdr-sommaire { position: static; margin-bottom: 36px; }
	.wdr-article h2 { font-size: 25px; }
	.wdr-article table { display: block; overflow-x: auto; }
}

/* ---- Bandeau de titre : on habille le bloc du gabarit Divi plutot que
   d'en ajouter un second, pour garder un seul H1 dans la page. ---- */
.single-post .et_pb_post > .et_post_meta_wrapper:first-child {
	background: var(--wdr-art-noir);
	color: #ffffff;
	box-sizing: border-box;
	padding: 72px 8vw;
	margin: 0 0 56px;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.single-post .et_pb_post > .et_post_meta_wrapper:first-child .entry-title {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 46px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff !important;
	max-width: 1000px;
	margin: 0 0 16px;
	padding: 0;
}
.single-post .et_pb_post > .et_post_meta_wrapper:first-child .post-meta {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	color: #d8d5cf;
	margin: 0;
	padding: 0;
	text-transform: none;
}
.single-post .et_pb_post > .et_post_meta_wrapper:first-child .post-meta a { color: var(--wdr-art-craie); text-decoration: none; }
.single-post .et_pb_post > .et_post_meta_wrapper:first-child .post-meta a:hover { color: #ffffff; }
.single-post #main-content { overflow-x: hidden; }

@media (max-width: 980px) {
	.single-post .et_pb_post > .et_post_meta_wrapper:first-child { padding: 48px 7vw; margin-bottom: 36px; }
	.single-post .et_pb_post > .et_post_meta_wrapper:first-child .entry-title { font-size: 30px; }
}

/* ---- Sections de fin d'article : pleine largeur comme le bandeau de titre,
   le contenu d'article etant sinon contraint par le conteneur Divi. ---- */
.single-post .wdr-art-cta {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.wdr-art-surtitre {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--wdr-art-gris);
	margin: 0 0 22px;
}

/* ---- Boutons presents dans le corps de l'article (blocs WordPress ou Divi).
   Ils heritaient du gris par defaut du theme et du soulignement des liens. ---- */
.wdr-article .wp-block-button { margin: 10px 0 30px; }
.wdr-article .wp-block-button__link,
.wdr-article .wp-element-button {
	display: inline-block;
	background: var(--wdr-art-noir) !important;
	color: #ffffff !important;
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 17px 34px !important;
}
.wdr-article .wp-block-button__link:hover,
.wdr-article .wp-element-button:hover {
	background: var(--wdr-art-craie-soutenue) !important;
	color: var(--wdr-art-noir) !important;
}

/* Puces vides heritees du contenu : elles affichaient un point sans texte. */
.wdr-article li:empty { display: none; }

/* Le gabarit Divi sort un second bloc meta, vide, en fin d'article. */
.single-post .et_pb_post > .et_post_meta_wrapper:not(:first-child) { display: none; }

/* ---- Deux blocs cote a cote : comparatif, avantages / inconvenients.
   Habillage seul : le texte et sa hierarchie restent ceux de l'article. ---- */
.wdr-article .wdr-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 12px 0 32px;
}
.wdr-article .wdr-duo > * { box-sizing: border-box; padding: 26px 28px; }
.wdr-article .wdr-duo > :first-child { background: var(--wdr-art-craie); }
.wdr-article .wdr-duo > :last-child { border: 1px solid var(--wdr-art-filet); }
.wdr-article .wdr-duo h3 { margin: 0 0 14px !important; }
.wdr-article .wdr-duo ul,
.wdr-article .wdr-duo ol { margin: 0 !important; }
.wdr-article .wdr-duo p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
	.wdr-article .wdr-duo { grid-template-columns: minmax(0, 1fr); }
}

/* Paragraphes vides herites du contenu, a l'interieur des deux colonnes. */
.wdr-article .wdr-duo p:empty { display: none; }

/* ---- Haut de page en deux volets : panneau noir + photo.
   Le titre n'est pas recree : le script deplace le H1 du gabarit Divi dans le
   panneau, pour que la page garde un seul H1. ---- */
.single-post .wdr-art-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 56px;
}
.wdr-art-hero .et_pb_row {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}
.wdr-art-hero .et_pb_column { width: 50% !important; margin: 0 !important; }
.wdr-art-hero .et_pb_module { margin-bottom: 0 !important; }
.wdr-art-hero .wdr-art-hero-photo,
.wdr-art-hero .wdr-art-hero-photo .et_pb_image_wrap { display: block; height: 100%; width: 100%; }
.wdr-art-hero .wdr-art-hero-photo img {
	width: 100% !important;
	height: 100% !important;
	min-height: 460px;
	object-fit: cover;
	display: block;
}
.wdr-art-hero .wdr-art-titre .entry-title {
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif !important;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff !important;
	margin: 0 0 18px;
	padding: 0;
}
.wdr-art-hero .wdr-art-titre .post-meta {
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 13px;
	color: #d8d5cf;
	margin: 0;
	padding: 0;
	text-transform: none;
}
.wdr-art-hero .wdr-art-titre .post-meta a { color: var(--wdr-art-craie); text-decoration: none; }
.wdr-art-hero .wdr-art-titre .post-meta a:hover { color: #ffffff; }

/* Quand le haut de page est en place, le bloc de titre du gabarit s'efface. */
.single-post:has(.wdr-art-titre) .et_pb_post > .et_post_meta_wrapper:first-child { display: none; }

@media (max-width: 980px) {
	.wdr-art-hero .et_pb_column { width: 100% !important; }
	.wdr-art-hero .wdr-art-hero-photo img { min-height: 260px; }
	.wdr-art-hero .wdr-art-titre .entry-title { font-size: 30px; }
}

/* ---- Sommaire : il peut se trouver a l'interieur de la zone d'article,
   ou les liens sont soulignes. Ses propres regles priment. ---- */
.wdr-sommaire-liste a,
.wdr-article .wdr-sommaire-liste a {
	text-decoration: none !important;
	color: var(--wdr-art-gris) !important;
	border-bottom: 1px solid var(--wdr-art-filet);
}
.wdr-sommaire-liste a.is-active,
.wdr-article .wdr-sommaire-liste a.is-active {
	background: var(--wdr-art-craie);
	color: var(--wdr-art-noir) !important;
}
.wdr-sommaire-cta,
.wdr-article .wdr-sommaire-cta { text-decoration: none !important; }

/* Second niveau : les sous-titres, en retrait et plus discrets. */
.wdr-sommaire-liste a.est-sous,
.wdr-article .wdr-sommaire-liste a.est-sous {
	padding-left: 28px;
	font-size: 14px;
	color: #808080 !important;
}
.wdr-sommaire-liste a.est-sous.is-active,
.wdr-article .wdr-sommaire-liste a.est-sous.is-active { color: var(--wdr-art-noir) !important; }

/* Zone de reperage du sommaire, sans aucun habillage : elle sert uniquement
   a dire au sommaire ou chercher les titres, sans toucher a la mise en page. */
.wdr-corps { }