/* ------------------------------------------------------------------
   SLTP - habillage des sections de contenu editorial
   Reprend la grammaire du site : Oswald condense en capitales pour les
   titres, Poppins pour le texte, fond sombre, filets fins.
   Aucun degrade, aucun halo, aucun effet decoratif.
   ------------------------------------------------------------------ */

.sltp-seo .et_pb_row {
	max-width: 1080px;
}

/* Une seule colonne de lecture : titres, filets, texte et listes partagent
   exactement la meme largeur. Sans cela, les filets courent plus loin que
   le texte et la page parait deséquilibrée sur la droite.
   La largeur suit la taille du texte pour garder environ 68 signes par ligne. */
.sltp-seo .et_pb_text_inner {
	max-width: 800px;
	font-size: 18px;
	line-height: 1.75;
}

/* ---- Titres ---- */

/* L'echelle reprend celle du site : heros a 80px, second niveau a 60px.
   Les titres de section se placent un cran en dessous, en Oswald 700
   avec l'interlettrage de 1px deja utilise sur les H1 d'origine. */

.sltp-seo .et_pb_text_inner h1 {
	font-family: 'Oswald', 'Poppins', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.05;
	font-size: 60px;
	color: #ffffff;
	margin: 0 0 34px;
}

.sltp-seo .et_pb_text_inner h2 {
	font-family: 'Oswald', 'Poppins', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.1;
	font-size: 44px;
	color: #ffffff;
	margin: 78px 0 22px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Pas de filet au-dessus du premier titre de la section */
.sltp-seo .et_pb_text_inner > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sltp-seo .et_pb_text_inner h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.35;
	color: #ffffff;
	margin: 42px 0 12px;
}

/* ---- Texte ---- */

.sltp-seo .et_pb_text_inner,
.sltp-seo .et_pb_text_inner p,
.sltp-seo .et_pb_text_inner li {
	color: rgba(255, 255, 255, 0.88);
	font-size: 18px;
	line-height: 1.75;
}

.sltp-seo .et_pb_text_inner p {
	margin: 0 0 18px;
}

.sltp-seo .et_pb_text_inner p:last-child {
	margin-bottom: 0;
}

.sltp-seo .et_pb_text_inner strong {
	font-weight: 600;
	color: #ffffff;
}

/* ---- Listes : filet fin a la place de la puce ronde ---- */

.sltp-seo .et_pb_text_inner ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 22px;
}

.sltp-seo .et_pb_text_inner ul li {
	position: relative;
	padding: 9px 0 9px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	list-style: none;
}

.sltp-seo .et_pb_text_inner ul li:last-child {
	border-bottom: 0;
}

.sltp-seo .et_pb_text_inner ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.62em;
	width: 12px;
	height: 1px;
	background: rgba(255, 255, 255, 0.55);
}

/* ---- Liens ---- */

.sltp-seo .et_pb_text_inner a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(255, 255, 255, 0.42);
	transition: text-decoration-color 0.18s ease;
}

.sltp-seo .et_pb_text_inner a:hover {
	text-decoration-color: #ffffff;
}

/* ---- Respiration de la section ---- */

.sltp-seo.et_pb_section {
	padding-top: 84px;
	padding-bottom: 84px;
}

/* ------------------------------------------------------------------
   Fiches chantier : article sur fond sombre, comme le reste du site
   ------------------------------------------------------------------ */

.single-post #page-container,
.single-post #et-main-area,
.single-post #main-content,
.single-post .entry-content {
	background-color: #000000;
}

.single-post #main-content .container {
	padding-top: 46px;
}

.single-post .et_post_meta_wrapper > h1 {
	font-family: 'Oswald', 'Poppins', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.05;
	font-size: 60px;
	color: #ffffff;
	margin-bottom: 12px;
}

.single-post .et_post_meta_wrapper > p.post-meta,
.single-post .et_post_meta_wrapper > p.post-meta a {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.single-post .et_post_meta_wrapper > p.post-meta a:hover {
	color: #ffffff;
}

/* L'image en vedette ne doit pas ecraser la page */
.single-post .et_post_meta_wrapper > img,
.single-post .et_main_video_container + img {
	max-height: 520px;
	width: 100%;
	object-fit: cover;
	display: block;
	margin-top: 26px;
}

/* Aligner le corps de la fiche sur le titre */
.single-post .sltp-seo.et_pb_section {
	padding-top: 54px;
	padding-bottom: 20px;
}

body.single-post .sltp-seo.et_pb_section .et_pb_row {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* ------------------------------------------------------------------
   Adaptations petites largeurs
   ------------------------------------------------------------------ */

@media (max-width: 980px) {
	.sltp-seo.et_pb_section {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.sltp-seo .et_pb_text_inner h1 {
		font-size: 34px;
		letter-spacing: 0.5px;
	}

	.sltp-seo .et_pb_text_inner h2 {
		font-size: 27px;
		letter-spacing: 0.5px;
		margin-top: 48px;
		padding-top: 22px;
	}

	.sltp-seo .et_pb_text_inner h3 {
		font-size: 20px;
	}

	/* Sur petit ecran on reste a 17px : au dela, la ligne devient trop courte. */
	.sltp-seo .et_pb_text_inner,
	.sltp-seo .et_pb_text_inner p,
	.sltp-seo .et_pb_text_inner li {
		font-size: 17px;
		line-height: 1.7;
	}

	.single-post .et_post_meta_wrapper > h1 {
		font-size: 34px;
		letter-spacing: 0.5px;
	}

	.single-post .et_post_meta_wrapper > img {
		max-height: 320px;
	}

	/* La colonne de lecture ne doit jamais depasser la largeur disponible */
	.sltp-seo .et_pb_text_inner {
		max-width: 100%;
	}

	.sltp-seo .et_pb_text_inner {
		overflow-wrap: break-word;
	}

	/* Le build d'origine pose des marges laterales en pixels sans variante
	   mobile (page Mentions legales : margin-left 262px). On les neutralise
	   sous 980px, sinon la page deborde hors de l'ecran.
	   L'identifiant est necessaire : Divi genere .et_pb_row_1.et_pb_row en !important. */
	#page-container .et_pb_row.et_pb_row {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* ------------------------------------------------------------------
   Hero de l'accueil
   Le module declare title_font="Oswald|on||on|" et title_font_size="64px",
   exactement comme le hero de la page Services, mais Divi ne genere aucune
   regle CSS pour ce module : le titre retombait sur Open Sans 30px, seul
   titre du site a ne pas etre en Oswald. On applique les valeurs declarees.
   ------------------------------------------------------------------ */

body.home .et_pb_fullwidth_header .header-content .et_pb_module_header {
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 64px;
	line-height: 1.3em;
	color: #ffffff;
}

@media (max-width: 980px) {
	body.home .et_pb_fullwidth_header .header-content .et_pb_module_header {
		font-size: 42px;
	}
}

@media (max-width: 767px) {
	body.home .et_pb_fullwidth_header .header-content .et_pb_module_header {
		font-size: 32px;
	}
}

/* ------------------------------------------------------------------
   Formulaires
   Champs sombres a filet fin, bouton fileté en capitales, comme les
   boutons "NOUS CONTACTER" du site.
   ------------------------------------------------------------------ */

.sltp-form .wpcf7 {
	max-width: 800px;
}

.sltp-form .wpcf7 p {
	margin: 0 0 20px;
}

.sltp-form .wpcf7 label {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
	margin-bottom: 8px;
}

.sltp-form .wpcf7 input[type="text"],
.sltp-form .wpcf7 input[type="email"],
.sltp-form .wpcf7 input[type="tel"],
.sltp-form .wpcf7 input[type="file"],
.sltp-form .wpcf7 select,
.sltp-form .wpcf7 textarea {
	width: 100%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0;
	padding: 13px 15px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.18s ease;
}

.sltp-form .wpcf7 select option {
	background: #111111;
	color: #ffffff;
}

.sltp-form .wpcf7 input:focus,
.sltp-form .wpcf7 select:focus,
.sltp-form .wpcf7 textarea:focus {
	outline: none;
	border-color: #ffffff;
}

.sltp-form .wpcf7 input::placeholder,
.sltp-form .wpcf7 textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

/* Case d'acceptation : pas de mise en capitales sur cette ligne */
.sltp-form .wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

.sltp-form .wpcf7 .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	margin-top: 3px;
	accent-color: #ffffff;
}

/* Bouton, dans la grammaire des boutons du site */
.sltp-form .wpcf7 input[type="submit"] {
	width: auto;
	background: transparent;
	border: 1px solid #ffffff;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 16px 34px;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.sltp-form .wpcf7 input[type="submit"]:hover {
	background: #ffffff;
	color: #000000;
}

/* Messages de retour */
.sltp-form .wpcf7-response-output {
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #ffffff;
	padding: 14px 16px !important;
	margin: 20px 0 0 !important;
	font-size: 15px;
}

.sltp-form .wpcf7-not-valid-tip {
	color: #ff8f8f;
	font-size: 13px;
	margin-top: 6px;
}

@media (max-width: 980px) {
	.sltp-form .wpcf7 input[type="text"],
	.sltp-form .wpcf7 input[type="email"],
	.sltp-form .wpcf7 input[type="tel"],
	.sltp-form .wpcf7 select,
	.sltp-form .wpcf7 textarea {
		font-size: 16px; /* evite le zoom automatique sur iOS */
	}
}