/* ============================================================
   Skin « moderne » — surcouche chargée APRÈS le CSS du thème.
   Ne change ni le markup ni la mise en page : uniquement le
   rendu (rayons, ombres, typo, couleurs). Retirer cette feuille
   de THEME_STYLES dans app/(site)/layout.tsx pour revenir au
   look 100 % d'origine.
   ============================================================ */

:root {
  --oel-ink: #10131a;
  --oel-muted: #5b6472;
  --oel-blue: #3366cc;
  --oel-blue-soft: #90b5ff;
  --oel-radius: 20px;
  --oel-radius-sm: 14px;
  --oel-shadow: 0 10px 30px rgba(16, 19, 26, 0.08);
  --oel-shadow-hover: 0 18px 44px rgba(16, 19, 26, 0.14);
}

/* ---- Base ---- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--oel-blue);
  color: #fff;
}
h1, h2, h3, h4, h5 {
  letter-spacing: -0.02em;
}
p {
  color: var(--oel-muted);
}

/* ---- Boutons ---- */
.main-btn,
.main-btn.main-btn-3 {
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(51, 102, 204, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-position 0.4s ease;
}
.main-btn:hover,
.main-btn.main-btn-3:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(51, 102, 204, 0.36);
}
.main-btn:active,
.main-btn.main-btn-3:active {
  transform: translateY(0);
}

/* ---- Cartes (services, tarifs, articles) ---- */
.service-item,
.pricing-item,
.article-2-item {
  border-radius: var(--oel-radius);
  border: 1px solid rgba(16, 19, 26, 0.06);
  box-shadow: var(--oel-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  background-color: #fff;
}
.service-item:hover,
.article-2-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--oel-shadow-hover);
}
.pricing-item.center {
  border: 2px solid var(--oel-blue);
  box-shadow: 0 18px 44px rgba(51, 102, 204, 0.18);
}

/* Le thème dessine un trait bleu (::before) sous les liens des cartes
   service — incohérent sous un bouton pill, on le retire. */
.service-7-item a.main-btn::before {
  display: none;
}

/* ---- Images et vidéos : coins arrondis partout ---- */
.project-item img,
.about-2-thumb img,
.key-feature-thumb img,
.article-thumb img,
.post-thumb img,
.overview-area iframe,
.overview-content iframe,
.text-video iframe,
iframe[src*="youtube"] {
  border-radius: var(--oel-radius-sm);
}
.project-item {
  border-radius: var(--oel-radius-sm);
  overflow: hidden;
}
.project-item img {
  transition: transform 0.4s ease;
}
.project-item:hover img {
  transform: scale(1.03);
}

/* ---- Bannières de pages (blog, articles, politique) ---- */
.page-title-area.page-title-2-area .section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 19, 26, 0.15) 0%,
    rgba(16, 19, 26, 0.55) 100%
  );
}
.page-title-area .section__bg {
  position: absolute;
}

/* ---- Header : logo net, bouton assorti ---- */
.header-7-area .header-logo img {
  transition: opacity 0.2s ease;
}
.header-7-area .header-logo a:hover img {
  opacity: 0.85;
}
.toggle-menu .canvas_open {
  transition: transform 0.2s ease;
  display: inline-block;
}
.toggle-menu .canvas_open:hover {
  transform: scale(1.08);
}

/* ---- Menu off-canvas ---- */
.offcanvas_menu_wrapper {
  border-radius: 0 var(--oel-radius) var(--oel-radius) 0;
}
.offcanvas_main_menu li a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.offcanvas_main_menu li a:hover {
  padding-left: 6px;
}

/* ---- Modal (calendrier) ---- */
#mainModal .modal-content {
  border: 0;
  border-radius: var(--oel-radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(16, 19, 26, 0.35);
}

/* ---- Articles de blog ---- */
.single-post-content .post-content .title {
  letter-spacing: -0.02em;
}
.single-post-topbar {
  border-radius: var(--oel-radius-sm);
}

/* ---- Footer ---- */
.footer-area .footer-list ul li a,
.footer-copyright p a {
  transition: color 0.2s ease;
}
.footer-copyright p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Préloader plus discret ---- */
.preloader {
  background: #fff;
}