/* Conteneur principal */ #formulaire { background: linear-gradient(135deg, #b30000, #006400); padding: 25px; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); max-width: 650px; margin: 30px auto; font-family: "Segoe UI", "Poppins", sans-serif; color: #fff; } /* Disposition GRID */ .champdunum { display: grid; grid-template-columns: 1fr auto; /* input prend tout, bouton juste sa taille */ gap: 12px; } .champdunum .num { padding: 14px 16px; font-size: 1rem; border-radius: 10px; border: none; outline: none; background: #fff; color: #222; transition: box-shadow 0.3s, transform 0.2s; width: auto; } .champdunum .num:focus { box-shadow: 0 0 0 3px #ffd700; transform: scale(1.02); } .champdunum .submit { background: linear-gradient(135deg, #ff0000, #cc0000); color: white; border: none; border-radius: 10px; padding: 14px 24px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: transform 0.2s, background 0.3s; white-space: nowrap; /* évite que le texte se coupe */ } .champdunum .submit:hover { background: linear-gradient(135deg, #cc0000, #a00000); transform: translateY(-2px); } /* Zone des résultats (masquée par défaut) */ #pnoel-resultats { margin-top: 20px; padding: 15px; background: rgba(255, 255, 255, 0.15); border-radius: 12px; } /* Liens de téléchargement */ #pnoel-resultats .downloadbutton { display: block; margin: 10px 0; padding: 12px 18px; background: #006400; color: #fff; text-align: center; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background 0.3s, transform 0.2s; } #pnoel-resultats .downloadbutton:hover { background: #228b22; transform: scale(1.03); } /* Responsive : passe en une colonne sous 768px */ @media (max-width: 768px) { .champdunum { grid-template-columns: 1fr; /* input et bouton l’un en dessous de l’autre */ } .champdunum .submit { width: 100%; /* bouton prend toute la largeur en mobile */ } }
.callcard { background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }