/*
Theme Name: Astra Child — By Labelreno
Template: astra
Description: Thème enfant d'Astra pour Menuiserie by Labelreno (C. Potet). Tout le CSS du site est dans CE fichier, et nulle part ailleurs (site + éditeur).
Author: ADWEB Conseil
Author URI: https://www.adweb-conseil.fr
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: astra-child
*/

/* SOMMAIRE
   1. Base, en-tête, pages (site)
   2. Blocs de l'éditeur (site + éditeur)
   3. Boutons de l'éditeur
   4. Délais d'animation
*/

/* ==========================================================================
   1. Base, en-tête, pages
   ========================================================================== */
/* ==========================================================================
   By Labelreno — styles principaux
   ========================================================================== */

:root {
	--green: #89bd3b;
	--green-dark: #6e9a2c;
	--green-soft: #f1f7e8;
	--ink: #141414;
	--ink-2: #3a3a3a;
	--muted: #6b6b6b;
	--line: #e6e6e6;
	--bg: #ffffff;
	--bg-alt: #f6f6f3;
	--dark: #161616;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow: 0 10px 30px rgba(0, 0, 0, .08);
	--header-h: 84px;
	--font: "Catamaran", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); background: var(--bg); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
/* Boutons et champs : par défaut les navigateurs leur donnent Arial ; on leur fait hériter de Catamaran. */
button, input, select, textarea { font-family: inherit; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font); color: var(--ink); line-height: 1.12; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
.icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--dark); color: #cfcfcf; }
.section--dark h2 { color: #fff; }
.section__head { max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.section__head p:last-child { color: var(--muted); font-size: 1.125rem; }
.section__head a { color: var(--green-dark); font-weight: 600; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark); }
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--green); }
.eyebrow--light, .section--dark .eyebrow { color: var(--green); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* Boutons ---------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; border: 2px solid transparent; border-radius: 999px; font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn .icon { transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }
.btn--lg { padding: 16px 30px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--green); color: var(--ink); box-shadow: 0 8px 22px rgba(137, 189, 59, .35); }
.btn--primary:hover { background: #97cc47; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); }

/* Topbar ----------------------------------------------------------------- */
.topbar { background: var(--ink); color: #bdbdbd; font-size: .875rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.topbar__tagline { margin: 0; }
.topbar__links { display: flex; align-items: center; gap: 18px; }
.topbar__links a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #e6e6e6; }
.topbar__links a:hover { color: var(--green); }

/* Header ----------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .07); border-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { flex-shrink: 0; } /* le logo garde sa taille, c'est le menu qui s'adapte */
.brand__logo { width: 240px; height: auto; }

.nav { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__list > li { position: relative; }
.nav__list a { display: block; padding: 10px 14px; border-radius: 10px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.nav__list a:hover, .nav__list .current-menu-item > a, .nav__list .current-menu-ancestor > a, .nav__list .current-menu-parent > a { color: var(--green-dark); }
.nav__list .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.sub-menu { position: absolute; top: 100%; left: 0; min-width: 300px; padding: 10px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s; }
.menu-item-has-children:hover > .sub-menu, .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a { font-weight: 500; }
.sub-menu a:hover { background: var(--green-soft); }

/* Lien du menu en forme de bouton vert : ajouter la classe CSS « menu-btn » à l'élément dans Apparence > Menus. */
.nav__list > .menu-btn { margin-left: 8px; }
.nav__list .menu-btn > a {
	padding: 11px 22px;
	border-radius: 999px;
	background: var(--green);
	color: var(--ink);
	font-weight: 700;
	box-shadow: 0 8px 22px rgba(137, 189, 59, .35);
	transition: background .2s, transform .2s, box-shadow .2s;
}
.nav__list .menu-btn > a:hover,
.nav__list .menu-btn > a:focus-visible { background: #97cc47; color: var(--ink); transform: translateY(-2px); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 2px solid var(--line); border-radius: 999px; font-weight: 700; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.header-phone:hover { border-color: var(--green); }
.header-phone .icon { color: var(--green-dark); }
.nav-toggle { display: none; width: 46px; height: 46px; align-items: center; justify-content: center; border: 0; border-radius: 12px; background: var(--ink); color: #fff; cursor: pointer; }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: inline-flex; }

/* Hero ------------------------------------------------------------------- */
.hero { position: relative; display: flex; align-items: center; min-height: min(86vh, 780px); padding: 110px 0 120px; color: #fff; overflow: hidden; isolation: isolate; }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slides { z-index: -2; }
.hero__slide { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 7s ease; }
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .55) 50%, rgba(10, 10, 10, .15) 100%); }
.hero__content { max-width: 1240px; }
.hero__title { max-width: 760px; font-size: clamp(2.5rem, 6vw, 4.5rem); color: #fff; }
.hero__title span { color: var(--green); }
.hero__lead { max-width: 580px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #e8e8e8; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__dots { position: absolute; left: 50%; bottom: 84px; display: flex; gap: 8px; transform: translateX(-50%); }
.hero__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .3s, background .3s; }
.hero__dot.is-active { width: 30px; background: var(--green); }
.hero__arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(4px); transition: background .2s, border-color .2s, color .2s; }
.hero__arrow:hover { background: var(--green); border-color: var(--green); color: var(--ink); }
.hero__arrow .icon { width: 22px; height: 22px; }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }
/* Écrans moyens : on décale le texte du bandeau pour que les flèches ne le recouvrent pas. */
@media (min-width: 681px) and (max-width: 1400px) {
	.hero__content { padding-left: 88px; padding-right: 88px; }
}

/* Réassurance ------------------------------------------------------------ */
.trust { position: relative; z-index: 2; margin-top: -56px; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.trust__item { padding: 26px 24px; border-left: 1px solid var(--line); }
.trust__item:first-child { border-left: 0; }
.trust__item strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ink); }
.trust__item span { color: var(--muted); font-size: .95rem; }

/* À propos --------------------------------------------------------------- */
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.about__media { position: relative; }
.about__media > img:not(.deco-points) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.about__badge { position: absolute; left: -18px; bottom: 32px; padding: 18px 24px; background: var(--green); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.about__badge strong { display: block; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.about__badge span { font-size: .9rem; font-weight: 600; }
.checklist { display: grid; gap: 12px; margin: 22px 0 26px; }
.checklist li { display: flex; gap: 12px; }
.checklist .icon { margin-top: 5px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); }
.about__labels { width: 100%; max-width: 420px; margin: 0 0 28px; }

/* Métiers ---------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service { position: relative; display: block; min-height: 440px; border-radius: var(--radius-lg); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.service img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.service::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .85) 100%); transition: background .3s; }
.service__body { position: absolute; inset: auto 0 0; padding: 28px; }
.service h3 { color: #fff; font-size: 1.45rem; }
.service p { margin: 0; max-height: 0; opacity: 0; overflow: hidden; color: #e3e3e3; transition: max-height .4s ease, opacity .3s, margin .3s; }
.service__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: var(--green); }
.service:hover img, .service:focus-visible img { transform: scale(1.07); }
.service:hover p, .service:focus-visible p { max-height: 6em; opacity: 1; margin-bottom: 12px; }

/* Démarche --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding: 32px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); counter-increment: step; transition: border-color .2s, transform .2s, box-shadow .2s; }
.step:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: var(--shadow); }
.step::after { content: "0" counter(step); position: absolute; top: 20px; right: 24px; font-size: 2.6rem; font-weight: 800; color: var(--bg-alt); line-height: 1; }
.step__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 18px; border-radius: 16px; background: var(--green-soft); color: var(--green-dark); }
.step__icon .icon { width: 26px; height: 26px; }
.step p { margin: 0; color: var(--muted); }

/* Showroom --------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split__media > img:not(.deco-points) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.tags li { padding: 6px 14px; border: 1px solid #3a3a3a; border-radius: 999px; font-size: .9rem; color: #e6e6e6; }
.split__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Simulateur ------------------------------------------------------------- */
.cta-card { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(24px, 4vw, 48px); background: var(--green-soft); border: 1px solid #dcebc6; border-radius: 28px; }
.cta-card__media > img:not(.deco-points) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.cta-card p:not(.eyebrow) { font-size: 1.125rem; max-width: 560px; }

/* Réalisations ----------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 16px; }
.gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery__item:nth-child(6) { grid-column: span 2; }
.gallery__item a { position: relative; display: block; height: 100%; cursor: zoom-in; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery__item:hover img { transform: scale(1.06); }
/* Loupe au survol : indique que la photo s'agrandit. */
.gallery__item a::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 22px no-repeat; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .25s; }
.gallery__item a:hover::after, .gallery__item a:focus-visible::after { opacity: 1; transform: none; }

/* Pages internes --------------------------------------------------------- */
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.lead { font-size: 1.25rem; color: var(--ink); font-weight: 500; }

.phero { position: relative; padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 7vw, 88px); color: #fff; background: var(--dark) url(assets/img/p/cuisine.jpg) center 70% / cover no-repeat; isolation: isolate; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(10, 10, 10, .85) 0%, rgba(10, 10, 10, .55) 60%, rgba(10, 10, 10, .35) 100%); }
.phero__title { margin: 0; max-width: 900px; font-size: clamp(2.4rem, 6vw, 4.5rem); color: #fff; }
.phero__title span { display: block; color: var(--green); }
.phero__lead { max-width: 620px; margin: 18px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #e3e3e3; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; font-size: .9rem; color: #bdbdbd; }
.crumbs a { color: #e6e6e6; text-decoration: none; }
.crumbs a:hover { color: var(--green); }
.crumbs [aria-current] { color: var(--green); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 48px); background: var(--green); border-radius: 28px; }
.cta-band h2 { margin-bottom: 6px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p { margin: 0; color: var(--ink); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Contenu modifiable (éditeur de blocs) */
.entry > .alignfull { margin-top: 0; margin-bottom: 0; }
.entry > :not(.alignfull) { width: min(1240px, 100% - 48px); margin-left: auto; margin-right: auto; }
.entry > :not(.alignfull):first-child { margin-top: clamp(48px, 6vw, 80px); }
.entry > :not(.alignfull):last-child { margin-bottom: clamp(48px, 6vw, 80px); }
.entry--text > :not(.alignfull) { width: min(860px, 100% - 48px); }
.entry h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.entry--text h2 { margin-top: 1.8em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.entry--text h3 { margin-top: 1.4em; font-size: 1.2rem; }
.entry ul:not([class*="is-style-"]), .entry ol:not([class*="is-style-"]) { padding-left: 1.2em; list-style: disc; }
.entry ol:not([class*="is-style-"]) { list-style: decimal; }
.entry a:not(.wp-block-button__link):not([class]) { color: var(--green-dark); }
.entry .wp-block-gallery.is-collapsible:not(.is-expanded) > .wp-block-image:nth-child(n+9) { display: none !important; }

/* Grille de photos + lightbox */
.pgrid__more { margin-top: 28px; text-align: center; }
.lightbox { position: fixed; inset: 0; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
/* Fond sombre sur un calque à part : il s'estompe pendant que la photo retourne sur sa vignette. */
.lightbox::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .94); transition: opacity .3s ease; }
.lightbox.is-closing::before { opacity: 0; }
.lightbox.is-closing button,
.lightbox.is-closing .lightbox__zoom,
.lightbox.is-closing p { opacity: 0; transition: opacity .2s ease; }
/* Photo masquée tant qu'elle n'est pas chargée (l'animation démarre une fois l'image prête). */
.lightbox.is-loading .lightbox__stage img { opacity: 0; }
.lightbox.is-open { opacity: 1; visibility: visible; }
body.lightbox-open { overflow: hidden; }
.lightbox.is-resetting .lightbox__stage img { transition: none; }
.lightbox__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 64px 76px; overflow: hidden; touch-action: none; user-select: none; }
.lightbox__stage img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform-origin: center; transition: transform .25s ease; will-change: transform; cursor: zoom-in; -webkit-user-drag: none; }
.lightbox.is-zoomed .lightbox__stage img { cursor: grab; border-radius: 0; }
.lightbox.is-dragging .lightbox__stage img { cursor: grabbing; transition: none; }
.lightbox button { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s, opacity .2s; }
.lightbox button:hover { background: var(--green); color: var(--ink); }
.lightbox button:disabled { opacity: .35; cursor: default; background: rgba(255, 255, 255, .12); color: #fff; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__zoom { position: absolute; z-index: 2; top: 16px; left: 50%; display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .45); transform: translateX(-50%); }
.lightbox__zoom button { position: static; width: 40px; height: 40px; font-size: 22px; }
.lightbox__level { min-width: 52px; color: #e6e6e6; font-size: .9rem; font-weight: 600; text-align: center; }
.lightbox__count { position: absolute; z-index: 2; bottom: 18px; left: 50%; margin: 0; transform: translateX(-50%); color: #bdbdbd; font-size: .9rem; }
.lightbox__hint { position: absolute; z-index: 2; bottom: 44px; left: 50%; margin: 0; transform: translateX(-50%); color: #8a8a8a; font-size: .8rem; white-space: nowrap; }
/* Nos métiers */
.metiers-list { display: grid; gap: 24px; }
.metier-row { display: grid; grid-template-columns: 360px 1fr; min-height: 260px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.metier-row:nth-child(even) { grid-template-columns: 1fr 360px; }
.metier-row:nth-child(even) .metier-row__media { order: 2; }
.metier-row:hover { border-color: var(--green); box-shadow: var(--shadow); }
.metier-row__media { overflow: hidden; }
.metier-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.metier-row:hover .metier-row__media img { transform: scale(1.05); }
.metier-row__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 48px); }
.metier-row__num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--green-soft); -webkit-text-stroke: 1px var(--green); }
.metier-row h2 { margin: 12px 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.metier-row p { color: var(--muted); font-size: 1.1rem; }
.metier-row .service__more { color: var(--green-dark); }

/* Autres métiers */
.others { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.other { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--radius); color: #fff; text-decoration: none; isolation: isolate; }
.other img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.other::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .85)); }
.other span { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 6px; font-weight: 700; line-height: 1.25; }
.other:hover img { transform: scale(1.07); }

.post-item { padding: 24px 0; border-bottom: 1px solid var(--line); }

/* Footer d'origine (reproduction fidèle du footer Divi) ------------------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; }

.ofooter { font-size: 14px; line-height: 1.7em; color: #666; }
.ofooter p { margin: 0; padding-bottom: 1em; }
.ofooter p:last-child { padding-bottom: 0; }
.ofooter a { color: var(--green); text-decoration: none; }

.ofooter__contact { padding: 4% 0 0; background: #000 url(assets/img/fond-footer.jpg) center / cover no-repeat; }
.ofooter__row { display: flex; width: 80%; max-width: 1640px; margin: 0 auto; padding: 2% 0; }
.ofooter__col { width: 48.5%; margin-right: 3%; }
.ofooter__col:last-child { margin-right: 0; }

.ofooter__intro { padding-top: 81px; }
.ofooter__kicker { margin-bottom: 6px; color: var(--green); text-transform: uppercase; letter-spacing: 3px; }
.ofooter__title { margin: 0 0 -11px; padding-bottom: 10px; font-size: 72px; font-weight: 700; line-height: 1em; color: #fff; letter-spacing: 0; }
.home .ofooter__title { font-size: 40px; }

.ofooter__inner { display: flex; padding: 2% 0; }
.ofooter__inner--equal { align-items: stretch; }
.ofooter__quarter { width: 47%; margin-right: 6%; }
.ofooter__quarter:last-child { margin-right: 0; }
.ofooter__quarter--center { margin-top: auto; margin-bottom: auto; }
.ofooter__email { font-size: 26px; font-weight: 800; }

.ofooter__social { display: flex; flex-wrap: wrap; }
.ofooter__social li { margin: 0 8px 8px 0; }
.ofooter__social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 3px; color: #fff; transition: opacity .3s; }
.ofooter__social a:hover { opacity: .8; }
.ofooter__social .icon { width: 16px; height: 16px; }
.ofooter__social-fb { background: #3b5998; }
.ofooter__social-ig { background: #ea2c59; }

.ofooter__agency { font-size: 22px; line-height: 1.3em; color: #fff; }
.ofooter__agency a { color: #fff; }

.ofooter__message { color: #fff; font-size: 16px; }
.ofooter__message p { padding-bottom: 1em; }
.ofooter__form { display: flex; flex-wrap: wrap; margin-left: -3%; }
.ofooter__field { width: 100%; padding: 0 0 0 3% !important; }
/* Sélecteur « .ofooter p.ofooter__field » : plus précis que « .ofooter p » (margin: 0), sinon l'espacement entre les champs est annulé. */
.ofooter p.ofooter__field { margin: 0 0 3%; }
.ofooter__field--half { width: 50%; }
.ofooter .input { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--green); border-radius: 0; background: transparent; font: 20px/1.4 var(--font); color: #fff; }
.ofooter .input::placeholder { color: #fff; opacity: 1; }
.ofooter .input:focus { outline: none; border-bottom-color: #fff; }
.ofooter textarea.input { display: block; height: 150px; padding: 16px; border: 1px solid var(--green); border-radius: 15px; resize: vertical; }
.ofooter textarea.input:focus { border-color: #fff; }

/* Labels flottants : au clic dans un champ, son intitulé remonte, rétrécit et passe au vert ;
   il reste en haut tant que le champ est rempli. Un trait blanc se déroule sous le champ actif. */
.ofooter__field { position: relative; }
.ofooter__field .input { padding-top: 22px; }
.ofooter__field .input::placeholder { color: transparent; }
.ofooter__field input.input {
	border-bottom-color: var(--green);
	background: linear-gradient(#fff, #fff) no-repeat 0 100% / 0 2px;
	transition: background-size .35s ease;
}
.ofooter__field input.input:focus { border-bottom-color: var(--green); background-size: 100% 2px; }
.ofooter__label {
	position: absolute;
	top: 22px;
	left: 3%;
	font: 20px/1.4 var(--font);
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	transform-origin: 0 0;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), color .3s, letter-spacing .3s;
}
.ofooter__field .input:focus + .ofooter__label,
.ofooter__field .input:not(:placeholder-shown) + .ofooter__label,
.ofooter__field .input:-webkit-autofill + .ofooter__label {
	color: var(--green);
	letter-spacing: .04em;
	transform: translateY(-20px) scale(.65);
}
/* Champ demi-largeur : la marge du champ (3 % du formulaire) vaut 6 % de sa propre largeur. */
.ofooter__field--half .ofooter__label { left: 6%; }
/* Zone de message : l'intitulé remonte dans le haut du cadre. */
.ofooter__field--area textarea.input { padding-top: 30px; }
.ofooter__field--area .ofooter__label { top: 16px; left: calc(3% + 16px); }
.ofooter__field--area .input:focus + .ofooter__label,
.ofooter__field--area .input:not(:placeholder-shown) + .ofooter__label { transform: translateY(-8px) scale(.65); }

.ofooter__bottom { display: flex; align-items: center; justify-content: flex-end; width: 100%; padding-left: 3%; }
.ofooter__captcha { display: flex; align-items: center; gap: 6px; margin-right: 20px !important; padding: 0 !important; font-size: 14px; color: #fff; }
.ofooter__captcha .input { width: 50px; padding: 6px 0; font-size: 20px; text-align: center; }
.ofooter__submit { position: relative; padding: .3em 1em; border: 5px solid #000; border-radius: 30px; background: var(--green); font: 500 16px/1.7em var(--font); letter-spacing: .03em; color: #fff; cursor: pointer; transition: padding .2s; }
.ofooter__submit::after { content: "\27A4"; position: absolute; top: 50%; right: .9em; opacity: 0; transform: translateY(-50%); transition: opacity .2s; }
.ofooter__submit:hover { padding: .3em 2em .3em .7em; }
.ofooter__submit:hover::after { opacity: 1; }

.ofooter__legal { background: #ebebeb; }
.ofooter__legal-row { width: 80%; max-width: 1640px; margin: 0 auto; padding: 2% 0; font-size: 14px; color: #000; }

@media (max-width: 1200px) {
	.ofooter__title { font-size: 40px; }
	.home .ofooter__title { font-size: 24px; }
}
@media (max-width: 980px) {
	.ofooter__row { flex-direction: column; padding: 30px 0; }
	.ofooter__col { width: 100%; margin: 0 0 30px; }
	.ofooter__col:last-child { margin-bottom: 0; }
	.ofooter__kicker, .ofooter__title { text-align: center; }
	.ofooter__legal-row { padding: 30px 0; text-align: center; }
}
@media (max-width: 767px) {
	.ofooter__email { font-size: 21px; }
	.ofooter__inner { flex-direction: column; }
	.ofooter__quarter { width: 100%; margin: 0 0 20px; }
	.ofooter__field--half { width: 100%; }
	.ofooter__field--half .ofooter__label { left: 3%; }
}

.sticky-call { display: none; }

/* Bouton « Revenir en haut » : apparaît après un peu de défilement (classe .is-visible posée par main.js). */
.to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--green);
	color: var(--ink);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top.is-visible:hover { background: #97cc47; transform: translateY(-3px); }
.to-top .icon { width: 22px; height: 22px; }

/* Animations d'apparition — reprises du site d'origine (Divi) ------------
   Durée 1000 ms, courbe ease-in-out, intensité 50 %, opacité de départ 0,
   jouées une seule fois à l'entrée dans l'écran. Styles : slide, slideLeft,
   slideRight, fold, zoom, zoomBottom, fade. */
.js .reveal:not([data-anim]),
.js [data-anim]:not(.is-animated) { opacity: 0; }
.js [data-anim].is-animated {
	animation-duration: 1000ms;
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
	animation-delay: var(--anim-delay, 0ms);
}
.js [data-anim="slide"].is-animated      { animation-name: blr-slide; }
.js [data-anim="slideLeft"].is-animated  { animation-name: blr-slide-left; }
.js [data-anim="slideRight"].is-animated { animation-name: blr-slide-right; }
.js [data-anim="slideBottom"].is-animated { animation-name: blr-slide-bottom; }
.js [data-anim="fold"].is-animated       { animation-name: blr-fold; }
.js [data-anim="zoom"].is-animated       { animation-name: blr-zoom; }
.js [data-anim="zoomBottom"].is-animated { animation-name: blr-zoom; transform-origin: 50% 100%; }
.js [data-anim="fade"].is-animated       { animation-name: blr-fade; }

@keyframes blr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blr-slide { from { opacity: 0; transform: scale3d(.5, .5, .5); } to { opacity: 1; transform: none; } }
@keyframes blr-slide-left { from { opacity: 0; transform: translate3d(-50%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes blr-slide-right { from { opacity: 0; transform: translate3d(50%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes blr-slide-bottom { from { opacity: 0; transform: translate3d(0, 50%, 0); } to { opacity: 1; transform: none; } }
@keyframes blr-fold { from { opacity: 0; transform: perspective(2000px) rotateY(45deg); } to { opacity: 1; transform: none; } }
@keyframes blr-zoom { from { opacity: 0; transform: scale3d(.5, .5, .5); } to { opacity: 1; transform: none; } }

/* Décor « points » du site d'origine : trame de carrés verts placée DERRIÈRE la photo,
   décalée vers l'extérieur (une partie cachée par la photo, l'autre qui dépasse). */
.about__media,
.split__media,
.cta-card__media,
.wp-block-image.is-style-framed { position: relative; isolation: isolate; }

.deco-points {
	--deco-size: clamp(96px, 11vw, 168px);
	--deco-offset: clamp(-44px, -3vw, -20px);
	position: absolute;
	z-index: -1;
	width: var(--deco-size);
	height: var(--deco-size);
	background-color: var(--green);
	-webkit-mask: url(assets/img/points.png) center / contain no-repeat;
	mask: url(assets/img/points.png) center / contain no-repeat;
	pointer-events: none;
}
.about__media .deco-points { right: var(--deco-offset); bottom: var(--deco-offset); }
.split__media .deco-points { left: var(--deco-offset); bottom: var(--deco-offset); }
.cta-card__media .deco-points { --deco-size: clamp(80px, 8vw, 120px); right: clamp(-32px, -2.4vw, -16px); bottom: clamp(-32px, -2.4vw, -16px); }
.wp-block-image.is-style-framed .deco-points { right: var(--deco-offset); bottom: var(--deco-offset); }
/* Colonne d'une photo encadrée : on laisse la place au décor qui dépasse. */
.entry .wp-block-column:has(> .wp-block-image.is-style-framed) { padding: 0 24px 24px 0; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; }
	.js .reveal, .js [data-anim] { opacity: 1 !important; }
}

/* Responsive ------------------------------------------------------------- */
.btn, .header-phone { white-space: nowrap; }

@media (max-width: 1320px) {
	.site-header__inner { gap: 16px; }
	.nav { gap: 8px; }
	.nav__list a { padding: 10px 10px; }
	.brand__logo { width: 210px; }
}

/* Sous 1280 px, le téléphone n'affiche que son icône pour laisser la place au menu. */
@media (max-width: 1280px) {
	.header-phone span { display: none; }
	.header-phone { padding: 12px; }
}
@media (max-width: 1180px) {
	.nav__list a { padding: 10px 8px; }
	.nav__list .menu-btn > a { padding: 11px 16px; }
}
/* Juste avant le menu mobile : logo et menu un peu plus compacts (placé après la règle 1180 px pour l'emporter). */
@media (min-width: 1025px) and (max-width: 1120px) {
	.brand__logo { width: 180px; }
	.site-header__inner { gap: 12px; }
	.nav { gap: 6px; }
	.nav__list a { padding: 10px 6px; font-size: .95rem; }
	.nav__list .menu-btn > a { padding: 10px 14px; }
}

@media (max-width: 1024px) {
	:root { --header-h: 72px; }
	.brand__logo { width: 170px; }
	.nav-toggle { display: inline-flex; }
	.nav { position: absolute; top: 100%; right: 0; left: 0; height: calc(100vh - var(--header-h)); padding-bottom: 80px !important; flex-direction: column; align-items: stretch; gap: 20px; margin: 0; padding: 24px; background: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s, transform .25s, visibility .25s; }
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.header-actions { margin-left: auto; }
	.nav__list { flex-direction: column; align-items: stretch; }
	.nav__list a { padding: 14px 4px; font-size: 1.15rem; border-bottom: 1px solid var(--line); border-radius: 0; }
	/* visibility: inherit (et non visible) : menu fermé, le sous-menu est masqué ET non cliquable. */
	.sub-menu,
	.nav .menu-item-has-children:hover > .sub-menu,
	.nav .menu-item-has-children:focus-within > .sub-menu { position: static; min-width: 0; padding: 0 0 0 16px; border: 0; box-shadow: none; opacity: 1; visibility: inherit; transform: none; }
	.sub-menu a { font-size: 1rem; }
	.nav__list > .menu-btn { margin: 16px 0 0; }
	.nav__list .menu-btn > a { padding: 14px 22px; border-bottom: 0; border-radius: 999px; text-align: center; }
	body.nav-open { overflow: hidden; }

	.trust__grid { grid-template-columns: repeat(2, 1fr); }
	.trust__item:nth-child(3) { border-left: 0; }
	.trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
	.about__grid, .split { grid-template-columns: 1fr; }
	.about__media { max-width: 560px; }
	.services { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.cta-card { grid-template-columns: 240px 1fr; }
	.others { grid-template-columns: repeat(3, 1fr); }
	.metier-row, .metier-row:nth-child(even) { grid-template-columns: 260px 1fr; }
	.metier-row:nth-child(even) .metier-row__media { order: 0; }
}

@media (max-width: 680px) {
	body { font-size: 1rem; }
	.container { padding: 0 16px; }
	.topbar__tagline { display: none; }
	.topbar__inner { justify-content: center; }
	.hero { min-height: 0; padding: 88px 0 120px; }
	.hero__actions .btn { width: 100%; }
	.hero__arrow { top: auto; bottom: 68px; width: 42px; height: 42px; transform: none; }
	.hero__arrow--prev { left: 16px; }
	.hero__arrow--next { right: 16px; }
	.trust { margin-top: -48px; }
	.trust__item { padding: 18px 16px; }
	.trust__item strong { font-size: 1.1rem; }
	.about__badge { left: 12px; bottom: 12px; }
	.cta-card .deco-points { display: none; }
	.deco-points { --deco-size: 88px; --deco-offset: -12px; }
	.entry .wp-block-column:has(> .wp-block-image.is-style-framed) { padding: 0 12px 12px 0; }
	.services { grid-template-columns: 1fr; }
	.service { min-height: 340px; }
	.service p { max-height: 6em; opacity: 1; margin-bottom: 12px; }
	.steps { grid-template-columns: 1fr; }
	.cta-card { grid-template-columns: 1fr; }
	.cta-card__media > img:not(.deco-points) { max-height: 240px; }
	.gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
	.gallery__item:nth-child(6) { grid-column: span 2; }
	.ofooter__legal { padding-bottom: 72px; }
	.others { grid-template-columns: repeat(2, 1fr); }
	.metier-row, .metier-row:nth-child(even) { grid-template-columns: 1fr; }
	.metier-row__media { aspect-ratio: 16 / 10; }
	.cta-band__actions, .cta-band__actions .btn { width: 100%; }
	.lightbox__stage { padding: 64px 8px 72px; }
	.lightbox__hint { display: none; }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 8px; transform: none; }
	.to-top { right: 16px; bottom: 84px; width: 46px; height: 46px; } /* au-dessus de la barre « Appeler » */
	.sticky-call { position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 90; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 999px; background: var(--green); color: var(--ink); font-weight: 800; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
}

/* ==========================================================================
   2. Blocs de l'éditeur (chargés aussi dans l'éditeur via add_editor_style)
   ========================================================================== */

:root {
	--blr-green: #89bd3b;
	--blr-green-dark: #6e9a2c;
	--blr-green-soft: #f1f7e8;
	--blr-ink: #141414;
	--blr-muted: #6b6b6b;
	--blr-line: #e6e6e6;
	--blr-alt: #f6f6f3;
	--blr-dark: #161616;
}

/* Sections (groupes pleine largeur) ------------------------------------- */
.wp-block-group.is-style-section,
.wp-block-group.is-style-section-alt,
.wp-block-group.is-style-section-dark {
	padding: clamp(56px, 8vw, 104px) 24px;
}
.wp-block-group.is-style-section-alt { background: var(--blr-alt); }
.wp-block-group.is-style-section-dark { background: var(--blr-dark); color: #cfcfcf; }
.wp-block-group.is-style-section-dark :where(h1, h2, h3, h4) { color: #fff; }

.wp-block-group.is-style-card {
	padding: clamp(22px, 3vw, 32px);
	background: #fff;
	border: 1px solid var(--blr-line);
	border-radius: 22px;
}
.wp-block-group.is-style-card > :first-child { margin-top: 0; }

.wp-block-group.is-style-cta {
	padding: clamp(28px, 4vw, 48px);
	background: var(--blr-dark);
	border-radius: 28px;
	color: #cfcfcf;
}
.wp-block-group.is-style-cta :where(h2, h3) { color: #fff; }
.wp-block-group.is-style-cta .is-style-eyebrow { color: var(--blr-green); }

/* Textes ---------------------------------------------------------------- */
p.is-style-eyebrow {
	margin-bottom: 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blr-green-dark);
}
p.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 3px;
	margin-right: 10px;
	border-radius: 3px;
	background: var(--blr-green);
	vertical-align: middle;
}
.is-style-section-dark p.is-style-eyebrow { color: var(--blr-green); }
p.is-style-eyebrow + :where(h1, h2, h3) { margin-top: .4em; }

p.is-style-lead { font-size: 1.25rem; font-weight: 500; color: var(--blr-ink); }

p.is-style-suppliers { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; }
p.is-style-suppliers a {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--blr-green-soft);
	color: var(--blr-green-dark);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s, color .2s;
}
p.is-style-suppliers a:hover { background: var(--blr-green); color: var(--blr-ink); }

/* Listes ---------------------------------------------------------------- */
ul.is-style-checklist,
ul.is-style-tags,
ul.is-style-timeline,
ol.is-style-timeline { padding-left: 0; list-style: none; }

ul.is-style-checklist li,
.bcard ul li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 34px;
}
ul.is-style-checklist li::before,
.bcard ul li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--blr-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e9a2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

ul.is-style-tags { display: flex; flex-wrap: wrap; gap: 8px; }
ul.is-style-tags li {
	padding: 6px 14px;
	border: 1px solid var(--blr-line);
	border-radius: 999px;
	background: var(--blr-alt);
	font-size: .9rem;
	color: var(--blr-ink);
}
.is-style-section-dark ul.is-style-tags li { background: transparent; border-color: #3a3a3a; color: #e6e6e6; }

.is-style-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.is-style-timeline li {
	padding: 16px 18px;
	border-top: 3px solid var(--blr-green);
	border-radius: 0 0 12px 12px;
	background: var(--blr-alt);
	color: var(--blr-muted);
	font-size: .95rem;
	line-height: 1.4;
}
.is-style-timeline li strong { display: block; margin-bottom: 4px; font-size: 1.6rem; font-weight: 800; color: var(--blr-ink); }

/* Images & galeries ----------------------------------------------------- */
.wp-block-image img:not(.deco-points) { border-radius: 14px; }
.wp-block-image.is-style-framed img:not(.deco-points) { border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }

.wp-block-gallery.is-style-photos .wp-block-image img,
.wp-block-gallery.is-style-products .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	transition: transform .5s ease;
}
.wp-block-gallery.is-style-photos .wp-block-image { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; }
.wp-block-gallery.is-style-products .wp-block-image { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: #fff; }
.wp-block-gallery.is-style-photos .wp-block-image:hover img,
.wp-block-gallery.is-style-products .wp-block-image:hover img { transform: scale(1.06); }
.wp-block-gallery :where(.wp-block-image a) { cursor: zoom-in; }

.wp-block-gallery.is-style-logos .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	aspect-ratio: 3 / 2;
	background: #fff;
	border: 1px solid var(--blr-line);
	border-radius: 12px;
}
.wp-block-gallery.is-style-logos .wp-block-image img {
	width: auto !important;
	height: auto !important;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain !important;
	border-radius: 0;
	transition: transform .3s;
}
.wp-block-gallery.is-style-logos .wp-block-image { transition: border-color .3s, box-shadow .3s; }
.wp-block-gallery.is-style-logos .wp-block-image:hover { border-color: var(--blr-green); box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.wp-block-gallery.is-style-logos .wp-block-image:hover img { transform: scale(1.06); }

/* Boutons --------------------------------------------------------------- */
.wp-block-button .wp-block-button__link { transition: transform .2s, background .2s, color .2s; }
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); background: #97cc47; }
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--blr-ink);
	background: transparent;
	color: var(--blr-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--blr-ink); color: #fff; }
.is-style-section-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.is-style-cta .wp-block-button.is-style-outline > .wp-block-button__link { border-color: #fff; color: #fff; }

/* Colonnes -------------------------------------------------------------- */
.wp-block-columns { gap: clamp(24px, 5vw, 72px); }
.wp-block-columns .wp-block-columns { gap: 16px; }

@media (max-width: 781px) {
	.is-style-timeline { grid-template-columns: 1fr; }
}

/* Largeurs de colonnes par classe (au lieu du style en ligne de l'éditeur). */
@media (min-width: 782px) {
	.wp-block-column.blr-w-34   { flex-grow: 0; flex-basis: 34%; }
	.wp-block-column.blr-w-45   { flex-grow: 0; flex-basis: 45%; }
	.wp-block-column.blr-w-58   { flex-grow: 0; flex-basis: 58%; }
	.wp-block-column.blr-w-80px { flex-grow: 0; flex-basis: 80px; }
}

/* ==========================================================================
   3. Boutons de l'éditeur (anciennement déclarés dans theme.json)
   ========================================================================== */
.wp-element-button,
.wp-block-button__link {
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background-color: #89bd3b;
	color: #141414;
	font-family: "Catamaran", system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

/* ==========================================================================
   4. Délais d'animation (classes posées par le HTML et le JS, pas de style en ligne)
   ========================================================================== */
.anim-d0    { --anim-delay: 0ms; }
.anim-d100  { --anim-delay: 100ms; }
.anim-d150  { --anim-delay: 150ms; }
.anim-d200  { --anim-delay: 200ms; }
.anim-d300  { --anim-delay: 300ms; }
.anim-d400  { --anim-delay: 400ms; }
.anim-d450  { --anim-delay: 450ms; }
.anim-d500  { --anim-delay: 500ms; }
.anim-d600  { --anim-delay: 600ms; }
.anim-d1000 { --anim-delay: 1000ms; }
.anim-d1500 { --anim-delay: 1500ms; }

/* ==========================================================================
   5. Widgets Elementor « By Labelreno »
   Les widgets produisent le HTML du thème : seuls quelques composants sont propres à Elementor.
   ========================================================================== */

/* Conteneurs Elementor qui accueillent nos widgets : pleine largeur, sans marge ni espacement
   (nos sections gèrent elles-mêmes leurs marges et leur largeur). */
.e-con:has(> .elementor-widget[class*="elementor-widget-blr-"]),
.e-con:has(> .e-con-inner > .elementor-widget[class*="elementor-widget-blr-"]) {
	--content-width: 100%;
	--container-max-width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--margin-top: 0px;
	--margin-bottom: 0px;
}
.elementor-widget[class*="elementor-widget-blr-"] { width: 100%; margin: 0 !important; }

/* Elementor impose « .elementor img { height: auto } » (chargé après ce fichier) :
   on rétablit la hauteur des images qui doivent remplir leur cadre. */
.elementor .hero__slide,
.elementor .service img,
.elementor .gallery__item img,
.elementor .metier-row__media img,
.elementor .other img,
.elementor .bgallery__item img { height: 100%; }
.elementor .bgallery--logos .bgallery__item img { height: auto; }
.elementor .bcard__logo { height: 72px; }

/* Dans l'éditeur Elementor, tout est affiché d'emblée (pas d'animation d'apparition). */
.elementor-editor-active .js [data-anim],
.elementor-editor-active [data-anim],
.elementor-editor-active .reveal { opacity: 1 !important; animation: none !important; }

/* Section texte + photo : variantes */
.about__grid--reverse .about__media { order: 2; }
.about__grid--single { grid-template-columns: minmax(0, 860px); }
.about__media--natural > img:not(.deco-points) { aspect-ratio: auto; }
.tags--light li { border-color: var(--line); background: var(--bg-alt); color: var(--ink); }
.about__text .is-style-timeline { margin-top: 24px; }

/* Cartes */
.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bcards--2 { grid-template-columns: repeat(2, 1fr); }
.bcard { display: block; padding: 32px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink-2); }
.bcard h3 { margin-bottom: 10px; }
.bcard p { color: var(--muted); }
.bcard > :last-child { margin-bottom: 0; }
.bcard ul { margin: 8px 0 0; padding: 0; list-style: none; }
.bcard__logo { width: auto; max-width: 140px; height: 72px; margin-bottom: 16px; object-fit: contain; }
.bcard--link { text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.bcard--link:hover { border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-3px); }

/* Encadré noir */
.bhighlight { padding: clamp(28px, 4vw, 48px); background: var(--dark); border-radius: 28px; color: #cfcfcf; }
.bhighlight h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
.bhighlight .eyebrow { color: var(--green); }
.bhighlight > :last-child { margin-bottom: 0; }

/* Gammes de produits */
.branges { display: grid; gap: 20px; }
.brange { display: grid; grid-template-columns: 34% 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(20px, 3vw, 32px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.brange h3 { font-size: 1.45rem; }
.brange p { color: var(--muted); }

/* Galeries */
.bgallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bgallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bgallery--cols-5 { grid-template-columns: repeat(5, 1fr); }
.bgallery--cols-6 { grid-template-columns: repeat(6, 1fr); }
.bgallery__item { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--line); }
a.bgallery__item { cursor: zoom-in; }
.bgallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.bgallery__item:hover img { transform: scale(1.06); }
.bgallery--products { gap: 10px; }
.bgallery--products .bgallery__item { aspect-ratio: 3 / 4; border-radius: 10px; background: #fff; }
.bgallery--logos .bgallery__item { display: flex; align-items: center; justify-content: center; padding: 14px; aspect-ratio: 3 / 2; background: #fff; border: 1px solid var(--line); }
.bgallery--logos .bgallery__item img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.bgallery--logos .bgallery__item:hover { border-color: var(--green); box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
.js .bgallery.is-collapsible:not(.is-expanded) > .bgallery__item:nth-child(n+9) { display: none; }

/* Texte long (mentions légales) */
.prose-text { max-width: 860px; }
.prose-text h2 { margin-top: 1.8em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.prose-text h3 { margin-top: 1.4em; font-size: 1.2rem; }
.prose-text ul, .prose-text ol { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.prose-text li { margin-bottom: .4em; }
.prose-text a { color: var(--green-dark); }

@media (max-width: 1024px) {
	.about__grid--reverse .about__media { order: 0; }
	.bcards, .bcards--2 { grid-template-columns: 1fr; }
	.brange { grid-template-columns: 1fr; }
	.bgallery, .bgallery--cols-5 { grid-template-columns: repeat(3, 1fr); }
	.bgallery--cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
	.bgallery, .bgallery--cols-3 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.bgallery--products, .bgallery--logos, .bgallery--cols-6 { grid-template-columns: repeat(3, 1fr); }
}