/* ============================================================
   SUMO ; page « Montage »
   ------------------------------------------------------------
   Une notice, en mieux : sections numérotées, schémas au trait
   repris des notices papier, photos réelles. Préfixe « m ».
============================================================ */

/* ------------------------------------------------------------
   DÉMONSTRATION « double face » (section 01), vue de face, 9 s :
   0-18 %  le SUMO de dos, les deux accroches se posent
   18-30 % les films protecteurs se décollent
   30-42 % on le retourne (dos → face)
   42-52 % il vient au mur : il rapetisse, son ombre se resserre
   52-88 % on appuie : ondes sous les doigts, chrono de 30 s
   94-100 % fondu, puis la boucle recommence
------------------------------------------------------------ */
.mdemo { max-width: 760px; margin: clamp(34px, 5vh, 56px) auto 0; }
.mdemo svg { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(17,17,17,.4); }
.mdemo__wall { stroke: rgba(17,17,17,.06); stroke-width: 1; }
.mdemo__lbl { font-family: var(--font); font-size: 9px; font-weight: 700; letter-spacing: 2.4px; fill: rgba(255,255,255,.28); }
.mdemo__logo { font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: 3px; fill: #2A2C36; }
.mdemo__ring { stroke: var(--accent); stroke-width: 4; }
.mdemo__pad { fill: var(--accent); }
.mdemo__film { fill: rgba(255,255,255,.82); stroke: rgba(17,17,17,.12); stroke-width: .8; }

.mdemo__piece, .mdemo__back, .mdemo__front, .mdemo__tape, .mdemo__shadow, .mdemo__press {
  transform-box: fill-box; transform-origin: center;
}
.mdemo__film { transform-box: fill-box; transform-origin: 0 0; }
.mdemo__piece  { animation: mdPiece 9s var(--ease-inout) infinite; }
.mdemo__back   { animation: mdBack 9s ease-in-out infinite; }
.mdemo__front  { animation: mdFront 9s ease-in-out infinite; }
.mdemo__tape--1 { animation: mdTape1 9s var(--ease) infinite; }
.mdemo__tape--2 { animation: mdTape2 9s var(--ease) infinite; }
.mdemo__film--1 { animation: mdFilm1 9s var(--ease) infinite; }
.mdemo__film--2 { animation: mdFilm2 9s var(--ease) infinite; }
.mdemo__shadow { fill: rgba(17,17,17,.9); animation: mdShadow 9s var(--ease-inout) infinite; }
.mdemo__press  { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; animation: mdPress 9s ease-out infinite; }
.mdemo__press--2 { animation-delay: .12s; }
.mdemo__timer  { opacity: 0; animation: mdTimer 9s ease infinite; }
.mdemo__track  { fill: none; stroke: var(--ink-14); stroke-width: 4; }
.mdemo__prog {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  animation: mdProg 9s linear infinite;
}
.mdemo__txt { font-family: var(--font); font-size: 16px; font-weight: 800; fill: var(--ink); }

@keyframes mdPiece {
  0%   { opacity: 0; transform: scale(1.1); }
  4%   { opacity: 1; transform: scale(1.1); }
  42%  { transform: scale(1.1); }
  52%  { transform: scale(1); }
  94%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes mdBack  { 0%, 30% { transform: scaleX(1); } 36%, 96% { transform: scaleX(0); } 97%, 100% { transform: scaleX(1); } }
@keyframes mdFront { 0%, 36% { transform: scaleX(0); } 42%, 96% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes mdTape1 { 0%, 6% { transform: scale(0); } 10% { transform: scale(1.12); } 12%, 96% { transform: scale(1); } 97%, 100% { transform: scale(0); } }
@keyframes mdTape2 { 0%, 10% { transform: scale(0); } 14% { transform: scale(1.12); } 16%, 96% { transform: scale(1); } 97%, 100% { transform: scale(0); } }
@keyframes mdFilm1 { 0%, 19% { opacity: 1; transform: none; } 25%, 96% { opacity: 0; transform: translate(-16px, -22px) rotate(-30deg); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes mdFilm2 { 0%, 22% { opacity: 1; transform: none; } 28%, 96% { opacity: 0; transform: translate(-16px, -22px) rotate(-30deg); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes mdShadow {
  0%   { opacity: 0;   transform: translate(18px, 26px) scale(1.14); }
  4%   { opacity: .26; transform: translate(18px, 26px) scale(1.14); }
  42%  { opacity: .26; transform: translate(18px, 26px) scale(1.14); }
  52%  { opacity: .3;  transform: translate(3px, 6px) scale(1.01); }
  94%  { opacity: .3;  transform: translate(3px, 6px) scale(1.01); }
  100% { opacity: 0;   transform: translate(3px, 6px) scale(1.01); }
}
@keyframes mdPress {
  0%, 53% { opacity: 0; transform: scale(.5); }
  55% { opacity: .7; transform: scale(.6); } 61% { opacity: 0; transform: scale(1.8); }
  63% { opacity: .7; transform: scale(.6); } 69% { opacity: 0; transform: scale(1.8); }
  71% { opacity: .7; transform: scale(.6); } 77% { opacity: 0; transform: scale(1.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes mdTimer { 0%, 50% { opacity: 0; } 53%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes mdProg  { 0%, 53% { stroke-dashoffset: 1; } 88%, 100% { stroke-dashoffset: 0; } }

/* les quatre étapes, sous l'animation, s'allument au bon moment */
.mdemo__steps {
  margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  font-size: .8rem; font-weight: 600; color: var(--ink-40); text-align: center;
}
.mdemo__step { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: 9s linear infinite; }
.mdemo__step b {
  width: 24px; height: 24px; display: grid; place-items: center; clip-path: var(--oct);
  background: var(--noir); color: var(--accent); font-size: .72rem; font-weight: 800;
}
.mdemo__step--1 { animation-name: mdS1; }
.mdemo__step--2 { animation-name: mdS2; }
.mdemo__step--3 { animation-name: mdS3; }
.mdemo__step--4 { animation-name: mdS4; }
@keyframes mdS1 { 0%, 17% { color: var(--ink); } 18%, 100% { color: var(--ink-40); } }
@keyframes mdS2 { 0%, 17% { color: var(--ink-40); } 18%, 29% { color: var(--ink); } 30%, 100% { color: var(--ink-40); } }
@keyframes mdS3 { 0%, 29% { color: var(--ink-40); } 30%, 51% { color: var(--ink); } 52%, 100% { color: var(--ink-40); } }
@keyframes mdS4 { 0%, 51% { color: var(--ink-40); } 52%, 93% { color: var(--ink); } 94%, 100% { color: var(--ink-40); } }

/* sections numérotées */
.msec { background: var(--bg); padding: clamp(70px, 11vh, 130px) var(--gut); }
.msec--paper { background: #fff; }
.msec--dark { background: var(--noir); color: #fff; }
.msec__head { max-width: 1180px; margin: 0 auto clamp(34px, 5vh, 56px); }
.msec__n { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .2em; color: var(--accent); }
.msec__title { margin-top: 12px; font-size: clamp(1.9rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.msec__lead { margin-top: 16px; max-width: 60ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: var(--ink-60); }
.msec--dark .msec__lead { color: rgba(255,255,255,.58); }

/* 1. au mur */
.mways { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); }
.mway { padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.mway__fig { border-radius: 18px; background: radial-gradient(circle at 50% 35%, #FBFAF8, #ECEAE5); padding: 18px; }
.mway__fig svg { width: 100%; height: auto; display: block; }
.mfig__lbl { font-family: var(--font); font-size: 7px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; fill: var(--ink-40); }
.mfig__small { font-family: var(--font); font-size: 6.5px; font-weight: 600; fill: var(--accent); }
.mfig__oct { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.mfig__tape { fill: var(--accent); }
.mfig__hole { fill: var(--accent); }
.mfig__halo { fill: none; stroke: var(--accent); stroke-width: .8; stroke-dasharray: 2 2; }
.mfig__screw { fill: none; stroke: var(--ink-60); stroke-width: 1.3; stroke-linecap: round; }
.mway__tag { margin-top: 22px; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.mway h3 { margin-top: 8px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.mway h3 em { font-style: normal; font-weight: 500; font-size: .9rem; color: var(--ink-40); }
.msteps { list-style: none; padding: 0; margin: 16px 0 0; counter-reset: ms; display: flex; flex-direction: column; gap: 12px; }
.msteps li { counter-increment: ms; position: relative; padding-left: 34px; font-size: .96rem; line-height: 1.55; color: var(--ink-60); }
.msteps li::before {
  content: counter(ms); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; display: grid; place-items: center;
  clip-path: var(--oct); background: var(--noir); color: var(--accent);
  font-size: .72rem; font-weight: 800;
}

/* 2. la médaille */
.mmedal { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.mcard { display: flex; flex-direction: column; }
.mcard__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #EFEDE9; }
.mcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mcard:hover .mcard__photo img { transform: scale(1.04); }
.mcard__n { margin-top: 18px; font-size: .74rem; font-weight: 800; letter-spacing: .2em; color: var(--accent); }
.mcard h3 { margin-top: 6px; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.mcard p { margin-top: 8px; font-size: .95rem; line-height: 1.55; color: var(--ink-60); }
.mvideo { max-width: 1180px; margin: clamp(36px, 6vh, 60px) auto 0; border-radius: 26px; }
.mvideo video { object-fit: contain; background: #000; }

/* 3. composer son mur */
.mwall { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(12px, 1.8vw, 22px); }
.mwall__item { margin: 0; }
.mwall__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; display: block; }
.mwall__item:first-child img { aspect-ratio: auto; height: 100%; max-height: 100%; }
.mwall__item figcaption { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.mwall__item b { font-size: 1.05rem; font-weight: 800; }
.mwall__item span { font-size: .88rem; color: var(--ink-60); }
.mwall__item:first-child { display: grid; grid-template-rows: 1fr auto; }

/* 4. support */
.mdohyo { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.mdohyo__img { margin: 0; border-radius: 26px; overflow: hidden; background: #E9E6E0; }
.mdohyo__img img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 4.4; object-fit: cover; }

/* 01. OUVRIR — photo des deux pièces, deux gestes, une mise en garde */
.mopen { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(26px, 5vw, 70px); align-items: center; }
.mopen__img { margin: 0; border-radius: 26px; overflow: hidden; background: #E9E6E0; }
.mopen__img img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; display: block; }
.mopen__img figcaption { padding: 12px 16px; font-size: .8rem; color: var(--ink-60); background: #fff; }
.mopen__steps { list-style: none; margin: 0; padding: 0; counter-reset: mo; display: flex; flex-direction: column; gap: 24px; }
.mopen__steps li { counter-increment: mo; position: relative; padding-left: 50px; display: flex; flex-direction: column; gap: 6px; }
.mopen__steps li::before {
  content: counter(mo); position: absolute; left: 0; top: -2px; width: 34px; height: 34px;
  display: grid; place-items: center; clip-path: var(--oct); background: var(--noir); color: #fff;
  font-size: .9rem; font-weight: 800;
}
.mopen__steps b { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.mopen__steps span { font-size: .96rem; line-height: 1.6; color: var(--ink-60); }
.mopen__warn { margin-top: 28px; padding: 16px 18px; border-radius: 16px; background: #FFF4E5; border: 1px solid #F2D3A6; font-size: .9rem; line-height: 1.55; color: #6B4A16; }
.mopen__warn b { color: #8A5A12; }
.mdohyo__steps { list-style: none; margin: 0; padding: 0; counter-reset: md; display: flex; flex-direction: column; gap: 22px; }
.mdohyo__steps li { counter-increment: md; position: relative; padding-left: 46px; display: flex; flex-direction: column; gap: 5px; }
.mdohyo__steps li::before {
  content: "0" counter(md); position: absolute; left: 0; top: 2px;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--accent);
}
.mdohyo__steps b { font-size: 1.08rem; font-weight: 700; }
.mdohyo__steps span { font-size: .94rem; line-height: 1.55; color: rgba(255,255,255,.58); }

/* 5. entretien */
.mcare { list-style: none; padding: 0; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mcare li { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mcare b { font-size: 1.02rem; font-weight: 800; }
.mcare span { font-size: .9rem; line-height: 1.55; color: var(--ink-60); }

@media (max-width: 960px) {
  .mways, .mdohyo, .mopen { grid-template-columns: 1fr; }
  .mmedal, .mwall { grid-template-columns: 1fr 1fr; }
  .mwall__item:first-child { grid-column: 1 / -1; }
  .mwall__item:first-child img { aspect-ratio: 16 / 10; height: auto; }
  .mcare { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .mmedal, .mwall, .mcare { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mdemo__steps { grid-template-columns: 1fr 1fr; row-gap: 14px; }
}
/* mouvement réduit : la pièce est posée au mur, le chrono plein */
@media (prefers-reduced-motion: reduce) {
  .mdemo__piece, .mdemo__back, .mdemo__front, .mdemo__tape--1, .mdemo__tape--2, .mdemo__film--1, .mdemo__film--2,
  .mdemo__shadow, .mdemo__press, .mdemo__timer, .mdemo__prog, .mdemo__step { animation: none; }
  .mdemo__back { transform: scaleX(0); }
  .mdemo__shadow { opacity: .3; transform: translate(3px, 6px); }
  .mdemo__timer { opacity: 1; }
  .mdemo__prog { stroke-dashoffset: 0; }
  .mdemo__step { color: var(--ink); }
}