/* Michel Rénovation · zinc3d : l'art du zingueur (gouttière, abergement, noue) sur tuiles mécaniques.
   Variables de marque avec valeurs par défaut : le site peut les redéfinir sur :root. */
:where(:root) {
  --cm-ink: #0C0C0D;
  --cm-accent: #F7B500;
  --cm-accent-2: #FFD54A;
  --cm-metal: #9EA3A8;
  --cm-paper: #F3F0E8;
  --cm-alert: #D62828;
  --cm-font-display: 'Big Shoulders Display', 'Oswald', Impact, sans-serif;
  --cm-font-text: 'Figtree', system-ui, -apple-system, sans-serif;
  --cm-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

.zg {
  --g1: #17181A; --g2: #222326;
  --line: color-mix(in srgb, var(--cm-metal) 22%, transparent);
  --soft: color-mix(in srgb, var(--cm-paper) 68%, transparent);
  --glass: color-mix(in srgb, var(--cm-ink) 78%, transparent);
  --e: cubic-bezier(.22, 1, .36, 1);
  --h: clamp(32rem, 44vw, 46rem);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  padding-block: clamp(4rem, 9vw, 8rem);
  color: var(--cm-paper); font-family: var(--cm-font-text);
  background: linear-gradient(180deg, var(--cm-ink), #101113 60%, var(--cm-ink));
}
.zg *, .zg *::before, .zg *::after { box-sizing: border-box; }
.zg [hidden] { display: none !important; }
.zg__wrap { width: min(100% - 2 * clamp(1rem, 4vw, 4rem), 94rem); margin-inline: auto; }

/* en-tête */
.zg__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
.zg__kicker { display: inline-flex; align-items: center; gap: .8rem; font: 500 .72rem/1 var(--cm-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cm-accent); }
.zg__kicker i { width: 2.4rem; height: .5rem; background: repeating-linear-gradient(-45deg, var(--cm-accent) 0 6px, transparent 6px 12px); }
.zg__title { margin: 1rem 0 0; font-family: var(--cm-font-display); font-weight: 800; font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); line-height: .9; text-transform: uppercase; text-wrap: balance; }
.zg__title em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--cm-accent); }
.zg__lede { margin: 0; max-width: 52ch; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; color: var(--soft); }

/* grille */
.zg__app { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "tabs tabs" "stage panel"; gap: 1rem; align-items: start; }
.zg__app.is-single { grid-template-areas: "stage panel"; }

/* onglets : trois plaques d'ouvrage */
.zg__tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.zg__tabs button { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: .1rem 1rem; padding: .85rem 1rem; border: 1px solid var(--line); background: var(--g1); color: color-mix(in srgb, var(--cm-paper) 70%, transparent); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .3s, color .3s, background .3s; }
.zg__tabs small { grid-column: 1 / -1; font: .58rem/1 var(--cm-font-mono); letter-spacing: .18em; color: var(--cm-metal); }
.zg__tabs i { display: block; width: 3.4rem; height: 2.1rem; color: var(--cm-metal); transition: color .3s; }
.zg__tabs i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.zg__tabs span { display: grid; gap: .15rem; min-width: 0; }
.zg__tabs strong { font: 800 1.35rem/1 var(--cm-font-display); letter-spacing: .03em; text-transform: uppercase; }
.zg__tabs em { font-style: normal; font-size: .76rem; color: var(--cm-metal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zg__tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--cm-accent) 0 6px, var(--cm-ink) 6px 12px); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e); }
.zg__tabs button:hover { border-color: color-mix(in srgb, var(--cm-accent) 50%, transparent); color: var(--cm-paper); }
.zg__tabs button[aria-selected="true"] { border-color: var(--cm-accent); background: color-mix(in srgb, var(--cm-accent) 8%, var(--g1)); color: var(--cm-paper); }
.zg__tabs button[aria-selected="true"] i, .zg__tabs button[aria-selected="true"] small { color: var(--cm-accent); }
.zg__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.zg__tabs button:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }

/* scène */
.zg__stage { grid-area: stage; position: relative; overflow: hidden; isolation: isolate; height: var(--h); background: radial-gradient(90% 80% at 50% 25%, #23262b 0%, #15161a 55%, #0b0b0c 100%); box-shadow: inset 0 0 0 1px var(--line), 0 50px 100px -70px #000; }
.zg__stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; opacity: 0; transition: opacity .8s var(--e); }
.zg__stage > canvas:active { cursor: grabbing; }
.zg__stage > canvas.is-brush { cursor: none; }
.zg__stage > canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cm-accent); }
.zg__app.is-ready .zg__stage > canvas { opacity: 1; }
.zg__stage.is-swap > canvas { opacity: 0; transition-duration: .25s; }
.zg__ret { position: absolute; inset: .75rem; z-index: 2; pointer-events: none; }
.zg__ret b { position: absolute; width: 1.3rem; height: 1.3rem; border: 0 solid var(--cm-accent); }
.zg__ret b:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.zg__ret b:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.zg__ret b:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.zg__ret b:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.zg__load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; font: .66rem/1 var(--cm-font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); transition: opacity .6s; pointer-events: none; }
.zg__load i { position: relative; width: 9rem; height: 3px; background: color-mix(in srgb, var(--cm-paper) 12%, transparent); overflow: hidden; }
.zg__load i::after { content: ""; position: absolute; inset: 0; width: 40%; background: repeating-linear-gradient(-45deg, var(--cm-accent) 0 5px, var(--cm-ink) 5px 10px); animation: zgLoad 1.2s var(--e) infinite; }
@keyframes zgLoad { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.zg__app.is-ready .zg__load, .zg__app.no-gl .zg__load { opacity: 0; }
.zg__nogl { display: none; position: absolute; inset: auto 1.5rem 1.5rem; margin: 0; color: var(--soft); }
.zg__app.no-gl .zg__nogl { display: block; }
.zg__app.no-gl .zg__tools, .zg__app.no-gl .zg__hint, .zg__app.no-gl .zg__hud { display: none; }

/* HUD */
.zg__hud { position: absolute; z-index: 3; top: 1.4rem; left: 1.5rem; right: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; pointer-events: none; }
.zg__badge { display: inline-flex; align-items: stretch; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.zg__badge b { display: grid; place-items: center; padding: .4rem .55rem; background: var(--cm-accent); color: var(--cm-ink); font: 700 .7rem/1 var(--cm-font-mono); }
.zg__badge span { padding: .45rem .7rem; font: 800 1rem/1 var(--cm-font-display); letter-spacing: .06em; text-transform: uppercase; }
.zg__gauge { position: relative; display: grid; grid-template-columns: auto auto; gap: 0; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.zg__gauge > div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 .2rem; padding: .5rem .8rem .7rem; min-width: 8.4rem; }
.zg__gauge > div + div { border-left: 1px solid var(--line); }
.zg__gauge span { grid-column: 1 / -1; font: .54rem/1.4 var(--cm-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-metal); }
.zg__gauge b { font: 800 1.9rem/1 var(--cm-font-display); color: var(--cm-paper); font-variant-numeric: tabular-nums; }
.zg__gauge small { font: .7rem/1 var(--cm-font-mono); color: var(--cm-metal); }
.zg__gauge .is-out b { color: var(--cm-accent); }
.zg__gauge i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--cm-accent) 55%, transparent); }
.zg__gauge u { position: absolute; inset: 0; background: #7fc4e8; transform-origin: left; transform: scaleX(0); transition: transform .5s var(--e); }

/* repères */
.zg__pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.zg__pin { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .4rem; margin: -.85rem 0 0 -.85rem; padding: 0; border: 0; background: none; color: var(--cm-paper); font: inherit; cursor: pointer; pointer-events: auto; transition: opacity .3s; will-change: transform; }
.zg__pin.is-off { opacity: 0; pointer-events: none; }
.zg__pin b { position: relative; isolation: isolate; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; color: var(--cm-accent); font: 700 .62rem/1 var(--cm-font-mono); transition: color .25s; }
.zg__pin b::before { content: ""; position: absolute; inset: 3px; z-index: -1; border: 1.5px solid var(--cm-accent); background: var(--glass); transform: rotate(45deg); transition: background .25s; }
.zg__pin > span { padding: .28rem .55rem; border-left: 2px solid var(--cm-accent); background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.zg__pin:hover b, .zg__pin.is-on b, .zg__pin:focus-visible b { color: var(--cm-ink); }
.zg__pin:hover b::before, .zg__pin.is-on b::before, .zg__pin:focus-visible b::before { background: var(--cm-accent); }
.zg__pin:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 4px; }

/* pinceau de nettoyage */
.zg__brush { position: absolute; left: 0; top: 0; z-index: 3; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border: 2px solid var(--cm-accent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cm-accent) 35%, transparent), transparent 70%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.zg__brush.is-on { opacity: 1; }

/* outils */
.zg__tools { position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 3; display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; transition: opacity .3s; }
.zg__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.7rem; padding: .45rem .9rem; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: color-mix(in srgb, var(--cm-paper) 88%, transparent); font: 600 .74rem/1 var(--cm-font-text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.zg__btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.zg__btn--ico { padding-inline: .7rem; }
.zg__btn:hover { border-color: var(--cm-accent); color: var(--cm-paper); }
.zg__btn[aria-pressed="true"] { background: var(--cm-accent); border-color: var(--cm-accent); color: var(--cm-ink); }
.zg__ex { display: inline-flex; align-items: center; gap: .7rem; min-height: 2.7rem; padding: .3rem .9rem; border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 .7rem/1 var(--cm-font-text); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--cm-paper) 88%, transparent); cursor: pointer; }
.zg__ex input { -webkit-appearance: none; appearance: none; width: 8rem; height: 1.6rem; margin: 0; background: transparent; cursor: pointer; }
.zg__ex input::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--cm-accent), var(--cm-accent)) 0 0 / calc(var(--v, 0) * 1%) 100% no-repeat, color-mix(in srgb, var(--cm-paper) 20%, transparent); }
.zg__ex input::-moz-range-track { height: 4px; background: color-mix(in srgb, var(--cm-paper) 20%, transparent); }
.zg__ex input::-moz-range-progress { height: 4px; background: var(--cm-accent); }
.zg__ex input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.1rem; height: 1.1rem; margin-top: -.4rem; background: var(--cm-accent); border: 2px solid var(--cm-ink); transform: rotate(45deg); }
.zg__ex input::-moz-range-thumb { width: .9rem; height: .9rem; background: var(--cm-accent); border: 2px solid var(--cm-ink); border-radius: 0; transform: rotate(45deg); }
.zg__ex input:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.zg__btn:focus-visible, .zg__seg button:focus-visible, .zg__reps button:focus-visible, .zg__cta:focus-visible, .zg__tel:focus-visible, .zg__wide:focus-visible, .zg__fiche button:focus-visible { outline: 2px solid var(--cm-accent); outline-offset: 2px; }
.zg__hint { position: absolute; right: 1.5rem; bottom: 1.7rem; z-index: 3; display: flex; align-items: center; gap: .6rem; font: .6rem/1 var(--cm-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--soft); transition: opacity .5s; pointer-events: none; }
.zg__hint em { font-style: normal; }
.zg__hint i { width: 1.6rem; height: 1px; background: currentColor; position: relative; }
.zg__hint i::after { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; background: var(--cm-accent); animation: zgHint 2.4s var(--e) infinite; }
@keyframes zgHint { 0%, 100% { left: 0; } 50% { left: calc(100% - 5px); } }
.zg__app.is-touched:not([data-mode-on="bouchee"]) .zg__hint, .zg__app.has-fiche .zg__hint { opacity: 0; }

/* fiche */
.zg__fiche { position: absolute; z-index: 5; top: .9rem; right: .9rem; bottom: .9rem; width: min(25rem, 44%); display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 4px solid var(--cm-accent); background: color-mix(in srgb, var(--cm-ink) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px #000; opacity: 0; transform: translateX(1.5rem); pointer-events: none; visibility: hidden; transition: opacity .4s var(--e), transform .5s var(--e), visibility 0s .5s; }
.zg__fiche.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.zg__fhead { position: relative; display: grid; gap: .45rem; padding: 1.1rem 3.6rem 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.zg__fn { font: .6rem/1 var(--cm-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cm-accent); }
.zg__fhead h3 { margin: 0; font: 800 1.7rem/1 var(--cm-font-display); letter-spacing: .02em; text-transform: uppercase; }
.zg__fx { position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); background: none; color: var(--cm-paper); cursor: pointer; transition: border-color .3s, color .3s; }
.zg__fx:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.zg__fx svg { width: 1.1rem; height: 1.1rem; }
.zg__fbody { flex: 1; display: grid; align-content: start; gap: 1rem; padding: 1.1rem 1.2rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cm-accent) transparent; }
.zg__fbody h4 { margin: 0 0 .35rem; font: 600 .64rem/1.2 var(--cm-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cm-metal); }
.zg__fbody p { margin: 0; font-size: .9rem; line-height: 1.58; color: color-mix(in srgb, var(--cm-paper) 88%, transparent); }
.zg__ferr { position: relative; padding: .8rem .95rem; border-left: 2px solid var(--cm-accent); background: color-mix(in srgb, var(--cm-accent) 9%, transparent); }
.zg__ferr::before { content: ""; position: absolute; top: 0; right: 0; width: 3.2rem; height: .45rem; background: repeating-linear-gradient(-45deg, var(--cm-alert) 0 5px, #fff 5px 10px); }
.zg__ferr h4 { color: var(--cm-accent); }
.zg__ffoot { display: flex; gap: .5rem; padding: .9rem 1.2rem 1.1rem; border-top: 1px solid var(--line); }
.zg__fnav { display: flex; gap: .4rem; margin-left: auto; }
.zg__fnav button { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid var(--line); background: none; color: var(--cm-paper); cursor: pointer; transition: border-color .3s, color .3s; }
.zg__fnav button:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.zg__fnav svg { width: 1.1rem; height: 1.1rem; }
.zg__app.has-fiche .zg__hud .zg__gauge { visibility: hidden; }

/* panneau */
.zg__panel { grid-area: panel; display: flex; flex-direction: column; gap: 1.1rem; min-height: var(--h); padding: 1.3rem; border: 1px solid var(--line); background: linear-gradient(180deg, var(--g1), color-mix(in srgb, var(--g1) 40%, var(--cm-ink))); }
.zg__grp { display: grid; gap: .6rem; }
.zg__lbl { font: .62rem/1 var(--cm-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cm-metal); }
.zg__seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.zg__seg button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.9rem; border: 0; background: none; color: color-mix(in srgb, var(--cm-paper) 75%, transparent); font: 800 .95rem/1 var(--cm-font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.zg__seg button + button { border-left: 1px solid var(--line); }
.zg__seg button svg { width: 1.1rem; height: 1.1rem; }
.zg__seg button[aria-pressed="true"] { background: var(--cm-accent); color: var(--cm-ink); }
.zg__clean { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; font: .6rem/1 var(--cm-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cm-metal); }
.zg__clean i { position: relative; height: 6px; background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cm-paper) 14%, transparent) 0 4px, transparent 4px 8px); overflow: hidden; }
.zg__clean u { position: absolute; inset: 0; background: var(--cm-accent); transform-origin: left; transform: scaleX(0); transition: transform .4s var(--e); }
.zg__clean b { color: var(--cm-accent); font-weight: 500; min-width: 3.2em; text-align: right; }
.zg__wide { display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .7rem 1rem; border: 1px solid var(--cm-accent); background: none; color: var(--cm-accent); font: 800 .95rem/1.1 var(--cm-font-display); letter-spacing: .07em; text-transform: uppercase; text-align: left; cursor: pointer; transition: background .3s, color .3s; }
.zg__wide svg { width: 1.2rem; height: 1.2rem; flex: none; }
.zg__wide:hover { background: var(--cm-accent); color: var(--cm-ink); }
.zg__reps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.zg__reps button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .58rem .2rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: color-mix(in srgb, var(--cm-paper) 82%, transparent); font: 500 .9rem/1.25 var(--cm-font-text); text-align: left; cursor: pointer; transition: color .3s, padding .3s var(--e), background .3s; }
.zg__reps b { position: relative; isolation: isolate; flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; font: 700 .6rem/1 var(--cm-font-mono); color: var(--cm-metal); transition: color .3s; }
.zg__reps b::before { content: ""; position: absolute; inset: 3px; z-index: -1; border: 1px solid color-mix(in srgb, var(--cm-metal) 45%, transparent); transform: rotate(45deg); transition: background .3s, border-color .3s; }
.zg__reps button:hover { color: var(--cm-paper); padding-left: .5rem; }
.zg__reps button:hover b { color: var(--cm-accent); }
.zg__reps button:hover b::before { border-color: var(--cm-accent); }
.zg__reps button[aria-pressed="true"] { color: var(--cm-paper); padding-left: .5rem; background: linear-gradient(90deg, color-mix(in srgb, var(--cm-accent) 12%, transparent), transparent 75%); }
.zg__reps button[aria-pressed="true"] b { color: var(--cm-ink); }
.zg__reps button[aria-pressed="true"] b::before { background: var(--cm-accent); border-color: var(--cm-accent); }
.zg__out { margin: 0; padding: .9rem 1rem; border-left: 2px solid var(--cm-accent); background: color-mix(in srgb, var(--cm-paper) 4%, transparent); font-size: .88rem; line-height: 1.55; color: color-mix(in srgb, var(--cm-paper) 86%, transparent); }
.zg__ctas { margin-top: auto; display: grid; gap: .55rem; }
.zg__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 3.2rem; padding: .7rem 1.1rem; background: var(--cm-accent); color: var(--cm-ink); font: 800 1rem/1.05 var(--cm-font-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .3s; }
.zg__cta:hover { background: var(--cm-accent-2); }
.zg__cta svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform .3s var(--e); }
.zg__cta:hover svg { transform: translateX(4px); }
.zg__cta--sm { flex: 1; min-height: 2.9rem; font-size: .88rem; }
.zg__tel { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; border: 1px solid var(--line); color: var(--cm-paper); font: 500 .95rem/1 var(--cm-font-mono); text-decoration: none; transition: border-color .3s, color .3s; }
.zg__tel:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.zg__tel svg { width: 1.05rem; height: 1.05rem; color: var(--cm-accent); }

/* tablette */
@media (max-width: 1099px) {
  .zg__head { grid-template-columns: 1fr; }
  .zg__app, .zg__app.is-single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "stage" "panel"; }
  .zg__panel { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; align-items: start; }
  .zg__out { grid-column: 1 / -1; }
  .zg__ctas { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
/* mobile */
@media (max-width: 759px) {
  .zg { --h: clamp(28rem, 76svh, 38rem); }
  .zg__wrap { width: min(100% - 2rem, 94rem); }
  .zg__tabs { gap: .35rem; }
  .zg__tabs button { grid-template-columns: 1fr; justify-items: center; gap: .3rem; padding: .65rem .3rem .75rem; text-align: center; }
  .zg__tabs small, .zg__tabs em { display: none; }
  .zg__tabs i { width: 2.6rem; height: 1.6rem; }
  .zg__tabs strong { font-size: 1rem; }
  .zg__ret { inset: .5rem; }
  .zg__hud { top: .9rem; left: .9rem; right: .9rem; }
  .zg__badge span { display: none; }
  .zg__gauge > div { min-width: 0; padding: .4rem .6rem .55rem; }
  .zg__gauge span { font-size: .5rem; letter-spacing: .08em; }
  .zg__gauge b { font-size: 1.4rem; }
  .zg__tools { left: .9rem; right: .9rem; bottom: .9rem; gap: .4rem; }
  .zg__btn { min-height: 2.6rem; padding-inline: .7rem; font-size: .66rem; }
  .zg__ex { flex: 1; min-height: 2.6rem; padding-inline: .7rem; font-size: .62rem; }
  .zg__ex input { flex: 1; width: auto; min-width: 4rem; }
  .zg__hint { left: .9rem; right: .9rem; top: 5.2rem; bottom: auto; justify-content: center; text-align: center; }
  .zg__pin > span { display: none; }
  .zg__pin.is-on > span { display: block; }
  .zg__fiche { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 64%; border-left: 0; border-right: 0; border-bottom: 0; transform: translateY(100%); }
  .zg__fiche.is-open { transform: none; }
  .zg__app.has-fiche .zg__tools { opacity: 0; pointer-events: none; }
  .zg__fhead { padding: .95rem 3.4rem .8rem 1rem; }
  .zg__fhead h3 { font-size: 1.35rem; }
  .zg__fbody { padding: .9rem 1rem; }
  .zg__ffoot { padding: .7rem 1rem .9rem; }
  .zg__panel { grid-template-columns: 1fr; padding: 1rem; }
  .zg__ctas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .zg *, .zg *::before, .zg *::after { animation: none !important; transition-duration: .01ms !important; }
}