/* ═══════════ Réalisations : motion design ═══════════
   État final par défaut (sans JS, reduced-motion). Animations en
   transform/opacity uniquement ; les boucles ne jouent qu'à l'écran. */

/* ── Maquettes et cas (socle) ── */
/* Mockup SVG styles spécifiques aux réalisations */
.real-mock {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.real-mock svg { width: 100%; height: 100%; display: block; }
.real-mock--wlss { background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%); }
.real-mock--agents { background: linear-gradient(135deg, #1a1610 0%, #0a0a0a 100%); }
.real-mock--adt { background: linear-gradient(135deg, #181408 0%, #0a0a0a 100%); }
.real-mock--villa { background: linear-gradient(135deg, #1a1610 0%, #0a0a0a 100%); }

.real-case {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 0;
  padding: clamp(48px, 8vh, 72px) 0;
  position: relative;
}
.real-case:nth-child(even) {
  grid-template-columns: 1fr 1.2fr;
}
.real-case:nth-child(even) .real-case__visual { order: 2; }
.real-case:nth-child(even) .real-case__body { order: 1; }
.real-case + .real-case { border-top: 1px solid rgba(255, 255, 255, 0.06); }

.real-case__type {
  font-family: var(--font-display, 'Inter Tight'), system-ui;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fab512;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.real-case__type::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.real-case__title {
  font-family: var(--font-display, 'Inter Tight'), system-ui;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.real-case__lead {
  font-family: var(--font-body, 'Inter'), system-ui;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 28px;
}
.real-case__lead strong { color: #fff; font-weight: 600; }
.real-case__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.real-case__tech span {
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-body, 'Inter'), system-ui;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.real-case__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(250, 181, 18, 0.30);
  color: #fab512;
  font-family: var(--font-body, 'Inter'), system-ui;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: all 0.25s;
}
.real-case__cta:hover {
  background: rgba(250, 181, 18, 0.08);
  border-color: rgba(250, 181, 18, 0.6);
}
.real-case__cta-arrow { transition: transform 0.25s; }
.real-case__cta:hover .real-case__cta-arrow { transform: translateX(4px); }

.real-case__locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body, 'Inter'), system-ui;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  padding: 12px 22px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.real-mock--odoo { background: linear-gradient(135deg, #1a1208 0%, #0a0a0a 100%); }
.real-mock--saas { background: linear-gradient(135deg, #121a14 0%, #0a0a0a 100%); }
.real-mock--cmc { background: linear-gradient(135deg, #1a1610 0%, #0a0a0a 100%); }
.real-mock { transition: transform 0.35s var(--ease, ease), border-color 0.35s var(--ease, ease); }
.real-case:hover .real-mock { transform: translateY(-6px); border-color: rgba(250, 181, 18, 0.35); }
.rm-bar, .rm-fill { transform-box: fill-box; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .real-mock.is-live .rm-bar { animation: rmGrow 0.9s var(--ease, ease) calc(var(--i, 0) * 0.12s) backwards; }
  .real-mock.is-live .rm-fill { animation: rmGrow 1.1s var(--ease, ease) calc(var(--i, 0) * 0.15s) backwards; }
  .real-mock.is-live .rm-pulse { animation: rmPulse 2.6s ease-in-out 1s infinite; }
  .real-mock.is-live .rm-dot { animation: rmPulse 2.2s ease-in-out infinite; }
}
.real-mock--m365 { background: linear-gradient(135deg, #1a1610 0%, #0a0a0a 100%); }
.rm-mail { opacity: 0; }
.rm-tile, .rm-step { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .real-mock.is-live .rm-mail { animation: rmMail 2.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 0.8s) infinite; }
  .real-mock.is-live .rm-tile { animation: rmPop 0.6s var(--ease, ease) calc(0.3s + var(--i, 0) * 0.12s) backwards; }
  .real-mock.is-live .rm-step { animation: rmStep 0.5s var(--ease, ease) calc(0.6s + var(--i, 0) * 0.35s) backwards; }
}
@media (prefers-reduced-motion: reduce) { .rm-mail[style*="--i:1"] { opacity: 1; transform: translateX(54px); } }
@keyframes rmMail { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(114px); } }
@keyframes rmPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes rmStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rmGrow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes rmPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 900px) {
  .real-case,
  .real-case:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .real-case:nth-child(even) .real-case__visual { order: 1; }
  .real-case:nth-child(even) .real-case__body { order: 2; }
}

/* ── Héros ── */
.rz-hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,72px);align-items:center}
.rz-title{font-size:clamp(40px,5vw,76px);line-height:1.03;letter-spacing:-0.04em}
.rz-proof{list-style:none;margin:clamp(26px,4vh,38px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 34px}
.rz-proof li{display:flex;flex-direction:column}
.rz-proof b{font-family:var(--font-display);font-size:clamp(26px,2.6vw,36px);letter-spacing:-0.03em;color:var(--yellow);line-height:1.1}
.rz-proof span{font-size:13px;color:var(--muted-2)}

/* Sommaire en mosaïque : une tuile par réalisation */
.rz-board{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rz-board li:nth-child(3n+2){transform:translateY(22px)}
.rz-tile{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:118px;padding:14px 14px 13px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,0.09);color:var(--text);text-decoration:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.rz-tile:hover,.rz-tile:focus-visible{border-color:rgba(250,181,18,0.55);background:linear-gradient(160deg,rgba(250,181,18,0.12),rgba(250,181,18,0.02))}
.rz-tile__n{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:0.12em;color:var(--yellow)}
.rz-tile__t{font-family:var(--font-display);font-weight:700;font-size:15px;line-height:1.2;letter-spacing:-0.01em}
.rz-tile__k{display:block;margin-top:4px;font-size:11.5px;color:var(--muted-2)}
.rz-tile--hot{border-color:rgba(250,181,18,0.4)}
.rz-tile--hot .rz-tile__n::after{content:" · nouveau";color:#4ade80;letter-spacing:0.06em}
.rz-tile--cta{justify-content:center;align-items:flex-start;background:var(--yellow);border-color:var(--yellow);color:#141414}
.rz-tile--cta:hover,.rz-tile--cta:focus-visible{background:#ffc733;border-color:#ffc733}
.rz-tile--cta .rz-tile__t{font-size:16px}
.rz-tile--cta .rz-tile__k{color:rgba(20,20,20,0.7)}

/* ── Filtres ── */
.rz-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(18px,3vh,28px)}
.rz-filters[hidden]{display:none}
.rz-filter{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);color:var(--muted-2);font:600 13.5px/1 var(--font-body);cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.rz-filter:hover{color:var(--text);border-color:rgba(255,255,255,0.28)}
.rz-filter[aria-pressed="true"]{color:#141414;background:var(--yellow);border-color:var(--yellow)}
.rz-filter__c{font-size:11.5px;opacity:0.7}
.rz-filter:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.real-case[hidden]{display:none}
.rz-cases .real-case{scroll-margin-top:96px}

/* ── Cas : numéro, statut, volet qui s'ouvre ── */
.rz-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px}
.rz-num{font-family:var(--font-display);font-weight:800;font-size:clamp(54px,6vw,84px);line-height:0.8;letter-spacing:-0.05em;color:transparent;-webkit-text-stroke:1px rgba(250,181,18,0.6)}
.rz-head .real-case__type{margin-bottom:6px}
.rz-status{display:inline-flex;align-items:center;gap:7px;margin-left:auto;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted-2);white-space:nowrap}
.rz-status i{width:7px;height:7px;border-radius:50%;background:#4ade80}
.rz-status--lock i{background:rgba(255,255,255,0.35)}
.real-case__visual{position:relative}
.rz-wipe{position:absolute;inset:0;z-index:2;border-radius:16px;background:var(--yellow);transform:scaleX(0);transform-origin:100% 50%;pointer-events:none}
.real-case:nth-child(even) .rz-wipe{transform-origin:0 50%}

/* ── Bande des technologies ── */
.rz-stack{padding:clamp(28px,5vh,46px) 0;border-top:1px solid rgba(255,255,255,0.07);border-bottom:1px solid rgba(255,255,255,0.07);overflow:hidden}
.rz-stack__label{display:block;margin-bottom:16px;font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--yellow)}
.rz-stack__view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rz-stack__track{display:flex;flex-wrap:wrap;gap:10px 12px;list-style:none;margin:0;padding:0}
.rz-stack__track li{padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,0.1);font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text);white-space:nowrap}
.rz-stack__track li.is-key{border-color:rgba(250,181,18,0.4);color:var(--yellow)}
.rz-stack.is-armed .rz-stack__track{flex-wrap:nowrap;width:max-content}

/* ── Motion ── */
@media (prefers-reduced-motion:no-preference){
  .rz-board li{opacity:0;animation:rzTile .7s var(--ease) calc(.5s + var(--i,0)*.08s) forwards}
  .rz-board li:nth-child(3n+2){animation-name:rzTileLow}
  .rz-hero.is-live .rz-tile{animation:rzFloat 6s ease-in-out calc(var(--i,0)*-0.9s) infinite}
  .rz-hero.is-live .rz-tile:hover,.rz-hero.is-live .rz-tile:focus-visible{animation-play-state:paused}
  .rz-proof li{opacity:0;animation:rzUp .6s var(--ease) calc(.9s + var(--i,0)*.1s) forwards}
  .real-case.reveal .rz-wipe{transform:scaleX(1)}
  .real-case.reveal.is-visible .rz-wipe{transform:scaleX(0);transition:transform .9s cubic-bezier(.77,0,.18,1) .15s}
  .real-case.reveal .rz-num{transform:translateY(30%);opacity:0;transition:transform .8s var(--ease) .35s,opacity .8s var(--ease) .35s}
  .real-case.reveal.is-visible .rz-num{transform:none;opacity:1}
  .real-case.is-enter{animation:rzUp .5s var(--ease) both}
  .rz-stack.is-live .rz-stack__track{animation:rzTick var(--rz-d,50s) linear infinite}
  .rz-stack:hover .rz-stack__track{animation-play-state:paused}
}
@keyframes rzTile{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rzTileLow{from{opacity:0;transform:translateY(48px) scale(.96)}to{opacity:1;transform:translateY(22px)}}
@keyframes rzFloat{0%,100%{transform:none}50%{transform:translateY(-6px)}}
@keyframes rzUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rzTick{to{transform:translateX(-50%)}}

/* ── Responsive ── */
@media (max-width:980px){
  .rz-hero__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .rz-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rz-board li:nth-child(3n+2){transform:none}
  .rz-board li:nth-child(even){transform:translateY(16px)}
  .rz-board li:nth-child(3n+2){animation-name:rzTile}
  .rz-board li:nth-child(even){animation-name:rzTileLow2}
  .rz-head{flex-wrap:wrap}
  .rz-status{margin-left:0}
}
@keyframes rzTileLow2{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:translateY(16px)}}