@import url('https://fonts.googleapis.com/css2?family=Georgia&display=swap');

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

  html,body{
    width:100%; height:100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background:#ffffff;
    color:#6e6d6d;
  }

  body{
    display:flex;
    flex-direction:column;
  }

  .page{
    display:flex;
    width:100%;
    flex:1 1 auto;
    min-height:0;
    background:#ffffff;
  }

  /* LEFT — product image */
  .media{
    flex:1 1 49%;
    background: #ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
  }
  .media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* RIGHT — info panel */
  .panel{
    flex:1 1 51%;
    background:#ffffff;
    padding: 40px 72px 48px 72px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
  }

  .content{
    display:flex;
    flex-direction:column;
    flex:1;
  }

  /* HEADER — bandeau blanc pleine largeur, logo centré */
  .site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    background:#ffffff;
    padding: 22px 48px;
    border-bottom: 1px solid #e7e3d9;
  }

  .site-nav{
    flex: 1 1 0;
    display:flex;
  }
  .site-nav-left{ justify-content:flex-start; }
  .site-nav-right{ justify-content:flex-end; }

  .site-nav-link{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color:#6e6d6d;
    text-decoration:none;
    transition: color 0.2s ease;
  }
  .site-nav-link:hover{ color:#111; }

  .site-header-logo{
    flex: 0 1 auto;
    display:flex;
    justify-content:center;
  }
  .site-logo{
    display:block;
    width:100%;
    max-width: 240px;
    height:auto;
  }

  /* Mini-menu mobile (masqué sur ordinateur) */
  .mobile-menu-bar{
    display:none;
  }
  .menu-bar-icon{
    position:relative;
    display:inline-block;
    width:22px;
    height:12px;
    flex-shrink:0;
  }
  .menu-bar-icon::before,
  .menu-bar-icon::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:#6e6d6d;
  }
  .menu-bar-icon::before{ top:0; }
  .menu-bar-icon::after{ bottom:0; }

  .mobile-menu-links{
    display:flex;
    align-items:center;
    gap: 8px;
  }
  .mobile-menu-links .site-nav-link{
    font-size: 11px;
    letter-spacing: 1px;
  }
  .mobile-menu-links .menu-sep{
    color:#c7c1b1;
    font-size: 11px;
  }

  /* Les deux états (compte à rebours / annonce eBay) partagent le même
     emplacement : un seul est visible à la fois (l'autre reçoit
     style="display:none" côté serveur, voir index.php). */
  .fb-state{ animation: fbFadeIn 0.4s ease; }
  @keyframes fbFadeIn{ from{ opacity:0; } to{ opacity:1; } }

  /* ÉTAT 1 — compte à rebours + inscription par e-mail */
  .headline{
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 52px;
    line-height: 1.18;
    color:#6e6d6d;
    max-width: 640px;
  }

  .countdown{
    display:flex;
    gap: 14px;
    margin-top: 30px;
  }
  .cd-box{
    border:1px solid #a7a094;
    background: #f4f2ec;
    padding: 10px 20px 10px 20px;
    text-align:center;
    min-width: 78px;
  }
  .cd-num{
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 40px;
    line-height:1;
    color:#6e6d6d;
  }
  .cd-label{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color:#333;
    margin-top: 4px;
  }

  .signup{
    display:flex;
    gap: 14px;
    margin-top: 34px;
    max-width: 640px;
  }
  .email-wrap{
    flex:1;
    display:flex;
    align-items:center;
    border:1px solid #a7a094;
    background:#f4f2ec;
    padding: 0 16px;
  }
  .email-wrap svg{
    flex-shrink:0;
    margin-right: 10px;
    opacity:0.6;
  }
  .email-wrap input{
    border:none;
    background:transparent;
    outline:none;
    width:100%;
    padding: 15px 0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color:#6e6d6d;
  }
  .email-wrap input::placeholder{ color:#7a7568; }

  .notify-btn{
    background:#111;
    color:#fff;
    border:none;
    padding: 0 26px;
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-weight:600;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor:pointer;
    white-space:nowrap;
    transition: background 0.2s ease;
  }
  .notify-btn:hover{ background:#2a2a2a; }
  .notify-btn:disabled{ background:#555; cursor:default; }

  .status-msg{
    margin-top: 14px;
    font-size: 13px;
    font-family: Arial, sans-serif;
    min-height: 18px;
  }
  .status-msg.ok{ color:#2e6b34; }
  .status-msg.err{ color:#a02323; }

  [dir="rtl"] .countdown{ direction: ltr; }
  [dir="rtl"] .cd-box{ direction: ltr; }

  /* ÉTAT 2 — annonce eBay en direct */
  .product-title{
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.3;
    color:#6e6d6d;
    max-width: 620px;
  }

  .product-title-pre{
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.4;
    color:#6e6d6d;
    max-width: 640px;
    margin-bottom: 18px;
    text-transform: uppercase;
  }

  .ebay-widget{
    margin-top: 20px;
    padding: 20px 24px;
    max-width: 640px;
    border:1px solid #a7a094;
    background: #f4f2ec;
  }
  .ebay-widget-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 20px;
  }
  .ebay-widget-label{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    letter-spacing: 0.5px;
    color:#555;
    text-transform:uppercase;
  }
  .ebay-price{
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    color:#6e6d6d;
    line-height:1.2;
    margin-top: 2px;
  }
  .ebay-widget-bids{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    color:#666;
    margin-top: 2px;
  }
  .ebay-widget-countdown-block{
    text-align:right;
    flex-shrink:0;
  }
  .ebay-countdown{
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 22px;
    color:#6e6d6d;
    margin-top: 2px;
    white-space:nowrap;
  }
  .ebay-widget-badges{
    display:flex;
    flex-wrap:wrap;
    gap: 8px;
    margin-top: 16px;
  }
  .ebay-badge{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.3px;
    color:#3d3a33;
    border:1px solid #c7c1b1;
    background:#fff;
    padding: 5px 10px;
  }
  .ebay-widget-delivery{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    color:#444;
    margin-top: 12px;
  }
  .ebay-bid-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0064d2;
    color:#fff;
    text-decoration:none;
    border:none;
    padding: 16px 24px;
    margin-top: 18px;
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-weight:600;
    font-size: 13px;
    letter-spacing: 0.5px;
    white-space:nowrap;
    cursor:pointer;
    transition: background 0.2s ease;
  }
  .ebay-bid-btn:hover{ background:#004f9e; }

  /* Éléments partagés par les deux états */
  .description{
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 15px;
    line-height:1.55;
    color:#6e6d6d;
    margin-top: 26px;
    max-width: 620px;
  }

  .footer{
    margin-top: auto;
    padding-top: 40px;
    text-align:center;
    font-size: 12px;
    color:#7a756a;
    font-family: Arial, sans-serif;
  }

  @media (max-width: 900px){
    /* En-tête mobile : logo seul, centré, nav texte masquée
       (remplacée par le mini-menu ci-dessous) */
    .site-header{ padding: 16px 20px; justify-content:center; border-bottom:none; }
    .site-nav{ display:none; }
    .site-logo{ max-width: 210px; }

    /* Mini-menu : liens seuls, sobres, affichés entre le logo et la
       photo du produit — sans icônes ni ligne de séparation */
    .mobile-menu-bar{
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 4px 20px 18px;
      background:#ffffff;
    }

    .page{ flex-direction: column; }

    /* Dissocie le titre/slogan du reste du panneau afin de pouvoir
       les repositionner au-dessus de la photo, indépendamment du
       reste du texte qui doit rester après la photo. */
    .panel{ display:contents; }
    .media{ order:0; min-height: 50vh; }
    .content{ order:1; padding: 20px 28px 32px 28px; }

    /* Les conteneurs d'état deviennent "transparents" pour le flex de
       .content : leurs enfants (headline/countdown/signup d'un côté,
       product-title/ebay-widget de l'autre) héritent directement des
       règles d'ordre ci-dessous, exactement comme s'ils étaient au
       même niveau que .description et .footer. */
    .fb-state{ display:contents; }

    .headline{ font-size: 34px; order:1; }

    /* Ordre demandé : titre → inscription email → chrono compact → description */
    .signup{ order:2; margin-top: 22px; flex-direction: column; }
    .status-msg{ order:3; }
    .countdown{ order:4; }
    .description{ order:5; margin-top: 18px; }
    .footer{ order:6; }

    /* Chrono resserré sur une seule ligne */
    .countdown{
      flex-wrap: nowrap;
      gap: 6px;
      margin-top: 16px;
    }
    .cd-box{
      flex:1 1 0;
      min-width: 0;
      padding: 6px 2px;
    }
    .cd-num{ font-size: 18px; }
    .cd-label{ font-size: 8px; letter-spacing: 0.3px; }

    .notify-btn{ padding: 15px 0; }

    /* Annonce eBay : titre → widget → description → footer */
    .product-title{ margin-top: 0; }
    .ebay-widget{
      margin-top: 22px;
      padding: 16px 18px;
    }
    .ebay-widget-top{
      flex-direction:column;
      gap: 12px;
    }
    .ebay-widget-countdown-block{
      text-align:left;
    }
    .ebay-bid-btn{
      padding: 15px 0;
    }
  }