/* ==========================================================================
   Rendu des blocs Gutenberg dans le thème DreamHub
   ========================================================================== */

/* Zone de contenu de la page d'accueil et des pages ------------------------ */
.dh-home-content,
.entry-content {
	--dh-content: 1140px;
}

.dh-home-content {
	padding: 90px 0;
}

/* Largeur par défaut des blocs : alignée sur le .container de Bootstrap. */
.dh-home-content > *,
.blog-details-content > * {
	max-width: var(--dh-content);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Pleine largeur : on sort du conteneur. */
.dh-home-content > .alignfull {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.dh-home-content > .alignwide {
	max-width: 1400px;
}

/* Typographie ------------------------------------------------------------- */
.dh-home-content h1,
.dh-home-content h2,
.dh-home-content h3,
.dh-home-content h4 {
	color: var(--dh-heading);
	font-weight: 600;
	line-height: 1.25;
}

.dh-home-content h2 { font-size: 45px; }
.dh-home-content h3 { font-size: 28px; }

.dh-home-content p {
	color: var(--dh-body);
	font-size: 16px;
	line-height: 28px;
}

/* Sur-titre vert, repris du gabarit d'origine. */
.dh-eyebrow {
	color: var(--dh-primary) !important;
	font-size: 16px !important;
	font-weight: 600;
	margin-bottom: 8px;
	text-transform: none;
}

.dh-heading {
	margin-top: 0;
}

.dh-section-title {
	margin-bottom: 54px;
}

/* Espacement vertical des sections composées en blocs. */
.dh-block-section {
	padding: 40px 0;
}

/* Encarts ----------------------------------------------------------------- */
.dh-card {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .07);
	padding: 35px 30px;
	transition: .4s;
}

.dh-card:hover {
	transform: translateY(-6px);
}

.dh-card h3 {
	font-size: 22px;
	margin-top: 0;
}

/* Bandeau vert pleine largeur --------------------------------------------- */
.dh-cta-banner {
	background: var(--dh-primary);
	padding: 70px 20px;
}

.dh-cta-banner h2,
.dh-cta-banner p {
	color: #ffffff !important;
}

/* Boutons ----------------------------------------------------------------- */
.wp-block-button__link,
.wp-element-button {
	background: var(--dh-primary);
	color: #ffffff;
	border-radius: 5px;
	padding: 13px 34px;
	font-size: 16px;
	font-weight: 500;
	transition: .4s;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--dh-primary-dark);
	color: #ffffff;
}

.dh-button-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid #ffffff;
}

.dh-button-outline .wp-block-button__link:hover {
	background: #ffffff;
	color: var(--dh-primary);
}

/* Blocs courants ---------------------------------------------------------- */
.dh-home-content .wp-block-image img,
.entry-content .wp-block-image img {
	border-radius: 6px;
}

.dh-home-content .wp-block-quote,
.entry-content .wp-block-quote {
	border-left: 4px solid var(--dh-primary);
	padding-left: 22px;
	font-style: italic;
}

.dh-home-content .wp-block-columns {
	gap: 30px;
}

.dh-media-text .wp-block-media-text__media img {
	border-radius: 8px;
}

/* Couleurs de la palette : elles suivent les variables du theme. */
.has-dh-green-color       { color: var(--dh-primary); }
.has-dh-green-dark-color  { color: var(--dh-primary-dark); }
.has-dh-brown-color       { color: var(--dh-heading); }
.has-dh-grey-color        { color: var(--dh-body); }
.has-dh-white-color       { color: #ffffff; }
.has-dh-green-background-color      { background-color: var(--dh-primary); }
.has-dh-green-dark-background-color { background-color: var(--dh-primary-dark); }
.has-dh-light-background-color      { background-color: var(--dh-soft); }
.has-dh-dark-background-color       { background-color: var(--dh-dark); }
.has-dh-white-background-color      { background-color: #ffffff; }

@media (max-width: 991px) {
	.dh-home-content { padding: 55px 0; }
	.dh-home-content h2 { font-size: 32px; }
	.dh-cta-banner { padding: 45px 20px; }
}

/* Sections reconstruites en blocs -------------------------------------------
   Les compositions réutilisent les classes du template. Ces quelques règles
   compensent les différences entre la grille Bootstrap et les blocs Colonnes. */

.dh-home-content .service-area,
.dh-home-content .about-area,
.dh-home-content .pricing-area {
	padding: 90px 0;
}

.dh-home-content .wp-block-columns {
	max-width: 1140px;
	margin: 0 auto 30px;
	padding: 0 15px;
	gap: 30px;
}

.dh-home-content .service-single-box,
.dh-home-content .pricing-single-box,
.dh-home-content .testimonial-single-box {
	height: 100%;
}

.dh-home-content .single-box-icon-thumb,
.dh-home-content .about-thumb {
	margin: 0 0 20px;
}

.dh-home-content .pricing-info ul {
	list-style: none;
	padding: 0;
}

.dh-home-content .pricing-rate span {
	font-size: 16px;
	font-weight: 400;
	color: var(--dh-body);
}

.dh-home-content .testimonial-single-box {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .07);
	padding: 35px 30px;
}

.dh-home-content .dh-gallery img {
	border-radius: 6px;
}

@media (max-width: 991px) {
	.dh-home-content .service-area,
	.dh-home-content .about-area,
	.dh-home-content .pricing-area {
		padding: 50px 0;
	}
}