:root {
      --text-main: #353535;
      --orange: #E85412;
      --blue: #b4e9ff;
      --dark-strip: #1A171B;
      --bg-page: #FFFFFF;
    }

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

    body {
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg-page);
      color: var(--text-main);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .coming-page {
      width: 100%;
    }

    .coming-layout {
      width: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      gap: 0;
      overflow: hidden;
      background: #ffffff;
    }

    /* Colonne gauche (texte) */
    .coming-left {
      padding: 56px 56px 48px;
      position: relative;
      display: flex; 
  flex-direction: column;  
  justify-content: center;
    }
    .top-logo{
      width: 177px;
      height: 50px;
    }

    /* Bande sombre + petit bloc orange/bleu comme sur le PDF */
    .top-strip {
      position: relative;
      width: 190px;
      height: 24px;
      border-radius: 12px;
      background: var(--dark-strip);
      margin-bottom: 40px;
      overflow: visible;
    }

    .top-strip::before,
    .top-strip::after {
      content: "";
      position: absolute;
      top: -18px;
      width: 28px;
      height: 36px;
      border-radius: 8px;
    }

    .top-strip::before {
      right: -18px;
      background: var(--orange);
      transform: rotate(-6deg);
    }

    .top-strip::after {
      right: 2px;
      background: #00A0DF; /* bleu un peu plus foncé pour effet comme dans le PDF */
      transform: rotate(4deg);
    }

    .coming-title {
      color: #353535;
      font-family: Inter;
      font-size: 65px;
      font-style: normal;
      font-weight: 900;
      line-height: 70px;
      text-transform: uppercase;
      margin-top: 40px;
      margin-bottom:20px;
    }

   

    .coming-text {
      font-size: 16px;
      line-height: 1.6;
      max-width: 600px;
      margin-bottom: 28px;
    }

    .coming-text + .coming-text {
      margin-top: -12px; /* léger chevauchement comme les blocs de texte proches dans le PDF */
    }

    /* Bouton avec fond orange derrière + pill blanche devant (comme sur le PDF) */
    .cta-wrapper {
      position: relative;
      display: inline-block;
      margin-top: 8px;
      margin-bottom: 12px;
    }


    .cta-btn {
      position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    z-index: 1;
    white-space: nowrap;
    background: var(--orange);
    }

   

    .cta-wrapper:hover .cta-btn {
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .cta-wrapper:hover .cta-bg {
      filter: brightness(0.95);
    }

    .coming-note {
      font-size: 13px;
      color: #7a7a7a;
      margin-top: 8px;
    }

    /* Colonne droite (fond bleu + illustration) */
    .coming-right {
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 32px;
    }

    /* Bloc illustration façon “image” centrée sur le panneau bleu */
    .illustration-card {
      width: 100%;
    
      aspect-ratio: 4 / 3;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .illustration-placeholder video{
      width:100%;
    }
    

    .illustration-placeholder {
      position: relative;
      z-index: 1;
      font-size: 14px;
      font-weight: 500;
      color: #999999;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .coming-layout {
        grid-template-columns: 1fr;
      }

      .coming-right {
        order: -1; /* l'illustration passe au-dessus sur mobile */
      }

      .coming-left {
        padding: 32px 24px 32px;
      }

      .coming-title {
        font-size: 36px;
        line-height: 40px;
      }

      .top-strip {
        margin-bottom: 28px;
      }
    }

    @media (max-width: 575px) {
      

      .coming-left {
        padding: 24px 18px 24px;
      }

      .coming-title {
        font-size: 30px;
        line-height: 40px;
      }

      .coming-text {
        font-size: 15px;
      }

      .cta-btn {
        padding: 11px 24px;
        font-size: 14px;
      }

      .cta-bg {
        inset: -6px -10px;
      }
    }