/* Add here all your css styles (customizations) */
:root {
  /* Couleurs principales */
  --primary: #7C3AED;        /* Violet moderne (remplace #a524a3) */
  --primary-dark: #5B21B6;   /* Violet foncé */
  --primary-light: #A78BFA;  /* Violet clair */
  
  /* Couleurs secondaires */
  --secondary: #10B981;      /* Vert menthe (call-to-action) */
  --accent: #F59E0B;         /* Orange (highlights) */
  
  /* Neutres */
  --dark: #1F2937;           /* Gris foncé moderne */
  --gray: #6B7280;           /* Gris moyen */
  --light: #F9FAFB;          /* Gris très clair */
  --white: #FFFFFF;
  
  /* Typographie */
  --text-primary: #111827;
  --text-secondary: #6B7280;
}

/* Remplacer les Google Fonts actuelles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@700;800&display=swap');

body {
  font-family: 'Inter', sans-serif !important; /* Remplace Open Sans */
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif !important; /* Remplace Raleway */
  font-weight: 700;
  line-height: 1.2;
}

/* Titres plus aérés */
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  padding: 14px 32px;
  border-radius: 12px !important; /* Coins arrondis modernes */
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.service-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
}

.service-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
    height:500px;
}


@media (min-width: 575px) {
    .map-responsive {
        display: none !important;
    }
    .map-desktop{
        display: block !important;
    }

    .gmap_canvas {
        width: 1920px !important;
        height: 500px !important;
    }

    .maprouter-desktop{
        margin-bottom: -21.5rem !important;
    }
}


@media (max-width: 575px) {
    .map-container {
    height: 400px;
    width: 100%;
    }

    @media (min-width: 768px) {
    .map-container {
        height: 500px;
    }
    }

    .maprouter-desktop{
        display: none !important;
    }
    .map-desktop{
        display: none !important;
    }

    .maprouter-responsive{
        margin-top: 0rem !important;
        margin-bottom: 2rem;
        margin-left: -1rem;
    }

    .map-responsive {
        overflow:hidden;
        padding-bottom:56.25%;
        position:relative;
        height:0;
        margin-left: 1.5rem;
        margin-bottom: 2rem;
    }
    .map-responsive iframe {
        left:0;
        top:0;
        height:100%;
        width:100%;
        position:absolute;
    }
}