/*
Theme Name: Demouss
Theme URI: https://demouss.com
Author: Demouss
Description: Thème vitrine Demouss par drone
Version: 1.0
*/


    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      min-height: 100vh;
      background-color: #42b0ff;
      background-attachment: fixed;
      display: flex;
      justify-content: center;
      align-items: stretch;
      color: #111;
      overflow-x: hidden;
      position: relative;
    }

    a { color: #0057c7; }

    /* ---------- NUAGES (IMAGES + ANIMATIONS) ---------- */

    .cloud {
      position: fixed;
      z-index: 1;
      pointer-events: none;
      opacity: 0.95;
    }

    .cloud img {
      display: block;
      width: 220px;
      height: auto;
    }

    .cloud-small img {
      width: 160px;
    }

    .cloud-left-top  { top: 10%; left: -120px;  animation: cloud-right 70s linear infinite alternate; }
    .cloud-right-top { top: 16%; right: -140px; animation: cloud-left  80s linear infinite alternate; }
    .cloud-left-bottom { bottom: 18%; left: -130px; animation: cloud-right 90s linear infinite alternate; }
    .cloud-right-mid { top: 48%; right: -150px; animation: cloud-left 65s linear infinite alternate; }

    @keyframes cloud-right {
      from { transform: translateX(0); }
      to   { transform: translateX(260px); }
    }

    @keyframes cloud-left {
      from { transform: translateX(0); }
      to   { transform: translateX(-260px); }
    }

    /* ---------- MAISONS ---------- */

    .house {
      position: fixed;
      bottom: -10px;
      z-index: 2;
      pointer-events: none;
    }

    .house img {
      display: block;
      height: 180px;
      width: auto;
    }

    .house-left { left: -30px; }
    .house-right { right: -30px; }

    /* ---------- WRAPPER ---------- */

    .page-wrapper {
      width: 100%;
      max-width: 960px;
      padding: 32px 16px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 3;
    }

    /* ---------- LOGO ---------- */

    .logo {
      text-align: center;
      margin-bottom: 40px;
    }

    .logo-title {
      font-size: 2.3rem;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .logo-title span { color: #ffffff; }

    .logo-subtitle {
      margin-top: -5px;
      font-size: 1.28rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: normal;
    }

    /* ---------- CARTE BLANCHE ---------- */

    .card {
      width: 100%;
      max-width: 720px;
      background: #ffffff;
      border-radius: 28px;
      padding: 32px 32px 28px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.23);
    }

    .section {
      margin-bottom: 24px;
    }

    .section:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-weight: 700;
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }

    .section p {
      line-height: 1.5;
      margin-bottom: 4px;
    }

    /* ---------- CONTACT ---------- */

    .contact-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 4px;
    }

    .contact-icon {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      flex: 0 0 auto;
    }

    .contact-icon img {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* fallback simple si pas d'image */
    .contact-icon.fallback {
      border-radius: 999px;
      background: #f4b25c;
    }

    /* ---------- AVANT / APRÈS ---------- */

    .before-after {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 10px;
    }

    .ba-item {
      text-align: center;
    }

    .ba-item img {
      width: 100%;
      border-radius: 14px;
      display: block;
      object-fit: cover;
    }

    .ba-label {
      margin-top: 4px;
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.08em;
    }

.video-wrapper video{
width:100%;
border-radius:18px;
margin-top:10px;
background: #42b0ff;
}

    /* ---------- DRONE ---------- */

    .drone {
      margin-top: 10px;
      display: flex;
      justify-content: center;
    }

    .drone img {
      max-width: 260px;
      width: 100%;
      height: auto;
      display: block;
    }

.drone-on-house {
  position: absolute;
  width: 120px;
  right: 55px;      /* ajuste horizontalement sur le toit */
  bottom: 115px;    /* ajuste verticalement sur le toit */
  pointer-events: none;
}


    /* ---------- FOOTER ---------- */

    footer {
      margin-top: 30px;
      text-align: center;
      font-size: 0.85rem;
      color: #f0f7ff;
      text-shadow: 0 2px 5px rgba(0,0,0,0.6);
      z-index: 3;
    }

    /* ---------- RESPONSIVE ---------- */

    @media (max-width: 768px) {
      .card {
        padding: 24px 18px 22px;
        border-radius: 22px;
      }

      .before-after {
        grid-template-columns: 1fr;
      }

      .house img {
        height: 180px;
      }
    }

    @media (max-width: 480px) {
      .page-wrapper {
        padding-top: 22px;
      }

      .logo-title {
        letter-spacing: 0.08em;
      }

      .house img {
        height: 150px;
      }
  .drone-on-house {
    width: 95px;
    right: 40px;
    bottom: 95px;
  }
    }