/* =========================================================
   GLOBAL EDMONTON SARLU
   ULTRA VIP CORPORATE CSS 2026
   VERSION SKY BLUE OFFICIAL
========================================================= */

/* =========================================================
   VARIABLES GLOBALES
========================================================= */

:root{

  /* COULEURS OFFICIELLES DU LOGO */

  --primary-blue:#1F56A6;
  --primary-gold:#F4B000;

  /* BLEUS */

  --blue-dark:#163E7A;
  --blue-light:#5DA9E9;
  --sky-blue:#DFF4FF;
  --sky-light:#F4FBFF;

  /* OR */

  --gold-light:#FFD95A;
  --gold-dark:#C89B00;

  /* BACKGROUNDS CLAIRS */

  --bg-main:#DFF4FF;
  --bg-secondary:#F4FBFF;

  --bg-card:rgba(255,255,255,0.94);

  /* TEXTES */

  --white:#FFFFFF;

  --text-dark:#16324F;

  --text-light:#33506B;

  --text-gray:#5F7285;

  /* EFFETS */

  --glass:rgba(255,255,255,0.45);

  --glass-border:rgba(31,86,166,0.08);

  --shadow-soft:0 10px 30px rgba(0,0,0,0.08);

  --shadow-gold:0 0 25px rgba(244,176,0,0.15);

  --transition:all .35s ease;

  --radius:18px;

}

/* =========================================================
   RESET
========================================================= */

*{

  margin:0;
  padding:0;

  box-sizing:border-box;

  text-decoration:none !important;

  scroll-behavior:smooth;

}

body{

  font-family:'Inter',sans-serif;

  background:var(--bg-main);

  color:var(--text-dark);

  overflow-x:hidden;

}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:var(--sky-light);
}

::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    to bottom,
    var(--primary-blue),
    var(--primary-gold)
  );

  border-radius:20px;

}

/* =========================================================
   HEADER VIP
========================================================= */

header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:1rem 6%;

  background:rgba(31,86,166,0.96);

  backdrop-filter:blur(15px);

  border-bottom:3px solid var(--primary-gold);

  box-shadow:var(--shadow-soft);

}

/* LOGO */

.brand-container{

  display:flex;
  align-items:center;
  gap:15px;

}

.logo{

  height:60px;
  width:auto;
  object-fit:contain;

}

.brand-text{

  display:flex;
  flex-direction:column;

}

.brand-title{

  color:var(--white);

  font-size:1.3rem;

  font-weight:900;

  text-transform:uppercase;

  letter-spacing:1px;

}

.web-link{

  color:var(--primary-gold);

  font-size:0.82rem;

  font-weight:700;

}

/* =========================================================
   MENU NAVIGATION
========================================================= */

nav{

  display:flex;
  align-items:center;
  gap:1.5rem;

}

nav a{

  color:var(--white);

  font-size:0.82rem;

  font-weight:700;

  text-transform:uppercase;

  position:relative;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:7px 11px;
  border:1.5px solid transparent;
  border-radius:6px;
  text-decoration:none;

  transition:var(--transition);

}

/* Indicateur permanent de la page actuellement sélectionnée.
   Le contour jaune reste visible sur desktop comme sur mobile. */
nav a.active,
nav a[aria-current="page"]{
  color:var(--primary-gold);
  border-color:var(--primary-gold);
  box-shadow:0 0 0 1px rgba(246,193,0,.12), 0 4px 14px rgba(246,193,0,.12);
}

nav a.active::after,
nav a[aria-current="page"]::after{
  width:0;
}

nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-8px;

  width:0%;
  height:2px;

  background:var(--primary-gold);

  transition:var(--transition);

}

nav a:hover{

  color:var(--primary-gold);

}

nav a:hover::after{

  width:100%;

}

/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle{

  display:none;

  color:var(--white);

  font-size:1.8rem;

  cursor:pointer;

}

/* =========================================================
   CTA BUTTON
========================================================= */

.cta-btn{

  background:
  linear-gradient(
    135deg,
    var(--primary-gold),
    var(--gold-light)
  );

  color:var(--blue-dark) !important;

  padding:.9rem 1.4rem;

  border-radius:12px;

  font-weight:900;

  font-size:.82rem;

  transition:var(--transition);

  box-shadow:var(--shadow-gold);

  display:inline-block;

}

.cta-btn:hover{

  transform:
  translateY(-4px)
  scale(1.04);

}

/* =========================================================
   HERO SECTION
========================================================= */

.hero{

  position:relative;

  width:100%;

  height:100vh;

  overflow:hidden;

}

.hero-slide{

  position:absolute;

  inset:0;

  opacity:0;
  visibility:hidden;

  transition:1s ease;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  background-size:cover;
  background-position:center;

}

.hero-slide.active{

  opacity:1;
  visibility:visible;

}

.hero-slide::before{

  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    rgba(15,45,85,0.60),
    rgba(15,45,85,0.60)
  );

}

.hero-content{

  position:relative;

  z-index:2;

  max-width:950px;

  padding:0 20px;

}

.hero h1{

  font-size:4rem;

  font-weight:900;

  text-transform:uppercase;

  line-height:1.1;

  margin-bottom:1.2rem;

  color:var(--white);

}

.hero h1 span{

  color:var(--primary-gold);

}

.hero p{

  font-size:1.1rem;

  line-height:1.9;

  color:#F4F8FF;

  margin-bottom:2rem;

}

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:1rem;

  flex-wrap:wrap;

}

/* =========================================================
   SECTION BASE
========================================================= */

section{

  padding:6rem 8%;

  position:relative;

}

.section-title{

  text-align:center;

  font-size:2.4rem;

  font-weight:900;

  text-transform:uppercase;

  color:var(--primary-blue);

  margin-bottom:4rem;

  position:relative;

}

.section-title::after{

  content:"";

  width:120px;
  height:4px;

  background:var(--primary-gold);

  position:absolute;

  left:50%;

  transform:translateX(-50%);

  bottom:-15px;

  border-radius:20px;

}

/* =========================================================
   CARDS GRID
========================================================= */

.cards-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:2rem;

}

/* =========================================================
   CARDS VIP
========================================================= */

.card{

  background:var(--bg-card);

  border:1px solid var(--glass-border);

  border-radius:var(--radius);

  overflow:hidden;

  transition:var(--transition);

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow-soft);

}

.card:hover{

  transform:translateY(-12px);

  border-color:rgba(244,176,0,0.3);

  box-shadow:
  0 18px 40px rgba(0,0,0,0.08),
  0 0 20px rgba(244,176,0,0.10);

}

.card img{

  width:100%;

  height:270px;

  object-fit:cover;

}

.card-content{

  padding:1.7rem;

}

.card h3{

  color:var(--primary-blue);

  margin-bottom:.9rem;

  font-size:1.2rem;

}

.card p{

  color:var(--text-gray);

  line-height:1.8;

  font-size:.95rem;

}

/* =========================================================
   FORMULAIRES
========================================================= */

input,
textarea,
select{

  width:100%;

  padding:1rem;

  margin-bottom:1rem;

  border-radius:12px;

  border:1px solid rgba(31,86,166,0.10);

  background:rgba(255,255,255,0.95);

  color:var(--text-dark);

  outline:none;

  transition:var(--transition);

}

input:focus,
textarea:focus,
select:focus{

  border-color:var(--primary-gold);

  box-shadow:
  0 0 0 4px rgba(244,176,0,0.08);

}

/* =========================================================
   FOOTER VIP
========================================================= */

footer{

  background:
  linear-gradient(
    180deg,
    var(--blue-dark),
    var(--primary-blue)
  );

  padding:5rem 8% 2rem;

  border-top:3px solid var(--primary-gold);

}

.footer-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(250px,1fr));

  gap:3rem;

  margin-bottom:3rem;

}

.footer-box h3{

  color:var(--primary-gold);

  margin-bottom:1rem;

}

.footer-box p,
.footer-box a{

  color:rgba(255,255,255,0.85);

  line-height:2;

  font-size:.92rem;

}

/* =========================================================
   SOCIALS
========================================================= */

.socials{

  display:flex;

  gap:15px;

  margin-top:1rem;

}

.socials a{

  width:52px;
  height:52px;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.2rem;

  transition:var(--transition);

}

.socials a:hover{

  transform:
  translateY(-5px)
  scale(1.08);

}

.facebook{
  background:#1877F2;
  color:#fff;
}

.instagram{

  background:
  linear-gradient(
    45deg,
    #F58529,
    #DD2A7B,
    #8134AF,
    #515BD4
  );

  color:#fff;

}

.whatsapp{
  background:#25D366;
  color:#fff;
}

.linkedin{
  background:#0A66C2;
  color:#fff;
}

.youtube{
  background:#FF0000;
  color:#fff;
}

.tiktok{
  background:#000;
  color:#fff;
}

/* =========================================================
   COPYRIGHT
========================================================= */

.copyright{

  text-align:center;

  padding-top:2rem;

  border-top:1px solid rgba(255,255,255,0.08);

  color:rgba(255,255,255,0.7);

  font-size:.9rem;

}

/* =========================================================
   WHATSAPP FLOAT
========================================================= */

.whatsapp-float{

  position:fixed;

  right:20px;
  bottom:20px;

  width:68px;
  height:68px;

  border-radius:50%;

  background:#25D366;

  display:flex;
  align-items:center;
  justify-content:center;

  color:white;

  font-size:1.8rem;

  z-index:9999;

  box-shadow:
  0 10px 25px rgba(0,0,0,0.2);

  transition:var(--transition);

}

.whatsapp-float:hover{

  transform:scale(1.12);

}

/* =========================================================
   RESPONSIVE MOBILE
========================================================= */

@media(max-width:1100px){

  .menu-toggle{
    display:block;
  }

  nav{

    position:absolute;

    top:100%;
    right:0;

    width:100%;

    background:var(--primary-blue);

    flex-direction:column;

    align-items:flex-start;

    padding:2rem;

    gap:1.3rem;

    display:none;

  }

  nav a.active,
  nav a[aria-current="page"]{
    border-color:var(--primary-gold);
    color:var(--primary-gold);
  }

  nav.active{
    display:flex;
  }

}

@media(max-width:768px){

  header{
    padding:1rem 4%;
  }

  .hero h1{
    font-size:2.5rem;
  }

  .hero p{
    font-size:1rem;
  }

  section{
    padding:5rem 5%;
  }

  .section-title{
    font-size:2rem;
  }

}

@media(max-width:480px){

  .hero h1{
    font-size:1.9rem;
  }

  .hero p{
    font-size:.92rem;
  }

  .section-title{
    font-size:1.7rem;
  }

  .cta-btn{
    width:100%;
    text-align:center;
  }

}
/* =========================================================
   GLOBAL EDMONTON — REFINEMENT 2026
========================================================= */
html { scroll-behavior: smooth; }
body { line-height: 1.65; }
header { min-height: 78px; }
.logo { max-height: 58px; }
.hero-slide { transition: opacity .8s ease, transform 1.2s ease; }
.hero-slide.active { transform: scale(1.01); }
.card { border: 1px solid rgba(31,86,166,.10); box-shadow: 0 12px 34px rgba(22,62,122,.08); }
.card:hover { transform: translateY(-8px); }
.cta-btn { box-shadow: 0 8px 22px rgba(31,86,166,.14); }
.cta-btn:hover { transform: translateY(-2px); }
.reveal-element { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal-element.is-visible { opacity: 1; transform: translateY(0); }
.team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; max-width:1250px; margin:0 auto; }
.team-card { background:rgba(255,255,255,.96); border:1px solid rgba(31,86,166,.10); border-radius:20px; overflow:hidden; box-shadow:0 14px 38px rgba(22,62,122,.09); transition:transform .3s ease, box-shadow .3s ease; }
.team-card:hover { transform:translateY(-7px); box-shadow:0 20px 48px rgba(22,62,122,.14); }
.team-avatar { height:150px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1F56A6,#5DA9E9); color:#fff; font-size:2.7rem; font-weight:900; letter-spacing:.04em; }
.team-card .card-content { padding:20px; }
.team-card h3 { margin-bottom:7px; }
.team-role { color:var(--primary-gold); font-weight:800; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; }
.team-links { display:flex; gap:10px; margin-top:15px; flex-wrap:wrap; }
.team-links a { padding:8px 12px; border-radius:10px; background:var(--sky-blue); color:var(--blue-dark); font-size:.82rem; font-weight:700; }
.legal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:18px; }
.legal-item { padding:14px 16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:12px; }
.legal-item strong { display:block; color:var(--primary-gold); font-size:.78rem; text-transform:uppercase; margin-bottom:4px; }
.footer-box a { overflow-wrap:anywhere; }
.honeypot-field { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.skip-link { position:fixed; left:10px; top:10px; z-index:100000; padding:10px 14px; background:#fff; color:#163E7A; transform:translateY(-160%); border-radius:8px; }
.skip-link:focus { transform:translateY(0); }
@media (max-width:768px){ .brand-title{font-size:1rem}.web-link{font-size:.7rem}.logo{height:48px}.team-grid{grid-template-columns:1fr}.legal-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}.reveal-element{opacity:1;transform:none} }


/* Couche de protection d'interface : limite la sélection/copie visuelle.
   Elle ne constitue pas une protection cryptographique du code source. */
html, body, img, nav, nav a, button {
  -webkit-user-select:none;
  user-select:none;
}
img {
  -webkit-user-drag:none;
  user-drag:none;
}

input, textarea, select, [contenteditable="true"] { -webkit-user-select:text; user-select:text; }