/** * Styles des messages de formulaire - Born to Clean * @package Born_To_Clean * @version 1.1.0 */  /* ============================================================ MESSAGES DE FORMULAIRE ============================================================ */  .form-message{ display:none; align-items:center; gap:12px; padding:16px 20px; border-radius:12px; margin:20px 0; font-size:15px; line-height:1.5; opacity:0; transform:translateY(-10px); transition:opacity 0.3s ease,transform 0.3s ease;}  .form-message-visible{ opacity:1; transform:translateY(0);}  .form-message-icon{ width:24px; height:24px; flex-shrink:0;}  .form-message-text{ flex:1; font-weight:500;}   .form-message-success{ background:linear-gradient(135deg,#d4edda 0%,#c3e6cb 100%); border:1px solid #28a745; color:#155724; box-shadow:0 4px 15px rgba(40,167,69,0.2);}  .form-message-success .form-message-icon{ color:#28a745;}   .form-message-error{ background:linear-gradient(135deg,#f8d7da 0%,#f5c6cb 100%); border:1px solid #dc3545; color:#721c24; box-shadow:0 4px 15px rgba(220,53,69,0.2);}  .form-message-error .form-message-icon{ color:#dc3545;}   .form-message-warning{ background:linear-gradient(135deg,#fff3cd 0%,#ffeeba 100%); border:1px solid #ffc107; color:#856404; box-shadow:0 4px 15px rgba(255,193,7,0.2);}   .form-message-info{ background:linear-gradient(135deg,#d1ecf1 0%,#bee5eb 100%); border:1px solid #17a2b8; color:#0c5460; box-shadow:0 4px 15px rgba(23,162,184,0.2);}  /* ============================================================ ANIMATION D'ENTRÉE ============================================================ */  @keyframes messageSlideIn{ 0%{ opacity:0; transform:translateY(-20px) scale(0.95);} 100%{ opacity:1; transform:translateY(0) scale(1);}}  .form-message-visible{ animation:messageSlideIn 0.4s ease-out forwards;}   @keyframes checkmarkDraw{ 0%{ stroke-dashoffset:100;} 100%{ stroke-dashoffset:0;}}  .form-message-success .form-message-icon path, .form-message-success .form-message-icon polyline{ stroke-dasharray:100; animation:checkmarkDraw 0.6s ease-out 0.2s forwards;}  /* ============================================================ VALIDATION DES CHAMPS ============================================================ */  .form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid{ border-color:#dc3545 !important; background-color:#fff8f8;}  .form-input.is-invalid:focus, .form-select.is-invalid:focus, .form-textarea.is-invalid:focus, input.is-invalid:focus, select.is-invalid:focus, textarea.is-invalid:focus{ border-color:#dc3545 !important; box-shadow:0 0 0 3px rgba(220,53,69,0.15);}  .field-error{ color:#dc3545; font-size:13px; margin-top:6px; display:flex; align-items:center; gap:6px;}  .field-error::before{ content:''; display:inline-block; width:14px; height:14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc3545' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); background-size:contain; flex-shrink:0;}  /* ============================================================ ÉTAT DE CHARGEMENT ============================================================ */  .btn.is-loading, button.is-loading{ position:relative; color:transparent !important; pointer-events:none;}  .btn.is-loading::after, button.is-loading::after{ content:''; position:absolute; width:20px; height:20px; top:50%; left:50%; margin-left:-10px; margin-top:-10px; border:2px solid rgba(255,255,255,0.3); border-top-color:#ffffff; border-radius:50%; animation:btn-spinner 0.8s linear infinite;}  @keyframes btn-spinner{ to{ transform:rotate(360deg);}}  /* ============================================================ RECAPTCHA NOTICE ============================================================ */  .recaptcha-notice{ font-size:11px; color:var(--color-text-light,#6c757d); margin-top:var(--spacing-sm,8px); text-align:center;}  .recaptcha-notice a{ color:var(--color-primary,#1E4B92); text-decoration:none;}  .recaptcha-notice a:hover{ text-decoration:underline;}  /* ============================================================ HONEYPOT (doit rester invisible) ============================================================ */  [name="website_url"]{ position:absolute !important; left:-9999px !important; top:-9999px !important; opacity:0 !important; pointer-events:none !important;}  /* ============================================================ STYLES SPÉCIFIQUES AU HERO FORM ============================================================ */  .hero-form .form-message{ margin:15px 0; border-radius:10px;}  .hero-card .form-message-success{ background:linear-gradient(135deg,rgba(40,167,69,0.15) 0%,rgba(40,167,69,0.1) 100%); border:2px solid #28a745;}  /* ============================================================ STYLES SPÉCIFIQUES AU POPUP DEVIS ============================================================ */  .popup-body .form-message{ margin:0 0 20px 0;}  /* ============================================================ RESPONSIVE ============================================================ */  @media (max-width:768px){ .form-message{ padding:14px 16px; font-size:14px; gap:10px; margin:15px 0;}  .form-message-icon{ width:20px; height:20px;}  .field-error{ font-size:12px;}}  @media (max-width:480px){ .form-message{ flex-direction:column; text-align:center; padding:16px;}  .form-message-icon{ width:32px; height:32px;}}