/* =============================================
   Base variables and global layout - Updated with Figma colors
   ============================================= */

/* ===== Updated Palette with Figma Colors ===== */
:root {
  --primary: #2d3281; /* Deep blue from Figma */
  --secondary: #37a7df; /* Light blue from Figma */
  --accent: #e84e23; /* Orange accent from Figma */
  --warning: #f1a601; /* Yellow from Figma */
  --danger: #fe5716; /* Red-orange from Figma */
  --dark: #333333; /* Dark gray from Figma */
  --light: #fafafa; /* Light background from Figma */
  --muted: #666666; /* Muted text from Figma */
  --border: #dadada; /* Light borders from Figma */
  --surface: #f1f1f1; /* Surface color from Figma */
  --text-muted: #949494; /* Muted text from Figma */

  /* Legacy variables for compatibility */
  --indigo: #2d3281; /* Updated to Figma primary */
  --sky: #37a7df; /* Updated to Figma secondary */
  --ink: #333333; /* Updated to Figma dark */
  --card-bd: #dadada; /* Updated to Figma border */
}

/* Added proper font family and improved global layout */
body {
  color: var(--dark);
  background-color: #ffffff;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

/* Improved container widths to reduce excessive side spacing */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-fluid {
  padding: 0 20px;
}

/* Keep page content separate from the header */
.header-aisla {
  position: relative;
  z-index: 50;
}
main,
.page-content,
.hero,
.page-hero {
  position: relative;
  z-index: 1;
}

/* Loading spinner overlay */
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 9999;
}
#spinner.show {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease-out;
}

/* Updated global text colors to use Figma palette */
.text-primary {
  color: var(--primary) !important;
}
.text-secondary {
  color: var(--secondary) !important;
}
.text-muted {
  color: var(--muted) !important;
}
.bg-primary {
  background-color: var(--primary) !important;
}
.bg-secondary {
  background-color: var(--secondary) !important;
}
.bg-light {
  background-color: var(--light) !important;
}
.team-card {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 15px;
}
.team-photo {
    position: relative;
    width: 300px;
    height: 300px;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.team-photo {
    position: relative;
    width: 300px;
    height: 300px;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* demi-cercle animé autour de l'image */
.team-photo .circle-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(#2e3192 0deg 180deg, transparent 180deg 360deg);
    pointer-events: none;

    /* création d’un cercle plus fin autour de l’image */
    mask-image: radial-gradient(circle 45%, black 100%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 45%, black 100%, transparent 100%);

    /* animation de rotation */
    animation: rotate-circle 2s linear infinite;
}

.clean-energy h2 {
  font-weight: 700;
}

.clean-energy ul li {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.clean-energy .quote {
  font-size: 1.1rem;
}

.clean-energy .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: #e6f0ff;
  margin: 0 auto;
}