/*
 * Thème Urgence Toiture 84. Aucun !important (règles communes § 3).
 * 1re partie : feuille du graphiste (sources/design/urgence-toiture-84.css, v1.0), reprise telle quelle sauf :
 *   --ut84-serif → Newsreader (auto-hébergée, theme.json) ; .ut84-site est posé sur <body> par functions.php.
 * 2e partie : blocs WordPress (en-tête, navigation, pied de page, contenus convertis).
 */
.ut84-site {
  --ut84-navy: #092338;
  --ut84-navy-deep: #051928;
  --ut84-ivory: #faf7f0;
  --ut84-white: #fffdf9;
  --ut84-gold: #c49a42;
  --ut84-gold-light: #f1d17c;
  --ut84-gold-dark: #80601d;
  --ut84-text: #142231;
  --ut84-muted: #52606a;
  --ut84-line: #d8cbb4;
  --ut84-serif: Newsreader, Georgia, "Times New Roman", serif;
  --ut84-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ut84-width: 1240px;
  --ut84-radius: 12px;
  --ut84-space: clamp(3rem, 6vw, 6rem);
  background: var(--ut84-ivory);
  color: var(--ut84-text);
  font: 400 1rem/1.65 var(--ut84-sans);
  text-align: left;
  overflow-wrap: break-word;
}
.ut84-site, .ut84-site *, .ut84-site *::before, .ut84-site *::after { box-sizing: border-box; }
.ut84-site :where(h1, h2, h3, p, figure) { margin: 0; }
.ut84-site :where(h1, h2, h3) {
  color: var(--ut84-navy-deep);
  font-family: var(--ut84-serif);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.ut84-site h1 { font-size: clamp(2.25rem, 4.2vw, 4.25rem); }
.ut84-site h2 { font-size: clamp(2rem, 3.3vw, 3.25rem); }
.ut84-site h3 { font-size: clamp(1.5rem, 2.4vw, 2.35rem); }
.ut84-site p + p { margin-top: 1rem; }
.ut84-site a { color: inherit; }
.ut84-site img { display: block; max-width: 100%; height: auto; }
.ut84-site :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--ut84-gold-dark);
  outline-offset: 5px;
}
.ut84-site .ut84-container { width: min(var(--ut84-width), calc(100% - 3rem)); margin-inline: auto; }
.ut84-site .ut84-section { padding-block: var(--ut84-space); }
.ut84-site .ut84-section + .ut84-section { padding-top: 0; }
.ut84-site .ut84-eyebrow {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--ut84-gold-dark);
  font: 600 .78rem/1.6 var(--ut84-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ut84-site .ut84-section-heading { max-width: 880px; margin: 0 auto 2.75rem; text-align: center; }
.ut84-site .ut84-section-heading > p:not(.ut84-eyebrow) { margin-top: 1rem; }

/* En-tête : pas de position sticky pour éviter les collisions avec la barre WP. */
.ut84-site .ut84-topbar { padding: .55rem 0; background: var(--ut84-navy); color: var(--ut84-ivory); text-align: center; font-size: .82rem; }
.ut84-site .ut84-header { background: var(--ut84-white); border-bottom: 1px solid var(--ut84-line); }
.ut84-site .ut84-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.4rem; }
.ut84-site .ut84-brand { display: flex; flex-direction: column; align-items: center; flex: 0 1 260px; text-decoration: none; }
.ut84-site .ut84-brand img { width: 245px; max-height: 115px; object-fit: contain; }
.ut84-site .ut84-brand__caption { margin-top: .5rem; font-size: .68rem; line-height: 1.4; font-style: italic; text-align: center; }
.ut84-site .ut84-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .65rem 1.25rem; }
.ut84-site .ut84-nav a { padding: .65rem 0; font-size: .88rem; font-weight: 500; text-decoration: none; text-underline-offset: .3em; }
.ut84-site .ut84-nav a:hover, .ut84-site .ut84-nav a[aria-current="page"] { color: var(--ut84-gold-dark); text-decoration: underline; }

.ut84-site .ut84-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.ut84-site .ut84-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: .6rem;
  min-height: 48px; max-width: 100%; padding: .85rem 1.4rem;
  border: 1px solid transparent; border-radius: 7px;
  font: 600 1rem/1.4 var(--ut84-sans); text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease;
}
.ut84-site .ut84-btn--gold { background: linear-gradient(115deg, var(--ut84-gold-light), #d3aa51); color: var(--ut84-navy-deep); border-color: var(--ut84-gold); }
.ut84-site .ut84-btn--gold:hover { background: #ebc66d; box-shadow: 0 5px 16px rgb(9 35 56 / 12%); }
.ut84-site .ut84-btn--navy { color: var(--ut84-white); background: var(--ut84-navy); }
.ut84-site .ut84-btn--navy:hover { background: var(--ut84-navy-deep); }
.ut84-site .ut84-btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.ut84-site .ut84-btn--outline:hover { text-decoration: underline; text-underline-offset: .25em; }
.ut84-site .ut84-link { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.ut84-site .ut84-link:hover { text-decoration-thickness: 2px; }
.ut84-site .ut84-phone { display: inline-block; font: 600 clamp(1.15rem, 2vw, 1.8rem)/1.4 var(--ut84-sans); text-decoration: none; white-space: nowrap; }

/* Image HTML plutôt qu'un background : srcset, dimensions et priorité LCP possibles. */
.ut84-site .ut84-hero { position: relative; isolation: isolate; min-height: 660px; display: grid; align-items: center; padding-block: 3.5rem; }
.ut84-site .ut84-hero__image { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ut84-site .ut84-hero__panel {
  width: min(580px, 54%); padding: clamp(1.75rem, 3vw, 3rem);
  background: rgb(250 247 240 / 97%); border: 1px solid var(--ut84-line);
  box-shadow: 0 14px 44px rgb(5 25 40 / 12%);
}
.ut84-site .ut84-hero__panel > p:not(.ut84-eyebrow) { margin-top: 1.5rem; font-size: 1.08rem; }
.ut84-site .ut84-hero__panel .ut84-actions { align-items: stretch; flex-direction: column; }
.ut84-site .ut84-hero__panel .ut84-link { align-self: flex-start; }
.ut84-site .ut84-trust { background: var(--ut84-navy); color: var(--ut84-ivory); }
.ut84-site .ut84-trust__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 1.5rem 0; }
.ut84-site .ut84-trust__list li { padding: .3rem 1.5rem; text-align: center; font: italic 1.3rem/1.3 var(--ut84-serif); }
.ut84-site .ut84-trust__list li + li { border-left: 1px solid var(--ut84-gold); }
.ut84-site .ut84-note { padding: .6rem 1.5rem; color: var(--ut84-muted); font-size: .78rem; text-align: center; }

.ut84-site .ut84-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.ut84-site .ut84-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--ut84-gold); border-radius: var(--ut84-radius); background: var(--ut84-white); }
.ut84-site .ut84-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ut84-site .ut84-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2.5rem); }
.ut84-site .ut84-card__body h3 { font-style: italic; }
.ut84-site .ut84-card__body .ut84-link { margin-top: auto; padding-top: .5rem; }
.ut84-site .ut84-study { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
.ut84-site .ut84-study__portrait { overflow: hidden; border: 1px solid var(--ut84-gold); border-radius: 18px; background: #e9e4dc; }
.ut84-site .ut84-study__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.ut84-site .ut84-study__content > p:not(.ut84-eyebrow) { margin-top: 1.2rem; }
.ut84-site .ut84-study__content h2 { font-style: italic; }
.ut84-site .ut84-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: ut84-step; list-style: none; margin: 2rem 0; padding: 0; }
.ut84-site .ut84-steps li { counter-increment: ut84-step; min-width: 0; }
.ut84-site .ut84-steps li::before { content: counter(ut84-step, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .8rem; border: 1px solid var(--ut84-gold-dark); border-radius: 50%; color: var(--ut84-gold-dark); font: italic 1.4rem var(--ut84-serif); }
.ut84-site .ut84-steps h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.ut84-site .ut84-steps p { margin-top: .5rem; color: var(--ut84-muted); font-size: .88rem; }
.ut84-site .ut84-signature { border-top: 1px solid var(--ut84-line); padding-top: 1rem; font-family: var(--ut84-serif); font-style: italic; }
.ut84-site .ut84-cta { padding: var(--ut84-space) 0; background: var(--ut84-navy); color: var(--ut84-ivory); text-align: center; }
.ut84-site .ut84-cta h2 { color: inherit; font-style: italic; }
.ut84-site .ut84-cta .ut84-actions { justify-content: center; }
.ut84-site :is(.ut84-cta, .ut84-trust, .ut84-topbar) :focus-visible { outline-color: var(--ut84-gold-light); }

/* Contenus SEO : restent visibles et lisibles, sans hauteur fixe ni troncature. */
.ut84-site .ut84-seo h2 { margin-bottom: 1.5rem; }
.ut84-site .ut84-seo h3 { margin-block: 2rem 1rem; font-size: 1.6rem; }
.ut84-site .ut84-seo p { max-width: 80ch; }
.ut84-site .ut84-seo a { text-decoration: underline; text-underline-offset: .2em; }
.ut84-site .ut84-footer { padding: 2rem 0; border-top: 1px solid var(--ut84-line); background: var(--ut84-white); text-align: center; font-size: .85rem; }
.ut84-site .ut84-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.5rem; margin-bottom: 1.5rem; }
.ut84-site .ut84-footer .ut84-brand { margin-inline: auto; width: min(100%, 260px); }

.ut84-site .ut84-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; text-align: left; }
.ut84-site .ut84-field { min-width: 0; }
.ut84-site .ut84-field--full { grid-column: 1 / -1; }
.ut84-site .ut84-field label { display: block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; }
.ut84-site .ut84-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; min-height: 48px; padding: .8rem; border: 1px solid #938779; border-radius: 6px; color: var(--ut84-text); background: var(--ut84-white); font: 1rem/1.5 var(--ut84-sans); }
.ut84-site .ut84-field textarea { min-height: 150px; resize: vertical; }
.ut84-site .ut84-field [aria-invalid="true"] { border-color: #a32020; }
.ut84-site .ut84-error { color: #a32020; font-size: .9rem; }
.ut84-site .ut84-faq { border-bottom: 1px solid var(--ut84-line); }
.ut84-site .ut84-faq summary { padding: 1.2rem 0; cursor: pointer; font-weight: 600; }
.ut84-site .ut84-faq__answer { padding-bottom: 1.5rem; }

@media (max-width: 1050px) {
  .ut84-site .ut84-header__inner { flex-wrap: wrap; }
  .ut84-site .ut84-nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--ut84-line); padding-top: .65rem; }
  .ut84-site .ut84-hero__panel { width: min(580px, 65%); }
}
@media (max-width: 767px) {
  .ut84-site .ut84-container { width: calc(100% - 2rem); }
  .ut84-site .ut84-header__inner { gap: 1rem; }
  .ut84-site .ut84-brand { flex-basis: 180px; }
  .ut84-site .ut84-brand img { width: 180px; }
  .ut84-site .ut84-header__inner > .ut84-btn { padding: .7rem; font-size: .85rem; }
  .ut84-site .ut84-nav { gap: .25rem 1rem; }
  .ut84-site .ut84-hero { display: block; padding: 0 0 1.5rem; min-height: 0; }
  .ut84-site .ut84-hero__image { position: static; height: clamp(220px, 52vw, 360px); }
  .ut84-site .ut84-hero__panel { position: relative; width: 100%; margin-top: -2rem; padding: 1.5rem; }
  .ut84-site .ut84-trust__list { grid-template-columns: 1fr; padding-block: .75rem; }
  .ut84-site .ut84-trust__list li { padding: .85rem .5rem; font-size: 1.2rem; }
  .ut84-site .ut84-trust__list li + li { border-left: 0; border-top: 1px solid rgb(196 154 66 / 50%); }
  .ut84-site .ut84-projects, .ut84-site .ut84-study, .ut84-site .ut84-form { grid-template-columns: 1fr; }
  .ut84-site .ut84-study__portrait { width: min(100%, 360px); margin-inline: auto; }
  .ut84-site .ut84-steps { gap: 1rem; }
  .ut84-site .ut84-steps h3 { font-size: 1.05rem; }
  .ut84-site .ut84-section-heading { margin-bottom: 2rem; }
}
@media (max-width: 420px) {
  .ut84-site .ut84-header__inner { justify-content: center; }
  .ut84-site .ut84-header__inner > .ut84-btn { width: 100%; }
  .ut84-site .ut84-steps { grid-template-columns: 1fr; }
  .ut84-site .ut84-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; align-items: center; }
  .ut84-site .ut84-steps li::before { grid-row: span 2; margin: 0; }
  .ut84-site .ut84-steps p { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ut84-site .ut84-btn { transition: none; }
}

/* ═══ 2. Blocs WordPress ═══════════════════════════════════════════════ */

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ut84-site .ut84-icone { flex: none; }
.ut84-site :where(.wp-site-blocks) > * { margin-block-start: 0; }

/* Bandeau du haut et en-tête */
.ut84-site .ut84-topbar p { margin: 0; letter-spacing: .04em; }
.ut84-site .ut84-topbar span[aria-hidden] { margin-inline: .5em; color: var(--ut84-gold); }
.ut84-site .ut84-header__inner { gap: 1.5rem; }
.ut84-site .ut84-brand { flex: 0 0 auto; color: var(--ut84-navy-deep); }
/* Logo image (images-design.py) : hauteur du CSS du graphiste (115 px), largeur selon le ratio ; plus petit sous 767 px. */
.ut84-site .ut84-brand img { display: block; width: auto; height: clamp(72px, 9vw, 115px); max-height: none; }
.ut84-site .ut84-brand picture { display: block; }
/* Repli texte si le logo manque (images.json absent). */
.ut84-site .ut84-brand__nom { font: 500 clamp(1.45rem, 2.4vw, 2rem)/1 var(--ut84-serif); letter-spacing: .02em; text-transform: uppercase; }
.ut84-site .ut84-brand__nom span { color: var(--ut84-gold-dark); }
.ut84-site .ut84-brand__caption { margin-top: .35rem; color: var(--ut84-muted); text-align: center; }
.ut84-site .ut84-header .ut84-nav { flex: 1 1 auto; }
.ut84-site .ut84-header__tel { white-space: nowrap; }
.ut84-site .ut84-phone.ut84-btn { display: inline-flex; font-size: 1rem; }

/* Navigation (bloc core/navigation) : liens, sous-menus, menu mobile */
.ut84-site .ut84-nav .wp-block-navigation-item__content { padding: .65rem 0; text-decoration: none; }
.ut84-site .ut84-nav .wp-block-navigation-item__content:hover,
.ut84-site .ut84-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--ut84-gold-dark); text-decoration: underline; text-underline-offset: .3em; }
.ut84-site .ut84-nav .wp-block-navigation__submenu-container {
	min-width: 230px; padding: .5rem 0; border: 1px solid var(--ut84-line); border-radius: 8px;
	background: var(--ut84-white); box-shadow: 0 14px 44px rgb(5 25 40 / 12%);
}
.ut84-site .ut84-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .55rem 1.1rem; }
.ut84-site .ut84-nav .wp-block-navigation__responsive-container-open,
.ut84-site .ut84-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; justify-content: center; }
.ut84-site .ut84-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; background: var(--ut84-ivory); color: var(--ut84-text); }
.ut84-site .ut84-nav .is-menu-open .wp-block-navigation__responsive-container-content { gap: .25rem; }
.ut84-site .ut84-nav .is-menu-open .wp-block-navigation-item__content { min-height: 44px; display: flex; align-items: center; font-size: 1.1rem; }
.ut84-site .ut84-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; background: transparent; }
@media (min-width: 600px) {
	.ut84-site .ut84-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
}

/* Contenu */
.ut84-site .ut84-titre-page { padding-top: var(--wp--preset--spacing--50); }
.ut84-site .ut84-titre-wrap:not(:has(.ut84-titre-page)) { display: none; }
.ut84-site .ut84-main > .wp-block-post-content > .alignfull { margin-block: 0; }
.ut84-site .ut84-projects > *, .ut84-site .ut84-study > * { margin: 0; }
.ut84-site .ut84-main--page { padding-bottom: 0; }
.ut84-site .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: inherit; border-color: currentColor; }
.ut84-site .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ut84-site .ut84-carte { padding: clamp(1.4rem, 3vw, 2.5rem); border: 1px solid var(--ut84-gold); border-radius: var(--ut84-radius); background: var(--ut84-white); }
.ut84-site .ut84-liste { display: grid; gap: 1.5rem; padding: 0; list-style: none; }
.ut84-site .ut84-date { color: var(--ut84-muted); font-size: .9rem; }

/* Pied de page */
.ut84-site .ut84-footer { padding-block: 2.5rem 1.5rem; }
.ut84-site .ut84-footer > * + * { margin-top: 1.5rem; }
.ut84-site .ut84-footer .ut84-footer__links .wp-block-navigation__container { flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem; } /* plusieurs lignes si besoin (débordement à 1100 px, recette du 09/11/2026) */
.ut84-site .ut84-footer__links .wp-block-navigation-item__content { display: inline-block; padding: .6rem 0; text-decoration: none; }
.ut84-site .ut84-footer__links .wp-block-navigation-item__content:hover { text-decoration: underline; }
.ut84-site .ut84-footer .ut84-brand { align-items: center; }
.ut84-site .ut84-footer .ut84-brand__caption { text-align: center; }
.ut84-site .ut84-footer__legal { color: var(--ut84-muted); font-size: .82rem; }
.ut84-site .ut84-zones { max-width: var(--ut84-width); margin-inline: auto; border-block: 1px solid var(--ut84-line); text-align: left; }
.ut84-site .ut84-zones summary { min-height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; }
.ut84-site .ut84-zones__liste { columns: 4 14rem; column-gap: 1.5rem; margin: 0; padding: 0 0 1.5rem; list-style: none; font-size: .82rem; }
.ut84-site .ut84-zones__liste a { display: inline-block; padding-block: .2rem; color: var(--ut84-muted); text-decoration: none; }
.ut84-site .ut84-zones__liste a:hover { color: var(--ut84-text); text-decoration: underline; }

/* Plan du site ([wp_sitemap_page]) */
.ut84-site .ut84-plan ul { columns: 2 22rem; column-gap: 2rem; }
.ut84-site .ut84-plan ul ul { columns: auto; }

@media (max-width: 767px) {
	.ut84-site .ut84-header__inner { flex-wrap: wrap; }
	.ut84-site .ut84-header .ut84-nav { flex: 0 0 auto; order: 2; }
	.ut84-site .ut84-header__tel { order: 3; flex: 1 0 100%; }
}

/* ═══ 3. Composants du graphiste en blocs (page « Étude de votre projet » et suivantes) ═══ */
.ut84-site .ut84-hero.wp-block-cover { padding-block: 3.5rem; }
.ut84-site .ut84-hero .wp-block-cover__inner-container { width: min(var(--ut84-width), calc(100% - 3rem)); }
.ut84-site .ut84-hero__panel { color: var(--ut84-text); }
.ut84-site .ut84-hero__panel > * + * { margin-top: 1.5rem; }
.ut84-site .ut84-actions > p { margin: 0; }
.ut84-site .ut84-hero__panel .ut84-actions > p:first-child .ut84-btn { width: 100%; }
.ut84-site .ut84-trust__list { margin-block: 0; }
.ut84-site .ut84-trust__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ut84-site .ut84-card__image { margin: 0; }
.ut84-site .ut84-card__image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ut84-site .ut84-card__body > p { margin: 0; }
.ut84-site .ut84-study__portrait { margin: 0; }
.ut84-site .ut84-cta .ut84-phone { color: var(--ut84-gold-light); display: inline-flex; align-items: center; gap: .5rem; }
.ut84-site .ut84-cta .ut84-actions { margin-top: 1.75rem; }
.ut84-site .ut84-header__tel .ut84-icone, .ut84-site .ut84-phone .ut84-icone { width: 1em; height: 1em; }
.ut84-site .ut84-demande .frm-fluent-form { margin-top: 1rem; }

/* Formulaire Fluent Forms (styles du plugin retirés par ut84-core/inc/formulaires.php) : champs du CSS fourni (.ut84-field). */
.ut84-site .frm-fluent-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ut84-site .frm-fluent-form .ff-el-group { margin: 0 0 1rem; }
.ut84-site .frm-fluent-form .ff-el-input--label label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .9rem; color: var(--ut84-text); }
.ut84-site .frm-fluent-form .ff-el-is-required.asterisk-right label::after { content: " *"; color: #a32020; }
.ut84-site .frm-fluent-form .ff-el-form-control {
	width: 100%; min-height: 48px; padding: .8rem; border: 1px solid #938779; border-radius: 6px;
	color: var(--ut84-text); background: var(--ut84-white); font: 1rem/1.5 var(--ut84-sans);
}
.ut84-site .frm-fluent-form .ff-el-form-control:focus-visible { outline: 2px solid var(--ut84-gold-dark); outline-offset: 2px; }
.ut84-site .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: #a32020; }
.ut84-site .frm-fluent-form :is(.text-danger, .error) { margin-top: .3rem; color: #a32020; font-size: .9rem; }
.ut84-site .frm-fluent-form .ff-el-group.ff-custom_html { margin-bottom: .75rem; }
.ut84-site .ut84-form-mention { margin: 0; color: var(--ut84-muted); font-size: .85rem; line-height: 1.5; }
.ut84-site .ut84-form-mention a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.ut84-site .frm-fluent-form .ff_submit_btn_wrapper { margin: 0; }
.ut84-site .frm-fluent-form .ff-btn-submit:disabled, .ut84-site .frm-fluent-form.ff-form-loading .ff-btn-submit { opacity: .7; cursor: wait; }
.ut84-site .ff-errors-in-stack:not(:empty) { margin-top: 1rem; color: #a32020; }
.ut84-site .ff-message-success { margin-top: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ut84-gold); border-radius: 6px; background: var(--ut84-white); color: var(--ut84-text); }
.ut84-site .ff-message-success p { margin: 0; }
@media (max-width: 767px) {
	.ut84-site .ut84-hero.wp-block-cover { display: block; min-height: 0; padding: 0 0 1.5rem; }
	.ut84-site .ut84-hero .wp-block-cover__image-background { position: static; height: clamp(220px, 52vw, 360px); }
	.ut84-site .ut84-hero .wp-block-cover__inner-container { width: calc(100% - 2rem); margin-inline: auto; }
	.ut84-site .ut84-hero__panel { position: relative; width: 100%; margin-top: -2rem; padding: 1.5rem; }
	.ut84-site .ut84-trust__list--2 { grid-template-columns: 1fr; }
}

/* Gabarits sans sections pleine largeur (404, recherche, archives, articles) : respiration verticale. */
.ut84-site .ut84-main:not(.ut84-main--page) { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
/* Sous-menus : flèche décalée du libellé. */
.ut84-site .ut84-nav .wp-block-navigation-submenu__toggle { padding-right: 0; }
.ut84-site .ut84-nav .has-child .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.ut84-site .ut84-nav .has-child > .wp-block-navigation__submenu-icon { margin-left: .4em; }
.ut84-site .ut84-nav .has-child > .wp-block-navigation-item__content { display: inline-flex; align-items: center; }
.ut84-site .ut84-footer .ut84-brand { width: auto; }
.ut84-site .ut84-brand__nom { white-space: nowrap; }
/* Pied de page en bas de l'écran sur les pages courtes. */
.ut84-site .wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.ut84-site .wp-site-blocks > main, .ut84-site .wp-site-blocks > .ut84-main { flex: 1 0 auto; }

/* ═══ 4. Chaleur et finitions de la maquette (06/11/2026) ═══════════════════════════════════════════════════════════════
 * Comparaison sources/design/already_used/maquette-accueil.png ↔ préproduction : filets dorés (bandeau du haut, légende du logo,
 * surtitres, menu, pied de page), contours dorés des images, Newsreader pour le menu, les boutons et les liens d'action.
 * L'or (#c49a42) reste un décor sur fond clair (contraste 2,4:1 : jamais pour du texte, CLAUDE.md « Charte »). */
.ut84-site {
	--ut84-filet: 1px solid var(--ut84-gold);
	--ut84-ombre-douce: 0 14px 40px rgb(5 25 40 / 10%);
}

/* Bandeau du haut : texte en Newsreader entre deux longs filets dorés. */
.ut84-site .ut84-topbar { padding-block: .45rem; }
.ut84-site .ut84-topbar p { display: flex; align-items: center; justify-content: center; gap: 1.25rem; font: 400 1.02rem/1.5 var(--ut84-serif); letter-spacing: .01em; }
.ut84-site .ut84-topbar p::before, .ut84-site .ut84-topbar p::after { content: ""; flex: 0 1 9rem; height: 1px; background: var(--ut84-gold); }
.ut84-site .ut84-topbar span[aria-hidden] { margin-inline: .45em; }
.ut84-site .ut84-topbar > .ut84-topbar__texte { max-width: var(--ut84-width); }
.ut84-site .ut84-topbar__items { flex: 0 1 auto; }
@media (min-width: 768px) {
	.ut84-site .ut84-topbar__items { flex-shrink: 0; white-space: nowrap; }
}

/* En-tête : fond ivoire chaud, sans filet gris ; logo agrandi ; légende entre deux filets dorés. */
.ut84-site .ut84-header { background: var(--ut84-ivory); border-bottom: 0; }
.ut84-site .ut84-header__inner { padding-block: 1.1rem; }
.ut84-site .ut84-brand img { height: clamp(84px, 10vw, 135px); }
.ut84-site .ut84-brand__caption { display: flex; align-items: center; gap: .55rem; font: italic 400 .8rem/1.3 var(--ut84-serif); color: var(--ut84-text); }
.ut84-site .ut84-brand__caption::before, .ut84-site .ut84-brand__caption::after { content: ""; flex: 0 0 1.6rem; height: 1px; background: var(--ut84-gold); }

/* Menu : Newsreader, items séparés par un filet doré vertical (comme la maquette). */
.ut84-site .ut84-nav .wp-block-navigation-item__content { font: 500 1.05rem/1.25 var(--ut84-serif); letter-spacing: 0; }
@media (min-width: 600px) {
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container { gap: 0; }
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container > .wp-block-navigation-item { padding-inline: 1.15rem; }
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item { border-left: var(--ut84-filet); }
}
.ut84-site .ut84-nav .is-menu-open .wp-block-navigation-item { border: 0; padding-inline: 0; }
/* Menu de la maquette (5 entrées, 09/11/2026) sur la ligne du logo : libellés longs sur deux lignes, centrés (« Sinistres &
   assurances », « Étude de votre projet »), comme la maquette ; une seule rangée à partir de 1241 px. Entre 1051 et 1240 px,
   le menu passe sous le logo, comme sous 1050 px (CSS du graphiste). */
@media (min-width: 1051px) and (max-width: 1240px) {
	.ut84-site .ut84-header__inner { flex-wrap: wrap; }
	.ut84-site .ut84-header .ut84-nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--ut84-line); padding-top: .65rem; }
}
@media (min-width: 600px) and (max-width: 1240px) {
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container { flex-wrap: wrap; justify-content: center; row-gap: .25rem; }
}
/* 600-767 px : menu complet (pas encore le bouton du menu mobile) ; 5 entrées : pleine largeur sous le logo, sur plusieurs lignes. */
@media (min-width: 600px) and (max-width: 767px) {
	.ut84-site .ut84-header .ut84-nav { flex: 1 1 100%; order: 2; }
}
@media (min-width: 1241px) {
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container { flex-wrap: nowrap; align-items: center; }
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container > .wp-block-navigation-item { padding-inline: clamp(.7rem, 1.3vw, 1.15rem); }
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { max-width: 7.4em; text-align: center; }
}

/* Bouton d'appel de l'en-tête : pilule marine, numéro en italique, combiné doré. */
.ut84-site .ut84-header__tel.ut84-btn { padding: .75rem 1.5rem; border-radius: 999px; font: italic 500 1.2rem/1.2 var(--ut84-serif); box-shadow: 0 6px 18px rgb(5 25 40 / 18%); }
.ut84-site .ut84-header__tel .ut84-icone, .ut84-site .ut84-cta .ut84-phone .ut84-icone { color: var(--ut84-gold-light); width: 1.1em; height: 1.1em; }

/* Boutons et liens d'action : Newsreader, comme la maquette. */
.ut84-site .ut84-btn { font: 600 1.1rem/1.3 var(--ut84-serif); letter-spacing: 0; border-radius: 9px; }
.ut84-site .ut84-btn--gold { box-shadow: 0 6px 18px rgb(128 96 29 / 22%), inset 0 1px 0 rgb(255 255 255 / 45%); }
.ut84-site .ut84-link { font: italic 600 1.12rem/1.4 var(--ut84-serif); text-decoration-color: var(--ut84-gold); text-underline-offset: .35em; }

/* Surtitres : filet doré après (blocs alignés à gauche), de part et d'autre (titres de section centrés). */
.ut84-site :is(.ut84-hero__panel, .ut84-study__content) .ut84-eyebrow { display: flex; align-items: center; gap: 1rem; }
.ut84-site :is(.ut84-hero__panel, .ut84-study__content) .ut84-eyebrow::after { content: ""; flex: 0 1 8rem; height: 1px; background: var(--ut84-gold); }
.ut84-site .ut84-section-heading .ut84-eyebrow { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.ut84-site .ut84-section-heading .ut84-eyebrow::before, .ut84-site .ut84-section-heading .ut84-eyebrow::after { content: ""; flex: 0 1 6.5rem; height: 1px; background: var(--ut84-gold); }

/* Haut de page : panneau collé à l'en-tête, court filet doré sous le h1. */
.ut84-site .ut84-main--page > .wp-block-post-content { margin-block-start: 0; }
.ut84-site .ut84-hero__panel { border-color: rgb(196 154 66 / 45%); }
.ut84-site .ut84-hero__panel h1::after { content: ""; display: block; width: 4.5rem; height: 2px; margin-top: 1.4rem; background: var(--ut84-gold); }

/* Bandeau des trois piliers : italique plus présent, filets dorés courts. */
.ut84-site .ut84-trust__list { padding-block: 1.35rem; }
.ut84-site .ut84-trust__list li { font: italic 500 clamp(1.25rem, 1.9vw, 1.6rem)/1.25 var(--ut84-serif); }
.ut84-site .ut84-trust__list { align-items: center; }
.ut84-site .ut84-trust__list li + li { border-left-width: 1.5px; }

/* Cartes : contour doré plus franc, trait doré sous le titre, moins de vide sous la photo. */
.ut84-site .ut84-card { border-width: 1.5px; box-shadow: var(--ut84-ombre-douce); }
.ut84-site .ut84-card__image { border-bottom: var(--ut84-filet); }
.ut84-site .ut84-card__body { gap: .9rem; padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.4rem, 2.8vw, 2.3rem) clamp(1.5rem, 2.8vw, 2.2rem); }
.ut84-site .ut84-card__body h3 { font-weight: 600; }
.ut84-site .ut84-card__body h3::after { content: ""; display: block; width: 2.75rem; height: 2px; margin-top: .8rem; background: var(--ut84-gold); }

/* Encart « Bureau d'études & accompagnement » : illustration à gauche (1/3), contenu à droite (2/3), contour doré. */
.ut84-site .ut84-study { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; }
.ut84-site .ut84-study__portrait { margin: 0; border: 2px solid var(--ut84-gold); border-radius: 18px; box-shadow: var(--ut84-ombre-douce); }
.ut84-site .ut84-study__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.ut84-site .ut84-study__content h2 { font-weight: 600; }
.ut84-site .ut84-study__content > p:not(.ut84-eyebrow) { font-size: 1.06rem; max-width: 62ch; }
.ut84-site .ut84-steps { gap: 1.5rem; margin: 2.2rem 0 0; }
.ut84-site .ut84-steps li { position: relative; font: inherit; color: inherit; }
.ut84-site .ut84-steps li::before { border: 1.5px solid var(--ut84-gold); background: var(--ut84-white); color: var(--ut84-gold-dark); font: 600 1.15rem/1 var(--ut84-serif); }
/* filet doré reliant les cercles 01 → 02 → 03 */
.ut84-site .ut84-steps li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: calc(44px + .75rem); right: calc(-1.5rem + .75rem); height: 1px; background: var(--ut84-gold); }
.ut84-site .ut84-steps h3 { margin: 0; color: var(--ut84-navy-deep); font: italic 600 1.2rem/1.25 var(--ut84-serif); letter-spacing: -.01em; }
.ut84-site .ut84-steps p { margin-top: .45rem; font-size: .93rem; line-height: 1.5; }
.ut84-site .ut84-study .ut84-actions { margin-top: 2rem; padding-top: 1.6rem; border-top: var(--ut84-filet); }

/* Bandeau d'appel : frise d'Avignon pleine largeur, collée au bas du bandeau ; filet doré entre le bouton et le téléphone. */
.ut84-site .ut84-cta { padding-bottom: 0; overflow: hidden; }
.ut84-site .ut84-cta .ut84-phone { font: 600 clamp(1.35rem, 2.2vw, 1.9rem)/1.3 var(--ut84-serif); letter-spacing: .01em; }
@media (min-width: 600px) {
	.ut84-site .ut84-cta .ut84-actions > :not(:first-child) { padding-left: 1.5rem; border-left: var(--ut84-filet); }
}
.ut84-site .ut84-cta > .ut84-frise { width: 100vw; max-width: none; margin: clamp(1.5rem, 3.5vw, 2.75rem) calc(50% - 50vw) 0; line-height: 0; }
.ut84-site .ut84-frise img { width: 100%; height: auto; }

/* Pied de page : liens entre deux filets dorés, points dorés entre les liens ; Newsreader. */
.ut84-site .ut84-footer { background: var(--ut84-ivory); border-top: 0; }
/* WordPress pose la classe sur le <nav> ET sur la liste <ul> : filets sur le <nav> seulement ; la liste n'hérite pas de la marge basse. */
.ut84-site nav.ut84-footer__links > ul.ut84-footer__links { margin: 0; }
.ut84-site nav.ut84-footer__links { align-items: center; justify-content: center; gap: 1.5rem; max-width: var(--ut84-width); margin-inline: auto; }
@media (min-width: 1100px) {
	.ut84-site nav.ut84-footer__links { flex-wrap: nowrap; }
	.ut84-site nav.ut84-footer__links::before, .ut84-site nav.ut84-footer__links::after { content: ""; flex: 1 1 3rem; max-width: 11rem; height: 1px; background: var(--ut84-gold); }
	.ut84-site nav.ut84-footer__links > .wp-block-navigation__container { flex: 0 1 auto; flex-wrap: nowrap; white-space: nowrap; }

}
.ut84-site .ut84-footer__links .wp-block-navigation__container { gap: .3rem 0; }
.ut84-site .ut84-footer__links .wp-block-navigation-item + .wp-block-navigation-item::before { content: "•"; margin-inline: .7rem; color: var(--ut84-gold); }
.ut84-site .ut84-footer__links .wp-block-navigation-item__content { font: 400 1.02rem/1.4 var(--ut84-serif); }

@media (max-width: 767px) {
	.ut84-site .ut84-study { grid-template-columns: 1fr; }
	.ut84-site .ut84-study__portrait { width: min(100%, 360px); margin-inline: auto; }
	.ut84-site :is(.ut84-hero__panel, .ut84-study__content) .ut84-eyebrow { letter-spacing: .12em; }
	.ut84-site :is(.ut84-hero__panel, .ut84-study__content) .ut84-eyebrow::after { display: none; }
	.ut84-site .ut84-section-heading .ut84-eyebrow::before, .ut84-site .ut84-section-heading .ut84-eyebrow::after { flex: 0 0 1.75rem; }
	.ut84-site .ut84-topbar p::before, .ut84-site .ut84-topbar p::after { flex-basis: 1.5rem; }
}
@media (max-width: 600px) {
	.ut84-site .ut84-topbar p::before, .ut84-site .ut84-topbar p::after { display: none; }
	.ut84-site .ut84-steps { grid-template-columns: 1fr; gap: 1.1rem; }
	.ut84-site .ut84-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; align-items: center; }
	.ut84-site .ut84-steps li::before { grid-row: span 2; margin: 0; }
	.ut84-site .ut84-steps p { grid-column: 2; margin-top: .2rem; }
	.ut84-site .ut84-steps li:not(:last-child)::after { display: none; }
}

/* ═══ 5. Dorures métalliques et lueur sous l'en-tête (06/11/2026, sources/design/css/golden et border) ══════════════════
 * Contours : technique du double fond (fond de l'élément en padding-box, dégradé or en border-box), palette « golden » du
 * graphiste ; épaisseurs du thème conservées, sans le reflet animé. Filets : dégradé or horizontal ou vertical.
 * Une seule animation sur la page : l'éclat qui parcourt le filet sous l'en-tête (pas sur les images ni les blocs). */
.ut84-site {
	--ut84-or-metal: linear-gradient(45deg, #f6dba6, #ffebc4, #f0be79, #8f653b, #673d22, #ba7f3b, #eebc70);
	--ut84-or-trait: linear-gradient(90deg, #a87434, #f0be79 28%, #ffebc4 50%, #f0be79 72%, #a87434);
	--ut84-or-trait-v: linear-gradient(180deg, #a87434, #f0be79 30%, #ffebc4 50%, #f0be79 70%, #a87434);
}
/* Contours métalliques : cartes, illustration de l'encart, panneau du haut de page. */
.ut84-site .ut84-card {
	border: 2px solid transparent;
	background: linear-gradient(var(--ut84-white), var(--ut84-white)) padding-box, var(--ut84-or-metal) border-box;
}
.ut84-site .ut84-study__portrait {
	border: 3px solid transparent;
	background: linear-gradient(var(--ut84-ivory), var(--ut84-ivory)) padding-box, var(--ut84-or-metal) border-box;
}
.ut84-site .ut84-study__portrait img { border-radius: 15px; }
.ut84-site .ut84-hero__panel {
	border: 2px solid transparent;
	background: linear-gradient(rgb(250 247 240 / 97%), rgb(250 247 240 / 97%)) padding-box, var(--ut84-or-metal) border-box;
}
.ut84-site .ut84-card__image { border-bottom: 1.5px solid transparent; border-image: var(--ut84-or-trait) 1; }
/* Séparateurs verticaux : menu, piliers, bouton / téléphone du bandeau d'appel. */
@media (min-width: 600px) {
	.ut84-site .ut84-header .ut84-nav .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item { border-image: var(--ut84-or-trait-v) 1; }
	.ut84-site .ut84-cta .ut84-actions > :not(:first-child) { border-image: var(--ut84-or-trait-v) 1; }
}
@media (min-width: 768px) {
	.ut84-site .ut84-trust__list li + li { border-image: var(--ut84-or-trait-v) 1; }
}
/* Filets horizontaux en dégradé or. */
.ut84-site .ut84-topbar p::before, .ut84-site .ut84-topbar p::after,
.ut84-site .ut84-brand__caption::before, .ut84-site .ut84-brand__caption::after,
.ut84-site .ut84-eyebrow::before, .ut84-site .ut84-eyebrow::after,
.ut84-site .ut84-hero__panel h1::after, .ut84-site .ut84-card__body h3::after,
.ut84-site .ut84-steps li:not(:last-child)::after,
.ut84-site nav.ut84-footer__links::before, .ut84-site nav.ut84-footer__links::after { background: var(--ut84-or-trait); }
.ut84-site .ut84-study .ut84-actions { border-top: 1px solid transparent; border-image: var(--ut84-or-trait) 1; }
.ut84-site .ut84-steps li::before { border-color: #c9a05a; }

/* Filet or sous l'en-tête : décor fixe (l'éclat animé est passé sur le panneau du haut de page, Olivier 06/11/2026). */
.ut84-site .ut84-header { position: relative; }
.ut84-site .ut84-header::after {
	content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
	background: linear-gradient(90deg, rgb(196 154 66 / 0%), #ba7f3b 12%, #f0be79 50%, #ba7f3b 88%, rgb(196 154 66 / 0%));
}

/* Éclat qui parcourt le contour doré du panneau du haut de page (sources/design/css/border, adapté) : un demi-tour, scintillement
 * qui grandit puis reprend sa taille, fin du tour, puis ≈ 10 s de pause (cycle de 18 s). Dégradé conique masqué pour ne peindre que
 * le contour ; propriétés enregistrées (@property) : seule la peinture de l'anneau est animée. Une seule animation par page. */
@property --ut84-eclat-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ut84-eclat-arc { syntax: "<angle>"; inherits: false; initial-value: 40deg; }
@property --ut84-eclat-o { syntax: "<number>"; inherits: false; initial-value: 0; }
.ut84-site .ut84-hero__panel { position: relative; }
.ut84-site .ut84-hero__panel::after {
	content: ""; position: absolute; inset: -2px; padding: 4px; pointer-events: none; border-radius: inherit;
	opacity: var(--ut84-eclat-o);
	background: conic-gradient(from var(--ut84-eclat-a),
		rgb(255 246 222 / 0%) 0deg,
		rgb(255 246 222 / 0%) calc(360deg - var(--ut84-eclat-arc)),
		rgb(255 240 205 / 75%) calc(360deg - var(--ut84-eclat-arc) * .45),
		rgb(255 255 255 / 100%) calc(360deg - 4deg),
		rgb(255 255 255 / 0%) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); /* pas de filter ici : filter + mask masquent tout (Chromium) */
	animation: ut84-eclat 18s cubic-bezier(.45, 0, .3, 1) 2s infinite;
}
@keyframes ut84-eclat {
	0%   { --ut84-eclat-a: 0deg;   --ut84-eclat-o: 0; --ut84-eclat-arc: 40deg; }
	3%   { --ut84-eclat-o: 1; }
	20%  { --ut84-eclat-a: 180deg; --ut84-eclat-arc: 40deg; }
	24%  { --ut84-eclat-a: 180deg; --ut84-eclat-arc: 120deg; }
	28%  { --ut84-eclat-a: 180deg; --ut84-eclat-arc: 40deg; }
	44%  { --ut84-eclat-o: 1; }
	46%  { --ut84-eclat-a: 360deg; --ut84-eclat-o: 0; --ut84-eclat-arc: 40deg; }
	100% { --ut84-eclat-a: 360deg; --ut84-eclat-o: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ut84-site .ut84-hero__panel::after { display: none; }
}

/* ═══ 6. Pages converties de Divi (étape 4, scripts/lib/divi-blocs.php ; design n° 8 à 13) ═══════════════════════════════ */
.ut84-site .ut84-main--page .ut84-section > :is(h2, h3, h4):not(:first-child) { margin-top: 2.4rem; }
.ut84-site .ut84-main--page .ut84-section > :is(h2, h3, h4) + * { margin-top: 1rem; }
.ut84-site .ut84-main--page .ut84-section > :is(p, ul, ol, .wp-block-details) + :is(p, ul, ol, .wp-block-details) { margin-top: 1rem; }
.ut84-site .ut84-section .wp-block-list { padding-left: 1.2rem; }
.ut84-site .ut84-section .wp-block-list li + li { margin-top: .35rem; }
.ut84-site .ut84-intro { padding-top: clamp(2.5rem, 5vw, 4rem); }
.ut84-site .ut84-section .wp-block-columns { gap: clamp(1.5rem, 3vw, 2.5rem); margin-block: 2rem 0; }
.ut84-site .ut84-section .wp-block-columns:first-child { margin-top: 0; }
.ut84-site .ut84-section .wp-block-column > * + * { margin-top: 1rem; }
/* Cartes (cta, blurb, diapositives) : contour or métallique comme les cartes de la maquette. */
.ut84-site .ut84-carte {
	display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.3rem, 2.4vw, 2rem);
	border: 2px solid transparent; border-radius: var(--ut84-radius); box-shadow: var(--ut84-ombre-douce);
	background: linear-gradient(var(--ut84-white), var(--ut84-white)) padding-box, var(--ut84-or-metal) border-box;
}
.ut84-site .ut84-carte > * { margin: 0; }
.ut84-site .ut84-carte :is(h2, h3, h4, h5) { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-style: italic; font-weight: 600; }
.ut84-site .ut84-carte :is(h2, h3, h4, h5)::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-top: .7rem; background: var(--ut84-or-trait); }
.ut84-site .ut84-carte .wp-block-image { margin: calc(-1 * clamp(1.3rem, 2.4vw, 2rem)) calc(-1 * clamp(1.3rem, 2.4vw, 2rem)) .3rem; }
.ut84-site .ut84-carte .wp-block-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--ut84-radius) - 2px) calc(var(--ut84-radius) - 2px) 0 0; }
.ut84-site .ut84-carte .ut84-actions { margin-top: auto; padding-top: .4rem; }
.ut84-site .ut84-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: 2rem; }
.ut84-site .ut84-grille:first-child { margin-top: 0; }
.ut84-site .wp-block-columns + .ut84-carte, .ut84-site :not(.ut84-grille, .ut84-contact__coordonnees) > .ut84-carte + .ut84-carte { margin-top: 1.25rem; }
/* Images seules et galeries de chantier : contour or. */
.ut84-site .ut84-section > .wp-block-image img, .ut84-site .wp-block-column > .wp-block-image img { border-radius: var(--ut84-radius); border: 2px solid var(--ut84-gold); }
/* Questions repliables (design n° 12). */
.ut84-site .wp-block-details { border-bottom: 1px solid var(--ut84-line); padding-block: .4rem; }
.ut84-site .wp-block-details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 1.15rem/1.3 var(--ut84-serif); color: var(--ut84-navy-deep); }
.ut84-site .wp-block-details[open] > summary { margin-bottom: .6rem; }
.ut84-site .ut84-adresse { font-style: normal; }
.ut84-site .ut84-formulaire { max-width: 760px; }

/* ═══ 7. Composants des gabarits (BRIEF-04 § 2) : accueil d'abord ═══════════════════════════════════════════════════════
 * Règles du graphiste : largeur de lecture ≠ largeur de mise en page ; pas de hauteur fixe pour les textes ; un composant sans
 * contenu ne s'affiche pas (:empty, :has) ; boutons et espacements uniformes. */
.ut84-site .ut84-section > * + * { margin-top: clamp(2rem, 4vw, 3.25rem); }
.ut84-site .ut84-section > .ut84-section-heading { margin-bottom: 0; }
.ut84-site .ut84-actions:is(.wp-block-group) { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.ut84-site .ut84-actions > p { margin: 0; }
.ut84-site .ut84-hero__panel .ut84-actions:is(.wp-block-group) { flex-direction: column; align-items: stretch; }
.ut84-site .ut84-hero__panel .ut84-actions > p:has(.ut84-link), .ut84-site .ut84-hero__panel .ut84-actions > .ut84-phone { align-self: flex-start; }

/* Prestations : cartes de même format (titre, phrase, lien), grille compacte. */
.ut84-site .ut84-prestations { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ut84-site .ut84-prestations .ut84-carte p { margin: 0; }
.ut84-site .ut84-prestations__liste { max-width: var(--wp--style--global--content-size, 820px); }
.ut84-site .ut84-prestations__liste .wp-block-list { columns: 2 16rem; column-gap: 2rem; margin-top: .8rem; }

/* Savoir-faire : questions repliables, largeur de lecture. */
.ut84-site .ut84-savoir { max-width: 820px; margin-inline: auto; }
.ut84-site .ut84-savoir .wp-block-details > *:not(summary) + * { margin-top: .9rem; }

/* Texte + image (deux colonnes ; --inverse : image à gauche). */
.ut84-site .ut84-texte-image { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.ut84-site .ut84-texte-image--inverse > :first-child { order: 2; }
.ut84-site .ut84-texte-image__texte > * + * { margin-top: 1rem; }
.ut84-site .ut84-texte-image .wp-block-image { margin: 0; }
.ut84-site .ut84-texte-image .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 2px solid transparent;
	background: linear-gradient(var(--ut84-ivory), var(--ut84-ivory)) padding-box, var(--ut84-or-metal) border-box; }
.ut84-site .ut84-lecture { max-width: 820px; margin-inline: auto; }
.ut84-site .ut84-lecture > * + * { margin-top: 1rem; }

/* Chiffres clés. */
.ut84-site .ut84-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center; }
.ut84-site .ut84-stat { padding: 1.1rem .75rem; border-block: 1px solid transparent; border-image: var(--ut84-or-trait) 1; }
.ut84-site .ut84-stat > p { margin: 0; }
.ut84-site .ut84-stat__valeur { font: italic 600 clamp(1.9rem, 3.2vw, 2.6rem)/1.1 var(--ut84-serif); color: var(--ut84-navy-deep); }
.ut84-site .ut84-stat__libelle { margin-top: .3rem; color: var(--ut84-muted); font-size: .92rem; }

/* Galerie de chantiers : photos de même proportion, contour or. */
.ut84-site .ut84-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.ut84-site .ut84-galerie > .wp-block-image { margin: 0; }
.ut84-site .ut84-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 2px solid transparent;
	background: linear-gradient(var(--ut84-ivory), var(--ut84-ivory)) padding-box, var(--ut84-or-metal) border-box; }
.ut84-site .ut84-avis .ut84-stats { margin-top: .5rem; }

/* Zone : trois départements. */
.ut84-site .ut84-zone { max-width: 820px; margin-inline: auto; text-align: center; }
.ut84-site .ut84-zone > * + * { margin-top: 1rem; }
.ut84-site .ut84-zone .ut84-eyebrow { justify-content: center; }
.ut84-site .ut84-depts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.ut84-site .ut84-dept { padding: 1rem .5rem; border: 2px solid transparent; border-radius: var(--ut84-radius);
	background: linear-gradient(var(--ut84-white), var(--ut84-white)) padding-box, var(--ut84-or-metal) border-box; }
.ut84-site .ut84-dept h4 { margin: 0; font: italic 600 1.2rem/1.3 var(--ut84-serif); }

/* Bandeau d'appel : note sous le texte. */
.ut84-site .ut84-cta > * + * { margin-top: 1rem; }
.ut84-site .ut84-cta p { max-width: 62ch; margin-inline: auto; }
.ut84-site .ut84-cta .ut84-cta__note { color: var(--ut84-gold-light); font: italic 500 1.15rem/1.4 var(--ut84-serif); }
.ut84-site .ut84-cta .ut84-btn--outline { color: var(--ut84-ivory); }

/* Contact : formulaire et coordonnées côte à côte (empilés en mobile). */
.ut84-site .ut84-contact { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.ut84-site .ut84-contact__formulaire > * + * { margin-top: .9rem; }
.ut84-site .ut84-contact__coordonnees { display: grid; gap: 1rem; }
.ut84-site .ut84-contact__coordonnees .ut84-carte { padding: 1.1rem 1.3rem; gap: .35rem; }
.ut84-site .ut84-note { color: var(--ut84-muted); font-size: .85rem; }

/* Grilles : WordPress ajoute une marge haute à chaque enfant (mise en page « flow ») → décalages ; annulée dans les composants en grille. */
.ut84-site :is(.ut84-grille, .ut84-depts, .ut84-stats, .ut84-galerie, .ut84-contact, .ut84-contact__coordonnees, .ut84-texte-image, .ut84-projects) > * { margin-block: 0; }
.ut84-site .ut84-cta .ut84-actions > * { margin-inline: 0; max-width: none; }
.ut84-site .ut84-prestations__liste { margin-inline: auto; }
@media (min-width: 768px) {
	.ut84-site .ut84-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* 5 photos : la première sur deux colonnes (2 rangées pleines). */
	.ut84-site .ut84-galerie > :first-child:nth-last-child(5) { grid-column: span 2; }
	.ut84-site .ut84-galerie > :first-child:nth-last-child(5) img { aspect-ratio: 8 / 3; }
}
/* Carte de coordonnées sans valeur (ex. e-mail public pas encore choisi, question 18) : masquée. */
.ut84-site .ut84-contact__coordonnees .ut84-carte--email:not(:has(a)) { display: none; }

/* Contenu absent = composant absent (graphiste, règle 4). */
.ut84-site :is(.ut84-carte, .ut84-stat, .ut84-dept, .ut84-galerie):not(:has(*:not(:empty))) { display: none; }
.ut84-site .wp-block-image:not(:has(img)) { display: none; }

@media (max-width: 767px) {
	/* mobile plus court (graphiste : déroulé trop long) : prestations et galerie sur deux colonnes */
	.ut84-site .ut84-prestations, .ut84-site .ut84-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.ut84-site .ut84-prestations .ut84-carte { padding: 1rem; }
	.ut84-site .ut84-prestations .ut84-carte :is(h3, h4) { font-size: 1.12rem; }
	.ut84-site .ut84-texte-image, .ut84-site .ut84-contact { grid-template-columns: 1fr; }
	.ut84-site .ut84-texte-image--inverse > :first-child { order: 0; }
	.ut84-site .ut84-depts { grid-template-columns: 1fr; }
}

/* Modèles services / pages locales (BRIEF-04 § 4) */
.ut84-site .wp-block-list.ut84-colonnes { columns: 2 16rem; column-gap: 2.5rem; }
.ut84-site .wp-block-list.ut84-colonnes li { break-inside: avoid; }
.ut84-site .ut84-dept :is(h3, h4) { margin: 0; font: italic 600 1.15rem/1.35 var(--ut84-serif); }
.ut84-site .ut84-complementaires { text-align: center; }
.ut84-site .ut84-complementaires .ut84-eyebrow { justify-content: center; }
.ut84-site .ut84-liens { font: 500 1.1rem/1.6 var(--ut84-serif); }
.ut84-site .ut84-liens a { text-decoration-color: var(--ut84-gold); text-underline-offset: .25em; }
.ut84-site .ut84-section > .wp-block-paragraph:has(> .ut84-btn), .ut84-site .ut84-section > p.ut84-actions { text-align: center; }
/* Photo de chantier servie par [ut84_visuel] dans « texte + image » ; bloc centré (phrase + actions). */
.ut84-site .ut84-texte-image .ut84-visuel { margin: 0; }
.ut84-site .ut84-texte-image .ut84-visuel img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 16px; border: 2px solid transparent;
	background: linear-gradient(var(--ut84-ivory), var(--ut84-ivory)) padding-box, var(--ut84-or-metal) border-box; }
.ut84-site .ut84-centre { text-align: center; }
.ut84-site .ut84-centre .ut84-actions { justify-content: center; }
/* Haut de page « centre gauche » (pages services et locales) : WordPress met le conteneur en width: auto; margin: 0 (5 classes)
   et la mise en page contrainte centre le panneau (marges forcées). Avec un texte court, le conteneur se réduisait au contenu et
   le panneau (54 %) devenait étroit. Ici le conteneur a la largeur du panneau, calé au bord gauche de la zone de contenu (1240 px). */
.ut84-site .ut84-hero { grid-template-columns: minmax(0, 1fr); }
.ut84-site .ut84-hero.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: min(580px, calc(100% - 3rem)); margin-inline: max(1.5rem, (100% - var(--ut84-width)) / 2) auto;
}
.ut84-site .ut84-hero.has-custom-content-position .wp-block-cover__inner-container > .ut84-hero__panel { width: 100%; }
@media (max-width: 767px) {
	.ut84-site .ut84-hero.wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container { width: calc(100% - 2rem); margin-inline: auto; }
}
/* 4 éléments (engagements) : 4 colonnes, 2 sur tablette. */
@media (min-width: 768px) {
	.ut84-site .ut84-depts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ut84-site .ut84-depts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Hubs (BRIEF-03 § H2) : grille des communes ([ut84_communes]), galerie de photos [ut84_visuel], tableau. */
.ut84-site .ut84-communes { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .35rem 1.5rem; }
.ut84-site .ut84-communes li { padding: .55rem 0; border-bottom: 1px solid var(--ut84-line); }
.ut84-site .ut84-communes a { color: var(--ut84-navy); text-decoration-color: var(--ut84-gold); text-underline-offset: .25em; }
.ut84-site .ut84-communes--detail { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ut84-site .ut84-communes__nom { display: block; font-family: var(--ut84-serif); font-size: 1.15rem; color: var(--ut84-navy); }
.ut84-site .ut84-communes + .ut84-communes { margin-top: 2rem; }
.ut84-site .ut84-galerie > .ut84-visuel { margin: 0; }
.ut84-site .ut84-lecture .wp-block-table table { width: 100%; border-collapse: collapse; }
.ut84-site .ut84-lecture .wp-block-table :is(th, td) { padding: .6rem .75rem; border-bottom: 1px solid var(--ut84-line); text-align: left; vertical-align: top; }
.ut84-site .ut84-lecture .wp-block-table th { color: var(--ut84-navy); font-family: var(--ut84-serif); }
/* Pages ville ↔ hubs (BRIEF-03 § H4) : fil d'Ariane [ut84_ariane], bloc [ut84_maillage]. */
.ut84-site .ut84-ariane { width: min(var(--ut84-width), calc(100% - 3rem)); margin: 0 auto; padding-block: .7rem; font-size: .88rem; color: var(--ut84-muted); }
.ut84-site .ut84-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.ut84-site .ut84-ariane li + li::before { content: "›"; margin-right: .5rem; color: var(--ut84-gold-dark); }
.ut84-site .ut84-ariane a { color: var(--ut84-muted); text-underline-offset: .2em; }
.ut84-site .ut84-maillage { display: grid; gap: 2rem; }
.ut84-site .ut84-maillage .wp-block-heading { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; }
.ut84-site .ut84-maillage__hub { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.ut84-site .ut84-maillage__hub a { font-family: var(--ut84-serif); font-size: 1.2rem; color: var(--ut84-navy); text-decoration-color: var(--ut84-gold); text-underline-offset: .25em; }
@media (min-width: 900px) {
	.ut84-site .ut84-maillage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ut84-site .ut84-maillage__hub { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
	.ut84-site .ut84-ariane { width: calc(100% - 2rem); }
}
/* Page « Zones d'intervention » et lien du pied de page qui la remplace (BRIEF-03 § H2). */
.ut84-site .ut84-zones--lien { margin-block: 0; padding-block: .25rem; text-align: center; }
.ut84-site .ut84-zones--lien a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--ut84-text); text-decoration-color: var(--ut84-gold); text-underline-offset: .25em; }
.ut84-site .ut84-zones-dep + .ut84-zones-dep { margin-top: clamp(2rem, 4vw, 3rem); }
.ut84-site .ut84-zones-dep .ut84-communes__nom a { color: var(--ut84-navy); text-decoration: none; }
.ut84-site .ut84-zones-dep .ut84-communes__nom a:hover { text-decoration: underline; text-decoration-color: var(--ut84-gold); }
/* Page « Nos conseils » (blog) : cartes d'articles. */
.ut84-site .ut84-articles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.ut84-site .ut84-carte--article .wp-block-heading { font-size: clamp(1.35rem, 2vw, 1.7rem); margin-block: 1rem .5rem; }
.ut84-site .ut84-carte--article .wp-block-heading a { color: var(--ut84-navy); text-decoration: none; }
.ut84-site .ut84-carte--article .wp-block-heading a:hover { text-decoration: underline; text-decoration-color: var(--ut84-gold); }
.ut84-site .ut84-carte--article img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
/* Bandeau des piliers : liens vers les pages piliers. */
.ut84-site .ut84-trust__list a { color: inherit; text-decoration: underline; text-decoration-color: var(--ut84-gold); text-decoration-thickness: 1px; text-underline-offset: .3em; }
.ut84-site .ut84-trust__list a:hover, .ut84-site .ut84-trust__list a:focus-visible { text-decoration-thickness: 2px; }
/* Surtitre dans le bandeau marine : or de la charte (6,2:1 sur marine) ; l'or foncé n'y fait que 2,75:1 (Lighthouse, 07/11/2026). */
.ut84-site .ut84-cta .ut84-eyebrow { color: var(--ut84-gold); }

/* Avis Google (Trustindex) : le carrousel et ses infobulles dépassaient à droite (défilement horizontal à 1100 px, recette du 09/11/2026). */
.ut84-site .ut84-section--avis { overflow-x: clip; }