/*
Theme Name: IKA Solution Pro
Theme URI: https://ikasolution.com
Author: IKA SOLUTION LTD
Author URI: https://ikasolution.com
Description: Thème WordPress professionnel et 100% open source pour IKA SOLUTION LTD. Reproduit fidèlement le site d'origine (mise en page et animations) et rend l'ensemble des contenus administrables : slides, expertises, solutions, réalisations, équipe, clients, partenaires, actualités, page Proxmox, réglages SMTP et coordonnées. Installe et configure aussi, en un clic depuis l'admin, les extensions gratuites recommandées (tri des contenus, sauvegardes, sécurité, SEO). Tailwind CSS compilé localement, aucune dépendance à un CDN.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ika-solution
Domain Path: /languages
Tags: custom-menu, featured-images, translation-ready, full-width-template, custom-logo, threaded-comments
*/

/* ─── Product Tab Slides ─── */
.product-slide {
  display: none;
}
.product-slide.active {
  display: grid;
}

/* ─── Expertise Image Clip-Paths (fidèles au site statique) ─── */
.expertise-cut-a { clip-path: polygon(0 0, 100% 0, 88% 78%, 16% 100%, 0 72%); }
.expertise-cut-b { clip-path: ellipse(88% 72% at 68% 24%); }
.expertise-cut-c { clip-path: polygon(12% 0, 100% 0, 100% 82%, 72% 100%, 0 74%, 0 16%); }
.expertise-cut-d { clip-path: polygon(0 18%, 22% 0, 100% 0, 92% 100%, 0 84%); }
.expertise-cut-e { clip-path: circle(76% at 24% 42%); }
.expertise-cut-f { clip-path: polygon(0 0, 78% 0, 100% 34%, 82% 100%, 8% 92%); }
.expertise-cut-g { clip-path: polygon(0 0, 100% 14%, 100% 100%, 28% 88%, 0 100%); }
.expertise-cut-h { clip-path: polygon(16% 0, 100% 0, 100% 70%, 58% 100%, 0 78%, 0 20%); }

/* ─── About Showcase ─── */
.about-showcase .about-image-card {
  isolation: isolate;
}
.about-image-card img,
.about-stat-card {
  transition: transform .55s cubic-bezier(.2,.85,.18,1), box-shadow .55s ease, filter .55s ease;
}
.about-image-card:hover img {
  transform: translateY(-10px) scale(1.035);
  filter: saturate(1.08) contrast(1.04);
}
.about-showcase:has(.about-image-card:hover) .about-stat-card {
  transform: translateY(-18px);
  box-shadow: 0 18px 44px rgba(4, 31, 77, 0.14);
}
.about-showcase:has(.about-image-card:hover) .about-stat-card:nth-child(2) {
  transition-delay: .05s;
}
.about-showcase:has(.about-image-card:hover) .about-stat-card:nth-child(3) {
  transition-delay: .1s;
}
@supports not selector(:has(*)) {
  .about-stat-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 18px 44px rgba(4, 31, 77, 0.14);
  }
}

/* ─── Client Logo Hover ─── */
.client-logo {
  transition: transform .3s ease, box-shadow .3s ease;
}
.client-logo:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ─── Custom Animations & Styles ─── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

@keyframes reveal {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-float {
  animation: float 7s ease-in-out infinite;
}

.animate-reveal {
  animation: reveal .8s ease forwards;
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* ─── Font ─── */
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* ─── Utilitaires requis par les templates statiques ───
   Ces classes existent dans le HTML d'origine. Elles sont ajoutées ici pour
   garantir le rendu exact même si Tailwind n'est pas recompilé immédiatement.
   NB : bg-ikaBlueDark/92 (et /88) n'existent PAS dans l'échelle Tailwind, le
   CDN du site statique ne les générait donc pas — l'image de fond y reste
   visible à 10 %. Ne PAS les définir ici manuellement : c'est ce qui rendait
   les héros des pages Équipe/Réalisations/Actualités entièrement opaques dans
   le thème, contrairement au site statique. */
.max-w-5xl { max-width: 64rem; }
.h-\[320px\] { height: 320px; }
@media (min-width: 640px) {
  .sm\:h-\[460px\] { height: 460px; }
}

/* ─── Carrousel clients (pleine largeur, fondu sur les bords) ─── */
.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.clients-track {
  display: flex;
  width: max-content;
  animation: clients-scroll 28s linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
.clients-group { display: flex; flex-shrink: 0; }
.client-logo {
  flex-shrink: 0;
  width: 11rem;
  height: 8rem;
  margin: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: #F5F6FA;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
}
.client-logo img {
  max-height: 3.5rem;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.client-logo:hover img { filter: grayscale(0%); opacity: 1; }
@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Animations du hero et des sections (déplacé depuis header.php) ─── */
/* body font déjà défini plus haut */
.slide {
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background-position: center;
  transform: scale(1.08) rotate(.6deg);
  filter: saturate(.75) blur(6px);
  transition: opacity .9s ease, transform 1.35s cubic-bezier(.2,.85,.18,1), clip-path 1.25s cubic-bezier(.2,.85,.18,1), background-position 1.45s cubic-bezier(.2,.85,.18,1), filter .9s ease;
  will-change: opacity, transform, clip-path, background-position, filter;
}
.slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) rotate(0);
  filter: saturate(1) blur(0);
}
.slide.leaving { opacity: 0; filter: saturate(.65) blur(10px); }
.slide.effect-orbit { clip-path: circle(0% at 8% 88%); transform-origin: 8% 88%; }
.slide.effect-orbit.active { clip-path: circle(145% at 8% 88%); }
.slide.effect-orbit.leaving { clip-path: circle(0% at 86% 14%); transform: scale(1.14) rotate(-3deg); }
.slide.effect-decompose { clip-path: inset(0); transform: scale(1.12); }
.slide.effect-decompose::before,
.slide.effect-decompose::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
}
.slide.effect-decompose.active { transform: scale(1); animation: decompose-base 1.05s cubic-bezier(.2,.85,.18,1) both; }
.slide.effect-decompose.active::before { opacity: 1; clip-path: inset(0 0 64% 0); animation: decompose-top 1.05s cubic-bezier(.2,.85,.18,1) both; }
.slide.effect-decompose.active::after { opacity: 1; clip-path: inset(64% 0 0 0); animation: decompose-bottom 1.05s cubic-bezier(.2,.85,.18,1) both; }
.slide.effect-decompose.leaving { clip-path: polygon(0 0, 100% 7%, 91% 100%, 9% 93%); transform: scale(1.12); }
.slide.effect-parallax { clip-path: inset(0); background-position: 28% center; transform: translateX(8%) scale(1.18); transform-origin: center; }
.slide.effect-parallax.active { background-position: 64% center; transform: translateX(0) scale(1); }
.slide.effect-parallax.leaving { background-position: 86% center; transform: translateX(-8%) scale(1.12); }
.slide.effect-hosting { clip-path: inset(0 50% 0 50%); transform: scale(1.1); transform-origin: center; }
.slide.effect-hosting.active { clip-path: inset(0); transform: scale(1); }
.slide.effect-hosting.leaving { clip-path: inset(0 0 0 100%); transform: scale(1.12); }
@keyframes decompose-base {
  0% { opacity: .2; transform: scale(1.16) translateY(22px); filter: blur(12px) saturate(.55); }
  55% { opacity: .85; transform: scale(1.04) translateY(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); }
}
@keyframes decompose-top {
  0% { transform: translate(-9%, -22%) scale(1.08); opacity: .2; }
  100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
@keyframes decompose-bottom {
  0% { transform: translate(9%, 20%) scale(1.08); opacity: .22; }
  100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
#heroCopyPanel { transition: opacity .42s ease, transform .55s cubic-bezier(.2,.85,.18,1), filter .42s ease; }
#heroCopyPanel.is-changing { opacity: 0; transform: translateY(22px) rotateX(10deg); filter: blur(8px); }
#heroVisualImage { transform-origin: 70% 30%; }
#heroVisualImage.is-changing { opacity: .2; transform: scale(.94) rotate(-2deg); filter: blur(8px) saturate(.7); }
#accueil.hero-intro #heroEyebrow,
#accueil.hero-intro #heroText,
#accueil.hero-intro #heroPrimary,
#accueil.hero-intro #heroSecondary,
#accueil.hero-intro .hero-dot,
#accueil.hero-intro #heroMetricLabel,
#accueil.hero-intro #heroMetric,
#accueil.hero-intro #heroMetricText {
  opacity: 0;
  transform: translateY(18px);
  animation: heroIntroRise .8s cubic-bezier(.2,.85,.18,1) forwards;
}
#accueil.hero-intro #heroText { animation-delay: 1.35s; }
#accueil.hero-intro #heroPrimary { animation-delay: 1.62s; }
#accueil.hero-intro #heroSecondary { animation-delay: 1.74s; }
#accueil.hero-intro .hero-dot { animation-delay: 1.96s; }
#accueil.hero-intro #heroMetricLabel { animation-delay: 1.22s; }
#accueil.hero-intro #heroMetric { animation-delay: 1.38s; }
#accueil.hero-intro #heroMetricText { animation-delay: 1.54s; }
#accueil.hero-intro #heroVisualImage {
  animation: heroIntroImage 1.25s cubic-bezier(.2,.85,.18,1) .35s both;
}
#accueil.hero-intro #heroTitle .hero-word {
  display: inline-block;
  white-space: nowrap;
}
#accueil.hero-intro #heroTitle .hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px) rotateX(70deg) scale(.82);
  filter: blur(8px);
  transform-origin: 50% 100%;
  animation: heroCharIn .68s cubic-bezier(.2,.85,.18,1) forwards;
}
@keyframes heroCharIn {
  0% { opacity: 0; transform: translateY(34px) rotateX(70deg) scale(.82); filter: blur(8px); }
  70% { opacity: 1; transform: translateY(-4px) rotateX(0) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}
@keyframes heroIntroRise {
  0% { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes heroIntroImage {
  0% { opacity: 0; transform: translateY(34px) scale(.88) rotate(-3deg); filter: blur(14px) saturate(.72); }
  65% { opacity: 1; transform: translateY(-6px) scale(1.03) rotate(.8deg); filter: blur(0) saturate(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0) saturate(1); }
}
.expertise-card {
  isolation: isolate;
  overflow: hidden;
}
.expertise-card::before {
  content: "";
  position: absolute;
  inset: auto -24px -42px auto;
  height: 96px;
  width: 96px;
  border-radius: 999px;
  background: rgba(229, 26, 55, .1);
  z-index: -1;
}
.expertise-visual {
  position: relative;
  height: 12rem;
  margin: -1.75rem -1.75rem 1.5rem;
  overflow: hidden;
  background: #0d4a7e;
}
.expertise-visual img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform .7s cubic-bezier(.2,.85,.18,1), filter .7s ease;
}
.expertise-card:hover .expertise-visual img {
  transform: scale(1.16) rotate(1.5deg);
  filter: saturate(1.12) contrast(1.04);
}
.expertise-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(18,112,184,.2), rgba(229,26,55,.32));
  mix-blend-mode: multiply;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .76s ease, transform .82s cubic-bezier(.2,.85,.18,1), filter .76s ease;
  will-change: opacity, transform, filter;
}
.reveal.reveal-left { transform: translateX(-42px); }
.reveal.reveal-right { transform: translateX(42px); }
.reveal.reveal-up { transform: translateY(34px); }
.reveal.reveal-down { transform: translateY(-30px); }
.reveal.reveal-zoom { transform: scale(.94); filter: blur(8px); }
.reveal.reveal-tilt { transform: translateY(30px) rotate(-1.4deg); }
.reveal.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
  filter: blur(0);
}
.whatsapp-widget { animation: whatsappPulse 3.4s ease-in-out infinite; }
@keyframes whatsappPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 18px 44px rgba(18,112,184,.18); }
  50% { transform: scale(1.045); box-shadow: 0 22px 58px rgba(37,211,102,.26); }
}
@keyframes whatsappMessage {
  0%, 27% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-10px); }
}
.whatsapp-message span { animation: whatsappMessage 9s ease-in-out infinite; }
.whatsapp-message span:nth-child(2) { animation-delay: 3s; }
.whatsapp-message span:nth-child(3) { animation-delay: 6s; }

/* ─── Accessibilité : respect de « animations réduites » ─── */
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
  .clients-marquee { overflow-x: auto; }
  .slide, .reveal, #heroCopyPanel, #heroVisualImage,
  .whatsapp-widget, .whatsapp-message span, .animate-float, .animate-marquee {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─── Transitions globales (fidèles au site statique) ─── */
main > section {
  position: relative;
  transition: background-color .45s ease, box-shadow .45s ease, filter .45s ease;
}
main > section:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(18,112,184,.08);
}
main article,
main a.rounded-2xl,
main .rounded-\[2rem\] {
  transition-property: transform, box-shadow, border-color, background-color, filter;
  transition-duration: .45s;
  transition-timing-function: cubic-bezier(.2,.85,.18,1);
}
main article:hover,
main a.rounded-2xl:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 54px rgba(4, 31, 77, 0.13);
}
main section img:not(#heroVisualImage) {
  transition: transform .72s cubic-bezier(.2,.85,.18,1), filter .72s ease;
}
main article:hover > img,
main a:hover img,
main .rounded-\[2rem\]:hover > img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.04);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ─── Menu WordPress personnalisé (emplacement « Menu Principal ») ───
   Quand un menu est assigné dans Apparence > Menus, wp_nav_menu génère des
   <li> : on retire les puces et on reproduit l'état actif du site statique
   (entrée courante soulignée et bleue). */
header nav ul,
#mobileMenu ul,
footer ul {
  margin: 0;
  padding: 0;
}
header nav li,
#mobileMenu li,
footer li {
  list-style: none;
}
header nav li > a {
  display: inline-flex;
  align-items: center;
  transition: color .2s ease;
}
header nav li > a:hover {
  color: #1270b8;
}
header nav .current-menu-item > a,
header nav .current_page_item > a,
header nav .current-page-ancestor > a {
  color: #1270b8;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: #1270b8;
}
#mobileMenu li > a {
  display: block;
  border-radius: .75rem;
  padding: .75rem;
  transition: background-color .2s ease, color .2s ease;
}
#mobileMenu li > a:hover {
  background: rgb(244 247 251 / .8);
}
#mobileMenu .current-menu-item > a,
#mobileMenu .current_page_item > a,
#mobileMenu .current-page-ancestor > a {
  background: rgb(244 247 251 / .8);
  font-weight: 900;
  color: #1270b8;
}
footer li > a {
  display: inline-flex;
}

/* ─── Pagination (pages Réalisations & Actualités) ─── */
.ika-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.ika-pagination[hidden] {
  display: none;
}
.ika-page-btn {
  min-width: 2.75rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 900;
  color: #1270b8;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.ika-page-btn:hover:not(:disabled) {
  border-color: #1270b8;
}
.ika-page-btn.is-current {
  background: #e51a37;
  border-color: #e51a37;
  color: #fff;
}
.ika-page-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ─── Onglets (pages partenaires & Proxmox) ─── */
/* L'attribut `hidden` des panneaux doit primer sur `display:grid` (le
   .grid de Tailwind l'écraserait sinon : tous les panneaux seraient visibles
   à la fois et le filtre par onglets serait inopérant). */
.pmx-panel[hidden] {
  display: none !important;
}