/* ==========================================================================
   DIAGONES — mise en forme complémentaire à theme.json
   --------------------------------------------------------------------------
   theme.json porte les couleurs, les polices, les tailles et les espacements.
   Ce fichier ne traite que ce que les blocs natifs ne savent pas exprimer :
   superpositions, grilles particulières, icônes de boutons, responsive.
   Base de conception : 1440 px (maquette PDF × 2,419).
   ========================================================================== */

:root {
	--dg-icone: 22px;
	--dg-hero-h: 630px;
	--dg-entete-h: 94px;
}

/* --------------------------------------------------------------------------
   1. Réglages généraux
   -------------------------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; }
p { hyphens: auto; -webkit-hyphens: auto; }
.wp-block-image img { display: block; }

/* --------------------------------------------------------------------------
   2. En-tête
   -------------------------------------------------------------------------- */
/* En-tête collant.
   Le bloc « Partie de modèle » enveloppe l'en-tête dans un <header> qui ne fait
   que 94 px de haut : c'est donc lui qui doit porter position:sticky, sinon
   l'élément collant n'a aucune place pour glisser et part avec la page.
   top suit la hauteur de la barre d'admin quand elle est affichée. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
	transition: box-shadow .2s ease;
}
/* Ombre légère une fois décollé du haut de page, pour détacher l'en-tête
   des sections blanches. Supprimer cette règle pour revenir à la maquette. */
.wp-site-blocks > header.wp-block-template-part.dg-est-colle {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .10);
}

.dg-entete {
	position: relative;
	min-height: var(--dg-entete-h);
	display: flex;
	align-items: center;
}
.dg-entete > .dg-entete__inner { width: 100%; }
.dg-entete__inner { min-height: var(--dg-entete-h); gap: 0; }

.dg-entete .wp-block-site-logo { flex: 0 0 auto; }
.dg-entete .wp-block-site-logo img { width: 166px; height: auto; }

.dg-entete .dg-nav { margin-left: auto; min-width: 0; }
.dg-entete .dg-nav .wp-block-navigation__container { gap: 34px; align-items: center; }
.dg-entete .dg-nav .wp-block-navigation-item__content {
	display: block;
	max-width: 14ch;
	white-space: normal;
	line-height: 1.14;
}
.dg-entete .dg-nav .wp-block-navigation-item__label {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}
.dg-entete .dg-nav a:hover { color: var(--wp--preset--color--or); }
.dg-entete .dg-nav .dg-nav__pro a { color: var(--wp--preset--color--or); font-weight: 700; }
/* « Espace pros » passe sur deux lignes comme dans la maquette */
.dg-entete .dg-nav .dg-nav__pro .wp-block-navigation-item__content { max-width: 7ch; }

.dg-entete .dg-entete__cta { flex: 0 0 auto; margin-left: clamp(24px, 10vw - 100px, 150px); }
.dg-entete__cta .wp-block-button__link { white-space: nowrap; }

/* Menu mobile natif du bloc Navigation */
.dg-entete .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
}
.dg-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	max-width: none;
}

/* --------------------------------------------------------------------------
   3. Bandeau d’accueil + section or superposée
   -------------------------------------------------------------------------- */
.dg-bloc-hero { position: relative; }

.wp-block-cover.dg-hero { min-height: var(--dg-hero-h); }
.dg-hero .wp-block-cover__inner-container { padding-bottom: 40px; }
.dg-hero__titre { text-transform: uppercase; }

/* Pastille « je souhaite être rappelé » */
.dg-rappel {
	position: absolute;
	left: 0;
	top: calc(var(--dg-hero-h) - 29px);
	z-index: 4;
	margin: 0;
}
.dg-rappel .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 34px 16px 22px;
	border-radius: 0 10px 10px 0;
	font-family: var(--wp--preset--font-family--condense);
	font-size: 26px;
	line-height: 1.05;
	letter-spacing: 0;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	transition: padding-right .2s ease;
}
.dg-rappel .wp-block-button__link:hover { padding-right: 44px; }

/* Section or */
.dg-or__grille { gap: 0; align-items: flex-start; }
.wp-block-columns.dg-or__grille > .wp-block-column.dg-or__droite {
	flex-basis: 505px;
	flex-grow: 0;
	margin-top: -420px;
	position: relative;
	z-index: 3;
}
.wp-block-columns.dg-or__grille > .wp-block-column.dg-or__texte {
	flex-basis: 731px;
	flex-grow: 0;
}
.dg-or__intro { max-width: 631px; }
.dg-or .wp-block-spacer.dg-or__bas { margin: 0; }

/* Carte « votre diagnostic en 24 h » */
.dg-carte24 { box-shadow: 0 26px 60px rgba(0, 0, 0, .28); }
.dg-carte24__24 { display: flex; align-items: baseline; gap: 14px; }
.dg-carte24__en { font-size: 31px; line-height: 1; }
.dg-carte24__nb {
	font-size: var(--wp--preset--font-size--geant);
	line-height: .9;
	color: var(--wp--preset--color--or);
}
.dg-carte24__filet {
	width: 222px;
	max-width: 100%;
	margin: 27px 0 24px;
	border: 0;
	border-top: 2px solid currentColor;
	height: 0;
}
.dg-carte24-compact .dg-carte24__en { font-size: 22px; }
.dg-carte24-compact .dg-carte24__nb { font-size: 72px; }
.dg-carte24-compact .dg-carte24__filet { margin: 20px 0 20px; width: 160px; }

/* --------------------------------------------------------------------------
   4. Bande de cinq photos, à cheval sur deux sections
   -------------------------------------------------------------------------- */
.wp-block-group.dg-bande {
	gap: 0;
	margin-top: -165px;
	margin-bottom: -31px;
	position: relative;
	z-index: 5;
	padding: 0;
}
.dg-bande .dg-bande__img { flex: 1 1 0; margin: 0; min-width: 0; }
.dg-bande .dg-bande__img img {
	width: 100%;
	height: 196px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   5. Section crème — les diagnostics
   -------------------------------------------------------------------------- */
.dg-creme { padding-top: 109px; }
.dg-diags {
	max-width: 905px;
	margin-inline: auto;
	gap: 24px;
}
.dg-diag {
	flex: 1 1 110px;
	max-width: 150px;
	gap: 14px;
	align-items: center;
}
.dg-diag .dg-diag__puce {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--creme-puce);
	display: grid;
	place-items: center;
	margin: 0;
	transition: transform .2s ease;
}
.dg-diag:hover .dg-diag__puce { transform: translateY(-4px); }
.dg-diag .dg-diag__puce img { width: 30px; height: auto; }
.dg-diag__nom { margin: 0; }
.dg-creme__texte { max-width: 760px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   6. Section blanche — pourquoi choisir
   -------------------------------------------------------------------------- */
.dg-photos4 { max-width: 946px; margin-inline: auto; gap: 20px; }
.dg-photos4 .dg-photos4__img { flex: 1 1 200px; margin: 0; min-width: 0; }
.dg-photos4 .dg-photos4__img img { width: 100%; height: 149px; object-fit: cover; }
.dg-colonnes { align-items: flex-start; }

/* --------------------------------------------------------------------------
   7. Méthode express — frise des cinq étapes
   -------------------------------------------------------------------------- */
.dg-etapes { position: relative; align-items: flex-start; gap: 26px; }
.dg-etapes::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 62px;
	border-top: 1.6px solid var(--wp--preset--color--or);
	z-index: 1;
}
.dg-etape { flex: 1 1 180px; max-width: 214px; align-items: center; }
.dg-etape__badge {
	position: relative;
	z-index: 2;
	width: 132px;
	min-height: 124px;
	padding: 8px 6px 12px;
	justify-content: center;
	align-items: center;
	gap: 2px;
}
.dg-etape__num, .dg-etape__nom { margin: 0; }
.dg-etape__texte { max-width: 176px; }

/* --------------------------------------------------------------------------
   8. Section sombre — les formules
   -------------------------------------------------------------------------- */
.dg-formules__devis,
.dg-cta .dg-formules__devis {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.dg-formules__devis::before {
	content: "";
	width: 36px;
	height: 30px;
	flex: 0 0 auto;
	background: url("../images/icons/chrono-dark.png") center/contain no-repeat;
}
.dg-formules__intro { max-width: 760px; margin-inline: auto; }
.dg-cartes { align-items: stretch; }
.dg-carte { transition: transform .2s ease, box-shadow .2s ease; }
.dg-carte:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(0, 0, 0, .3); }
.dg-carte__liste { padding-left: 1.1em; }
.dg-carte__liste li::marker { color: currentColor; }
.dg-carte__cta { margin-top: auto; padding-top: 8px; }
.dg-carte__cta a {
	color: var(--wp--preset--color--or);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dg-carte__cta a:hover { color: var(--wp--preset--color--encre); }

/* --------------------------------------------------------------------------
   9. Boutons à icône
   -------------------------------------------------------------------------- */
.dg-btn-chrono .wp-block-button__link,
.dg-btn-agenda .wp-block-button__link,
.is-style-dg-chrono .wp-block-button__link,
.is-style-dg-agenda .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.dg-btn-chrono .wp-block-button__link::before,
.is-style-dg-chrono .wp-block-button__link::before {
	content: "";
	width: var(--dg-icone);
	height: 18px;
	flex: 0 0 auto;
	background: url("../images/icons/chrono.png") center/contain no-repeat;
}
.dg-btn-agenda .wp-block-button__link::before,
.is-style-dg-agenda .wp-block-button__link::before {
	content: "";
	width: 20px;
	height: 18px;
	flex: 0 0 auto;
	background: url("../images/icons/calendar.png") center/contain no-repeat;
}
/* Bouton « je souhaite être rappelé » : combiné téléphone repris de la maquette,
   posé en masque pour qu'il suive la couleur du texte du bouton. */
.dg-btn-rappel .wp-block-button__link::before,
.is-style-dg-rappel .wp-block-button__link::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15.73 300.00 11.06 11.13' fill='%23000' role='img' aria-hidden='true'%3E%3Cpath d='M 26.438 308.426 C 26.25 309.012 26.066 309.598 25.871 310.18 C 25.734 310.586 25.363 310.832 24.824 310.809 C 24.047 310.758 23.195 310.547 22.375 310.223 C 21.02 309.684 19.801 308.918 18.789 307.855 C 17.457 306.457 16.574 304.812 16.188 302.914 C 16.117 302.59 16.09 302.258 16.062 301.926 C 16.031 301.516 16.285 301.137 16.68 301.004 C 17.27 300.809 17.867 300.617 18.465 300.43 C 18.883 300.301 19.285 300.531 19.418 300.965 C 19.605 301.566 19.793 302.168 19.98 302.766 C 20.004 302.844 20.031 302.918 20.059 302.988 C 20.109 303.141 20.082 303.27 19.973 303.379 C 19.758 303.59 19.551 303.801 19.34 304.008 C 19.297 304.051 19.293 304.082 19.316 304.133 C 20.012 305.715 21.148 306.855 22.73 307.551 C 22.785 307.578 22.824 307.574 22.871 307.527 C 23.074 307.316 23.285 307.109 23.492 306.906 C 23.598 306.793 23.727 306.766 23.875 306.812 C 24.551 307.027 25.227 307.242 25.906 307.453 C 26.191 307.543 26.383 307.719 26.457 308.016 C 26.492 308.152 26.484 308.289 26.438 308.426'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15.73 300.00 11.06 11.13' fill='%23000' role='img' aria-hidden='true'%3E%3Cpath d='M 26.438 308.426 C 26.25 309.012 26.066 309.598 25.871 310.18 C 25.734 310.586 25.363 310.832 24.824 310.809 C 24.047 310.758 23.195 310.547 22.375 310.223 C 21.02 309.684 19.801 308.918 18.789 307.855 C 17.457 306.457 16.574 304.812 16.188 302.914 C 16.117 302.59 16.09 302.258 16.062 301.926 C 16.031 301.516 16.285 301.137 16.68 301.004 C 17.27 300.809 17.867 300.617 18.465 300.43 C 18.883 300.301 19.285 300.531 19.418 300.965 C 19.605 301.566 19.793 302.168 19.98 302.766 C 20.004 302.844 20.031 302.918 20.059 302.988 C 20.109 303.141 20.082 303.27 19.973 303.379 C 19.758 303.59 19.551 303.801 19.34 304.008 C 19.297 304.051 19.293 304.082 19.316 304.133 C 20.012 305.715 21.148 306.855 22.73 307.551 C 22.785 307.578 22.824 307.574 22.871 307.527 C 23.074 307.316 23.285 307.109 23.492 306.906 C 23.598 306.793 23.727 306.766 23.875 306.812 C 24.551 307.027 25.227 307.242 25.906 307.453 C 26.191 307.543 26.383 307.719 26.457 308.016 C 26.492 308.152 26.484 308.289 26.438 308.426'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dg-btn-rappel .wp-block-button__link,
.is-style-dg-rappel .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.dg-btn-tel .wp-block-button__link::before {
	content: "";
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	background: url("../images/icons/phone.png") center/contain no-repeat;
}
.dg-btn-clair .wp-block-button__link::before { filter: brightness(0) invert(1); }

.dg-btn-agenda .wp-block-button__link {
	border-width: 1.6px;
	padding: 11px 22px;
}
.dg-btn-agenda .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--encre-noire);
	color: var(--wp--preset--color--creme-carte);
}
.dg-btn-agenda.dg-btn-clair .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre-noire);
}
.dg-btn-agenda.dg-btn-clair .wp-block-button__link:hover::before { filter: none; }

.wp-block-button__link { transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   10. Bannière et contenu des pages intérieures
   -------------------------------------------------------------------------- */
.wp-block-cover.dg-banniere { min-height: 380px; }
.dg-banniere .wp-block-cover__inner-container { padding-bottom: 40px; }
.dg-banniere__titre { text-transform: uppercase; }
.dg-banniere__surtitre { margin-bottom: 14px; }

/* Texte courant d'une page : on aère les blocs. WordPress ne laisse entre eux
   que l'espacement global du thème, trop serré pour de la lecture. */
.dg-page-contenu .wp-block-post-content > * + * { margin-block-start: 1.2em; }
.dg-page-contenu h2 { margin-top: 1.6em; }
.dg-page-contenu h3 { margin-top: 1.4em; }

/* Les grandes sections se touchent bord à bord, comme dans la maquette :
   pas de liseré blanc entre l'en-tête, les sections, le pied de page et la
   barre légale, ni entre deux compositions pleine largeur d'une page. */
.wp-site-blocks > *,
.wp-site-blocks main > * { margin-block-start: 0; }
.dg-page-contenu .wp-block-post-content > .alignfull,
.dg-page-contenu .wp-block-post-content > .alignfull + * { margin-block-start: 0; }

.dg-faq__item { padding: 20px 26px; }
.dg-faq__item summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--condense);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre);
}
.dg-faq__item[open] summary { color: var(--wp--preset--color--or); }

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */
.dg-pied { position: relative; overflow: hidden; }
.dg-pied::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 716px;
	max-width: 60%;
	height: 100%;
	background: url("../images/footer-arcs.png") right top / 100% 100% no-repeat;
	opacity: .8;
	pointer-events: none;
}
.dg-pied > * { position: relative; z-index: 2; }
.dg-pied__grille { gap: 0; }
.dg-pied__logo { margin-bottom: 65px; }
.dg-pied .dg-pied__filet {
	width: 56px;
	max-width: 56px;
	margin: 0 0 40px;
	border: 0;
	border-top: 2px solid currentColor;
	height: 0;
}
.dg-pied a { color: inherit; text-decoration: none; }
.dg-pied__adresse a:hover { color: var(--wp--preset--color--or-clair); }
.dg-pied__liens { padding-top: 109px; }
.dg-pied__menu { padding-left: 0; list-style: none; }
.dg-pied__menu li { margin: 0; }
.dg-pied__menu li + li { margin-top: 21px; }
.dg-pied__menu a:hover { color: var(--wp--preset--color--or-clair); }

.dg-barre { min-height: 50px; display: flex; align-items: center; }
.dg-barre__inner { padding-left: 356px; gap: 115px; }
.dg-barre__inner p { margin: 0; }
.dg-barre a { color: var(--wp--preset--color--encre-noire); }
.dg-barre a:hover { color: var(--wp--preset--color--blanc); }

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
	.dg-entete .dg-entete__cta { margin-left: 60px; }
}

@media (max-width: 1320px) {
	.dg-or__texte { flex-basis: auto; }
	.wp-block-columns.dg-or__grille > .wp-block-column.dg-or__droite { flex-basis: 460px; margin-top: -400px; }
	.dg-barre__inner { padding-left: 320px; gap: 80px; }
	.dg-pied__grille .wp-block-column:first-child { flex-basis: 320px !important; }
}

/* Menu mobile dès 1024 px : la nav sur deux lignes ne tient plus à côté du logo */
@media (max-width: 1024px) {
	.dg-entete .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.dg-entete .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.dg-entete .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
	.dg-entete .dg-entete__cta { display: none; }
}

@media (max-width: 1120px) {
	:root { --dg-hero-h: 560px; }
	.wp-block-columns.dg-or__grille { flex-wrap: wrap !important; }
	.dg-entete .dg-nav .wp-block-navigation__container { gap: 22px; }
	.dg-entete .dg-nav a { font-size: 14.5px; }
	.dg-entete .dg-entete__cta { margin-left: 24px; }

	.dg-or__grille { flex-wrap: wrap; }
	.wp-block-columns.dg-or__grille > .wp-block-column.dg-or__droite {
		flex-basis: 100%;
		margin-top: 44px;
		max-width: 560px;
	}
	.wp-block-columns.dg-or__grille > .wp-block-column.dg-or__texte { flex-basis: 100%; }
	.dg-accroche { display: none; }
	.dg-or .wp-block-spacer.dg-or__bas { height: 190px !important; }

	.dg-etapes::before { display: none; }
	.dg-cartes { flex-wrap: wrap; }
	.dg-cartes .dg-carte { flex-basis: 100% !important; max-width: 620px; margin-inline: auto; }
}

@media (max-width: 860px) {
	:root { --dg-hero-h: 470px; }

	.dg-entete__inner { padding-left: 24px !important; padding-right: 24px !important; }
	.dg-entete .wp-block-site-logo img { width: 140px; }
	.dg-entete .dg-nav { margin-left: auto; min-width: 0; }

	.dg-rappel .wp-block-button__link { padding: 14px 22px 14px 16px; font-size: 19px; }
	.dg-btn-tel .wp-block-button__link::before { width: 40px; height: 40px; }

	.dg-carte24 { padding: 32px 28px 34px !important; border-radius: 26px !important; }
	.dg-carte24__nb { font-size: 80px; }
	.dg-carte24__en { font-size: 24px; }
	.dg-carte24__filet { width: 170px; }

	.wp-block-group.dg-bande { margin-top: -70px; margin-bottom: -20px; }
	.dg-bande .dg-bande__img img { height: 90px; }
	.dg-creme { padding-top: 60px; }
	.dg-or .wp-block-spacer.dg-or__bas { height: 96px !important; }

	.dg-diags { gap: 30px 12px; }
	.dg-diag { flex-basis: 28%; }
	.dg-photos4 .dg-photos4__img { flex-basis: 45%; }
	.dg-colonnes { flex-wrap: wrap; }
	.dg-colonnes .wp-block-column { flex-basis: 100% !important; }
	.dg-etape { flex-basis: 45%; }

	.dg-pied::after { opacity: .3; }
	.dg-pied__grille .wp-block-column:first-child { flex-basis: 100% !important; }
	.dg-pied__liens { padding-top: 0; }
	.dg-barre { min-height: 0; padding: 14px 0; }
	.dg-barre__inner { padding-left: 0; gap: 10px; flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
	.dg-diag { flex-basis: 42%; }
	.dg-etape { flex-basis: 100%; }
	.dg-etape__badge { width: 100%; max-width: 220px; }
	.dg-photos4 .dg-photos4__img { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   13. Confort de l’éditeur
   -------------------------------------------------------------------------- */
.editor-styles-wrapper .dg-rappel { position: static; margin-top: 12px; }
.editor-styles-wrapper .wp-block-columns.dg-or__grille > .wp-block-column.dg-or__droite { margin-top: 0; }
.editor-styles-wrapper .wp-block-group.dg-bande { margin-top: 0; margin-bottom: 0; }
.editor-styles-wrapper .dg-creme { padding-top: 78px; }
.editor-styles-wrapper .dg-accroche { display: block; }