section#contact { padding: 70px 0; text-align: center; } .contact-container { max-width: 520px; margin: 44px auto 0 auto; background: var(--card-bg) !important; border-radius: 20px; box-shadow: 0 4px 18px var(--shadow-color) !important; padding: 42px 25px 36px 25px; border: 1px solid var(--card-border) !important; color: var(--text-primary) !important; } .contact-mode-switch { display: inline-flex; width: 100%; gap: 6px; padding: 6px; border-radius: 16px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); margin-bottom: 22px; } .contact-tab { flex: 1; border: none; border-radius: 12px; padding: 12px 10px; font-weight: 900; cursor: pointer; background: transparent; color: var(--text-muted); transition: transform .11s cubic-bezier(.24,.92,.57,1.32), background .18s, color .18s; } .contact-tab.is-active { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 2px 9px var(--primary-dark)25; } .contact-tab:active { transform: scale(0.98); } .contact-panels { position: relative; transition: height .22s ease; } .contact-panel { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } .contact-panel.is-active { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity .22s ease, transform .22s ease; } h2 { color: var(--primary) !important; font-size: 2.2em; margin-top: 0; margin-bottom: 22px; text-align: center; font-weight: 900; letter-spacing: 0.3px; } .contact-form-subtitle { display: inline-block; margin-top: 6px; font-size: 0.72em; font-weight: 700; color: var(--text-muted); } .contact-label { display: block; font-weight: 700; margin-bottom: 8px; margin-top: 20px; text-align: left; color: var(--text-primary) !important; } .contact-input, .contact-select, .contact-textarea { width: 100%; padding: 12px; border-radius: 9px; border: 1.5px solid var(--primary) !important; background: var(--input-bg, #101b2b) !important; color: var(--input-text, var(--text-primary)) !important; font-size: 1.07em; margin-bottom: 12px; font-weight: 600; outline: none; resize: none; box-sizing: border-box; transition: border .18s; } .contact-input.is-invalid, .contact-select.is-invalid, .contact-textarea.is-invalid { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent) !important; } .contact-input[aria-invalid="true"], .contact-select[aria-invalid="true"], .contact-textarea[aria-invalid="true"] { border-color: var(--danger) !important; } .contact-input:focus, .contact-select:focus, .contact-textarea:focus { border-color: var(--primary) !important; background: var(--input-bg-focus, #16243c) !important; color: var(--input-text, var(--text-primary)) !important; } .contact-select { appearance: none; } .contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-row > div { width: 100%; } .contact-other { margin-top: 2px; } .contact-checkbox { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; margin-top: 18px; text-align: left; color: var(--text-muted); font-weight: 600; } .contact-checkbox input[type="checkbox"] { margin-top: 2px; } .contact-cgu-link { color: var(--primary); text-decoration: underline; } .contact-btn { width: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%) !important; color: #fff !important; border: none; border-radius: 16px; padding: 14px 0; font-size: 1.13em; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px var(--primary)44 !important; margin-top: 24px; position: relative; overflow: hidden; transition: transform .11s cubic-bezier(.24,.92,.57,1.32), box-shadow .22s ease; } .contact-btn::before { content: ""; position: absolute; inset: -60%; background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.38), transparent 56%); opacity: 0; transform: translateX(-10%) translateY(-8%) scale(0.96); transition: opacity .22s ease, transform .35s ease; pointer-events: none; } .contact-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--primary)33 !important; } .contact-btn:hover::before { opacity: 1; transform: translateX(0) translateY(0) scale(1); } .contact-btn:active { transform: scale(0.97); } #contact-cicd-form .contact-btn { background: linear-gradient(90deg, #1ec676 0%, #14b862 100%) !important; box-shadow: 0 6px 18px rgba(30, 198, 118, 0.35) !important; } #contact-cicd-form .contact-btn:hover { box-shadow: 0 10px 24px rgba(30, 198, 118, 0.32) !important; } .contact-info { margin-top: 16px; color: var(--primary) !important; font-size: 1.07em; min-height: 22px; text-align: center; white-space: pre-line; } @media (max-width:520px) { .contact-container { max-width: 98vw; padding: 7vw 2vw; } h2 { font-size: 1.35em; } } @media (max-width: 520px) { .contact-row { grid-template-columns: 1fr; } }