/* Effets premium v2.3 : parallaxe, bento, faisceaux, terminal */
.ville.photo { will-change: transform; }

.faisceau { position: relative; height: 1px; width: 100%; margin: 20px 0 0; overflow: visible; }
.faisceau::before { content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.55) 30%, rgba(129,140,248,.55) 70%, transparent); }
.faisceau::after { content:''; position:absolute; top:-2px; left:-10%; width:20%; height:5px; border-radius:999px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  filter: blur(3px); animation: beam 5s ease-in-out infinite; }
@keyframes beam { 0% { left:-10%; opacity:0 } 12% { opacity:1 } 88% { opacity:1 } 100% { left:92%; opacity:0 } }

.bento { display:grid; gap:18px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
@media (max-width: 860px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 170px; } }
.bento .b { position:relative; border:1px solid var(--border); border-radius:20px; overflow:hidden;
  background:var(--card); backdrop-filter:blur(8px);
  transition: transform .25s ease, border-color .3s, box-shadow .3s; }
.bento .b:hover { border-color: rgba(34,211,238,.45); transform: translateY(-4px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45), 0 0 40px rgba(34,211,238,.10); }
.b-1 { grid-column: span 2; grid-row: span 2; }
.b-inner { position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:flex-end; z-index:2; }
.b-inner h3 { font-size:20px; margin-bottom:6px; }
.b-inner p { font-size:13.5px; color:var(--muted); max-width:380px; }
.b-tag { position:absolute; top:20px; left:22px; z-index:2; font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#22d3ee; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25);
  padding:4px 10px; border-radius:999px; }

.b-particules { position:absolute; inset:0; z-index:1; opacity:.7;
  background-image: radial-gradient(rgba(34,211,238,.5) 1px, transparent 1.5px);
  background-size: 26px 26px;
  mask-image: linear-gradient(0deg, black 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(0deg, black 30%, transparent 90%);
  animation: particules 7s linear infinite; }
@keyframes particules { to { background-position: 0 -260px; } }

.b-anneaux { position:absolute; right:-70px; bottom:-70px; width:260px; height:260px; z-index:1; }
.b-anneaux span { position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(129,140,248,.35); animation: anneau 4s ease-out infinite; }
.b-anneaux span:nth-child(2) { animation-delay:1.3s; } .b-anneaux span:nth-child(3) { animation-delay:2.6s; }
@keyframes anneau { from { transform:scale(.2); opacity:.9 } to { transform:scale(1); opacity:0 } }

.b-code { position:absolute; inset:0; z-index:1; padding:20px; font-family:ui-monospace,monospace;
  font-size:11.5px; line-height:2.1; color:rgba(148,163,184,.4); overflow:hidden; }
.b-code div { white-space:nowrap; animation: codede 14s linear infinite; }
@keyframes codede { from { transform:translateY(0) } to { transform:translateY(-50%) } }

.b-orbe { position:absolute; top:50%; left:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; z-index:1;
  background: radial-gradient(circle at 35% 35%, #67e8f9, #22d3ee 40%, #1e3a8a 80%);
  box-shadow: 0 0 60px rgba(34,211,238,.45), inset -12px -12px 30px rgba(0,0,0,.35);
  animation: orbe 6s ease-in-out infinite; }
@keyframes orbe { 0%,100% { transform:translate(0,0) scale(1) } 33% { transform:translate(16px,-12px) scale(1.05) } 66% { transform:translate(-14px,10px) scale(.97) } }

.b-vagues { position:absolute; inset:0; z-index:1; opacity:.6; }
.b-vagues span { position:absolute; left:-10%; width:120%; height:70px; top:55%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(56,189,248,.25), transparent 70%);
  animation: vague 5s ease-in-out infinite; }
.b-vagues span:nth-child(2) { animation-delay:1.2s; top:65%; opacity:.7; }
.b-vagues span:nth-child(3) { animation-delay:2.4s; top:75%; opacity:.5; }
@keyframes vague { 0%,100% { transform: translateX(0) } 50% { transform: translateX(4%) } }

.para { display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
@media (max-width: 860px) { .para { grid-template-columns: 1fr; gap: 36px; } }
.para-txt { will-change: transform; }
.para-txt h2 { margin-bottom: 20px; }
.para-txt .lead { font-size: 1.08rem; color: var(--muted); margin-bottom: 18px; }
.para-txt .check { display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; color:var(--txt); font-size:.95rem; }
.para-txt .check::before { content:'\2713'; color:#22d3ee; font-weight:700; flex-shrink:0; margin-top:1px;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.6)); }
.para-visuel { position:relative; will-change: transform; }
.para-visuel .cadre { position:relative; border-radius: 22px; overflow:hidden; border:1px solid var(--border);
  box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 0 60px rgba(34,211,238,.08); }
.para-visuel img { display:block; width:100%; height:520px; object-fit:cover; }
@media (max-width: 860px) { .para-visuel img { height: 320px; } }
.para-visuel .cadre::after { content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(34,211,238,.10), transparent 45%, rgba(129,140,248,.12)); pointer-events:none; }
.para-visuel .float-badge { position:absolute; z-index:3; left:22px; bottom:22px;
  display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:12px;
  background: rgba(11,18,32,.75); border:1px solid rgba(34,211,238,.3); backdrop-filter: blur(8px);
  font-size:12.5px; color:#e2e8f0; }
.para-visuel .float-badge i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }

/* ---- terminal de déploiement (hérité de la v1) ---- */
.term-zone { display:flex; justify-content:center; padding: 0 0 10px; }
.terminal { width:100%; max-width:600px; border-radius:14px; border:1px solid var(--border);
  background: var(--card); backdrop-filter: blur(10px); box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 50px rgba(34,211,238,.06);
  overflow:hidden; }
.term-bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--border); }
.term-bar span { width:12px; height:12px; border-radius:50%; }
.term-bar .r { background:#f87171; } .term-bar .y { background:#fbbf24; } .term-bar .g { background:var(--green); }
.term-bar em { margin-left:12px; font-size:12px; font-style:normal; color:var(--muted); }
.term-body { padding:20px 22px; font-family:ui-monospace,'SF Mono',monospace; font-size:13px; line-height:2; min-height:172px; }
.term-body .cmd { color:var(--txt); }
.term-body .cmd::before { content:'$ '; color:var(--green); }
.term-body .out { color:var(--muted); }
.term-line { opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s; }
.term-line.in { opacity:1; transform:none; }
.term-cursor { display:inline-block; width:8px; height:15px; background:var(--green); vertical-align:-2px;
  animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ---- correctif responsive bento (3 tuiles visibles) ---- */
@media (max-width: 860px) {
  .bento .b-1 { grid-column: auto !important; }
  .bento { grid-template-columns: 1fr !important; grid-auto-rows: 210px !important; }
  .bento .b-tag { position: absolute; top: 12px; left: 12px; }
  .bento .b-inner { position: absolute; bottom: 12px; left: 14px; right: 14px; }
  .bento .b-inner h3 { font-size: 1rem; margin: 0 0 4px; }
  .bento .b-inner p { font-size: .8rem; margin: 0; }
}

/* ---- full-bleed split apres processus ---- */
.split-fb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  position: relative;
  background: transparent;
}
.split-fb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(167,139,250,.12));
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.split-fb-img {
  clip-path: polygon(0 0, 100% 0, calc(100% - 70px) 100%, 0 100%);
}
.split-fb-txt {
  clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #101b2f 30%, #1e3a5f 100%);
}
.split-fb-img {
  position: relative;
  overflow: hidden;
}
.split-fb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .5;
  filter: saturate(.9) contrast(1.05);
}
.split-fb-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,18,32,.25) 0%, transparent 45%);
  pointer-events: none;
}
.split-fb-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px 48px 96px;
}
.split-fb-txt h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 16px;
  color: #e8edf5;
}
.split-fb-txt p {
  font-size: 1.08rem;
  color: #b6c2d4;
  margin: 0;
  max-width: 40ch;
}
.split-fb-ligne {
  width: 64px;
  height: 3px;
  margin-top: 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
}
.split-fb-ligne i { display: none; }
@media (max-width: 760px) {
  .split-fb { grid-template-columns: 1fr; min-height: 0; }
  .split-fb::before { display: none; }
  .split-fb-img { height: 240px; clip-path: none; }
  .split-fb-txt { padding: 34px 24px 44px; clip-path: none; }
}