:root{--gold:#FFD700;--mid:#0A1D37;--sand:#D2A679;--terra:#CC7351;}
body{font-family:Arial,Helvetica,sans-serif;margin:0;color:var(--mid);}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--mid);color:white;}
.logo{font-weight:700;font-size:20px;color:var(--gold);}
.container{padding:24px;max-width:1000px;margin:0 auto;}
.hero{display:flex;gap:16px;align-items:center;}
.video-wrap, .photo{flex:1;}
.video-wrap video, .video-wrap iframe{width:100%;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.photo img{width:100%;border-radius:12px;}
.order{margin-top:20px;background:white;padding:16px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.08);}
.order-form {
    background: #ffffff;
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    margin-top: 15px;
}

/* Titre du formulaire si tu veux en ajouter plus tard */
.order-form h2 {
    font-size: 20px;
    font-weight: 700;
    color: #0A1D37;
    margin-bottom: 12px;
    text-align: center;
}

/* Labels */
.order-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #0A1D37;
}

/* Inputs + textarea */
.order-form input,
.order-form textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #E7EAF3;
    border-radius: 10px;
    background: #F7F8FB;
    font-size: 15px;
    transition: 0.25s ease-in-out;
}

/* Placeholder pro */
.order-form input::placeholder,
.order-form textarea::placeholder {
    color: #8D96A8;
}

/* Focus animation bleu/or */
.order-form input:focus,
.order-form textarea:focus {
    border-color: #FFD700;
    background: #fff;
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
}

/* Bouton */
.order-form .btn {
    width: 100%;
    padding: 12px;
    background: #FFD700;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    color: #0A1D37;
}

/* Hover bouton */
.order-form .btn:hover {
    background: #ffcc00;
    box-shadow: 0 4px 12px rgba(255,215,0,0.36);
    transform: translateY(-2px);
}

.btn{background:var(--gold);border:none;padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer;color:var(--mid);}
.alert{padding:10px;background:#e9f7ef;border:1px solid #cfead8;border-radius:6px;margin-bottom:10px;}
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--mid);color:white;}
.admin-wrap{padding:20px;max-width:1100px;margin:0 auto;}
.card{background:white;padding:12px;border-radius:10px;margin-bottom:14px;}
.orders{width:100%;border-collapse:collapse;}
.orders th,.orders td{padding:8px;border-bottom:1px solid #eee;text-align:left;font-size:13px;}
.admin-login{max-width:400px;margin:40px auto;padding:20px;border-radius:8px;background:white;}
/* Style du texte */
.video-side-note .note-text {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
}

/* Flèche clignotante + plus grande */
.video-side-note .note-text .arrow {
    font-size: 42px; /* Taille de la flèche */
    animation: flash 1s infinite ease-in-out;
    display: inline-block;
}

/* Animation clignotante */
@keyframes flash {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}


