/* Facile IT — effets et animations (site uniquement, pas l'éditeur).
   Tout est neutralisé plus bas pour « réduire les animations ». */

/* ---------- En-tête qui suit le défilement ---------- */
.site-header { position: sticky; top: 0; z-index: 50; transition: box-shadow 0.3s, background-color 0.3s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(4, 14, 30, 0.35); background: rgba(12, 35, 64, 0.94); backdrop-filter: blur(8px); }
.site-logo img { transition: transform 0.3s; }
.site-logo:hover img { transform: rotate(-2deg) scale(1.04); }

/* ---------- Apparitions au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes monter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js .hero > * { animation: monter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .hero > :nth-child(2) { animation-delay: 0.1s; }
.js .hero > :nth-child(3) { animation-delay: 0.22s; }
.js .hero > :nth-child(4) { animation-delay: 0.34s; }
.js .page-header__texte > * { animation: monter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .page-header__texte > :nth-child(2) { animation-delay: 0.12s; }

/* Titres de section : trait vert qui se trace */
.section:not(.hero):not(.cta) > h2 { position: relative; padding-bottom: 0.7rem; }
.section:not(.hero):not(.cta):not(.service) > h2::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 5px; border-radius: 3px;
	background: var(--vert); transform: scaleX(0); transform-origin: left; transition: transform 0.7s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.section > h2.is-visible::after, html:not(.js) .section > h2::after { transform: scaleX(1) !important; }

/* ---------- Cartes et boutons ---------- */
.card.wp-block-column { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, border-color 0.35s, opacity 0.7s ease; position: relative; overflow: hidden; }
.card.wp-block-column::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--bleu), var(--vert));
	transform: scaleX(0); transform-origin: left; transition: transform 0.4s;
}
.card.wp-block-column:hover { transform: translateY(-8px) rotate(-0.6deg); box-shadow: 0 22px 44px rgba(12, 35, 64, 0.16); border-color: transparent; }
.card.wp-block-column:hover::after { transform: scaleX(1); }
@keyframes hochement { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.12); } 65% { transform: rotate(9deg) scale(1.12); } }
.card::before { transition: background-color 0.3s; }
.card:hover::before { animation: hochement 0.6s; background-color: #D5F2E0; }
.card .card-link a { display: inline-block; transition: transform 0.25s; }
.card:hover .card-link a { transform: translateX(6px); }

.wp-block-button__link, .wp-element-button { transition: transform 0.2s, box-shadow 0.2s, background-color 0.15s; }
.wp-block-button__link:hover, .contact-form button:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(4, 14, 30, 0.28); }
.wp-block-button__link:active, .contact-form button:active { transform: translateY(0); box-shadow: none; }

.points .wp-block-column { transition: transform 0.3s, opacity 0.7s ease; }
.points .wp-block-column:hover { transform: translateY(-5px); }
.service li { transition: transform 0.3s, background-color 0.3s, opacity 0.7s ease; }
.service li:hover { transform: translateY(-4px); background: #E6EEF8; }

/* ---------- Personnage ---------- */
.perso { display: block; width: 100%; height: auto; overflow: visible; color: #fff; --papier: #17365F; }
.perso .si-ravi { display: none; }
.perso.is-ravi .si-ravi { display: inline; }
.perso.is-ravi .si-perdu { display: none; }
.perso__ombre { fill: rgba(0, 0, 0, 0.22); }
/* Trait tremblé, « dessiné à la main » : le script alterne trois variantes du filtre */
.tremble { filter: url(#tremble-1); }
html[data-tremble="2"] .tremble { filter: url(#tremble-2); }
html[data-tremble="3"] .tremble { filter: url(#tremble-3); }
.filtres-tremble { position: absolute; }

.perso__corps, .bonhomme, .bonhomme .tete, .bonhomme .jambe-g, .bonhomme .jambe-d, .bd-secoue { transform-box: fill-box; }
.perso path, .perso circle, .perso rect { stroke-width: 1.9px; }
@keyframes respire { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1.2deg); } }
@keyframes dodeline { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes saute { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-3deg); } 60% { transform: translateY(-14px) rotate(3deg); } }
@keyframes secoue { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-2deg); } 75% { transform: translate(3px, -1px) rotate(2deg); } }
.perso__corps { transform-origin: 50% 100%; animation: respire 3.6s ease-in-out infinite; }
.bonhomme { transform-origin: 50% 100%; }
.bonhomme .tete { transform-origin: 50% 95%; }
.bonhomme--perdu .tete, .bonhomme--pense .tete { animation: dodeline 3.2s ease-in-out infinite; }
.bonhomme--ravi { animation: saute 1.5s ease-in-out infinite; }

/* Bandeau des pages intérieures */
.page-header { overflow: hidden; }
.page-header__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.page-header__perso { width: 88px; flex: none; margin-bottom: -2.2rem; }
@media (max-width: 700px) { .page-header__perso { width: 62px; margin-bottom: -1.6rem; } }

/* ---------- Saynètes « Ça vous rappelle quelque chose ? » ---------- */
.scenes-bd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.4rem; margin-top: 2.5rem; }
.scene-bd {
	margin: 0; background: #FFFEFA; border: 2px solid var(--nuit); border-radius: 18px 26px 16px 28px / 24px 16px 26px 18px; padding: 0.9rem 0.9rem 1rem;
	box-shadow: 5px 6px 0 rgba(12, 35, 64, 0.9); color: var(--nuit); --papier: #FFFEFA; transition: transform 0.3s, box-shadow 0.3s, opacity 0.7s ease;
}
.scene-bd:nth-child(odd) { rotate: -1.2deg; }
.scene-bd:nth-child(even) { rotate: 1deg; }
.scene-bd:hover { transform: translate(-3px, -5px) scale(1.03); box-shadow: 10px 12px 0 var(--vert); }
.scene-bd svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene-bd figcaption { margin-top: 0.5rem; font-weight: 700; font-size: 0.98rem; line-height: 1.3; text-align: center; font-style: italic; }
.scenes-bd + p { margin-top: 2.25rem; font-size: 1.2rem; font-weight: 600; color: var(--nuit) !important; text-align: center; }
@media (max-width: 900px) { .scenes-bd { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .scenes-bd { gap: 0.9rem; } .scene-bd { padding: 0.5rem 0.5rem 0.7rem; box-shadow: 4px 5px 0 var(--nuit); } .scene-bd figcaption { font-size: 0.82rem; } }

.scene-bd [class^="bd-"], .scene-bd [class*=" bd-"], .scene-bd .bd-vapeur path, .scene-bd .bd-fumee path { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes pop { 0%, 100% { transform: scale(1) rotate(0); } 10% { transform: scale(1.14) rotate(-4deg); } 20% { transform: scale(0.97) rotate(3deg); } 30% { transform: scale(1.06); } }
@keyframes vapeur { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes question { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-9px) rotate(8deg); } }
@keyframes clignote { 0%, 60%, 100% { opacity: 1; } 70%, 90% { opacity: 0.25; } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes note { 0% { opacity: 0; transform: translateY(8px); } 25%, 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) rotate(14deg); } }
@keyframes zzz { 0%, 100% { opacity: 0.2; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes etincelle { 0%, 100% { transform: scale(0.75) rotate(0); opacity: 0.85; } 20% { transform: scale(1.2) rotate(18deg); opacity: 1; } 40% { transform: scale(0.6) rotate(-10deg); opacity: 0.5; } 60% { transform: scale(1.1) rotate(8deg); opacity: 1; } }
@keyframes eclair { 0%, 45%, 100% { opacity: 0; } 50%, 70% { opacity: 1; } }

@keyframes feuille { 0% { transform: translate(0, 26px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx, 10px), -34px) rotate(var(--rot, 40deg)); opacity: 0; } }
@keyframes postit { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }

.scene-bd .bd-secoue { transform-origin: 50% 100%; animation: secoue 0.2s linear infinite; }
.scene-bd .bd-bulle { animation: pop 2.2s ease-in-out infinite; }
.scene-bd .bd-vapeur path { animation: vapeur 1.4s ease-out infinite; }
.scene-bd .bd-vapeur path + path { animation-delay: 0.5s; }
.scene-bd .bd-q { animation: question 2.6s ease-in-out infinite; }
.scene-bd .bd-q--2 { animation-delay: -0.9s; }
.scene-bd .bd-voyant { animation: clignote 1.1s infinite; }
.scene-bd .bd-rayon { animation: clignote 0.9s infinite; }
.scene-bd .bd-aiguille { transform-origin: 50% 100%; }
.scene-bd .bd-aiguille--m { animation: tourne 2.4s linear infinite; }
.scene-bd .bd-aiguille--h { animation: tourne 28.8s linear infinite; }
.scene-bd .bd-note { animation: note 2.4s ease-in-out infinite; }
.scene-bd .bd-note--2 { animation-delay: 0.6s; }
.scene-bd .bd-note--3 { animation-delay: 1.2s; }
.scene-bd .bd-zzz { animation: zzz 3s ease-in-out infinite; }
.scene-bd .bd-etincelle { animation: etincelle 0.7s linear infinite; }
.scene-bd .bd-eclairs path { animation: eclair 1.1s steps(1) infinite; }
.scene-bd .bd-eclairs path + path { animation-delay: 0.45s; }
.scene-bd .bd-fumee path { animation: vapeur 1.6s ease-out infinite; }
.scene-bd .bd-feuille { animation: feuille 2.1s ease-out infinite; }
.scene-bd .bd-feuille--2 { --dx: 34px; --rot: -50deg; animation-delay: 0.7s; }
.scene-bd .bd-feuille--3 { --dx: -30px; --rot: 70deg; animation-delay: 1.4s; }
.scene-bd .bd-postit { animation: postit 2.8s ease-in-out infinite; }
.scene-bd .bd-postit--2 { animation-delay: -0.7s; }
.scene-bd .bd-postit--3 { animation-delay: -1.4s; }
.scene-bd .bd-postit--4 { animation-delay: -2.1s; }
/* ---------- Scène de l'accueil ---------- */
.a-scene { position: relative; overflow: hidden; }
.entry-content > .scene { position: absolute; inset: 0; max-width: none; margin: 0 !important; padding: 0; box-sizing: border-box; pointer-events: none; --mx: 0; --my: 0; --sy: 0; }
.a-scene .hero { background: radial-gradient(60rem 30rem at 85% 0%, #1B4A85 0%, transparent 70%) var(--nuit); }

.hero-perso {
	position: absolute; width: 150px; right: max(var(--marge), calc((100% - var(--largeur)) / 2 + 6rem));
	top: calc(var(--hero-h, 480px) - 292px);
	transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -8px + var(--sy) * 0.12px), 0);
	transition: opacity 0.5s;
}
.scene.en-route.a-cable .hero-perso { opacity: 0; }
.pelote { position: absolute; width: 60%; left: 62%; top: 50%; overflow: visible; }
.interro { position: absolute; font-weight: 800; line-height: 1; animation: question 2.6s ease-in-out infinite; }
.interro--1 { right: -12%; top: -4%; font-size: 3rem; color: var(--vert); }
.interro--2 { right: -34%; top: 10%; font-size: 1.9rem; color: #7DB9FF; animation-delay: -1.2s; }

.flottant {
	position: absolute; padding: 0.45rem 0.8rem; border-radius: 10px; font-size: 0.85rem; font-weight: 600; white-space: nowrap;
	background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.28); color: #D3DEEC; backdrop-filter: blur(3px);
	--f: 20; --v: -0.2; --r: -4deg;
	transform: translate3d(calc(var(--mx) * var(--f) * 1px), calc(var(--my) * var(--f) * 1px + var(--sy) * var(--v) * 1px), 0) rotate(var(--r));
}
.flottant::before { content: "!"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: 0.45em; border-radius: 50%; background: #F2B544; color: var(--nuit); font-size: 0.85em; }
.flottant--1 { right: calc(50% - 60px); top: 62px; --f: 34; --v: -0.45; --r: -6deg; }
.flottant--2 { right: max(1rem, calc((100% - var(--largeur)) / 2 - 3rem)); top: 96px; --f: -26; --v: -0.3; --r: 5deg; }
.flottant--3 { right: calc(50% - 150px); top: calc(var(--hero-h, 480px) - 130px); --f: 18; --v: -0.6; --r: 3deg; }
.flottant--4 { right: max(1rem, calc((100% - var(--largeur)) / 2 - 6rem)); top: calc(var(--hero-h, 480px) - 150px); --f: -40; --v: -0.15; --r: -3deg; }
@keyframes flotte { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
.flottant { animation: flotte 5s ease-in-out infinite; }
.flottant--2 { animation-duration: 6.5s; animation-delay: -2s; }
.flottant--3 { animation-duration: 4.4s; animation-delay: -1s; }
.flottant--4 { animation-duration: 7s; animation-delay: -3s; }

/* Câble tracé au défilement : dans les marges sur grand écran, au bord de l'écran sur mobile */
.cable { position: absolute; left: 0; top: 0; display: none; overflow: visible; }
.scene.a-cable .cable { display: block; }
.cable path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cable__fond { stroke: rgba(67, 182, 110, 0.2); stroke-width: 4; stroke-dasharray: 2 12; }
.cable__trace { stroke: var(--vert); stroke-width: 5; }
.scene.est-etroit .cable__fond { stroke-width: 3; }
.scene.est-etroit .cable__trace { stroke-width: 4; }

.marcheur { --taille: 78px; position: absolute; left: 0; top: 0; width: var(--taille); height: var(--taille); display: none; opacity: 0; transition: opacity 0.4s; will-change: transform; }
.scene.est-etroit .marcheur { --taille: 46px; }
.scene.a-cable .marcheur { display: block; }
.scene.a-cable.en-route .marcheur { opacity: 1; }
.scene.a-cable.en-route.est-branche .marcheur { opacity: 0; }
.marcheur__sens { width: 100%; height: 100%; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px rgba(12, 35, 64, 0.25), 0 0 0 4px var(--vert); padding: 6% 10% 0 14%; overflow: hidden; transition: transform 0.25s; }
.scene.est-etroit .marcheur__sens { box-shadow: 0 4px 10px rgba(12, 35, 64, 0.25), 0 0 0 3px var(--vert); }
.marcheur.vers-gauche .marcheur__sens { transform: scaleX(-1); }
.marcheur .perso { color: var(--nuit); --papier: #fff; }
.marcheur .perso__ombre { display: none; }
.marcheur .perso__corps, .marcheur .bonhomme, .marcheur .tete { animation: none; }
@keyframes pas-g { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes pas-d { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes trottine { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
.marcheur .jambe-g, .marcheur .jambe-d { transform-origin: 50% 0; }
.marcheur.marche .jambe-g { animation: pas-g 0.4s linear infinite; }
.marcheur.marche .jambe-d { animation: pas-d 0.4s linear infinite; }
.marcheur.marche .perso { animation: trottine 0.2s linear infinite; }

/* Arrivée : la prise et le personnage ravi */
.a-scene .cta { padding-top: clamp(8.5rem, 14vw, 10rem); }
.prise { position: absolute; left: 50%; top: calc(var(--cta-top, 0px) + 26px); width: 58px; margin-left: -29px; transition: transform 0.4s, filter 0.4s; }
.prise svg { display: block; width: 100%; }
.prise rect { fill: #123056; stroke: #4C6B93; stroke-width: 3; transition: stroke 0.4s, fill 0.4s; }
.prise circle { fill: #0C2340; transition: fill 0.4s; }
.scene.est-branche .prise { transform: scale(1.12); filter: drop-shadow(0 0 18px rgba(67, 182, 110, 0.9)); }
.scene.est-branche .prise rect { stroke: var(--vert); fill: #143D3A; }
.scene.est-branche .prise circle { fill: var(--vert); }

.cta-perso { position: absolute; width: 112px; left: calc(50% + 400px); top: calc(var(--cta-top, 0px) + 50px); transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.4s; }
.js .scene.a-cable .cta-perso { transform: translateY(60px) scale(0.6); opacity: 0; }
.js .scene.a-cable.est-branche .cta-perso { transform: none; opacity: 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(67, 182, 110, 0.7); } 100% { box-shadow: 0 0 0 22px rgba(67, 182, 110, 0); } }
body.est-branche .cta .wp-block-button__link { animation: pulse 1.6s ease-out infinite; }

/* Écrans moyens et mobiles */
@media (max-width: 1340px) {
	.cta-perso { left: auto; right: calc(var(--marge) + 1rem); width: 96px; }
}
@media (max-width: 1100px) {
	.hero-perso { width: 124px; top: calc(var(--hero-h, 480px) - 242px); right: calc(var(--marge) + 4rem); }
	.flottant--1, .flottant--3 { display: none; }
}
@media (max-width: 760px) {
	.a-scene .hero { padding-bottom: 11.5rem; }
	.hero-perso { width: 86px; top: calc(var(--hero-h, 480px) - 170px); right: 4.2rem; }
	.interro--1 { font-size: 2rem; }
	.interro--2 { font-size: 1.3rem; }
	.flottant { font-size: 0.72rem; padding: 0.3rem 0.55rem; }
	.flottant--2 { right: 12.5rem; top: calc(var(--hero-h, 480px) - 88px); }
	.flottant--4 { right: 12.5rem; top: calc(var(--hero-h, 480px) - 142px); }
	.prise { width: 46px; margin-left: -23px; top: calc(var(--cta-top, 0px) + 22px); }
	.a-scene .cta { padding-top: 8.5rem; }
	.cta-perso { width: 62px; right: 1.8rem; top: calc(var(--cta-top, 0px) + 10px); }
}

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.js .reveal { opacity: 1; transform: none; }
	.hero-perso { transform: none; }
	.flottant { transform: rotate(var(--r)); }
	.tremble { filter: url(#tremble-1) !important; }
}

/* =====================================================================
   Dessins « à la main » (système repris de KAAP & Co) — remplace les styles de personnage ci-dessus
   ===================================================================== */
.dz .l { stroke: #26272A; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.dz .l:not([fill]) { fill: none; }
.dz .l.s { stroke-width: 1.9; }
.dz .l.p { fill: #fff; }
.dz .l.k, .dz .k { fill: #26272A; }
.dz .w { opacity: 0.92; }
.dz .l.t { stroke-dasharray: 5 6; }
.dz .c-orange .l { stroke: #F7931E; stroke-width: 3.2; }
.dz .c-blue .l { stroke: #1E9BE8; stroke-width: 3.2; }
.dz .c-green .l { stroke: #2FA862; stroke-width: 3.2; }
.dz .c-orange.l { stroke: #F7931E; } .dz .c-blue.l { stroke: #1E9BE8; } .dz .c-green.l { stroke: #2FA862; }
.dz .l.c-ok { stroke: #2FA862; stroke-width: 4.2; }
.dz .dz-logo { font: 700 11px/1 system-ui, "Segoe UI", Arial, sans-serif; fill: #fff; }

/* Mouvements saccadés, comme une animation image par image */
.dz .dz-arm { transform-origin: 132px 192px; animation: dz-gratte 0.5s steps(3) infinite alternate; }
.dz .dz-scratch { animation: dz-clignote 0.5s steps(2) infinite; }
.dz .dz-drop { animation: dz-goutte 2.6s steps(6) infinite; }
.dz .dz-q { animation: dz-monte 3s steps(8) infinite; }
.dz .dz-q2 { animation-delay: 1s; } .dz .dz-q3 { animation-delay: 2s; }
.dz .dz-coucou { transform-origin: 132px 192px; animation: dz-coucou 0.6s steps(3) infinite alternate; }
.dz .dz-hausse { transform-origin: 132px 192px; animation: dz-hausse 1.2s steps(3) infinite alternate; }
.dz .dz-hausse2 { transform-origin: 168px 192px; animation: dz-hausse 1.2s steps(3) infinite alternate-reverse; }
.dz .dz-secoue { transform-origin: 168px 192px; animation: dz-secoue 0.42s steps(3) infinite alternate; }
.dz .dz-gribouille { transform-origin: 226px 62px; animation: dz-gribouille 1.2s steps(4) infinite; }
.dz .dz-bulle { transform-box: fill-box; transform-origin: 60% 100%; animation: dz-pop 2.8s steps(7) infinite; }
.dz .dz-note { transform-box: fill-box; transform-origin: center; animation: dz-note 2.4s steps(6) infinite alternate; }
.dz .dz-n2 { animation-delay: 0.5s; } .dz .dz-n3 { animation-delay: 1s; } .dz .dz-n4 { animation-delay: 1.5s; }
.dz .dz-tic { animation: dz-tic 5s steps(12) infinite; }
.dz .dz-voyant, .dz .dz-rayon { animation: dz-clignote 0.9s steps(2) infinite; }
.dz .dz-serre { animation: dz-serre 0.5s steps(3) infinite alternate; }
.dz .dz-coche { animation: dz-pop 2.6s steps(6) infinite; }
.dz .dz-e1 { animation: dz-clignote 0.9s steps(2) infinite; } .dz .dz-e2 { animation: dz-clignote 1.1s steps(2) 0.3s infinite; } .dz .dz-e3 { animation: dz-clignote 1s steps(2) 0.6s infinite; }
.dz .dz-feuille { transform-box: fill-box; transform-origin: center; animation: dz-vole 3.6s steps(10) infinite; }
.dz .dz-f2 { animation-delay: 1.2s; } .dz .dz-f3 { animation-delay: 2.4s; }
.dz .dz-etincelle { animation: dz-etincelle 0.6s steps(3) infinite; }
.dz .dz-eclair { animation: dz-clignote 0.7s steps(2) infinite; } .dz .dz-eclair2 { animation-delay: 0.35s; }
.dz .dz-fumee { animation: dz-monte 2.4s steps(6) infinite; }
@keyframes dz-gratte { from { transform: rotate(3deg); } to { transform: rotate(-6deg); } }
@keyframes dz-clignote { from { opacity: 1; } to { opacity: 0.1; } }
@keyframes dz-goutte { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes dz-monte { 0% { opacity: 0; transform: translateY(12px); } 20% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes dz-coucou { from { transform: rotate(5deg); } to { transform: rotate(-9deg); } }
@keyframes dz-hausse { from { transform: rotate(-3deg); } to { transform: rotate(7deg); } }
@keyframes dz-secoue { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes dz-gribouille { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg) scale(1.04); } }
@keyframes dz-pop { 0% { transform: scale(0); } 18% { transform: scale(1.15); } 28%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes dz-note { from { transform: rotate(-9deg) translateY(4px); } to { transform: rotate(8deg) translateY(-6px); } }
@keyframes dz-tic { to { transform: rotate(360deg); } }
@keyframes dz-serre { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes dz-vole { 0% { opacity: 0; transform: translate(0, 40px) rotate(-10deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(20px, -40px) rotate(40deg); } }
@keyframes dz-etincelle { 0% { transform: scale(0.8) rotate(0); } 50% { transform: scale(1.15) rotate(14deg); } 100% { transform: scale(0.9) rotate(-8deg); } }

/* Le personnage seul : toujours dans une bulle blanche, comme sur KAAP & Co */
.perso { display: block; width: 100%; background: #fff; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; padding: 9% 9% 5%; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2); rotate: -1.5deg; }
.perso svg { display: block; width: 100%; height: auto; overflow: visible; }
.perso .si-ravi { display: none; }
.perso.is-ravi .si-ravi { display: inline; }
.perso.is-ravi .si-perdu { display: none; }
.perso--finale { padding: 8% 6% 6%; border-radius: 50% 50% 46% 54% / 50% 54% 46% 50%; rotate: 1.5deg; }

/* Saynètes : le dessin dans une bulle blanche, la légende dessous */
.scenes-bd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem; margin-top: 2.5rem; }
.scene-bd { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; rotate: none !important; color: var(--nuit); transition: transform 0.3s, opacity 0.7s ease; }
.scene-bd:hover { transform: translateY(-6px); box-shadow: none; }
.scene-bd__bulle { background: #fff; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; padding: 10% 7% 8%; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55); transition: box-shadow 0.3s; }
.scene-bd:nth-child(even) .scene-bd__bulle { border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%; rotate: 1.2deg; }
.scene-bd:nth-child(odd) .scene-bd__bulle { rotate: -1.2deg; }
.scene-bd:hover .scene-bd__bulle { box-shadow: 0 0 0 10px rgba(67, 182, 110, 0.35); }
.scene-bd figcaption { margin-top: 1.1rem; font-weight: 700; font-style: normal; font-size: 1.02rem; line-height: 1.35; text-align: center; }
@media (max-width: 900px) { .scenes-bd { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .scenes-bd { gap: 1.4rem 0.9rem; } .scene-bd figcaption { font-size: 0.86rem; margin-top: 0.7rem; } .scene-bd__bulle { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.55); } }

/* Emplacements du personnage */
.hero-perso { width: 270px; right: max(var(--marge), calc((100% - var(--largeur)) / 2 + 3rem)); top: calc(var(--hero-h, 480px) - 370px); }
.cta-perso { width: 240px; left: calc(50% + 410px); top: calc(var(--cta-top, 0px) + 40px); }
.page-header__perso { width: 150px; margin-bottom: -1.2rem; }
.marcheur__sens { padding: 0; background: #fff; }
.marcheur .perso { background: none; box-shadow: none; padding: 2% 6% 0; border-radius: 0; rotate: none; width: 118%; margin-left: -9%; }
.marcheur.marche .perso { animation: trottine 0.2s steps(2) infinite; }
@media (max-width: 1340px) { .cta-perso { left: auto; right: var(--marge); width: 190px; } .a-scene .cta { text-align: left; } .a-scene .cta .wp-block-buttons { justify-content: flex-start; } .a-scene .cta > * { max-width: min(var(--largeur), 100% - 230px); margin-left: 0; } }
@media (max-width: 1100px) { .hero-perso { width: 210px; top: calc(var(--hero-h, 480px) - 296px); right: calc(var(--marge) + 2rem); } }
@media (max-width: 760px) {
	.a-scene .hero { padding-bottom: 14rem; }
	.hero-perso { width: 170px; top: calc(var(--hero-h, 480px) - 222px); right: 2.6rem; }
	.page-header__perso { width: 104px; margin-bottom: -0.8rem; }
	.a-scene .cta { padding-top: 15.5rem; text-align: center; }
	.a-scene .cta .wp-block-buttons { justify-content: center; }
	.a-scene .cta > * { max-width: var(--largeur); margin-left: auto; }
	.cta-perso { width: 170px; right: auto; left: 50%; margin-left: -85px; top: calc(var(--cta-top, 0px) + 78px); }
}
@media (prefers-reduced-motion: reduce) { .dz, .dz * { animation: none !important; } }
/* =====================================================================
   Accueil v2 (6 octobre 2026) : le Régleur, ciel de nuit, entrées par besoin,
   saynètes en aplats, avant / après. Ce bloc prime sur les styles plus haut.
   ===================================================================== */

/* ---------- En-tête : nuit étoilée sur la ville ---------- */
.a-scene .hero {
	min-height: 720px; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(12rem, 18vw, 14rem);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 150' preserveAspectRatio='none'%3E%3Cpath fill='%23081A31' d='M0 150V86h36V54h28v46h24V34h36v66h20V68h30v32h26V20h42v80h22V58h34v42h24V80h30v20h24V44h38v56h22V70h32v30h26V26h40v74h24V62h32v38h26V86H720V150Z'/%3E%3Cg fill='%23FFD23F' fill-opacity='.8'%3E%3Crect x='96' y='48' width='5' height='7'/%3E%3Crect x='108' y='68' width='5' height='7'/%3E%3Crect x='214' y='36' width='5' height='7'/%3E%3Crect x='228' y='56' width='5' height='7'/%3E%3Crect x='382' y='58' width='5' height='7'/%3E%3Crect x='504' y='42' width='5' height='7'/%3E%3Crect x='520' y='62' width='5' height='7'/%3E%3Crect x='598' y='76' width='5' height='7'/%3E%3C/g%3E%3C/svg%3E") bottom center / 1440px 160px repeat-x,
		radial-gradient(rgba(255, 255, 255, 0.5) 1.2px, transparent 1.7px) 20px 30px / 140px 120px,
		radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.5px) 60px 10px / 90px 70px,
		radial-gradient(900px 520px at 78% 34%, #1E5AA8 0%, rgba(30, 90, 168, 0) 70%),
		linear-gradient(180deg, #081A31 0%, #0C2340 60%, #123A6B 100%);
}
.hero h1 { font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.05; max-width: 15ch; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; color: #FFD23F; }
.hero .lead { max-width: 34rem; }

/* ---------- Le Régleur ---------- */
.regleur, .regleur-medaillon { display: block; width: 100%; height: auto; overflow: visible; }
.regleur .rg-cape, .regleur .rg-tete, .regleur .rg-yeux, .regleur .rg-pastille { transform-box: fill-box; }
@keyframes rg-plane { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes rg-cape { 0%, 100% { transform: skewX(-2.5deg) scaleX(1); } 50% { transform: skewX(3deg) scaleX(1.04); } }
@keyframes rg-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes rg-tete { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes rg-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes rg-arrive { 0% { opacity: 0; transform: translate(40vw, 30vh) scale(0.5) rotate(18deg); } 70% { opacity: 1; transform: translate(-10px, -18px) scale(1.03) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
.regleur { animation: rg-plane 4s ease-in-out infinite; }
.regleur .rg-cape { transform-origin: 50% 0; animation: rg-cape 3.2s ease-in-out infinite; }
.regleur .rg-tete { transform-origin: 50% 90%; animation: rg-tete 5s ease-in-out infinite; }
.regleur .rg-yeux { transform-origin: 50% 50%; animation: rg-cligne 4.6s infinite; }
.regleur .rg-pastille { transform-origin: 50% 50%; animation: rg-pouls 2.4s ease-in-out infinite; }

.hero-regleur {
	position: absolute; width: 300px; right: max(var(--marge), calc((100% - var(--largeur)) / 2 + 4rem)); top: calc(var(--hero-h, 720px) - 640px);
	transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -10px + var(--sy) * 0.1px), 0); transition: opacity 0.5s;
}
.js .hero-regleur .regleur { animation: rg-arrive 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) both, rg-plane 4s ease-in-out 1.4s infinite; }
.hero-lune { position: absolute; left: 50%; top: -60px; width: 480px; height: 480px; margin-left: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.86) 56%, rgba(255, 255, 255, 0) 72%); }
.hero-regleur .regleur { position: relative; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.35)); }
.scene.en-route.a-cable .hero-regleur { opacity: 1; }

/* ---------- Les trois garanties, à cheval sur l'en-tête ---------- */
.entry-content > .wp-block-columns.preuves {
	position: relative; z-index: 3; width: min(var(--largeur), calc(100% - 2 * var(--marge))); max-width: none;
	margin: -64px auto 0 !important; padding: 0; gap: 0; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(12, 35, 64, 0.18);
}
.preuves .wp-block-column { padding: 1.5rem 1.75rem 1.5rem 4.6rem; position: relative; border-right: 1px solid #E3E9F0; }
.preuves .wp-block-column:last-child { border-right: 0; }
.preuves .wp-block-column::before {
	content: ""; position: absolute; left: 1.5rem; top: 1.5rem; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem;
	background: #E4F6EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232FA862' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center / 1.3rem no-repeat;
}
.preuves h3 { font-size: 1.12rem; font-weight: 800; }
.preuves p { margin-top: 0.25rem !important; color: var(--gris); font-size: 0.97rem; }
@media (max-width: 781px) { .preuves .wp-block-column { border-right: 0; border-bottom: 1px solid #E3E9F0; } .preuves .wp-block-column:last-child { border-bottom: 0; } }

/* ---------- Entrées par besoin ---------- */
.besoins { scroll-margin-top: 4rem; }
.besoins > h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; }
.tuiles.wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1.1rem; margin-top: 2.5rem; }
.tuile.wp-block-column {
	position: relative; border-radius: 22px; padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; min-height: 17.5rem;
	color: var(--nuit); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s, opacity 0.7s ease;
}
.tuile > * { margin: 0 !important; }
.tuile--1 { background: #DCEBFB; } .tuile--2 { background: #DDF3E5; } .tuile--3 { background: #FFF1C9; } .tuile--4 { background: #FBDDE2; } .tuile--5 { background: #E8E1FA; }
.tuile .tuile-pole { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; padding-right: 2.6rem; }
.tuile h3 { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.tuile h3 a { color: inherit; text-decoration: none; }
.tuile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.tuile p { font-size: 0.97rem; line-height: 1.5; color: #2D3B4E; }
.tuile::after { content: "→"; position: absolute; right: 1.1rem; top: 1.1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--nuit); color: #fff; display: grid; place-items: center; font-size: 1.15rem; transition: transform 0.3s, background-color 0.3s; }
.tuile .techs { list-style: none; padding: 0.6rem 0 0; margin-top: auto !important; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tuile .techs li { background: rgba(255, 255, 255, 0.78); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8rem; font-weight: 600; margin: 0; }
.tuile:hover { transform: translateY(-8px) rotate(-0.6deg); box-shadow: 0 22px 44px rgba(12, 35, 64, 0.16); }
.tuile:hover::after { transform: translateX(4px) scale(1.08); background: var(--bleu); }
.tuile:focus-within { outline: 3px solid var(--vert); outline-offset: 3px; }

/* ---------- Saynètes en aplats ---------- */
.scenes-bd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.5rem; }
.scene-bd, .scene-bd:nth-child(odd), .scene-bd:nth-child(even) {
	margin: 0; padding: 1rem 1rem 1.1rem; background: #fff; border: 0; border-radius: 22px; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08);
	rotate: none !important; color: var(--nuit); transition: transform 0.3s, box-shadow 0.3s, opacity 0.7s ease;
}
.scene-bd:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(12, 35, 64, 0.16); }
.scene-bd svg { display: block; width: 100%; height: auto; overflow: visible; background: #F3F6FA; border-radius: 14px; }
.scene-bd figcaption { margin-top: 0.8rem; font-weight: 700; font-style: normal; font-size: 0.98rem; line-height: 1.35; text-align: center; }
.scene-bd .bd-secoue .tete, .scene-bd .bd-secoue { transform-box: fill-box; }
.scene-bd .bd-aiguille { transform-box: fill-box; transform-origin: 50% 100%; }
.bd-saute { transform-box: fill-box; transform-origin: 50% 100%; animation: saute 1.5s ease-in-out infinite; }
@media (max-width: 900px) { .scenes-bd { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .scenes-bd { gap: 0.8rem; } .scene-bd, .scene-bd:nth-child(odd), .scene-bd:nth-child(even) { padding: 0.55rem 0.55rem 0.8rem; border-radius: 16px; } .scene-bd figcaption { font-size: 0.82rem; margin-top: 0.55rem; } }

/* ---------- Avant / Après ---------- */
.avant-apres { position: relative; margin-top: 2.5rem; border-radius: 24px; overflow: hidden; aspect-ratio: 640 / 340; box-shadow: 0 16px 44px rgba(12, 35, 64, 0.14); user-select: none; }
.aa-face { position: absolute; inset: 0; isolation: isolate; }
.aa-apres { z-index: 0; } .aa-avant { z-index: 1; }
.aa-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.aa-apres { background: linear-gradient(160deg, #DDF3E5, #DCEBFB); }
.aa-avant { background: #E9ECF1 repeating-linear-gradient(135deg, rgba(12, 35, 64, 0.04) 0 14px, transparent 14px 28px); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.aa-mot { position: absolute; top: 5%; z-index: 2; font-size: clamp(0.65rem, 1.3vw, 0.9rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.4em 1em; border-radius: 999px; }
.aa-avant .aa-mot { left: 4%; background: #fff; color: #B4232A; }
.aa-apres .aa-mot { right: 4%; background: var(--nuit); color: #fff; }
.aa-err, .aa-ok { position: absolute; z-index: 2; font-weight: 700; font-size: clamp(0.6rem, 1.35vw, 0.95rem); white-space: nowrap; }
.aa-err { background: #fff; border: 2px solid var(--nuit); border-radius: 10px; padding: 0.4em 0.8em; box-shadow: 4px 5px 0 var(--nuit); rotate: -4deg; }
.aa-err:nth-of-type(odd) { rotate: 3deg; }
.aa-ok { background: #fff; border-radius: 12px; padding: 0.45em 0.9em 0.45em 0.6em; box-shadow: 0 10px 24px rgba(12, 35, 64, 0.14); display: flex; gap: 0.45em; align-items: center; }
.aa-ok::before { content: "✓"; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; font-size: 0.85em; }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 6px; margin-left: -3px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 35, 64, 0.2); z-index: 3; pointer-events: none; }
.aa-poignee span { position: absolute; left: 50%; top: 50%; width: 3.6rem; height: 3.6rem; margin: -1.8rem; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.3); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; color: var(--nuit); }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.aa-curseur:focus-visible + .aa-poignee span, .avant-apres:focus-within .aa-poignee span { outline: 3px solid var(--vert); outline-offset: 3px; }
html:not(.js) .aa-avant { clip-path: inset(0 50% 0 0); }
@keyframes aa-invite { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
.avant-apres:not(.a-bouge) .aa-poignee span { animation: aa-invite 1.4s ease-in-out infinite; }

/* ---------- Scène finale, pastille du câble, bandeaux de page ---------- */
.scene-finale svg { display: block; width: 100%; height: auto; overflow: visible; }
.cta-perso { width: 270px; left: calc(50% + 380px); top: calc(var(--cta-top, 0px) + 50px); }
.marcheur__sens { padding: 0; }
.page-header__perso { width: 124px; margin-bottom: 0; align-self: center; }
.page-header__perso .regleur-medaillon { border-radius: 50%; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18); }
@media (max-width: 1340px) { .cta-perso { left: auto; right: var(--marge); width: 210px; } .a-scene .cta > * { max-width: min(var(--largeur), 100% - 240px); } }
@media (max-width: 1100px) { .hero-regleur { width: 240px; top: calc(var(--hero-h, 720px) - 540px); right: calc(var(--marge) + 1rem); } .hero-lune { width: 380px; height: 380px; margin-left: -190px; top: -50px; } }
@media (max-width: 760px) {
	.a-scene .hero { min-height: 0; padding-bottom: 25rem; background-size: 720px 110px, 140px 120px, 90px 70px, auto, auto; }
	.hero-regleur { width: 150px; top: calc(var(--hero-h, 720px) - 366px); right: 50%; margin-right: -75px; }
	.hero-lune { width: 250px; height: 250px; margin-left: -125px; top: -34px; }
	.flottant--1 { display: none; }
	.flottant--2 { right: auto; left: 1rem; top: calc(var(--hero-h, 720px) - 250px); }
	.flottant--4 { right: 1rem; top: calc(var(--hero-h, 720px) - 200px); }
	.page-header__perso { width: 78px; }
	.a-scene .cta { padding-top: 14.5rem; }
	.a-scene .cta > * { max-width: var(--largeur); margin-left: auto; }
	.cta-perso { width: 170px; right: auto; left: 50%; margin-left: -85px; top: calc(var(--cta-top, 0px) + 74px); }
}
@media (prefers-reduced-motion: reduce) { .regleur, .regleur *, .bd-saute, .aa-poignee span { animation: none !important; } .hero-regleur { transform: none; } }
/* =====================================================================
   Pages de service (modèle « grand écran clair ») — gabarit modele-service.php
   ===================================================================== */
.a-service { position: relative; overflow: hidden; }
.hero-service {
	position: relative; background: #fff; min-height: 620px; display: flex; flex-direction: column; justify-content: center;
	padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem);
	padding-left: max(var(--marge), calc((100% - var(--largeur)) / 2)); padding-right: max(var(--marge), calc((100% - var(--largeur)) / 2 + 560px));
}
.hero-service > * { max-width: none; margin-left: 0; margin-right: 0; }
.hero-service .eyebrow { color: var(--bleu); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; }
.hero-service h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; }
.hero-service h1 em { font-style: normal; background: #FFD23F; border-radius: 0.22em; padding: 0 0.18em 0.06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-service .lead { font-size: clamp(1.08rem, 2vw, 1.28rem); color: var(--gris); }
.hero-service .wp-block-buttons { margin-top: 1.6rem; }
.js .hero-service > :not(.soucis) { animation: monter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .hero-service > :nth-child(2) { animation-delay: 0.1s; } .js .hero-service > :nth-child(3) { animation-delay: 0.2s; } .js .hero-service > :nth-child(4) { animation-delay: 0.3s; }

/* Décor : grande forme bleue, pastille jaune, bulle blanche et le Régleur */
.decor-service { position: absolute; top: 0; right: 0; width: 50%; height: var(--hs-h, 620px); pointer-events: none; }
.decor-service__forme { position: absolute; right: -200px; top: -150px; width: 860px; height: 860px; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; background: linear-gradient(150deg, #1769C2, #0C2340); }
.decor-service__pastille { position: absolute; right: 500px; bottom: 30px; width: 190px; height: 190px; border-radius: 50%; background: #FFD23F; }
.decor-service__bulle { position: absolute; right: max(40px, calc((200vw - 2 * var(--largeur)) / 4 - 10px)); top: 50%; width: 440px; height: 460px; margin-top: -230px; border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; background: #fff; box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.2); }
.decor-service__regleur { position: absolute; right: max(140px, calc((200vw - 2 * var(--largeur)) / 4 + 90px)); top: 50%; width: 240px; margin-top: -205px; }
@keyframes forme { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(6deg) scale(1.03); } }
.decor-service__forme { animation: forme 14s ease-in-out infinite; }
.decor-service__pastille { animation: rg-plane 6s ease-in-out infinite; }

/* Les soucis réglés : cartes flottantes autour du Régleur */
.hero-service .soucis { list-style: none; margin: 0; padding: 0; }
.hero-service .soucis li {
	position: absolute; z-index: 3; background: #fff; border-radius: 16px; padding: 0.7rem 1rem 0.7rem 0.8rem; box-shadow: 0 16px 40px rgba(12, 35, 64, 0.22);
	font-weight: 700; font-size: 0.95rem; color: var(--gris); text-decoration: line-through; text-decoration-color: rgba(90, 102, 117, 0.6);
	display: flex; gap: 0.6rem; align-items: center; white-space: nowrap; margin: 0; animation: flotte 5s ease-in-out infinite;
}
.hero-service .soucis li::before { content: "✓"; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; font-size: 0.85rem; text-decoration: none; }
.hero-service .soucis li:nth-child(1) { right: max(410px, calc((100% - var(--largeur)) / 2 + 400px)); top: 20%; }
.hero-service .soucis li:nth-child(2) { right: max(20px, calc((100% - var(--largeur)) / 2 - 10px)); top: 14%; animation-delay: -1.5s; }
.hero-service .soucis li:nth-child(3) { right: max(10px, calc((100% - var(--largeur)) / 2 - 30px)); top: 62%; animation-delay: -3s; }
.hero-service .soucis li:nth-child(4) { right: max(400px, calc((100% - var(--largeur)) / 2 + 390px)); top: 70%; animation-delay: -2.2s; }

.section.texte > p { max-width: 46rem; margin-left: max(0px, calc((100% - var(--largeur)) / 2)); color: var(--texte); font-size: 1.08rem; }
.service > p a, .service .en-savoir-plus a { font-weight: 700; text-decoration: none; }
.service .en-savoir-plus { margin-top: 1.25rem; margin-left: max(0px, calc((100% - var(--largeur)) / 2)); }
.service .en-savoir-plus a:hover { text-decoration: underline; }

@media (max-width: 1180px) {
	.hero-service { padding-right: max(var(--marge), 48%); }
	.decor-service__bulle { width: 340px; height: 360px; margin-top: -180px; right: 30px; }
	.decor-service__regleur { width: 190px; margin-top: -162px; right: 105px; }
	.hero-service .soucis li { font-size: 0.82rem; padding: 0.5rem 0.8rem 0.5rem 0.6rem; }
	.hero-service .soucis li:nth-child(1), .hero-service .soucis li:nth-child(4) { right: 300px; }
}
@media (max-width: 860px) {
	.hero-service { min-height: 0; padding-right: var(--marge); padding-bottom: 23rem; }
	.decor-service { width: 100%; top: calc(var(--hs-h, 900px) - 22rem); height: 22rem; overflow: hidden; }
	.decor-service__forme { right: -30%; top: 10px; width: 160%; height: 640px; }
	.decor-service__pastille { display: none; }
	.decor-service__bulle { width: 250px; height: 260px; margin-top: -130px; right: 50%; margin-right: -125px; }
	.decor-service__regleur { width: 140px; margin-top: -120px; right: 50%; margin-right: -70px; }
	.hero-service .soucis { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; }
	.hero-service .soucis li { position: static; animation: none; box-shadow: 0 6px 16px rgba(12, 35, 64, 0.12); border: 1px solid var(--trait); font-size: 0.8rem; padding: 0.35rem 0.7rem 0.35rem 0.45rem; }
	.hero-service .soucis li::before { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .decor-service__forme, .decor-service__pastille, .hero-service .soucis li { animation: none !important; } }
/* =====================================================================
   Version 3 (7 octobre 2026) : couleurs par univers et par service, pages plus riches,
   nouveaux effets, saynètes plus calmes. Ce bloc prime sur les styles plus haut.
   ===================================================================== */

/* ---------- Couleurs : un accent par service ---------- */
body { --acc: #1769C2; --acc-fonce: #0C2340; --acc-clair: #DCEBFB; --surl: #FFD23F; }
body.accent-infra { --acc: #1F9D7A; --acc-fonce: #0B3B33; --acc-clair: #DDF3E5; }
body.accent-web { --acc: #F08A24; --acc-fonce: #6B3206; --acc-clair: #FFF1C9; --surl: #BFE8FA; }
body.accent-depannage { --acc: #E5484D; --acc-fonce: #5C1220; --acc-clair: #FBDDE2; }
body.accent-domotique { --acc: #7C5CE0; --acc-fonce: #2A1B63; --acc-clair: #E8E1FA; }

/* ---------- Univers « particuliers » : le vert prend la place du bleu ---------- */
body.univers-particuliers {
	--nuit: #0F3B2E; --nuit-2: #155240; --bleu: #17855F; --bleu-fonce: #0F6648; --vert: #FFC83D; --clair: #F1F7F3;
	--acc: #17855F; --acc-fonce: #0F3B2E; --acc-clair: #DDF3E5;
	--rg-cape: #2FA862; --rg-cape-o: #27905A; --rg-masque: #2FA862;
}
body.univers-particuliers.accent-domotique { --acc: #C9792B; --acc-fonce: #5A2F0B; --acc-clair: #FBEBD6; }
body.univers-particuliers .site-header.is-scrolled { background: rgba(15, 59, 46, 0.95); }
body.univers-particuliers .site-nav__liste .menu-cta > a, body.univers-particuliers .cta .wp-block-button__link { color: #0F3B2E; }
body.univers-particuliers .site-nav__liste .menu-cta > a:hover, body.univers-particuliers .cta .wp-block-button__link:hover { background: #FFD76B; }

/* Bascule Professionnels / Particuliers dans l'en-tête */
.univers { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.86rem; font-weight: 600; }
.univers a { color: #fff; text-decoration: none; padding: 0.32rem 0.85rem; border-radius: 999px; transition: background-color 0.2s; }
.univers a:hover { background: rgba(255, 255, 255, 0.14); }
.univers a.est-actif { background: #fff; color: var(--nuit); }
.site-header__inner { gap: 1rem; }
.site-header__inner .univers { margin-right: auto; margin-left: 0.5rem; }
@media (max-width: 800px) { .site-header__inner .univers { order: 3; flex-basis: 100%; justify-content: center; margin: 0; } .univers a { flex: 1; text-align: center; } }

/* ---------- Barre de progression de lecture ---------- */
.progression { position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--lu, 0)); background: linear-gradient(90deg, var(--vert), var(--surl)); pointer-events: none; }

/* ---------- Pages de service : accent, mises en page ---------- */
.decor-service__forme { background: linear-gradient(150deg, var(--acc), var(--acc-fonce)); }
.decor-service__pastille, .hero-service h1 em { background: var(--surl); }
.hero-service .eyebrow { color: var(--acc); }
.hero-service .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--acc); }
.hero-service .wp-block-button.is-style-outline .wp-block-button__link { color: var(--acc); }
.service h2::before { background: var(--acc); }
.a-service .service li { background: var(--acc-clair); border-left: 5px solid var(--acc); }
.a-service .section--clair { background: var(--acc-clair); }
.a-service .points .wp-block-column { border-top-color: var(--acc); }
.regleur .rg-cape path:first-child { fill: var(--rg-cape, #1F6FD9); }
.regleur .rg-cape path + path { fill: var(--rg-cape-o, #1B5FC0); }

/* Situations fréquentes : cartes numérotées */
.situations.wp-block-columns { gap: 1.25rem; margin-top: 2.5rem; counter-reset: situation; }
.situations .wp-block-column {
	position: relative; background: #fff; border-radius: 20px; padding: 3.4rem 1.5rem 1.5rem; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08);
	counter-increment: situation; transition: transform 0.25s, box-shadow 0.25s, opacity 0.7s ease; transform-style: preserve-3d;
}
.situations .wp-block-column::before { content: counter(situation); position: absolute; left: 1.5rem; top: 1.2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; display: grid; place-items: center; }
.situations .wp-block-column::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 0 20px 20px; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }
.situations .wp-block-column:hover { box-shadow: 0 22px 44px rgba(12, 35, 64, 0.16); }
.situations .wp-block-column:hover::after { transform: scaleX(1); }
.situations .wp-block-column > * + * { margin-top: 0.5rem; }
.situations p { color: var(--gris); }
.section--teinte { background: linear-gradient(180deg, #fff, var(--acc-clair)); }
.a-service .section--teinte + .section--clair { background: #fff; }

/* ---------- Chiffres ---------- */
.entry-content > .wp-block-columns.chiffres { max-width: none; margin: 0 !important; padding: clamp(2.5rem, 6vw, 4rem) var(--marge); gap: 1.5rem; background: var(--nuit); color: #fff; justify-content: center; text-align: center; }
.chiffres .wp-block-column { max-width: 20rem; }
.chiffres h3 { color: var(--surl); font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.chiffres p { margin-top: 0.4rem !important; color: #D3DEEC; font-size: 1.05rem; }

/* ---------- Bandeau défilant des technologies ---------- */
.entry-content > .defilant { max-width: none; margin: 0 !important; padding: 1rem 0; overflow: hidden; white-space: nowrap; background: var(--surl); color: var(--nuit); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }
.defilant span { display: inline-block; padding-right: 2.5rem; animation: defile 38s linear infinite; }
@keyframes defile { to { transform: translateX(-100%); } }

/* ---------- Étapes ---------- */
.etapes.wp-block-columns { gap: 1.5rem; margin-top: 2.5rem; position: relative; }
.etapes .wp-block-column { background: #fff; border-radius: 20px; padding: 1.6rem; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); border-top: 0; transition: transform 0.25s, opacity 0.7s ease; }
.etapes h3 { color: var(--acc); }
.etapes p { margin-top: 0.5rem !important; color: var(--gris); }

/* ---------- Zone d'intervention ---------- */
.zones.wp-block-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.zones li { margin: 0; padding: 0.55rem 1.1rem 0.55rem 2.3rem; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(12, 35, 64, 0.1); font-weight: 700; color: var(--nuit); position: relative; transition: transform 0.25s, opacity 0.7s ease; }
.zones li::before { content: ""; position: absolute; left: 0.9rem; top: 50%; width: 0.8rem; height: 0.8rem; margin-top: -0.4rem; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--acc); }
.zones li:hover { transform: translateY(-4px); }

/* ---------- Questions fréquentes ---------- */
.section.faq > .wp-block-details { max-width: 52rem; margin-left: max(0px, calc((100% - var(--largeur)) / 2)); margin-right: auto; background: #fff; border: 1px solid var(--trait); border-radius: 16px; padding: 0; overflow: hidden; transition: box-shadow 0.25s, border-color 0.25s; }
.section.faq > .wp-block-details + .wp-block-details { margin-top: 0.75rem; }
.section.faq > h2 + .wp-block-details { margin-top: 2rem; }
.wp-block-details summary { cursor: pointer; list-style: none; padding: 1.1rem 3.2rem 1.1rem 1.3rem; font-weight: 700; color: var(--nuit); position: relative; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; width: 1.8rem; height: 1.8rem; margin-top: -0.9rem; border-radius: 50%; background: var(--acc-clair); color: var(--acc-fonce); display: grid; place-items: center; font-weight: 800; transition: rotate 0.25s, background-color 0.25s; }
.wp-block-details[open] summary::after { rotate: 45deg; background: var(--acc); color: #fff; }
.wp-block-details[open] { border-color: var(--acc); box-shadow: 0 12px 30px rgba(12, 35, 64, 0.1); }
.wp-block-details > p { padding: 0 1.3rem 1.2rem; margin: 0; color: var(--gris); }
@keyframes ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wp-block-details[open] > p { animation: ouvre 0.3s ease; }

/* ---------- Carte « particuliers » dans « Pour qui » ---------- */
.points .wp-block-column.vers-particuliers { border-top-color: #FFC83D; background: #FFF8E1; border-radius: 0 0 16px 16px; padding: 1.1rem 1.2rem 1.3rem; }
.points .wp-block-column.vers-particuliers a { font-weight: 700; }

/* ---------- Saynètes : mouvements adoucis ---------- */
@keyframes secoue-doux { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.4deg); } }
.scene-bd .bd-secoue { animation: secoue-doux 0.9s ease-in-out infinite; }
.scene-bd .bd-bulle { animation-duration: 4.5s; }
.scene-bd .bd-etincelle { animation-duration: 1.8s; }
.scene-bd .bd-eclairs path { animation-duration: 2.6s; }
.scene-bd .bd-eclairs path + path { animation-delay: 1.1s; }
.scene-bd .bd-feuille { animation-duration: 4.8s; }
.scene-bd .bd-feuille--2 { --dx: 16px; --rot: -24deg; animation-delay: 1.6s; }
.scene-bd .bd-feuille--3 { --dx: 26px; --rot: 30deg; animation-delay: 3.2s; }
@keyframes feuille { 0% { transform: translate(0, 16px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx, 8px), -22px) rotate(var(--rot, 18deg)); opacity: 0; } }
.scene-bd .bd-q { animation-duration: 4s; }
.scene-bd .bd-voyant, .scene-bd .bd-rayon { animation-duration: 1.8s; }
.scene-bd .bd-postit { animation-duration: 4.5s; }
.scene-bd .bd-note { animation-duration: 3.6s; }
.scene-bd .bd-aiguille--m { animation-duration: 6s; }
.scene-bd .bd-aiguille--h { animation-duration: 72s; }

/* Inclinaison au survol (posée par le script) */
.incline { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0)); }

@media (prefers-reduced-motion: reduce) { .defilant span, .progression { animation: none !important; } .defilant { white-space: normal; padding: 1rem var(--marge); } }
/* =====================================================================
   Version 4 (7 octobre 2026) : fin des pages de service, pages locales, Régleur en vol
   ===================================================================== */

/* ---------- Fin de page : texte + « En bref » ---------- */
.fin-texte.wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; }
.fin-texte__corps { flex: 1.6; }
.fin-texte__corps > h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.fin-texte__corps > p { margin-top: 1rem; font-size: 1.06rem; color: var(--texte); }
.en-bref { flex: 1; background: linear-gradient(150deg, var(--acc), var(--acc-fonce)); color: #fff; border-radius: 24px; padding: 1.8rem 1.7rem; position: relative; overflow: hidden; box-shadow: 0 20px 44px rgba(12, 35, 64, 0.2); }
.en-bref::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.en-bref h3 { color: var(--surl); font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; }
.en-bref .bref { list-style: none; padding: 0; margin-top: 1rem; }
.en-bref .bref li { position: relative; padding-left: 2.1rem; margin: 0 0 0.8rem; font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.en-bref .bref li::before { content: "✓"; position: absolute; left: 0; top: 0.05em; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: #fff; color: var(--acc-fonce); display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; }

/* ---------- Fin de page : questions fréquentes en deux colonnes ---------- */
.fin-faq.wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; }
.faq-cote { flex: 1; position: sticky; top: 6rem; }
.faq-cote > h2 { font-size: clamp(1.5rem, 3vw, 2rem); position: relative; padding-bottom: 0.7rem; }
.faq-cote > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4.5rem; height: 5px; border-radius: 3px; background: var(--acc); }
.faq-cote > p { margin-top: 1rem; color: var(--gris); }
.faq-cote .wp-block-buttons { margin-top: 1.25rem; }
.faq-cote .wp-block-button.is-style-outline .wp-block-button__link { color: var(--acc-fonce); }
.faq-liste { flex: 1.7; }
.faq-liste .wp-block-details { background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; margin: 0; transition: box-shadow 0.25s, border-color 0.25s; }
.faq-liste .wp-block-details + .wp-block-details { margin-top: 0.75rem; }
.a-service .section--clair.faq { background: #F6F8FB; }

/* ---------- Fin de page : appel au contact en carte ---------- */
.cta.cta--carte { background: none; padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.cta.cta--carte::before { content: none; }
.cta--carte { position: relative; }
.cta--carte > * { position: relative; z-index: 1; }
.cta--carte::after { content: ""; position: absolute; z-index: 0; top: clamp(0.5rem, 2vw, 1.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); left: max(var(--marge), calc((100% - var(--largeur)) / 2)); right: max(var(--marge), calc((100% - var(--largeur)) / 2)); border-radius: 28px; background: radial-gradient(40rem 20rem at 85% 0%, var(--acc) 0%, transparent 70%), var(--acc-fonce); box-shadow: 0 24px 60px rgba(12, 35, 64, 0.25); }
.cta--carte > h2 { padding-top: clamp(2rem, 5vw, 3.2rem); font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.cta--carte .wp-block-button__link { background: var(--surl); color: var(--nuit); }
.cta--carte .wp-block-button__link:hover { background: #fff; }
.cta--carte .voir-aussi { margin-top: 1.6rem; padding: 0 1.5rem clamp(2rem, 5vw, 3rem); font-size: 0.95rem; color: rgba(255, 255, 255, 0.75); }
.cta--carte > .wp-block-buttons:last-child { padding-bottom: clamp(2rem, 5vw, 3rem); }
.cta--carte .voir-aussi a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); }
.cta--carte .voir-aussi a:hover { text-decoration-color: #fff; }
@media (max-width: 781px) { .faq-cote { position: static; } }

/* ---------- Pages locales : texte long ---------- */
.section.texte--long > h2 { margin-top: 2.6rem; max-width: 46rem; margin-left: max(0px, calc((100% - var(--largeur)) / 2)); padding-bottom: 0; }
.section.texte--long > h2:first-child { margin-top: 0; }
.section.texte--long > h2::after { content: none !important; }
.section.texte--long > h2::before { content: ""; display: block; width: 3rem; height: 5px; border-radius: 3px; background: var(--acc); margin-bottom: 0.9rem; }
.section.texte > h3 { max-width: 46rem; margin: 2rem 0 0 max(0px, calc((100% - var(--largeur)) / 2)); font-size: 1.05rem; color: var(--gris); font-weight: 600; }
.section.texte > .zones { max-width: var(--largeur); margin-top: 1rem; }
.section.texte > p + p { margin-top: 1rem; }
.zones li a { color: inherit; text-decoration: none; }
.zones li a::after { content: ""; position: absolute; inset: 0; border-radius: 999px; }

/* ---------- Le Régleur en vol le long du câble ---------- */
.regleur-vol { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgba(12, 35, 64, 0.3)); }
.marcheur { --taille: 150px; height: calc(var(--taille) / 2); }
.scene.est-etroit .marcheur { --taille: 84px; }
.marcheur__sens, .scene.est-etroit .marcheur__sens { width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; padding: 0; overflow: visible; transition: none; transform: rotate(var(--cap, 0deg)) scaleY(var(--miroir, 1)); transform-origin: 50% 50%; }
.marcheur.vers-gauche .marcheur__sens { transform: rotate(var(--cap, 0deg)) scaleY(var(--miroir, 1)); }
@keyframes rv-cape { 0%, 100% { transform: scaleY(1) skewY(0); } 50% { transform: scaleY(1.12) skewY(-3deg); } }
.regleur-vol .rv-cape { transform-box: fill-box; transform-origin: 100% 50%; animation: rv-cape 0.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .regleur-vol .rv-cape { animation: none; } }
/* =====================================================================
   Page Références
   ===================================================================== */
.secteurs.wp-block-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.secteur.wp-block-column { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); margin: 0; transition: transform 0.3s, box-shadow 0.3s, opacity 0.7s ease; }
.secteur:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(12, 35, 64, 0.16); }
.secteur > * { margin: 0 !important; }
.secteur-visuel svg, .secteur .wp-block-image img { display: block; width: 100%; height: auto; }
.secteur .wp-block-image img { aspect-ratio: 16 / 10; object-fit: cover; }
.secteur h3 { padding: 1.1rem 1.25rem 0; font-size: 1.12rem; }
.secteur p { padding: 0.4rem 1.25rem 1.3rem; color: var(--gris); font-size: 0.97rem; }
.rungis-texte.wp-block-columns { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; margin-top: 1.5rem; }
.rungis-texte .wp-block-column:first-child { flex: 1.6; }
.rungis-texte .wp-block-column:first-child > p + p { margin-top: 1rem; }
.rungis-texte .wp-block-column:first-child > p { font-size: 1.06rem; color: var(--texte); }
.sites.wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.site-ref.wp-block-column { position: relative; background: #fff; border-radius: 22px; padding: 1.6rem 1.4rem 1.4rem; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); margin: 0; border-top: 6px solid var(--acc); transition: transform 0.3s, box-shadow 0.3s, opacity 0.7s ease; }
.site-ref:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(12, 35, 64, 0.16); }
.site-ref > * { margin: 0 !important; }
.site-ref h3 { font-size: 1.2rem; }
.site-ref h3 a { color: var(--nuit); text-decoration: none; }
.site-ref h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.site-ref p { margin-top: 0.5rem !important; color: var(--gris); font-size: 0.97rem; }
.site-ref .site-adresse { margin-top: 1rem !important; font-weight: 700; color: var(--acc); font-size: 0.9rem; }
@media (max-width: 1000px) { .secteurs.wp-block-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .secteurs.wp-block-columns { grid-template-columns: 1fr; } }
/* Pages mères des zones : listes de liens en colonnes */
.entry-content > .wp-block-list.liste-zones, .entry-content > ul.wp-block-list { columns: 2 18rem; column-gap: 2rem; }
.entry-content > .wp-block-list li { break-inside: avoid; margin-bottom: 0.4rem; }

/* =====================================================================
   Version 5 (7 octobre 2026) : formulaire de contact, actualités
   ===================================================================== */

/* ---------- Formulaire de contact ---------- */
.contact-carte { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; background: #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(12, 35, 64, 0.14); overflow: hidden; }
.contact-carte .contact-form { padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.contact-form form > * + * { margin-top: 1.25rem; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form legend, .contact-form label { display: block; font-weight: 700; margin-bottom: 0.45rem; color: var(--nuit); font-size: 0.97rem; padding: 0; }
.contact-form label small { font-weight: 400; color: var(--gris); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
	width: 100%; font: inherit; color: inherit; background: #F6F8FB; border: 2px solid transparent; border-radius: 14px; padding: 0.8rem 1rem;
	transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.contact-form input:hover, .contact-form textarea:hover { background: #EEF2F7; }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; background: #fff; border-color: var(--bleu); box-shadow: 0 0 0 4px rgba(23, 105, 194, 0.14); }
.contact-form .champ { position: relative; margin: 0; }
.contact-form .champ.est-valide input, .contact-form .champ.est-valide textarea { border-color: #7AD3A0; background: #F4FBF7; }
.contact-form .champ.est-valide::after { content: "✓"; position: absolute; right: 0.9rem; top: 2.45rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #43B66E; color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; animation: dz-pop-une 0.35s ease; }
@keyframes dz-pop-une { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
.contact-form .champ.est-invalide input, .contact-form .champ.est-invalide textarea { border-color: #E5484D; background: #FEF6F6; }
.contact-form .champ .erreur-champ { display: block; margin-top: 0.35rem; color: #B4232A; font-size: 0.88rem; font-weight: 600; }
.choix__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choix__option { margin: 0 !important; cursor: pointer; font-weight: 600 !important; }
.choix__option input { position: absolute; opacity: 0; pointer-events: none; }
.choix__option span { display: inline-block; padding: 0.55rem 1.05rem; border-radius: 999px; background: #F6F8FB; border: 2px solid transparent; color: var(--nuit); transition: background-color 0.2s, color 0.2s, transform 0.15s, border-color 0.2s; }
.choix__option:hover span { background: #E6EEF8; transform: translateY(-2px); }
.choix__option input:checked + span { background: var(--nuit); color: #fff; }
.choix__option input:focus-visible + span { border-color: var(--vert); }
.contact-form .consentement { display: flex; gap: 0.8rem; align-items: flex-start; background: #F6F8FB; border-radius: 14px; padding: 0.9rem 1rem; }
.contact-form .consentement input { margin-top: 0.2rem; width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--bleu); }
.contact-form .consentement label { font-weight: 400; font-size: 0.92rem; color: var(--gris); margin: 0; }
.contact-envoi { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.contact-envoi button { font: inherit; font-weight: 700; background: var(--bleu); color: #fff; border-radius: 999px; padding: 0.95rem 1.8rem; display: inline-flex; gap: 0.6rem; align-items: center; }
.contact-envoi__fleche { display: inline-block; transition: transform 0.25s; }
.contact-envoi button:hover .contact-envoi__fleche { transform: translateX(6px); }
.contact-carte.is-envoi .contact-envoi button { opacity: 0.75; pointer-events: none; }
.contact-carte.is-envoi .contact-envoi__fleche { animation: envoi 0.7s linear infinite; }
@keyframes envoi { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }
.contact-form .form-note { font-size: 0.88rem; color: var(--gris); }

/* Le Régleur à côté du formulaire */
.contact-mascotte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1.6rem 1.2rem 1.4rem; background: radial-gradient(22rem 18rem at 50% 30%, #1E5AA8 0%, rgba(30, 90, 168, 0) 70%), linear-gradient(180deg, #0C2340, #123A6B); color: #fff; overflow: hidden; }
.contact-bulle { position: relative; background: #fff; color: var(--nuit); font-weight: 700; padding: 0.7rem 1.1rem; border-radius: 16px; max-width: 15rem; text-align: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); margin-bottom: 1.4rem; transition: transform 0.25s; }
.contact-bulle::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: #fff; rotate: 45deg; border-radius: 3px; }
.contact-bulle.change { animation: dz-pop-une 0.3s ease; }
.contact-mascotte__perso { position: relative; width: min(190px, 60%); }
.contact-mascotte__halo { position: absolute; left: 50%; top: -8%; width: 150%; aspect-ratio: 1; margin-left: -75%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.8) 54%, rgba(255, 255, 255, 0) 70%); }
.contact-mascotte .regleur { position: relative; }
.contact-mascotte .regleur .rg-yeux { animation: none; transform: translate(calc(var(--ox, 0) * 1px), calc(var(--oy, 0) * 1px)); transition: transform 0.3s; }
.contact-mascotte .regleur .rg-tete { animation: none; transform: rotate(calc(var(--penche, 0) * 1deg)); transition: transform 0.4s; }
.contact-jauge { list-style: none; display: flex; gap: 0.4rem; padding: 0; margin: 1.2rem 0 0; }
.contact-jauge li { width: 2.2rem; height: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.22); margin: 0; transition: background-color 0.3s, transform 0.3s; }
.contact-jauge li.est-plein { background: #43B66E; transform: scaleY(1.4); }
.contact-carte.is-envoi .regleur .rg-cape { animation-duration: 0.5s; }
@keyframes non { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(6deg); } }
.contact-carte.is-erreur .regleur .rg-tete { animation: non 0.6s ease; }
/* Validation : il fléchit, puis décolle comme une fusée, bras en avant */
@keyframes flechit { 0% { transform: none; opacity: 1; } 70% { transform: translateY(5%) scale(1.06, 0.88); opacity: 1; } 99% { transform: translateY(5%) scale(1.06, 0.88); opacity: 1; } 100% { transform: translateY(5%) scale(1.06, 0.88); opacity: 0; } }
@keyframes decolle { 0% { opacity: 1; transform: translate(0, 0) rotate(-84deg) scale(0.92); } 18% { transform: translate(2px, -6%) rotate(-84deg) scale(1); } 100% { opacity: 1; transform: translate(46px, -640px) rotate(-78deg) scale(0.85); } }
@keyframes poussiere { 0% { opacity: 0.9; transform: scale(0.3, 0.6); } 100% { opacity: 0; transform: scale(2.4, 1.3); } }
@keyframes sillage { 0% { opacity: 0; height: 0; } 25% { opacity: 0.9; } 100% { opacity: 0; height: 420px; } }
.contact-mascotte__perso { transform-origin: 50% 100%; }
.contact-carte.is-ok .contact-mascotte .regleur { animation: flechit 0.42s ease-in forwards; transform-origin: 50% 100%; }
.contact-decollage { position: absolute; left: 50%; bottom: 20%; width: 200%; margin-left: -100%; opacity: 0; pointer-events: none; transform-origin: 50% 50%; }
.contact-decollage .regleur-vol { filter: none; }
.contact-carte.is-ok .contact-decollage { animation: decolle 1.25s 0.42s cubic-bezier(0.55, 0, 0.85, 0.35) forwards; }
.contact-carte.is-ok .contact-decollage .rv-cape { animation-duration: 0.22s; }
.contact-poussiere { position: absolute; left: 50%; bottom: -2%; width: 70%; height: 18px; margin-left: -35%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); opacity: 0; }
.contact-carte.is-ok .contact-poussiere { animation: poussiere 0.7s 0.42s ease-out forwards; }
.contact-mascotte__perso::after { content: ""; position: absolute; left: 50%; bottom: 20%; width: 6px; margin-left: -3px; height: 0; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); opacity: 0; transform-origin: 50% 100%; }
.contact-carte.is-ok .contact-mascotte__perso::after { animation: sillage 1s 0.5s ease-out forwards; bottom: 24%; }
.contact-carte.is-ok .contact-jauge li { background: #43B66E; }
.contact-carte.is-ok .contact-bulle { opacity: 0; transition: opacity 0.3s 0.35s; }
.contact-carte.is-ok .contact-mascotte__halo { opacity: 0.18; transition: opacity 0.8s 0.6s; }
@media (prefers-reduced-motion: reduce) { .contact-carte.is-ok .contact-mascotte .regleur { opacity: 1 !important; } .contact-decollage, .contact-poussiere, .contact-mascotte__perso::after { display: none; } }

/* Validation : le formulaire s'efface, la coche se trace */
.contact-carte.is-ok .contact-form { visibility: hidden; max-height: 480px; overflow: hidden; }
.contact-succes { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% * 1.55 / 2.55); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: #fff; overflow: hidden; }
.contact-succes[hidden] { display: none; }
.contact-succes h2 { margin-top: 1.2rem; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; }
.contact-succes p { margin-top: 0.6rem; color: var(--gris); font-size: 1.08rem; }
.contact-succes__retour { font-weight: 700; }
.contact-succes__coche { width: 110px; height: 110px; }
.contact-succes__coche circle { fill: #E4F6EB; stroke: #43B66E; stroke-width: 6; stroke-dasharray: 327; stroke-dashoffset: 327; animation: trace 0.7s ease forwards; }
.contact-succes__coche path { fill: none; stroke: #2FA862; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: trace 0.45s 0.55s ease forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.contact-succes > h2, .contact-succes > p { animation: monter 0.6s 0.7s both; }
/* Coordonnées sous le formulaire */
.coordonnees.wp-block-columns { gap: 1.25rem; margin-top: 2rem; }
.coordonnees .wp-block-column { background: #fff; border-radius: 20px; padding: 1.3rem 1.4rem; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); border-top: 5px solid var(--vert); }
.coordonnees h3 { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.coordonnees p { margin-top: 0.4rem !important; font-weight: 700; color: var(--nuit); font-size: 1.08rem; }

@media (max-width: 900px) {
	.contact-carte { grid-template-columns: 1fr; }
	.contact-mascotte { order: -1; flex-direction: row; justify-content: center; gap: 1rem; padding: 1.2rem 1rem 0; align-items: flex-end; }
	.contact-mascotte__perso { width: 96px; margin-bottom: -22px; }
	.contact-bulle { margin-bottom: 2.4rem; max-width: 11rem; font-size: 0.92rem; }
	.contact-bulle::after { left: auto; right: -8px; bottom: 50%; margin: 0 0 -9px; }
	.contact-jauge { display: none; }
	.contact-succes { width: 100%; top: 150px; }
	.contact-carte.is-ok .contact-form { visibility: hidden; max-height: 420px; overflow: hidden; }
	/* Bandeau bas : il part en biais vers la gauche, au-dessus de la bulle effacée */
	.contact-decollage { bottom: 10%; }
	.contact-carte.is-ok .contact-decollage { animation-name: decolle-biais; animation-duration: 1.1s; }
	.contact-mascotte__perso::after { display: none; }
}
@keyframes decolle-biais { 0% { opacity: 1; transform: translate(0, 0) scaleX(-1) rotate(-70deg) scale(0.9); } 20% { transform: translate(-4px, -8px) scaleX(-1) rotate(-62deg) scale(1); } 100% { opacity: 1; transform: translate(-460px, -190px) scaleX(-1) rotate(-24deg) scale(0.9); } }

/* ---------- Actualités ---------- */
.actus { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.entry-content.actus > * { margin-top: 0 !important; }
.filtres-cat { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtre-cat { padding: 0.5rem 1.05rem; border-radius: 999px; background: var(--cat-clair, #EEF2F7); color: var(--nuit); font-weight: 700; text-decoration: none; font-size: 0.95rem; border: 2px solid transparent; transition: transform 0.2s, background-color 0.2s, color 0.2s; }
.filtre-cat:hover { transform: translateY(-2px); border-color: var(--cat, var(--nuit)); }
.filtre-cat.est-actif { background: var(--cat, var(--nuit)); color: #fff; }
.entry-content.actus > .grille-articles { margin-top: 2rem !important; }
.grille-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.carte-article { position: relative; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s, opacity 0.7s ease; }
.carte-article:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(12, 35, 64, 0.16); }
.carte-article__visuel { display: block; aspect-ratio: 16 / 9; background: var(--cat-clair); overflow: hidden; }
.carte-article__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
.carte-article:hover .carte-article__visuel img { transform: scale(1.06); }
.carte-article__motif { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 78% 30%, var(--cat) 0 22%, transparent 22.5%), radial-gradient(circle at 18% 86%, rgba(255, 255, 255, 0.75) 0 26%, transparent 26.5%), radial-gradient(circle at 46% 12%, rgba(255, 255, 255, 0.5) 0 9%, transparent 9.5%), var(--cat-clair); transition: transform 0.5s; }
.carte-article:hover .carte-article__motif { transform: scale(1.08) rotate(3deg); }
.carte-article__corps { padding: 1.2rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.carte-article__meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--gris); }
.pastille-cat { display: inline-block; padding: 0.22rem 0.75rem; border-radius: 999px; background: var(--cat-clair); color: var(--cat); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; }
.carte-article__titre { font-size: 1.2rem; line-height: 1.25; }
.carte-article__titre a { color: var(--nuit); text-decoration: none; }
.carte-article__titre a::after { content: ""; position: absolute; inset: 0; }
.carte-article__extrait { color: var(--gris); font-size: 0.97rem; }
.carte-article__suite { margin-top: auto; padding-top: 0.4rem; font-weight: 700; color: var(--cat); }
.carte-article__suite span { display: inline-block; transition: transform 0.25s; }
.carte-article:hover .carte-article__suite span { transform: translateX(6px); }
.actus .navigation.pagination { margin-top: 2.5rem !important; }
.actus .nav-links { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.actus .page-numbers { padding: 0.55rem 1rem; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(12, 35, 64, 0.1); font-weight: 700; text-decoration: none; color: var(--nuit); }
.actus .page-numbers.current { background: var(--nuit); color: #fff; }
.actus-vide { text-align: center; background: #fff; border-radius: 28px; padding: clamp(2rem, 6vw, 4rem) 1.5rem; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); margin-top: 2rem !important; }
.actus-vide__perso { width: 120px; margin: 0 auto 1.2rem; }
.actus-vide p { margin-top: 0.8rem; color: var(--gris); }
.page-header__sur a { color: #C9D6E6; font-weight: 600; text-decoration: none; }
.page-header[style*="--cat"] { border-bottom: 6px solid var(--cat); }

/* Un article */
.article__entete { background: linear-gradient(180deg, var(--cat-clair), #fff); padding: clamp(2rem, 5vw, 3.5rem) var(--marge) clamp(1.5rem, 3vw, 2rem); }
.article__entete-inner, .article__contenu, .article__image, .article__appel { max-width: 46rem; margin: 0 auto; }
.article__fil a { font-weight: 700; text-decoration: none; color: var(--gris); }
.article__meta { margin-top: 1.2rem; display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; color: var(--gris); font-size: 0.92rem; }
.article__entete h1 { margin-top: 0.9rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.article__chapo { margin-top: 1rem; font-size: 1.2rem; color: var(--texte); }
.article__image { padding: 0 var(--marge); box-sizing: content-box; }
.article__image img { display: block; width: 100%; height: auto; border-radius: 22px; }
.article__contenu { padding: clamp(1.5rem, 4vw, 2.5rem) var(--marge); box-sizing: content-box; font-size: 1.1rem; line-height: 1.75; }
.article__contenu > * + * { margin-top: 1.25rem; }
.article__contenu h2 { margin-top: 2.4rem; font-size: 1.6rem; }
.article__contenu h3 { margin-top: 1.8rem; }
.article__contenu ul, .article__contenu ol { padding-left: 1.3rem; }
.article__contenu li + li { margin-top: 0.4rem; }
.article__contenu blockquote { margin-left: 0; margin-right: 0; padding: 1rem 1.3rem; border-left: 5px solid var(--cat); background: var(--cat-clair); border-radius: 0 14px 14px 0; }
.article__contenu a { color: var(--cat); font-weight: 600; }
.article__appel { display: flex; gap: 1.4rem; align-items: center; background: var(--nuit); color: #fff; border-radius: 24px; padding: 1.6rem 1.8rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); width: calc(100% - 2 * var(--marge)); box-sizing: border-box; }
.article__appel h2 { color: #fff; font-size: 1.4rem; }
.article__appel p { margin-top: 0.5rem; color: #D3DEEC; }
.article__appel .wp-element-button { display: inline-block; margin-top: 0.4rem; background: var(--vert); color: var(--nuit); border-radius: 999px; padding: 0.7rem 1.4rem; font-weight: 700; }
.article__appel-perso { width: 96px; flex: none; }
.article-suite { background: var(--clair); padding: clamp(2.5rem, 6vw, 4rem) var(--marge); }
.article-suite > * { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.article-suite .grille-articles { margin-top: 1.75rem; }
@media (max-width: 1000px) { .grille-articles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grille-articles { grid-template-columns: 1fr; } .article__appel { flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .contact-succes__coche circle, .contact-succes__coche path { stroke-dashoffset: 0; } }

/* ---------- Articles : question au lecteur, appel au contact, mini-diagnostic, questions fréquentes ---------- */
.article__contenu blockquote { position: relative; padding: 1.1rem 1.3rem 1.1rem 3.6rem; font-weight: 700; font-size: 1.15rem; color: var(--nuit); }
.article__contenu blockquote::before { content: "?"; position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--cat); color: #fff; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.article__contenu blockquote p { margin: 0; }
.article-cta { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; margin-top: 2.2rem !important; margin-bottom: 2.2rem; padding: 1.3rem 1.5rem; border-radius: 22px; background: linear-gradient(120deg, #0C2340, #123A6B); color: #fff; box-shadow: 0 16px 36px rgba(12, 35, 64, 0.2); }
.article-cta__perso { width: 68px; }
.article-cta__texte { margin: 0 !important; font-weight: 700; font-size: 1.12rem; line-height: 1.4; }
.article__contenu a.article-cta__bouton { background: var(--vert); color: var(--nuit); text-decoration: none; font-weight: 800; padding: 0.75rem 1.3rem; border-radius: 999px; white-space: nowrap; transition: transform 0.2s; }
.article-cta__bouton:hover { transform: translateY(-2px); }
.article-cta__bouton span { display: inline-block; transition: transform 0.2s; }
.article-cta__bouton:hover span { transform: translateX(4px); }
.article__contenu ul.diagnostic { list-style: none; padding: 0.6rem; background: #fff; border: 2px solid var(--cat-clair); border-radius: 20px; }
.article__contenu ul.diagnostic li { position: relative; margin: 0; padding: 0.75rem 0.9rem 0.75rem 3rem; border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--nuit); transition: background 0.2s; }
.article__contenu ul.diagnostic li + li { margin-top: 0.15rem; }
.article__contenu ul.diagnostic li:hover { background: var(--cat-clair); }
.article__contenu ul.diagnostic li::before { content: ""; position: absolute; left: 0.9rem; top: 0.85rem; width: 1.35rem; height: 1.35rem; border-radius: 6px; border: 2px solid var(--cat); background: #fff; box-sizing: border-box; }
.article__contenu ul.diagnostic li.est-coche::before { background: #2FA862; border-color: #2FA862; }
.article__contenu ul.diagnostic li.est-coche::after { content: ""; position: absolute; left: 1.33rem; top: 1rem; width: 0.4rem; height: 0.75rem; border: solid #fff; border-width: 0 3px 3px 0; rotate: 45deg; }
.article__contenu .diagnostic-verdict { padding: 0.9rem 1.2rem; border-radius: 14px; background: var(--cat-clair); font-weight: 700; color: var(--nuit); }
.article__contenu details { background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(12, 35, 64, 0.08); padding: 0; margin-top: 0.7rem; overflow: hidden; }
.article__contenu details summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font-weight: 700; color: var(--nuit); position: relative; }
.article__contenu details summary::-webkit-details-marker { display: none; }
.article__contenu details summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%; font-size: 1.5rem; font-weight: 400; color: var(--cat); transition: rotate 0.25s; }
.article__contenu details[open] summary::after { rotate: 45deg; }
.article__contenu details > p { margin: 0; padding: 0 1.2rem 1.1rem; font-size: 1.02rem; }
@media (max-width: 640px) {
	.article-cta { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.article-cta__perso { width: 60px; }
}

/* ---------- Contact : le Régleur dans son cercle suit le défilement ---------- */
.contact-carte, .contact-mascotte { overflow: clip; }
.contact-mascotte__suivi { display: flex; flex-direction: column; align-items: center; width: 100%; }
.contact-mascotte__halo { top: 50%; left: 50%; width: 132%; margin: 0; translate: -50% -50%; background: radial-gradient(circle at 50% 38%, #fff 0%, #E6ECF8 100%); box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.14), 0 0 0 20px rgba(255, 255, 255, 0.06), 0 24px 50px rgba(0, 0, 0, 0.3); }
@media (min-width: 901px) {
	.contact-mascotte { justify-content: flex-start; padding-top: 2rem; padding-bottom: 2rem; }
	.contact-mascotte__suivi { position: sticky; top: 104px; }
	.contact-mascotte__perso { margin: 1.6rem 0 2.4rem; }
}
@media (max-width: 900px) {
	.contact-mascotte__suivi { flex-direction: row; justify-content: center; align-items: flex-end; gap: 1rem; }
	.contact-mascotte__halo { width: 120%; }
}

/* ---------- Qui sommes-nous : les quatre valeurs, les attentes ---------- */
.valeurs.wp-block-columns { gap: 1.25rem; margin-top: 2.2rem; counter-reset: v; }
.valeurs .valeur { position: relative; background: #fff; border-radius: 22px; padding: 1.6rem 1.5rem 1.7rem; box-shadow: 0 10px 30px rgba(12, 35, 64, 0.08); border-top: 5px solid var(--vert); transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; }
.valeurs .valeur:nth-child(2) { border-top-color: #1769C2; }
.valeurs .valeur:nth-child(3) { border-top-color: #F08A24; }
.valeurs .valeur:nth-child(4) { border-top-color: #7C5CE0; }
.valeurs .valeur:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(12, 35, 64, 0.16); }
.valeurs .valeur-numero { margin: 0 !important; font-size: 2.6rem; font-weight: 800; line-height: 1; color: #E3E9F0; letter-spacing: -0.03em; }
.valeurs h3 { margin-top: 0.5rem; font-size: 1.25rem; color: var(--nuit); }
.valeurs .valeur p:last-child { margin-top: 0.6rem !important; color: var(--gris); font-size: 0.98rem; }
ul.attentes { list-style: none; padding: 0; margin-top: 1.6rem; display: grid; gap: 0.7rem; max-width: 52rem; }
ul.attentes li { position: relative; margin: 0; padding: 1rem 1.2rem 1rem 3.4rem; background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(12, 35, 64, 0.07); }
ul.attentes li::before { content: ""; position: absolute; left: 1.1rem; top: 1.05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--vert); }
ul.attentes li::after { content: ""; position: absolute; left: 1.62rem; top: 1.32rem; width: 0.38rem; height: 0.72rem; border: solid var(--nuit); border-width: 0 3px 3px 0; rotate: 45deg; }
@media (max-width: 900px) { .valeurs.wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .valeurs.wp-block-columns { grid-template-columns: 1fr; } }

/* Liens dans la carte « En bref » : blancs sur fond de couleur */
.en-bref a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 0.2em; }
.en-bref a:hover { text-decoration-color: #fff; }

/* ---------- Page introuvable ---------- */
.page-404 { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); min-height: 70vh; padding: clamp(2.5rem, 6vw, 5rem) var(--marge); background: radial-gradient(40rem 26rem at 22% 40%, #1E5AA8 0%, rgba(30, 90, 168, 0) 70%), linear-gradient(180deg, #0C2340, #123A6B); color: #fff; overflow: hidden; }
.page-404__ciel { position: relative; aspect-ratio: 1; max-width: 26rem; width: 100%; justify-self: center; }
.page-404__lune { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0%, #E6ECF8 100%); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12), 0 0 0 26px rgba(255, 255, 255, 0.05), 0 30px 60px rgba(0, 0, 0, 0.3); }
.page-404__vol { position: absolute; left: -6%; right: -6%; top: 50%; translate: 0 -50%; rotate: -14deg; animation: plane-404 5s ease-in-out infinite; }
.page-404__vol .regleur-vol { display: block; width: 100%; height: auto; }
@keyframes plane-404 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -16px); } }
.page-404__texte { max-width: 34rem; }
.page-404__code { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert); }
.page-404 h1 { margin-top: 0.6rem; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; }
.page-404__texte > p { margin-top: 1rem; font-size: 1.12rem; color: #D3DEEC; }
.page-404__boutons { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1.6rem !important; }
.page-404 .wp-element-button { background: var(--vert); color: var(--nuit); font-weight: 800; border-radius: 999px; padding: 0.85rem 1.5rem; text-decoration: none; }
.page-404__second { color: #fff; font-weight: 700; padding: 0.8rem 1.3rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.45); text-decoration: none; }
.page-404__second:hover { border-color: #fff; }
.page-404__liens { list-style: none; padding: 0; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.page-404__liens a { color: #D3DEEC; font-weight: 600; text-underline-offset: 0.2em; }
.page-404__liens a:hover { color: #fff; }
@media (max-width: 800px) { .page-404 { grid-template-columns: 1fr; text-align: center; } .page-404__ciel { max-width: 15rem; } .page-404__texte { margin: 0 auto; } .page-404__boutons, .page-404__liens { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .page-404__vol { animation: none; } }

/* ---------- Pages « grossistes » : en-tête en photo du métier, sans personnage ---------- */
.entry-content > .hero-photo { position: relative; max-width: none; margin: 0; color: #fff; background: #10141A center / cover no-repeat; padding: clamp(3.5rem, 9vw, 7rem) max(var(--marge), calc((100% - var(--largeur)) / 2)) clamp(3rem, 7vw, 5.5rem); min-height: min(78vh, 680px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 14, 22, 0.93) 0%, rgba(8, 14, 22, 0.78) 45%, rgba(8, 14, 22, 0.25) 100%); }
.hero-photo > * { position: relative; max-width: 44rem; margin-left: 0; margin-right: 0; }
.hero-photo .eyebrow { color: #F4B860; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.85rem; }
.hero-photo h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; margin-top: 1rem; }
.hero-photo h1 em { font-style: normal; color: #FFD23F; }
.hero-photo .lead { color: rgba(255, 255, 255, 0.88); font-size: clamp(1.08rem, 2vw, 1.3rem); margin-top: 1.2rem; }
.hero-photo .wp-block-buttons { margin-top: 1.9rem; }
.hero-photo .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--vert); color: var(--nuit); font-weight: 800; }
.hero-photo .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: transparent; }
.hero-photo ul.atouts { list-style: none; padding: 0; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; max-width: 46rem; }
.hero-photo ul.atouts li { margin: 0; padding: 0.45rem 0.95rem 0.45rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); font-weight: 600; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 0.5rem; backdrop-filter: blur(4px); }
.hero-photo ul.atouts li::before { content: "✓"; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--vert); color: var(--nuit); font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; flex: none; }
.js .hero-photo > * { animation: monter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.entry-content > .hero-photo.hero-photo--accueil { background-image: url("../img/grossistes/accueil.jpg"); }
.entry-content > .hero-photo.hero-photo--viande { background-image: url("../img/grossistes/viande.jpg"); }
.entry-content > .hero-photo.hero-photo--volaille { background-image: url("../img/grossistes/volaille.jpg"); }
.entry-content > .hero-photo.hero-photo--porc { background-image: url("../img/grossistes/porc.jpg"); }
.entry-content > .hero-photo.hero-photo--triperie { background-image: url("../img/grossistes/triperie.jpg"); }
.entry-content > .hero-photo.hero-photo--fruits-et-legumes { background-image: url("../img/grossistes/fruits-et-legumes.jpg"); }
.entry-content > .hero-photo.hero-photo--maree { background-image: url("../img/grossistes/maree.jpg"); }
.entry-content > .hero-photo.hero-photo--produits-laitiers { background-image: url("../img/grossistes/produits-laitiers.jpg"); }
.entry-content > .hero-photo.hero-photo--fleurs-et-plantes { background-image: url("../img/grossistes/fleurs-et-plantes.jpg"); }
.entry-content > .hero-photo.hero-photo--epicerie-traiteur { background-image: url("../img/grossistes/epicerie-traiteur.jpg"); }
@media (max-width: 700px) { .hero-photo::before { background: linear-gradient(180deg, rgba(8, 14, 22, 0.8), rgba(8, 14, 22, 0.9)); } .entry-content > .hero-photo { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .js .hero-photo > * { animation: none; } }

/* ---------- Numéro de téléphone (menu, pied de page) ---------- */
.site-nav .menu-tel a { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; white-space: nowrap; }
.site-nav .menu-tel a::before { content: ""; width: 1rem; height: 1rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.site-footer__tel { margin-top: 0.6rem; } .site-footer__tel a { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.site-nav .menu-tel { order: 98; } .site-nav .menu-cta { order: 99; }
.site-nav .menu-tel a { padding-left: 0.45rem; padding-right: 0.45rem; }
@media (min-width: 901px) { .site-nav__liste { gap: 0.15rem; } }
@media (min-width: 901px) { .site-nav .menu-tel a { font-size: 0; gap: 0; } .site-nav .menu-tel a::before { width: 1.2rem; height: 1.2rem; } }