/* Michel Rénovation · section « l'écusson » et badge 3D du logo (préfixe mre, common/js/ecusson3d.js, attribut data-ecusson3d).
   Variables de la charte : redéfinissables par le site (ces valeurs ne s'appliquent que par défaut). */
: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'; --cm-font-text: 'Figtree'; --cm-font-mono: 'JetBrains Mono';
}
.mre {
  --e-d: var(--cm-font-display), 'Big Shoulders Display', 'Oswald', Impact, sans-serif;
  --e-t: var(--cm-font-text), 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --e-m: var(--cm-font-mono), 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --e-line: rgba(158, 163, 168, .18); --e-ease: cubic-bezier(.22, .8, .2, 1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--cm-ink); color: var(--cm-paper); font-family: var(--e-t);
  padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(4rem, 8vw, 7rem);
}
.mre *, .mre *::before, .mre *::after { box-sizing: border-box; }
/* fond : atelier sombre, cône de lumière haute, sol qui accroche un reflet jaune */
.mre__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 48% at 50% 40%, rgba(243, 240, 232, .07), transparent 70%),
    radial-gradient(30% 10% at 50% 82%, rgba(247, 181, 0, .09), transparent 75%),
    linear-gradient(180deg, #080809 0%, var(--cm-ink) 30%, #111113 78%, #08080a 100%); }
.mre__bg::before { content: ''; position: absolute; left: 50%; top: -10%; width: min(70vw, 780px); height: 80%; transform: translateX(-50%);
  background: conic-gradient(from 168deg at 50% 0%, transparent 0deg, rgba(243, 240, 232, .05) 12deg, rgba(243, 240, 232, .05) 24deg, transparent 36deg); }
.mre__bg::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: repeating-linear-gradient(-45deg, var(--cm-accent) 0 10px, var(--cm-ink) 10px 20px); opacity: .85; }
.mre__wrap { position: relative; width: min(1280px, 100% - 32px); margin-inline: auto; }

.mre__head { text-align: center; max-width: 780px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); }
.mre__kicker { display: inline-flex; align-items: center; gap: .8rem; margin: 0; font: 600 .76rem/1 var(--e-m); letter-spacing: .16em; text-transform: uppercase; color: var(--cm-accent); }
.mre__kicker::before, .mre__kicker::after { content: ''; width: 2.4rem; height: 2px; background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px); }
.mre__title { margin: 1.1rem 0 0; font: 800 clamp(2.6rem, 1.3rem + 5vw, 5.8rem)/.9 var(--e-d); text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.mre__title em { font-style: normal; color: var(--cm-accent); }
.mre__lede { margin: 1.2rem auto 0; max-width: 40rem; font-size: clamp(1rem, .95rem + .3vw, 1.14rem); line-height: 1.62; color: rgba(243, 240, 232, .72); text-wrap: pretty; }

/* scène : engagements de part et d'autre du badge */
.mre__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px) minmax(0, 1fr); column-gap: clamp(1.2rem, 3.5vw, 3.6rem); align-items: stretch; }
.mre__badge { position: relative; grid-column: 2; aspect-ratio: 4 / 5; width: 100%; }
.mre__badge canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: pan-y; z-index: 1; }
.mre__badge canvas:focus-visible { box-shadow: 0 0 0 2px var(--cm-accent); border-radius: 6px; }
.mre__fallback { position: absolute; left: 50%; top: 40%; width: 62%; height: auto; transform: translate(-50%, -50%); display: none; }
.mre__stage[data-nogl] .mre__fallback { display: block; }
/* réticule d'architecte autour du badge */
.mre__ret { position: absolute; inset: 6% 9% 30%; pointer-events: none; }
.mre__ret i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(247, 181, 0, .55); }
.mre__ret i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; } .mre__ret i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.mre__ret i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .mre__ret i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.mre__ret b { position: absolute; right: 0; top: -1.4rem; font: 500 .62rem/1 var(--e-m); letter-spacing: .12em; color: var(--cm-metal); }
/* nom : typographie HTML superposée sous le badge, révélée en fin de forge */
.mre__name { position: absolute; left: 0; right: 0; bottom: 4.5%; z-index: 2; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.mre__michel { font: 900 clamp(3rem, 1.6rem + 4.6vw, 5.4rem)/.82 var(--e-d); letter-spacing: .01em; color: var(--cm-paper); text-shadow: 0 8px 30px rgba(0, 0, 0, .6); }
.mre__reno { margin-top: .45rem; padding: .42rem .8rem .38rem 1.2rem; background: var(--cm-accent); color: var(--cm-ink); font: 800 clamp(.9rem, .7rem + .7vw, 1.25rem)/1 var(--e-d); letter-spacing: .4em; }
.mre__stage[data-armed] .mre__michel, .mre__stage[data-armed] .mre__reno { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--e-ease); }
.mre__stage[data-armed] .mre__reno { transition-delay: .25s; }
.mre__stage[data-state="forged"] .mre__michel, .mre__stage[data-state="forged"] .mre__reno { clip-path: inset(0 0 0 0); }
.mre__replay { position: absolute; z-index: 3; left: 0; top: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .7rem; background: rgba(12, 12, 13, .6); color: var(--cm-metal);
  border: 1px solid var(--e-line); border-radius: 3px; font: 500 .66rem/1 var(--e-m); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s, color .2s, border-color .2s; }
.mre__replay svg { width: .95rem; height: .95rem; }
.mre__stage[data-state="forged"] .mre__replay { opacity: 1; pointer-events: auto; }
.mre__replay:hover, .mre__replay:focus-visible { color: var(--cm-accent); border-color: var(--cm-accent); outline: none; }
.mre__stage[data-nogl] .mre__replay { display: none; }

.mre__col { list-style: none; margin: 0; padding: clamp(1rem, 5vw, 5rem) 0 clamp(5rem, 9vw, 8rem); display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.mre__col--l { grid-column: 1; grid-row: 1; text-align: right; }
.mre__col--r { grid-column: 3; grid-row: 1; }
.mre__val { position: relative; max-width: 20rem; }
.mre__col--l .mre__val { margin-left: auto; }
.mre__no { display: inline-block; margin-bottom: .8rem; padding: .3rem .45rem; border: 1px solid rgba(247, 181, 0, .6); font: 600 .66rem/1 var(--e-m); letter-spacing: .08em; color: var(--cm-accent); }
.mre__val h3 { margin: 0; font: 800 clamp(1.4rem, 1rem + 1vw, 1.9rem)/1 var(--e-d); text-transform: uppercase; letter-spacing: .02em; }
.mre__val p { margin: .6rem 0 0; font-size: .97rem; line-height: 1.6; color: rgba(243, 240, 232, .66); text-wrap: pretty; }
.mre__val::after { content: ''; position: absolute; top: .78rem; width: clamp(1.5rem, 3.6vw, 4.4rem); height: 1px; background: linear-gradient(90deg, rgba(247, 181, 0, .9), rgba(247, 181, 0, 0)); }
.mre__col--l .mre__val::after { left: calc(100% + .9rem); transform-origin: left; }
.mre__col--r .mre__val::after { right: calc(100% + .9rem); transform-origin: right; background: linear-gradient(270deg, rgba(247, 181, 0, .9), rgba(247, 181, 0, 0)); }
/* apparition pendant la forge (sans JS ou sans 3D, tout reste visible) */
.mre__stage[data-armed] .mre__val { opacity: 0; translate: 0 14px; transition: opacity .8s ease, translate 1s var(--e-ease); transition-delay: calc(var(--i, 0) * .14s); }
.mre__stage[data-armed] .mre__val::after { scale: 0 1; transition: scale .9s var(--e-ease) calc(.3s + var(--i, 0) * .14s); }
.mre__stage[data-armed][data-state] .mre__val { opacity: 1; translate: 0 0; }
.mre__stage[data-armed][data-state] .mre__val::after { scale: 1 1; }
.mre__stage[data-armed][data-state="forging"] .mre__val { transition-delay: calc(4.6s + var(--i, 0) * .14s); }
.mre__stage[data-nogl] .mre__val, .mre__stage[data-nogl] .mre__michel, .mre__stage[data-nogl] .mre__reno { opacity: 1; translate: 0 0; clip-path: none; }

.mre__foot { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.mre__cta { display: inline-flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .8rem 1.3rem; background: var(--cm-accent); color: var(--cm-ink); border-radius: 3px; text-decoration: none;
  font: 700 1.02rem/1 var(--e-d); letter-spacing: .08em; text-transform: uppercase; transition: background .25s; }
.mre__cta svg { width: 1.1rem; height: 1.1rem; }
.mre__cta:hover, .mre__cta:focus-visible { background: var(--cm-accent-2); }

@media (max-width: 1000px) {
  .mre__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: .5rem; column-gap: 1.6rem; }
  .mre__badge { grid-column: 1 / -1; grid-row: 1; width: min(84vw, 480px); margin-inline: auto; }
  .mre__col { grid-row: 2; padding: 0; gap: 2rem; justify-content: flex-start; }
  .mre__col--l { grid-column: 1; text-align: left; } .mre__col--r { grid-column: 2; }
  .mre__val, .mre__col--l .mre__val { margin: 0; max-width: none; padding-top: 1.2rem; border-top: 1px solid var(--e-line); }
  .mre__val::after, .mre__col--l .mre__val::after, .mre__col--r .mre__val::after { top: -1px; left: 0; right: auto; width: 3rem; transform-origin: left; background: var(--cm-accent); }
}
@media (max-width: 600px) {
  .mre__stage { grid-template-columns: minmax(0, 1fr); }
  .mre__badge { width: min(92vw, 400px); }
  .mre__col--l, .mre__col--r { grid-column: 1; } .mre__col--r { grid-row: 3; padding-top: 2rem; }
  .mre__val h3 { font-size: 1.5rem; }
  .mre__replay span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mre__replay { display: none; }
  .mre__stage[data-armed] .mre__val, .mre__stage[data-armed] .mre__val::after, .mre__stage[data-armed] .mre__michel, .mre__stage[data-armed] .mre__reno { transition-duration: .01s !important; transition-delay: 0s !important; }
}