/* Variables CSS MediCare */
:root {
    --primary-color: #38bdf8;
    --secondary-color: #0ea5e9;
    --success-color: #10b981;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f8fafc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { position: relative; overflow-x: hidden; }

/* ── NAV ── */
nav { position: relative; z-index: 9999 !important; background: white !important; }

@media (min-width: 640px) {
    nav .hidden.sm\:flex,
    nav .hidden.sm\:ml-6 { display: flex !important; }
    nav .sm\:flex { display: flex !important; visibility: visible !important; opacity: 1 !important; }
    nav .sm\:flex a { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
    nav .sm\:items-center { display: flex !important; visibility: visible !important; opacity: 1 !important; }
    nav .sm\:items-center a { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
    #mobile-menu-button { display: none !important; }
    #mobile-menu { display: none !important; }
}

/* ── PARTICULES BACKGROUND ── */
.medical-particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.particle { position: absolute; font-size: 1.5rem; color: rgba(56,189,248,.35); animation: float 20s infinite; }
@keyframes float {
    0%,100% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: .3; }
    90% { opacity: .3; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* ── ICÔNES HERO ── */
.medical-icon-float { position: absolute; color: white; animation: floatMedical 6s ease-in-out infinite; z-index: 1; }
.bg-gradient-to-r { position: relative; z-index: 1; }
@keyframes floatMedical {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* ── CARTES DE CONTACT ── */
.contact-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.5rem; background: white; border-radius: 16px; border: 2px solid #e5e7eb; transition: all .3s ease; cursor: pointer; }
.contact-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(56,189,248,.15); border-color: var(--primary-color); }

.icon-wrapper { width: 60px; height: 60px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; flex-shrink: 0; position: relative; overflow: hidden; }
.icon-wrapper::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,.3); transform:translate(-50%,-50%); transition:width .6s,height .6s; }
.contact-card:hover .icon-wrapper::before { width:120px; height:120px; }
.email-icon    { background: linear-gradient(135deg, #10b981, #059669); }
.address-icon  { background: linear-gradient(135deg, #ec4899, #db2777); }
.schedule-icon { background: linear-gradient(135deg, #f59e0b, #d97706); }
.icon-wrapper i { position: relative; z-index: 1; animation: iconBounce 2s ease-in-out infinite; }
@keyframes iconBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* ── FORMULAIRE ── */
.form-container { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.08); border: 2px solid transparent; transition: all .3s ease; }
.form-container:hover { border-color: var(--primary-color); box-shadow: 0 8px 30px rgba(56,189,248,.15); }

.form-group { position: relative; }
.form-label { display: block; margin-bottom: .5rem; font-weight: 600; color: var(--text-dark); font-size: .95rem; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 1rem; color: var(--text-light); transition: all .3s ease; pointer-events: none; }

.form-input,
.form-textarea { width: 100%; padding: .875rem 1rem .875rem 3rem; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 1rem; transition: all .3s ease; background: var(--bg-light); color: var(--text-dark); font-family: inherit; }
.form-input:focus,
.form-textarea:focus { outline: none; border-color: var(--primary-color); background: white; box-shadow: 0 0 0 4px rgba(56,189,248,.1); }
.form-textarea { padding-left: 1rem; resize: vertical; min-height: 120px; }

select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 3rem; }

/* ── VALIDATION ── */
.validation-message { display: block; font-size: .85rem; margin-top: .5rem; min-height: 1.25rem; transition: all .3s ease; }
.form-group.valid  .form-input,
.form-group.valid  .form-textarea  { border-color: var(--success-color); background: rgba(16,185,129,.05); }
.form-group.valid  .validation-message { color: var(--success-color); }
.form-group.valid  .validation-message::before { content: '✓ '; font-weight: bold; }
.form-group.invalid .form-input,
.form-group.invalid .form-textarea { border-color: var(--error-color); background: rgba(239,68,68,.05); animation: shake .4s ease; }
.form-group.invalid .validation-message { color: var(--error-color); }
.form-group.invalid .validation-message::before { content: '⚠ '; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }

/* ── COMPTEUR ── */
.character-count { font-size: .85rem; color: var(--text-light); font-weight: 500; }
#char-count { color: var(--primary-color); font-weight: 700; }
.character-count.warning { color: var(--warning-color); }
.character-count.danger  { color: var(--error-color); }

/* ── BOUTONS ── */
.submit-button,
.cancel-button { width: 100%; padding: 1rem 2rem; border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden; font-family: inherit; }
.submit-button { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; box-shadow: 0 4px 15px rgba(56,189,248,.3); }
.cancel-button { background: white; color: var(--text-dark); border: 2px solid #e5e7eb; }
.submit-button::before,
.cancel-button::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255,255,255,.3); transform:translate(-50%,-50%); transition:width .6s,height .6s; }
.submit-button:hover::before,
.cancel-button:hover::before { width:300px; height:300px; }
.submit-button:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(56,189,248,.4); }
.cancel-button:hover  { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); border-color: #cbd5e1; }
.submit-button.loading { pointer-events: none; opacity: .8; }
.btn-text, .btn-loader { position: relative; z-index: 1; }

/* ── MODAL ── */
.modal-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; transition:opacity .3s ease; }
.modal-overlay.show { opacity: 1; }
.modal-content { background: white; padding: 3rem 2rem; border-radius: 24px; text-align: center; max-width: 500px; width: 90%; transform: scale(.8); transition: transform .3s ease; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-overlay.show .modal-content { transform: scale(1); }
.success-animation { margin-bottom: 2rem; }
.checkmark { width: 80px; height: 80px; margin: 0 auto; }
.checkmark-circle { stroke-dasharray:166; stroke-dashoffset:166; stroke-width:2; stroke-miterlimit:10; stroke:var(--success-color); fill:none; animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards; }
.checkmark-check  { transform-origin:50% 50%; stroke-dasharray:48; stroke-dashoffset:48; stroke-width:3; stroke:var(--success-color); animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards; }
@keyframes stroke { 100%{ stroke-dashoffset:0; } }
.modal-close-btn { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border: none; padding: .875rem 2.5rem; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all .3s ease; font-size: 1rem; font-family: inherit; }
.modal-close-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(56,189,248,.4); }

/* ── FOOTER PARTICLES ── */
.footer-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; opacity: .20; }
.footer-particles .footer-particle { position: absolute; color: rgba(56,189,248,.75); animation: footerFloat 9s ease-in-out infinite; }
@keyframes footerFloat { 0%,100%{transform:translateY(0) rotate(0deg);opacity:.15} 50%{transform:translateY(-22px) rotate(-8deg);opacity:.45} }

/* ── UTILITAIRES ── */
.hidden { display: none !important; }
html { scroll-behavior: smooth; }

@media (max-width: 768px) {
    .form-container { padding: 1.5rem; }
    .contact-card { padding: 1rem; }
    .icon-wrapper { width: 50px; height: 50px; font-size: 1.25rem; }
    .modal-content { padding: 2rem 1.5rem; }
    .checkmark { width: 60px; height: 60px; }
}