/* Coupe technique interactive (bandeau d'accueil) */

.coupe {
	--trade: #e63946;
	--line: #8fa6bd;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	position: relative;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	background: rgba(1, 20, 34, .72);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
	overflow: hidden;
	color: #c7d4e0;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.coupe-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.coupe-title { font: 600 11px/1 var(--mono); letter-spacing: .12em; color: #c7d4e0; }
.coupe-title span { color: #6f8396; margin-left: 6px; }
.coupe-pause { width: 28px; height: 28px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #c7d4e0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.coupe-pause:hover { background: rgba(255, 255, 255, .06); }
.coupe-pause svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coupe-pause .i-play { display: none; fill: currentColor; stroke: none; }
.coupe.is-paused .coupe-pause .i-pause { display: none; }
.coupe.is-paused .coupe-pause .i-play { display: block; }

.coupe-stage { position: relative; }
.coupe-svg { display: block; width: 100%; height: auto; color: var(--line); cursor: crosshair; }
.coupe-svg text { font-family: var(--mono); }

/* Règles */
.coupe-ruler rect { fill: rgba(255, 255, 255, .025); stroke: none; }
.coupe-ruler path { stroke: var(--line); stroke-width: .7; opacity: .55; }
.coupe-ruler text { font-size: 6.5px; fill: #6f8396; }
.coupe-ruler .coupe-ruler-mark { stroke: var(--trade); stroke-width: 1.5; opacity: 0; transition: opacity .15s; }
.coupe-svg:hover .coupe-ruler-mark { opacity: 1; }

/* Bâti */
.coupe-structure { fill: none; stroke: var(--line); stroke-width: 1.3; stroke-linejoin: round; opacity: .75; }
.coupe-structure rect { fill: rgba(143, 166, 189, .06); }
.coupe-structure .coupe-glass { stroke-width: .8; opacity: .6; }
.coupe-structure .coupe-furniture { stroke-width: .9; opacity: .55; }
.coupe-levels { fill: none; stroke: var(--line); stroke-width: .8; }
.coupe-levels text { fill: #8fa6bd; stroke: none; font-size: 8.5px; }
.coupe-levels .coupe-dash { stroke-dasharray: 3 3; opacity: .45; }
.coupe-dims { fill: none; stroke: var(--line); stroke-width: .8; opacity: .8; }
.coupe-dims text { fill: #8fa6bd; stroke: none; font-size: 8.5px; }

/* Réseaux */
.coupe-trade { --c: #fff; fill: none; stroke: var(--c); stroke-linecap: round; stroke-linejoin: round; opacity: .16; transition: opacity .45s ease; }
.coupe-trade.is-active { opacity: 1; }
.coupe-net { stroke-width: 2.2; }
.coupe-net--drain { stroke-dasharray: .015 .012; stroke-width: 1.6; }
.coupe-eq { stroke-width: 1.4; fill: rgba(1, 20, 34, .9); }
.coupe-flow { stroke-width: 2.2; stroke: #fff; opacity: 0; stroke-dasharray: .006 .05; }
.coupe-trade.is-active .coupe-flow { opacity: .55; animation: coupe-flow 2.4s linear infinite; }
.coupe-trade.is-active.is-drawn .coupe-net:not(.coupe-net--drain) { stroke-dasharray: 1; animation: coupe-draw 1.2s cubic-bezier(.4, 0, .2, 1) both; }
.coupe-trade.is-active .coupe-eq { animation: coupe-fade .6s ease both; }

.coupe-dot { fill: var(--c); stroke: none; }
.coupe-dot-ring { fill: none; stroke: var(--c); stroke-width: 1.5; opacity: .9; }
.coupe-trade.is-active .coupe-dot-ring { animation: coupe-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }

.coupe-tag { opacity: 0; transition: opacity .3s ease .5s; }
.coupe-tag rect { fill: rgba(1, 20, 34, .95); stroke: var(--c); stroke-width: 1; }
.coupe-tag text { fill: #fff; stroke: none; font-size: 9px; }
.coupe-trade.is-active .coupe-tag { opacity: 1; }

/* Réticule */
.coupe-cross { pointer-events: none; opacity: 0; transition: opacity .15s; }
.coupe-cross.is-on { opacity: 1; }
.coupe-cross path { stroke: #c7d4e0; stroke-width: .6; stroke-dasharray: 2 3; opacity: .45; fill: none; }
.coupe-cross rect { fill: rgba(1, 20, 34, .92); stroke: rgba(255, 255, 255, .25); }
.coupe-cross text { fill: #c7d4e0; font-size: 8.5px; }

/* Onglets */
.coupe-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.coupe-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 6px; border: 0; border-radius: 8px; background: transparent; color: #a9b8c6; font: 600 13px/1.2 Lato, system-ui, sans-serif; cursor: pointer; position: relative; transition: background .2s, color .2s; }
.coupe-tab i { width: 12px; height: 3px; border-radius: 3px; background: currentColor; }
.coupe-tab--plomberie i { background: #4cc9f0; }
.coupe-tab--chauffage i { background: #e63946; }
.coupe-tab--ventilation i { background: #2ec4b6; }
.coupe-tab--electricite i { background: #ffb703; }
.coupe-tab:hover, .coupe-tab[aria-selected="true"] { background: rgba(255, 255, 255, .07); color: #fff; }
.coupe-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--trade); }
.coupe-tab:focus-visible { outline: 2px solid var(--trade); outline-offset: 1px; }

/* Panneau */
.coupe-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 18px 16px; min-height: 118px; }
.coupe-panel p { margin: 0; }
.coupe-panel-tag { font: 600 10.5px/1.4 var(--mono); letter-spacing: .1em; color: #8fa6bd; display: flex; align-items: center; gap: 8px; }
.coupe-panel-tag::before { content: ""; width: 14px; height: 3px; border-radius: 3px; background: var(--trade); }
.coupe-panel-title { margin-top: 6px !important; color: #fff; font-weight: 700; font-size: 15px; }
.coupe-panel-figure { font: 600 26px/1.15 var(--mono); color: #fff; margin-top: 2px !important; }
.coupe-panel-desc { font-size: 12.5px; color: #8fa6bd; max-width: 330px; margin-top: 2px !important; }
.coupe-panel-cta { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 13.5px; transition: background .2s; }
.coupe-panel-cta:hover { background: rgba(255, 255, 255, .14); }

@keyframes coupe-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes coupe-flow { to { stroke-dashoffset: -1; } }
@keyframes coupe-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes coupe-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.coupe-trade, .coupe-tag { transition: none; }
	.coupe-trade.is-active .coupe-flow,
	.coupe-trade.is-active.is-drawn .coupe-net,
	.coupe-trade.is-active .coupe-dot-ring,
	.coupe-trade.is-active .coupe-eq { animation: none; }
}

@media (max-width: 600px) {
	.coupe-tabs { grid-template-columns: repeat(2, 1fr); }
	.coupe-panel { flex-direction: column; align-items: flex-start; }
	.coupe-panel-figure { font-size: 22px; }
}