/* =========================================================================================
   CL Design — modules Divi rendus en blocs natifs : texte, titres, images, boutons, icônes,
   blurbs, accordéon (bloc Détails), vidéo, carrousel, formulaire ; pages simples.
   ========================================================================================= */

/* Texte : les titres du module Texte de Divi. */
/* Comme Divi : seul le dernier paragraphe perd sa marge basse (les titres gardent leurs 10 px). */
.cld-txt > p:last-of-type { padding-bottom: 0; }
.cld-txt .has-text-align-center { text-align: center; }
:where(.cld-titre) { margin: 0; }

/* Titres H2 : un seul style sur tout le site (demande de Guillaume, 25/09/2026). Divi en avait six
   (32, 34, 38 et 52 px, interligne 1 ou 1,2, lettres espacées de 38 px sur l'accueil, 38 px gardés
   sur téléphone) ; ces réglages sont repris dans pages.css, que cette règle emporte (spécificité 0,1,2).
   Alignement et couleur (clair sur les bandes sombres) restent ceux de chaque section. */
body h2.wp-block-heading {
	font-family: var(--cld-police-titres);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: normal;
	text-transform: uppercase;
	padding-bottom: 10px;
}
@media (max-width: 980px) { body h2.wp-block-heading { font-size: 34px; } }
@media (max-width: 767px) { body h2.wp-block-heading { font-size: 24px; } } /* 28 → 24 px à la demande de Guillaume (25/09/2026) */

/* Titres H1 sur téléphone : Divi gardait 50 px en 320 px, les mots longs (AMÉNAGEMENT, CONFIDENTIALITÉ) se coupaient
   en plein milieu ; taille proportionnelle à l'écran (25 px à 300 px, 32 px au plus, toujours au-dessus des H2 à 24 px). Tailles ordinateur inchangées. */
@media (max-width: 767px) { body h1.wp-block-heading { font-size: clamp(25px, 8.4vw, 32px); line-height: 1.15em; } }

/* Image : pleine largeur de sa colonne au plus, comme le module Image. */
:where(.cld-img) { margin: 0; line-height: 0; max-width: 100%; }
.cld-img img { max-width: 100%; height: auto; }
:where(.wp-block-image) { margin: 0; }
.wp-block-image.aligncenter { text-align: center; }

/* Icône du module Icône (SVG du thème). */
:where(.cld-icone) { margin: 0; line-height: 0; display: flex; justify-content: center; }
.cld-icone img { width: 96px; height: 96px; }

/* Boutons : un seul modèle sur tout le site (demande de Guillaume du 25/09/2026 ; Divi en avait cinq : marges de 4 px,
   interligne large, boutons de 3 à 4 lignes sur mobile, ordre prune/gris inversé selon les pages).
   - principal (prise de rendez-vous, contact, envoi) : prune ; secondaire : gris (y compris les boutons « contour ») ;
   - dans un groupe : le principal d'abord, boutons de même largeur et de même hauteur (grille à colonnes égales) ;
     si la place manque, le texte passe à la ligne dans les deux à la fois ;
   - sur téléphone : empilés en pleine largeur, hauteurs égales. */
body .wp-block-buttons, body .wp-block-buttons.is-layout-flex { /* « body » : l'emporte sur « body .is-layout-flex » du cœur */
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 14px;
	width: fit-content;
	max-width: 100%;
	margin: 0;
}
body .wp-block-buttons.is-content-justification-center { margin-inline: auto; } /* « body » : après la marge nulle ci-dessus */
body .wp-block-buttons.is-content-justification-right { margin-left: auto; }
body .wp-block-buttons > .wp-block-button { display: flex; align-self: stretch; height: auto; margin: 0; }
.wp-block-button { display: flex; margin: 0; }
/* Divi rangeait parfois chaque bouton dans son propre module, côte à côte dans une colonne : même traitement
   (principal d'abord, largeurs égales). */
.cld-col:has(> .wp-block-buttons + .wp-block-buttons) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 14px;
	width: fit-content;
	max-width: 100%;
}
.cld-col:has(> .wp-block-buttons + .wp-block-buttons) > .wp-block-buttons { width: 100%; }
.cld-col > .wp-block-buttons:has(.cld-x-e6fed0) { order: -1; }
.wp-block-buttons > .cld-x-e6fed0, .wp-block-buttons > .wp-block-button:not(.is-style-outline):not(.cld-x-d51e23) { order: -1; }
.wp-block-button__link, .cld-form__bouton, body .mag-avis .mag-avis__entete .mag-avis__bouton {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 13px 26px;
	border: 0;
	border-radius: 0;
	background: var(--gcid-primary-color);
	color: #fff;
	font-family: var(--cld-police-texte);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	word-break: normal; /* WordPress coupe les mots des boutons (« RÉALISATION/S ») */
	overflow-wrap: normal;
	cursor: pointer;
	transition: background-color .2s;
}
.cld-x-d51e23 .wp-block-button__link, .is-style-outline .wp-block-button__link { background: #767676; color: #fff; }
body .wp-block-button.is-style-outline > .wp-block-button__link { padding: 13px 26px; border: 0; } /* le cœur ajoute une bordure de 2 px aux boutons « contour » */
.wp-block-button__link:hover, .cld-form__bouton:hover, body .mag-avis .mag-avis__entete .mag-avis__bouton:hover { background: #5b2735; filter: none; transform: none; }
.cld-x-d51e23 .wp-block-button__link:hover, .is-style-outline .wp-block-button__link:hover { background: #5c5c5c; }
body .mag-avis .mag-avis__entete .mag-avis__bouton { flex: 0 0 auto; }
@media (max-width: 767px) {
	body .wp-block-buttons, body .wp-block-buttons.is-layout-flex,
	.cld-col:has(> .wp-block-buttons + .wp-block-buttons) { grid-auto-flow: row; grid-auto-rows: 1fr; width: 100%; }
	/* 60 px : un bouton d'une ligne a la même taille qu'un bouton de deux lignes. */
	.wp-block-button__link, .cld-form__bouton { min-height: 60px; padding: 10px 18px; font-size: 13px; }
	.cld-form__envoi .cld-form__bouton { flex: 1; } /* « Envoyer » en pleine largeur, comme les autres boutons */
}

/* Blurb (icône + titre + texte). */
.cld-blurb { display: flex; flex-direction: column; }
.cld-blurb__icone { margin: 0 0 30px; line-height: 0; }
.cld-blurb__icone img { width: 32px; height: 32px; }
.cld-blurb h4 { padding-bottom: 10px; }
.cld-blurb__texte > :last-child { padding-bottom: 0; }
/* Icône à gauche (placement « left » du préréglage Divi : image en cellule de tableau, 15 px d'écart). */
.cld-blurb--gauche { flex-direction: row; align-items: flex-start; }
.cld-blurb--gauche > .cld-blurb__icone { flex: 0 0 auto; margin: 0 15px 0 0; }
.cld-blurb--gauche > .cld-blurb__corps { flex: 1 1 auto; min-width: 0; }

/* Accordéon Divi → blocs « Détails » (ouvrables au clavier, sans script). */
.cld-accordeon { display: flex; flex-direction: column; row-gap: 10px; }
.cld-accordeon > h1, .cld-accordeon > h2, .cld-accordeon > h3, .cld-accordeon > .cld-txt { margin-bottom: 10px; }
.cld-accordeon .wp-block-details {
	margin: 0;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0);
}
.cld-accordeon .wp-block-details summary {
	position: relative;
	padding-right: 40px;
	color: var(--gcid-heading-color);
	font-family: var(--cld-police-titres);
	font-size: 24px;
	line-height: 1.3em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}
.cld-accordeon .wp-block-details summary::-webkit-details-marker { display: none; }
.cld-accordeon .wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--gcid-secondary-color);
	-webkit-mask: url("../icones/fa-f067.svg") center / contain no-repeat;
	mask: url("../icones/fa-f067.svg") center / contain no-repeat;
}
.cld-accordeon .wp-block-details[open] summary::after {
	-webkit-mask-image: url("../icones/fa-f068.svg");
	mask-image: url("../icones/fa-f068.svg");
}
.cld-accordeon .wp-block-details[open] summary { margin-bottom: 20px; }
.cld-accordeon .wp-block-details > p:last-child, .cld-accordeon .wp-block-details > ul:last-child { padding-bottom: 0; }
@media (max-width: 980px) { .cld-accordeon .wp-block-details summary { font-size: 20px; } }
@media (max-width: 767px) { .cld-accordeon .wp-block-details summary { font-size: 17px; } }

/* Vidéo (module Vidéo : coins arrondis de 10 px du préréglage). */
.wp-block-video { margin: 0; border-radius: 10px; overflow: hidden; line-height: 0; }
.wp-block-video video { width: 100%; }

/* Carrousel (module « Carrousel de groupes » de Divi 5) : défilement horizontal, flèches, points. */
.cld-carrousel { position: relative; width: 100%; }
.cld-carrousel__piste {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.cld-carrousel__piste::-webkit-scrollbar { display: none; }
.cld-carrousel__piste > .cld-diapo { flex: 0 0 100%; scroll-snap-align: start; }
.cld-carrousel__fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	background: none;
	color: #333;
	font-size: 48px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s;
}
.cld-carrousel:hover .cld-carrousel__fleche, .cld-carrousel__fleche:focus-visible { opacity: 1; }
.cld-carrousel__fleche--prec { left: 10px; }
.cld-carrousel__fleche--suiv { right: 10px; }
.cld-carrousel__points { display: flex; justify-content: center; gap: 4px; padding: 16px 0 0; }
.cld-carrousel__point { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; }
.cld-carrousel__point[aria-current="true"] { background: rgba(0, 0, 0, .8); }

/* Formulaire de contact (préréglage Divi : champs sur fond transparent, bordure fine, coins 10 px). */
.cld-form { display: flex; flex-wrap: wrap; gap: 15px; }
.cld-form__champ { width: 100%; margin: 0; padding: 0; }
.cld-form__champ--textarea, .cld-form__envoi { width: 100%; }
.cld-form__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cld-form input, .cld-form textarea {
	display: block;
	width: 100%;
	padding: 20px 16px;
	border: 1px solid rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0);
	color: var(--gcid-body-color);
	font: inherit;
	font-size: 14px;
	line-height: normal;
}
.cld-form textarea { height: 150px; resize: vertical; }
.cld-form input::placeholder, .cld-form textarea::placeholder { color: var(--gcid-body-color); }
.cld-form__envoi { display: flex; justify-content: flex-end; padding: 0; }
.cld-form__bouton { flex: 0 0 auto; padding-inline: 40px; }
.cld-form__piege { position: absolute; left: -9999px; }
.cld-form__message { width: 100%; padding: 16px 20px; border-radius: 10px; background: #fff; }
.cld-form__message--ok { border: 1px solid var(--gcid-primary-color); }
.cld-form__message--erreur { border: 1px solid #b3261e; }
@media (max-width: 767px) { .cld-form__champ { width: 100%; } }

/* Carte Google (module Code de la page Contact). */
.cld-code iframe { display: block; width: 100%; border: 0; }

/* Pages simples (nouvelles pages, listes, 404) : une colonne de lecture. */
.cld-simple { padding: 4% 0; }
.cld-simple__rangee { width: var(--cld-largeur); max-width: 1080px; margin: 0 auto; }
.cld-simple h1 { font-size: 38px; line-height: 1.2em; padding-bottom: 20px; }
.cld-extrait { padding: 20px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }

/* Section « Avis de nos clients » (extension mi-avis-google) : titre comme les titres de section Divi. */
.cld-sec--avis { background: #fff; }
.cld-avis__titre { color: #000; }

/* Chapeau sous un titre de section (ajouts SEO du 25/09/2026) : centré, largeur de lecture. */
.cld-chapeau { max-width: 820px; margin: 0 auto; text-align: center; }
.cld-titre + .cld-chapeau { margin-top: -10px; }

/* Lien avec flèche (prune, capitales), réutilisable (accueil, réalisations). */
.cld-lien-fleche a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--gcid-primary-color);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
}
.cld-lien-fleche a::after { content: "→"; font-size: 17px; transition: transform .25s; }
.cld-lien-fleche a:hover::after, .cld-metier:hover .cld-lien-fleche a::after { transform: translateX(4px); }
.cld-lien-fleche a:focus-visible { outline: 2px solid var(--gcid-primary-color); outline-offset: 3px; }

/* =========================================================================================
   Sections ajoutées le 02/10/2026 (entretien avec Catherine Lemmet) et page « Agencement intérieur » :
   même grammaire que les ajouts de l'accueil (cartes blanches à filet prune, beige #f5f4ef, titres Cormorant).
   ========================================================================================= */
.cld-bloc { padding: 4% 0; background: #fff; }
.cld-bloc--beige { background: #f5f4ef; }
.cld-bloc > * { width: var(--cld-largeur); max-width: var(--cld-largeur-max); margin-left: auto; margin-right: auto; }
.cld-bloc > .cld-bloc__tete, .cld-bloc > .cld-bloc__texte { max-width: 820px; }
.cld-bloc__tete { margin-bottom: 40px; text-align: center; }
.cld-bloc__tete p, .cld-bloc__texte p, .cld-bloc__colonne p { font-size: 17px; }
.cld-bloc__texte { margin-bottom: 44px; }
.cld-bloc__texte:last-child { margin-bottom: 0; }
.cld-bloc__texte h3, .cld-bloc__colonne h3 { padding-bottom: 14px; font-size: 26px; line-height: 1.2em; }
.cld-cartes-texte + .cld-bloc__texte { margin-top: 56px; }

.cld-cartes-texte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.cld-cartes-texte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cld-carte-texte { padding: 28px 26px 30px; border-top: 3px solid var(--gcid-primary-color); background: #fff; box-shadow: 6px 6px 12px rgba(0, 0, 0, .07); }
.cld-carte-texte__titre { padding-bottom: 12px; font-size: 22px; line-height: 1.2em; }
.cld-carte-texte p { font-size: 15px; line-height: 1.7em; }

.cld-citation { max-width: 820px; margin-top: 56px; padding-left: 30px; border-left: 3px solid var(--gcid-primary-color); }
.cld-citation__texte { padding-bottom: 14px !important; color: #000; font: italic 400 27px/1.35 var(--cld-police-titres); }
.cld-citation__auteur { color: var(--gcid-primary-color); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.cld-bloc__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 5.5%; margin-top: 56px; }
.cld-bloc__tete + .cld-bloc__duo { margin-top: 0; }

.cld-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; counter-reset: cld-etape; }
.cld-etape { counter-increment: cld-etape; padding-top: 18px; border-top: 1px solid rgba(116, 51, 68, .3); }
.cld-etape::before { content: counter(cld-etape, decimal-leading-zero); display: block; padding-bottom: 10px; color: var(--gcid-primary-color); font: 400 40px/1 var(--cld-police-titres); }
.cld-etape__titre { padding-bottom: 10px; font-size: 22px; line-height: 1.2em; }
.cld-etape p { font-size: 15px; line-height: 1.7em; }

.cld-bloc--etroit .wp-block-buttons { margin-top: 6px; }

/* Haut de la page « Agencement intérieur » : texte à gauche, photo à droite. */
.cld-entree { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5.5%; padding: 3% 10% 4%; background: #fff; }
body .cld-entree h1.wp-block-heading { padding-bottom: 22px; font-size: 50px; line-height: 1.1em; }
.cld-entree__texte p { padding-bottom: 28px; font-size: 17px; }
.cld-entree__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.cld-entree__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) { .cld-cartes-texte--4, .cld-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
	.cld-bloc { padding: 50px 0; }
	.cld-cartes-texte { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.cld-cartes-texte--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cld-entree { grid-template-columns: minmax(0, 1fr); row-gap: 30px; padding: 30px 10% 50px; }
	body .cld-entree h1.wp-block-heading { font-size: 40px; }
}
@media (max-width: 767px) {
	.cld-bloc__duo { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
	.cld-citation { margin-top: 44px; padding-left: 20px; }
	.cld-citation__texte { font-size: 22px; }
	body .cld-entree h1.wp-block-heading { font-size: clamp(25px, 8.4vw, 32px); }
}
@media (max-width: 600px) { .cld-cartes-texte--4, .cld-etapes { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
/* Boutons posés directement dans un bloc : sur téléphone, à la largeur du contenu (pas d'un bord à l'autre de l'écran). */
@media (max-width: 767px) { body .cld-bloc > .wp-block-buttons { width: var(--cld-largeur); margin-inline: auto; } }