/* =====================================================================
   AZERTY Agency — brand override
   Loaded AFTER main.min.css. Re-skins the Xpovio template to the AZERTY
   identity: teal dominant (#12A8BC) + orange accent (#EF6C00).
   No SCSS recompile needed — we override the :root custom properties
   and a few hard-coded orange spots.
   ===================================================================== */

:root {
  /* Brand */
  --primary-color: #12a8bc;   /* teal — replaces template orange */
  --accent-color:  #ef6c00;   /* orange accent (logo arrow / pixels) */
  --primary-dark:  #0e8ea0;   /* teal hover */
  --azerty-ink:    #211f1c;   /* logo dark */

  /* Soften shadows toward brand */
  --shadow: 0 0 12px rgba(18, 168, 188, 0.12);
  --shadow-secondary: 0 8px 31px rgba(18, 168, 188, 0.12);
}

/* ---- Catch hard-coded template orange (#ff7425) that ignores the var ---- */
[style*="#ff7425"] { color: var(--primary-color) !important; }

/* Selections & links */
::selection { background: var(--primary-color); color: #fff; }

/* Primary buttons: teal base, orange on hover for energy */
.btn--primary,
.btn.btn--primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
.btn--primary:hover,
.btn.btn--primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

/* Logo sizing — the AZERTY wordmark is wide; keep it tidy in the navbar */
.navbar__logo img,
.footer__logo img,
.mobile-menu__top img { max-height: 46px; width: auto; }

/* ---- Language switcher (FR | EN) ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  margin-left: 18px;
}
.lang-switch a {
  color: inherit;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: var(--transition);
}
.lang-switch a:hover { opacity: 1; color: var(--primary-color); }
.lang-switch a.is-active { opacity: 1; color: var(--primary-color); }
.lang-switch .sep { opacity: 0.35; }

/* ---- Contact form status banner ---- */
.form-status {
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-weight: 500;
}
.form-status--ok {
  background: rgba(18, 168, 188, 0.10);
  color: #0e8ea0;
  border: 1px solid rgba(18, 168, 188, 0.35);
}
.form-status--err {
  background: rgba(239, 108, 0, 0.10);
  color: #c75a00;
  border: 1px solid rgba(239, 108, 0, 0.35);
}

/* Honeypot — keep it out of sight & out of the a11y tree */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- Remove the template's oversized custom cursor (grey blob) ---- */
.mouseCursor,
.cursor-inner,
.cursor-outer,
.cursor,
.cursor-wrap { display: none !important; }
html, body, a, button, .my-app { cursor: auto !important; }

/* ---- Hero title: cap size so long FR/EN titles fit and wrap nicely ---- */
.banner .banner__content h1,
.banner__content h1.title-anim,
.banner h1 {
  font-size: clamp(2.4rem, 5.2vw, 5rem) !important;
  line-height: 1.04 !important;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
@media (max-width: 575px) {
  .banner .banner__content h1,
  .banner h1 { font-size: clamp(2rem, 8vw, 2.6rem) !important; }
}

/* Keep the banner content above decorative layers */
.banner__content { position: relative; z-index: 3; }

/* Banner photo: crop to fill its slot instead of stretching/distorting */
.banner .banner-one-thumb,
img.banner-one-thumb {
  object-fit: cover !important;
  object-position: center;
  border-radius: 8px;
}