/* ============================================================
   SUMO ASHIATO ; la carte en relief, seule (carte-relief.html)
   ------------------------------------------------------------
   Même construction que les fiches KACHI et DOHYO : en-tête .phero
   et commande .sbuy (site.css), plus trois blocs propres à la
   carte : points clés, « le principe » (la trace se pose sur le
   relief, couleur à essayer), et ses façons de l'exposer.
   Préfixe « a ». La teinte de la trace : variable --trace.
============================================================ */

/* ------------------------------------------------------------
   POINTS CLÉS
------------------------------------------------------------ */
.akeys { background: #fff; padding: clamp(60px, 10vh, 110px) var(--gut); }
.akeys__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.akey { padding: 26px 24px; border-radius: 22px; background: var(--bg); border: 1px solid var(--line); }
.akey__ic { display: block; width: 28px; height: 28px; clip-path: var(--oct); background: var(--noir); position: relative; }
.akey__ic::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid #E07B2F; }
.akey h3 { margin-top: 18px; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; }
.akey p { margin-top: 8px; font-size: .92rem; line-height: 1.55; color: var(--ink-60); }

/* ------------------------------------------------------------
   LE PRINCIPE — le relief apparaît, la trace s'y dessine ; la
   lumière glisse sur le relief ; la couleur s'essaie en direct.
------------------------------------------------------------ */
.aprin {
  --trace: #E07B2F;
  position: relative; overflow: hidden;
  background: radial-gradient(60% 55% at 28% 50%, rgba(224,123,47,.10), transparent 70%), #0C0D10;
  color: #fff; padding: var(--sp) var(--gut);
}
.aprin__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 80px); align-items: center;
}
.aprin__art { margin: 0; }
.aprin__art svg { width: min(100%, 520px); height: auto; display: block; margin: 0 auto; overflow: visible; filter: drop-shadow(0 40px 60px rgba(0,0,0,.7)); }
.aprin__art figcaption { margin-top: 14px; text-align: center; font-size: .74rem; font-style: italic; color: rgba(255,255,255,.4); }

/* la pièce sort de l'ombre */
.aprin__relief { opacity: 0; transform: scale(.94); transform-box: fill-box; transform-origin: center; transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.aprin.is-on .aprin__relief { opacity: 1; transform: none; }
/* le reflet de lumière qui glisse sur le relief */
.aprin__sheen { transform: translateX(-140px); }
.aprin.is-on .aprin__sheen { animation: aSheen 7s cubic-bezier(.6, 0, .3, 1) 2.4s infinite; }
@keyframes aSheen { 0% { transform: translateX(-140px); } 35%, 100% { transform: translateX(140px); } }
/* la trace se dessine, puis s'allume */
.aprin__trace, .aorder__trace {
  fill: none; stroke: var(--trace); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .6s var(--ease);
}
.aprin__trace { stroke-dasharray: 1; stroke-dashoffset: 1; }
.aprin.is-on .aprin__trace { animation: aDraw 3.4s var(--ease) 1s forwards; }
.aprin__glow, .aorder__glow { fill: none; stroke: var(--trace); stroke-width: 4; transition: stroke .6s var(--ease); }
.aprin__glow { opacity: 0; }
.aprin.is-on .aprin__glow { animation: aGlow 1.6s var(--ease) 4.1s forwards; }
.aorder__glow { opacity: .4; }
@keyframes aDraw { to { stroke-dashoffset: 0; } }
@keyframes aGlow { to { opacity: .42; } }
.aprin__dot, .aorder__dot { fill: #fff; stroke: var(--trace); stroke-width: 1; transition: stroke .6s var(--ease); }
.aprin__dot { opacity: 0; transition: opacity .5s var(--ease) 1s, stroke .6s var(--ease); }
.aprin.is-on .aprin__dot { opacity: 1; }

.aprin__copy .eyebrow { margin-bottom: 18px; color: rgba(255,255,255,.5); }
.aprin__title { font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.aprin__title span { color: var(--trace); transition: color .6s var(--ease); }

.asteps { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.astep {
  display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: baseline;
  padding-left: 0; color: rgba(255,255,255,.35);
  transition: color .7s var(--ease);
}
.astep__n { grid-row: span 2; font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: inherit; }
.astep b { font-size: 1.06rem; font-weight: 700; color: inherit; }
.astep span:last-child { font-size: .92rem; line-height: 1.55; }
/* les étapes s'allument au rythme de l'animation */
.aprin.is-on .astep { color: rgba(255,255,255,.62); }
.aprin.is-on .astep b { color: #fff; }
.aprin.is-on .astep .astep__n { color: var(--trace); }
.aprin.is-on .astep--1 { transition-delay: .3s; }
.aprin.is-on .astep--2 { transition-delay: 1.4s; }
.aprin.is-on .astep--3 { transition-delay: 4.2s; }

.aprin__try { margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.aprin__try .sbuy__k { display: block; margin-bottom: 12px; }
.aprin .scolor__b[aria-pressed="true"] { box-shadow: 0 0 0 2px #0C0D10, 0 0 0 4px var(--trace); }

/* ------------------------------------------------------------
   SES FAÇONS DE L'EXPOSER
------------------------------------------------------------ */
.aways { background: var(--bg); padding: var(--sp) var(--gut); }
.aways__head { max-width: 1180px; margin: 0 auto clamp(34px, 5vh, 56px); text-align: center; }
.aways__head .eyebrow { margin-bottom: 18px; }
.aways__head .display { margin-inline: auto; }
.aways__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.away { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.away:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.away__media { aspect-ratio: 4 / 3; display: grid; place-items: center; background: radial-gradient(120% 95% at 50% 15%, #FFFFFF, #ECEAE5 60%, #DEDBD3); }
.away__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.away__media.slot { border-radius: 0; }
/* photo déposée dans l'emplacement : elle remplit le cadre */
.away__media.slot img { object-fit: cover; padding: 0; }
/* vraie photo : elle remplit le cadre (les rendus, eux, restent « contenus ») */
.away__media--photo img { object-fit: cover; padding: 0; }
.away__body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.away__k { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #C4621C; }
.away h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.away p { font-size: .92rem; line-height: 1.55; color: var(--ink-60); flex: 1; }
.away__go { margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.away__go span { display: inline-block; transition: transform .3s var(--ease); }
.away:hover .away__go span { transform: translateX(4px); }

/* ------------------------------------------------------------
   EN IMAGES (emplacements à remplir)
------------------------------------------------------------ */
.aphotos { background: #fff; padding: clamp(60px, 10vh, 110px) var(--gut); }
.aphotos__grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aphotos__wide { grid-column: 1 / -1; }
/* vidéo verticale (téléphone) : centrée, sans être rognée */
.aphotos__vertical { justify-self: center; width: min(100%, 380px); }

/* ------------------------------------------------------------
   DIMENSIONS — de face (largeur de l'octogone), de profil (la
   hauteur suit le relief). Seulement les cotes utiles au client.
------------------------------------------------------------ */
.adims { --trace: #E07B2F; background: var(--bg); padding: var(--sp) var(--gut); }
.adims__inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center;
}
.adims__art { margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 22px); }
.adims__face { width: min(100%, 360px); height: auto; overflow: visible; filter: drop-shadow(0 28px 34px rgba(0,0,0,.22)); }
.adims__side { width: min(100%, 420px); height: auto; overflow: visible; }
.adims__trace { fill: none; stroke: var(--trace); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s var(--ease); }
.adims__cote path { fill: none; stroke: var(--ink); stroke-width: .7; stroke-linecap: round; stroke-linejoin: round; }
.adims__cote .adims__dash { stroke-dasharray: 1.4 1.6; opacity: .45; }
.adims__body { fill: #17181C; }
.adims__ridge { fill: none; stroke: var(--trace); stroke-width: .9; stroke-linejoin: round; transition: stroke .6s var(--ease); }
.adims__v { font-size: 6.4px; font-weight: 800; letter-spacing: .01em; fill: var(--ink); }
/* versions photo (01 de dessus, 02 de profil) : mêmes cotes, à l'échelle de la photo */
.adims__cote--photo path { stroke-width: 5; }
.adims__v--photo { font-size: 50px; }
.adims__side--photo { width: min(100%, 520px); }
.adims__side--photo .adims__v--photo { font-size: 66px; }
.adims__side--photo .adims__cote--photo path { stroke-width: 7; }

.adims__copy .eyebrow { margin-bottom: 18px; }
.adims__title { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.adims__title span { color: var(--ink-40); }
.adims__list { margin: clamp(26px, 4vh, 40px) 0 0; display: flex; flex-direction: column; }
.adims__list > div { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 6px 22px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.adims__list > div:last-child { border-bottom: 1px solid var(--line); }
.adims__list dt { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.adims__list dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-60); }

/* ------------------------------------------------------------
   VOIR AVANT D'ACHETER — l'écran de rendu se « calcule » en
   boucle (10 s) : maillage, balayage, relief, trace, « Rendu
   prêt ». À côté, les trois étapes, puis les promesses.
------------------------------------------------------------ */
.asee { --trace: #E07B2F; background: var(--bg); padding: var(--sp) var(--gut); border-top: 1px solid var(--line); }
.asee__inner { max-width: 1180px; margin: 0 auto; }
.asee__head { max-width: 780px; margin: 0 auto clamp(36px, 6vh, 64px); text-align: center; }
.asee__head .eyebrow { margin-bottom: 18px; }
.asee__title { margin-inline: auto; }
.asee__title span { color: var(--ink-40); }
.asee__lead { margin: 22px auto 0; max-width: 60ch; font-size: 1.04rem; line-height: 1.65; color: var(--ink-60); }

.asee__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(22px, 4vw, 56px); align-items: center; }

.asee__screen {
  margin: 0; border-radius: 24px; overflow: hidden; color: #fff;
  background: #0E0F12;
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06);
}
.asee__bar { display: flex; align-items: center; gap: 6px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.asee__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.15); }
.asee__bar span { margin-left: 10px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.42); }
.asee__view { position: relative; padding: clamp(20px, 4vw, 44px); background: radial-gradient(70% 70% at 50% 45%, rgba(255,255,255,.06), transparent 70%); }
.asee__view svg { width: min(100%, 400px); height: auto; display: block; margin: 0 auto; overflow: visible; }
.asee__chip {
  position: absolute; padding: 6px 12px; border-radius: 100px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px);
}
.asee__chip--a { left: 6%; top: 12%; }
.asee__chip--b { right: 6%; bottom: 12%; }
.asee__status { display: grid; place-items: center; padding: 14px 16px 18px; border-top: 1px solid rgba(255,255,255,.07); font-size: .82rem; color: rgba(255,255,255,.6); }
.asee__status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.asee__calc i { width: 7px; height: 7px; border-radius: 50%; background: var(--trace); animation: aPulse 1s ease-in-out infinite; }
.asee__ready { opacity: 0; }
.asee__ready b { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.asee__ready b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5FD38A; box-shadow: 0 0 10px #5FD38A; }
@keyframes aPulse { 50% { opacity: .25; } }

/* état de départ : le maillage seul */
.asee__solid { opacity: 0; }
.asee__trace { fill: none; stroke: var(--trace); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke .6s var(--ease); }
.asee__glow { fill: none; stroke: var(--trace); stroke-width: 4; opacity: 0; transition: stroke .6s var(--ease); }
.asee__scan { fill: var(--trace); opacity: 0; filter: drop-shadow(0 0 3px var(--trace)); }

/* la boucle, une fois la section à l'écran */
.asee.is-on .asee__mesh  { animation: aMesh 10s var(--ease) infinite; }
.asee.is-on .asee__solid { animation: aSolid 10s var(--ease) infinite; }
.asee.is-on .asee__scan  { animation: aScan 10s linear infinite; }
.asee.is-on .asee__trace { animation: aTraceLoop 10s var(--ease) infinite; }
.asee.is-on .asee__glow  { animation: aGlowLoop 10s var(--ease) infinite; }
.asee.is-on .asee__chip--a { animation: aChipA 10s var(--ease) infinite; }
.asee.is-on .asee__chip--b { animation: aChipB 10s var(--ease) infinite; }
.asee.is-on .asee__calc  { animation: aCalc 10s linear infinite; }
.asee.is-on .asee__ready { animation: aReady 10s linear infinite; }
@keyframes aMesh  { 0%, 26% { opacity: 1; } 40%, 86% { opacity: .18; } 96%, 100% { opacity: 1; } }
@keyframes aSolid { 0%, 6% { opacity: 0; } 34%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes aScan  { 0% { transform: translateY(-62px); opacity: 0; } 3% { opacity: .9; } 32% { opacity: .9; } 34% { transform: translateY(62px); opacity: 0; } 100% { transform: translateY(62px); opacity: 0; } }
@keyframes aTraceLoop { 0%, 36% { stroke-dashoffset: 1; opacity: 1; } 58%, 88% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@keyframes aGlowLoop  { 0%, 56% { opacity: 0; } 64%, 86% { opacity: .42; } 94%, 100% { opacity: 0; } }
@keyframes aChipA { 0%, 36% { opacity: 0; transform: translateY(6px); } 42%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes aChipB { 0%, 56% { opacity: 0; transform: translateY(6px); } 62%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(6px); } }
@keyframes aCalc  { 0%, 56% { opacity: 1; } 59%, 95% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes aReady { 0%, 58% { opacity: 0; } 62%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }

.asee__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.asee__steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.asee__n { width: 44px; height: 44px; display: grid; place-items: center; clip-path: var(--oct); background: var(--noir); color: var(--trace); font-size: 1.02rem; font-weight: 800; transition: color .6s var(--ease); }
.asee__steps b { display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; }
.asee__steps p { margin-top: 6px; font-size: .92rem; line-height: 1.55; color: var(--ink-60); }

.asee__promise { list-style: none; margin: clamp(30px, 5vh, 48px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.asee__promise li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: .86rem; font-weight: 700; }
.asee__promise li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #2E9E5B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.asee__cta { margin-top: 26px; text-align: center; }
/* l'écran de rendu montre une vraie carte 3D (iframe) : pas d'animation simulée */
.asee__view--3d { padding: 0; }
.asee__3d { display: block; width: 100%; aspect-ratio: 1 / .92; border: 0; background: transparent; }
.asee__view--3d .asee__chip { pointer-events: none; opacity: 1; transform: none; animation: none !important; }
.asee__ready--on { opacity: 1 !important; animation: none !important; }

/* commande : la pièce dessinée prend la teinte choisie */
.sbuy--ashiato { --sb-accent: #E8894A; --sb-tint: rgba(224,123,47,.14); --sb-glow: rgba(224,123,47,.15); --trace: #E07B2F; }
.sbuy--ashiato .sbuy__done b { display: inline-block; margin-bottom: 4px; color: var(--sb-accent); }

/* ------------------------------------------------------------
   RESPONSIVE / MOUVEMENT RÉDUIT
------------------------------------------------------------ */
@media (max-width: 1024px) {
  .akeys__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .aprin__inner, .adims__inner, .asee__grid { grid-template-columns: 1fr; }
  .adims__copy { order: -1; }
  .asee__screen { max-width: 560px; width: 100%; margin-inline: auto; }
  .aways__grid { grid-template-columns: 1fr; max-width: 520px; }
  .aphotos__grid { grid-template-columns: 1fr 1fr; }
  .aphotos__grid .slot:last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .akeys__grid, .aphotos__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .aprin__relief { opacity: 1; transform: none; transition: none; }
  .aprin__trace { stroke-dashoffset: 0; animation: none !important; }
  .aprin__glow { opacity: .42; animation: none !important; }
  .aprin__dot { opacity: 1; transition: none; }
  .aprin__sheen { animation: none !important; }
  .astep { transition: none; }
  /* l'écran de rendu montre directement le résultat */
  .asee .asee__mesh { opacity: .18; animation: none !important; }
  .asee .asee__solid, .asee .asee__chip { opacity: 1; transform: none; animation: none !important; }
  .asee .asee__trace { stroke-dashoffset: 0; animation: none !important; }
  .asee .asee__glow { opacity: .42; animation: none !important; }
  .asee .asee__scan, .asee .asee__calc { opacity: 0; animation: none !important; }
  .asee .asee__ready { opacity: 1; animation: none !important; }
}
@media (max-width: 560px) {
  .adims__list > div { grid-template-columns: 1fr; }
  .asee__steps li { padding: 18px; }
}