/* =====================================================================
   AutoPilot Pro — composants médias « app-motion »
   Isolés : toutes les classes sont préfixées app-motion-, aucune règle
   sur body, button, form, a ou la navigation du site.
   Pages : /demo (vidéo), /fonctionnalites (3 animations), /solutions (secteurs)
   ===================================================================== */

.app-motion, .app-motion-video {
  --am-bg: #FFFFFF; --am-alt: #F5F7FA; --am-ink: #111827; --am-muted: #667085;
  --am-blue: #0764ED; --am-blue-soft: #EAF2FF; --am-line: #E5E7EB;
  --am-green: #127A47; --am-green-soft: #E7F6EE; --am-amber: #9A5B00; --am-amber-soft: #FFF4DE;
  --am-radius: 18px;
  color: var(--am-ink);
  font-family: inherit;
  line-height: 1.45;
  box-sizing: border-box;
}
.app-motion *, .app-motion *::before, .app-motion *::after,
.app-motion-video *, .app-motion-video *::before, .app-motion-video *::after { box-sizing: border-box; }

/* ---------- Enveloppe d'une animation ---------- */
.app-motion {
  container-type: inline-size;
  container-name: am;
  margin: 0;
  background: var(--am-alt);
  border-radius: 24px;
  padding: clamp(14px, 3cqi, 28px);
}
.app-motion-frame {
  position: relative;
  background: var(--am-bg);
  border: 1px solid var(--am-line);
  border-radius: var(--am-radius);
  box-shadow: 0 18px 50px rgba(17, 24, 39, .07), 0 1px 3px rgba(17, 24, 39, .04);
  padding: clamp(16px, 3cqi, 28px);
  overflow: hidden;
}
.app-motion-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.app-motion-title { font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 0; }
.app-motion-sub { font-size: 15px; color: var(--am-muted); margin: 2px 0 0; }

/* Barre de commandes */
.app-motion-bar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 16px; }
.app-motion-ctl {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--am-line); background: #fff; color: var(--am-ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.app-motion-ctl--primary { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }
.app-motion-ctl:focus-visible { outline: 3px solid rgba(7, 100, 237, .45); outline-offset: 2px; }
.app-motion-ctl svg { width: 16px; height: 16px; }
.app-motion--ready .app-motion-ctl { display: inline-flex; }
.app-motion-ctl[hidden] { display: none !important; }
.app-motion-note { font-size: 13px; color: var(--am-muted); margin-left: auto; }

/* Étapes */
.app-motion-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: amstep; }
.app-motion-steps li { counter-increment: amstep; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--am-muted); padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.6); transition: background .25s, color .25s; }
.app-motion-steps li::before { content: counter(amstep); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #fff; border: 1px solid var(--am-line); color: var(--am-muted); }
.app-motion-steps li.app-motion-on { background: var(--am-blue-soft); color: var(--am-blue); font-weight: 600; }
.app-motion-steps li.app-motion-on::before { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }
.app-motion-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Éléments d'interface reconstruits ---------- */
.app-motion-card { background: #fff; border: 1px solid var(--am-line); border-radius: 14px; padding: 16px 18px; }
.app-motion-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.app-motion-field { padding: 8px 0; border-bottom: 1px solid var(--am-line); font-size: 15px; border-radius: 8px; transition: box-shadow .25s, background .25s; }
.app-motion-field:last-child { border-bottom: 0; }
.app-motion-field small { display: block; font-size: 12.5px; color: var(--am-muted); }
.app-motion-badge { display: inline-block; white-space: nowrap; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--am-alt); color: #475467; }
.app-motion-badge--green { background: var(--am-green-soft); color: var(--am-green); }
.app-motion-badge--amber { background: var(--am-amber-soft); color: var(--am-amber); }
.app-motion-badge--blue { background: var(--am-blue-soft); color: var(--am-blue); }
.app-motion-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--am-blue); background: var(--am-blue-soft); border-radius: 999px; padding: 4px 10px; }
.app-motion-fakebtn { display: inline-flex; align-items: center; white-space: nowrap; min-height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--am-line); background: #fff; font-size: 14px; font-weight: 600; transition: box-shadow .25s; }
.app-motion-fakebtn--primary { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }
.app-motion-hl { box-shadow: 0 0 0 3px rgba(7, 100, 237, .30); background-color: rgba(234, 242, 255, .55); }
.app-motion-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-motion-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--am-line); font-size: 15px; }
.app-motion-check { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 6px 0; }
.app-motion-check i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--am-line); display: grid; place-items: center; transition: background .25s, border-color .25s; }
.app-motion-check i svg { width: 12px; height: 12px; opacity: 0; }
.app-motion-check.app-motion-on i { background: var(--am-green); border-color: var(--am-green); }
.app-motion-check.app-motion-on i svg { opacity: 1; }
.app-motion:not(.app-motion--ready) .app-motion-check i { background: var(--am-green); border-color: var(--am-green); }
.app-motion:not(.app-motion--ready) .app-motion-check i svg { opacity: 1; }

/* Échanges d'état (avant / après) */
.app-motion:not(.app-motion--ready) [data-am-until] { display: none; }
.app-motion:not(.app-motion--ready) [data-am-out] { display: none; }

/* ---------- A : dossier client vers devis ---------- */
.app-motion-cd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 16px; }
.app-motion-cd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 12px; }
.app-motion-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 16px; padding-top: 10px; }

/* ---------- B : planning ---------- */
.app-motion-pl { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.app-motion-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--am-line); border-radius: 14px; overflow: hidden; }
.app-motion-day { border-right: 1px solid var(--am-line); min-height: 210px; padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; }
.app-motion-day:last-child { border-right: 0; }
.app-motion-day > b { font-size: 13px; color: #475467; font-weight: 600; }
.app-motion-blk { border-radius: 10px; padding: 7px 9px; font-size: 13px; line-height: 1.3; background: var(--am-blue-soft); color: #0B3E91; border-left: 3px solid var(--am-blue); }
.app-motion-blk small { display: block; color: #3d5a8a; font-size: 12px; }
.app-motion-blk--gray { background: #F2F4F7; color: #344054; border-left-color: #98A2B3; }
.app-motion-blk--ghost { background: #fff; border: 2px dashed var(--am-blue); }
.app-motion-slot { position: relative; }
.app-motion-slot > [data-am-until] + * { margin-top: 0; }
.app-motion-day-panel { margin-top: 14px; }

/* ---------- C : recherche documentaire ---------- */
.app-motion-docs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.app-motion-search { display: flex; align-items: center; gap: 10px; height: 46px; border: 1px solid var(--am-line); border-radius: 12px; padding: 0 14px; font-size: 16px; }
.app-motion-search svg { width: 18px; height: 18px; flex: none; color: var(--am-muted); }
.app-motion-caret { display: inline-block; width: 2px; height: 20px; background: var(--am-blue); margin-left: -6px; opacity: 0; }
.app-motion-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.app-motion-chip { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--am-line); background: #fff; color: #344054; transition: background .25s, color .25s; }
.app-motion-chip.app-motion-on { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }
.app-motion-doc { overflow: hidden; }
.app-motion-doc > div { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--am-line); font-size: 15px; border-radius: 10px; transition: box-shadow .25s, background .25s; }
.app-motion-doc small { color: var(--am-muted); font-size: 13px; margin-left: auto; white-space: nowrap; }
.app-motion-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--am-blue-soft); display: grid; place-items: center; }
.app-motion-ico svg { width: 16px; height: 16px; }
.app-motion-paper { border: 1px solid var(--am-line); border-radius: 10px; padding: 16px; box-shadow: 0 8px 24px rgba(17, 24, 39, .06); font-size: 14px; }

/* ---------- Secteurs (Solutions) ---------- */
.app-motion-sector { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 18px; align-items: stretch; }
.app-motion-photo { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--am-alt); min-height: 240px; }
.app-motion-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.app-motion-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-motion-flow .app-motion-card { padding: 14px 16px; }
.app-motion-flow h5 { margin: 0 0 6px; font-size: 13px; color: var(--am-blue); font-weight: 700; display: flex; gap: 8px; align-items: center; }
.app-motion-flow h5 span { width: 20px; height: 20px; border-radius: 50%; background: var(--am-blue); color: #fff; display: grid; place-items: center; font-size: 12px; }
.app-motion-flow p { margin: 0 0 8px; font-size: 15px; }

/* ---------- Responsive par conteneur ---------- */
@container am (max-width: 760px) {
  .app-motion-cd, .app-motion-pl, .app-motion-docs, .app-motion-sector { grid-template-columns: 1fr; }
  .app-motion-steps { grid-template-columns: 1fr 1fr; }
  .app-motion-note { margin-left: 0; width: 100%; }
  .app-motion-photo { min-height: 0; aspect-ratio: 3 / 2; }
}
@container am (max-width: 520px) {
  .app-motion-week { grid-template-columns: 1fr; }
  .app-motion-day { border-right: 0; border-bottom: 1px solid var(--am-line); min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .app-motion-day:last-child { border-bottom: 0; }
  .app-motion-day > b { width: 64px; }
  .app-motion-day > *:not(b) { flex: 1 1 160px; }
  .app-motion-cd-checks, .app-motion-flow { grid-template-columns: 1fr; }
  .app-motion-steps { grid-template-columns: 1fr; }
  .app-motion-doc small { display: none; }
}

/* ======================= Vidéo /demo ======================= */
.app-motion-video { max-width: 1120px; margin: 0 auto; }
.app-motion-video-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--am-alt); border: 1px solid var(--am-line); box-shadow: 0 24px 60px rgba(17, 24, 39, .08); }
.app-motion-video-stage img, .app-motion-video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--am-alt); }
.app-motion-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px 0 18px;
  border: 0; border-radius: 999px; background: var(--am-blue); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 30px rgba(7, 100, 237, .30);
}
.app-motion-video-play span { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.app-motion-video-play svg { width: 16px; height: 16px; }
.app-motion-video-play:focus-visible, .app-motion-video-chap:focus-visible { outline: 3px solid rgba(7, 100, 237, .45); outline-offset: 3px; }
.app-motion-video-play[hidden] { display: none; }
.app-motion-video-chaps { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.app-motion-video-chap { font: inherit; font-size: 15px; font-weight: 600; color: var(--am-ink); background: #fff; border: 1px solid var(--am-line); border-radius: 999px; min-height: 44px; padding: 0 18px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.app-motion-video-chap small { color: var(--am-muted); font-weight: 500; }
.app-motion-video-chap[aria-current="true"] { background: var(--am-blue-soft); border-color: var(--am-blue-soft); color: var(--am-blue); }
.app-motion-video-note { text-align: center; font-size: 14px; color: var(--am-muted); margin: 14px 0 0; }
.app-motion-video-note a { color: var(--am-blue); }
.app-motion-video-error { position: absolute; left: 16px; right: 16px; bottom: 16px; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 15px; box-shadow: 0 8px 24px rgba(17, 24, 39, .12); }
@media (max-width: 520px) {
  .app-motion-video-stage { border-radius: 14px; }
  .app-motion-video-play { min-height: 48px; font-size: 15px; padding: 0 18px 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-motion *, .app-motion-video * { transition: none !important; }
}

/* Keep playback chrome discreet; no scrubber or duration is rendered. */
.app-motion-video-toggle{display:block;margin:14px auto 0;border:0;background:transparent;color:var(--am-muted);font:inherit;font-size:13px;min-height:44px;padding:8px 16px;cursor:pointer}
.app-motion-video-toggle[hidden]{display:none}.app-motion-video-toggle:focus-visible{outline:3px solid #7bb4ff;outline-offset:3px}
.app-motion-bar{justify-content:flex-end}.app-motion-ctl{font-size:13px;background:transparent;border:0;padding:0 12px;color:var(--am-muted)}
/* The supplied film's production footer sits below its product content. */
[data-crop-footer] .app-motion-video-stage{aspect-ratio:1920 / 1000}
[data-crop-footer] .app-motion-video-stage video,[data-crop-footer] .app-motion-video-stage img{height:108%;object-fit:fill;bottom:auto}