.appTheme {
  --app-accent: #3d7cff;
  --app-accent-2: #7fe3ff;
  --app-deep: #0c1a3c;
  --app-surface: #f6f9ff;
  background:
    radial-gradient(circle at 8% 15%, color-mix(in srgb, var(--app-accent) 14%, transparent), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, var(--app-surface) 48%, #ffffff 100%);
}

.appTheme .hero {
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--app-accent-2) 26%, transparent), transparent 18rem),
    linear-gradient(135deg, var(--app-deep), color-mix(in srgb, var(--app-deep) 78%, var(--app-accent)) 70%, var(--app-accent));
  border: 1px solid color-mix(in srgb, var(--app-accent-2) 28%, transparent);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--app-deep) 25%, transparent);
}

.appTheme .grad { color: var(--app-accent-2); }
.appTheme .pill { border-color: color-mix(in srgb, var(--app-accent-2) 45%, transparent); }
.appTheme .section__title,
.appTheme .card__title { color: color-mix(in srgb, var(--app-deep) 88%, #000); }
.appTheme .btn--primary { background: var(--app-accent); border-color: var(--app-accent); }
.appTheme .btn--primary:hover { filter: brightness(1.08); }
.appTheme .card { border-color: color-mix(in srgb, var(--app-accent) 17%, #dfe7f4); }
.appTheme .card:hover { border-color: color-mix(in srgb, var(--app-accent) 55%, #dfe7f4); }

.appTheme--maurage { --app-accent:#f4bd18; --app-accent-2:#ffd95b; --app-deep:#061d45; --app-surface:#f3f7ff; }
.appTheme--petstodo { --app-accent:#7456d8; --app-accent-2:#8ff0ca; --app-deep:#1d1641; --app-surface:#f8f5ff; }
.appTheme--babytodo { --app-accent:#dd6b9b; --app-accent-2:#ffd5e6; --app-deep:#562849; --app-surface:#fff7fb; }
.appTheme--famiora { --app-accent:#15a58d; --app-accent-2:#a9f7df; --app-deep:#0d3d47; --app-surface:#f1fbf8; }
.appTheme--koptime { --app-accent:#28a968; --app-accent-2:#9ef0bd; --app-deep:#0c3022; --app-surface:#f2fbf5; }
.appTheme--evidocket { --app-accent:#27a9c7; --app-accent-2:#8cecff; --app-deep:#10283c; --app-surface:#f0f9fc; }
.appTheme--docswitch { --app-accent:#6557df; --app-accent-2:#86f1db; --app-deep:#171d4a; --app-surface:#f6f5ff; }
.appTheme--pocketparty { --app-accent:#8a4ef3; --app-accent-2:#ff9ee9; --app-deep:#23114d; --app-surface:#faf5ff; }
.appTheme--isles-of-memory { --app-accent:#b47a38; --app-accent-2:#f0c56c; --app-deep:#151f28; --app-surface:#f8f4ec; }
.appTheme--squadflow { --app-accent:#1e9e58; --app-accent-2:#8df1aa; --app-deep:#0a321f; --app-surface:#f2fbf5; }

/* Dégradés explicites : ils gardent l'identité de chaque produit même sur
   les navigateurs qui ne prennent pas encore en charge color-mix(). */
body.appTheme--maurage main > .hero { background:linear-gradient(135deg,#051a3d,#0b3979 64%,#d99b08); }
body.appTheme--petstodo main > .hero { background:linear-gradient(135deg,#211842,#59449d 62%,#3cab84); }
body.appTheme--babytodo main > .hero { background:linear-gradient(135deg,#49223d,#88466d 60%,#d978a2); }
body.appTheme--famiora main > .hero { background:linear-gradient(135deg,#0b3640,#0e756d 62%,#29b99c); }
body.appTheme--koptime main > .hero { background:linear-gradient(135deg,#092c1e,#12633c 62%,#2ba562); }
body.appTheme--evidocket main > .hero { background:linear-gradient(135deg,#102637,#18556b 62%,#29a9c4); }
body.appTheme--docswitch main > .hero { background:linear-gradient(135deg,#171b49,#463a9d 62%,#7160e3); }
body.appTheme--pocketparty main > .hero { background:linear-gradient(135deg,#241044,#5a2399 60%,#c54fc5); }
body.appTheme--isles-of-memory main > .hero { background:linear-gradient(135deg,#111d29,#294b58 58%,#a86d2c); }
body.appTheme--squadflow main > .hero { background:linear-gradient(135deg,#092c1d,#145c37 62%,#26985c); }

.brand__logo--image { overflow: hidden; padding: 0 !important; background: transparent !important; }
.brand__logo--image img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

.appVisualHost > .previewCard,
.appVisualHost > .salesMock,
.appVisualHost > .pp-heroCard { display:none; }

.appIdentityVisual {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height: 410px;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 50px rgba(0,0,0,.24);
}

.appIdentityVisual::before {
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  top:-120px; right:-80px; background:var(--app-accent-2); opacity:.18; filter:blur(4px);
}

.appIdentityVisual--gallery { grid-template-columns: repeat(6, 1fr); align-items:center; gap:14px; }
.appVisualShot { margin:0; position:relative; z-index:1; overflow:hidden; border-radius:24px; box-shadow:0 18px 42px rgba(0,0,0,.28); background:#fff; }
.appVisualShot img { display:block; width:100%; height:100%; object-fit:cover; }
.appVisualShot--phone { grid-column:span 2; height:350px; border:7px solid rgba(255,255,255,.95); border-radius:28px; }
.appVisualShot--wide { grid-column:span 4; max-height:210px; }
.appVisualShot:not(.appVisualShot--phone):not(.appVisualShot--wide) { grid-column:span 2; max-width:190px; }
.appIdentityVisual--single .appVisualShot--wide { width:100%; max-height:none; }
.appIdentityVisual--single .appVisualShot--wide img { aspect-ratio:3 / 2; object-fit:cover; }

.appTheme--maurage .appIdentityVisual { padding:0; background:#071d42; }
.appTheme--maurage .appVisualShot { width:100%; max-height:none; border-radius:30px; }
.appTheme--maurage .appVisualShot img { aspect-ratio:3 / 2; object-fit:cover; }
.appTheme--petstodo .appVisualShot--1 { transform:rotate(-5deg); }
.appTheme--petstodo .appVisualShot--2 { transform:rotate(6deg); }
.appTheme--babytodo .appVisualShot--1 { grid-column:1 / -1; max-height:145px; }
.appTheme--babytodo .appVisualShot--2 { grid-column:2 / span 2; }
.appTheme--babytodo .appVisualShot--3 { grid-column:4 / span 2; }
.appTheme--koptime .appVisualShot--1 { grid-row:1 / span 2; grid-column:1 / span 2; }
.appTheme--koptime .appVisualShot--2,
.appTheme--koptime .appVisualShot--3 { grid-column:3 / span 4; }
.appTheme--docswitch .appVisualShot--1 { grid-column:1 / span 2; }
.appTheme--docswitch .appVisualShot--2 { grid-column:3 / span 4; max-height:280px; }

.squadPitch {
  position:relative; width:min(100%,460px); min-width:320px; aspect-ratio:4/3; border:3px solid rgba(255,255,255,.7); border-radius:26px;
  background:repeating-linear-gradient(90deg,#17864b 0 13%,#1f9456 13% 26%); overflow:hidden;
}
.pitchLine--half { position:absolute; inset:0 50% 0 auto; width:2px; background:rgba(255,255,255,.65); }
.pitchCircle { position:absolute; width:120px; height:120px; border:2px solid rgba(255,255,255,.65); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.playerDot { position:absolute; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#0e2c20; background:#fff; font-weight:900; box-shadow:0 7px 18px rgba(0,0,0,.3); }
.playerDot--1{left:14%;top:18%}.playerDot--2{left:22%;top:66%}.playerDot--3{left:44%;top:40%}.playerDot--4{right:19%;top:18%}.playerDot--5{right:13%;bottom:16%}
.pitchPanel { position:absolute; right:18px; bottom:18px; display:grid; grid-template-columns:52px 1fr; gap:2px 12px; align-items:center; padding:14px 17px; border-radius:18px; background:rgba(255,255,255,.94); color:#102219; box-shadow:0 14px 30px rgba(0,0,0,.22); }
.pitchPanel img { grid-row:1 / span 2; width:52px; border-radius:12px; }.pitchPanel small{color:#617267}

@media (max-width: 820px) {
  .appIdentityVisual { min-height:340px; padding:16px; }
  .appVisualShot--phone { height:300px; }
}

@media (max-width: 600px) {
  .appIdentityVisual { min-height:300px; border-radius:24px; }
  .appIdentityVisual--gallery { gap:8px; }
  .appVisualShot--phone { height:245px; border-width:4px; border-radius:20px; }
  .appVisualShot--wide { max-height:145px; }
  .appTheme--babytodo .appVisualShot--1 { display:none; }
  .appTheme--babytodo .appVisualShot--2 { grid-column:1 / span 3; }
  .appTheme--babytodo .appVisualShot--3 { grid-column:4 / span 3; }
  .pitchPanel { right:10px; bottom:10px; padding:10px; grid-template-columns:40px 1fr; }
  .pitchPanel img { width:40px; }
  .squadPitch { min-width:0; }
}