/* ================= AYANO — Clean Consulting v2 ================== */
/* Palette & surfaces */
:root{
  /* Couleurs */
  --ink:#0b1324;          /* texte fort (presque noir) */
  --text:#2d3748;         /* corps */
  --muted:#6b7280;        /* secondaire */
  --line:rgba(2,6,23,.10);

  --brand:#193763;        /* navy doux */
  --brand-600:#24539a;    /* accent */
  --brand-50:#f4f7fc;     /* halo */
  --brand-800:#245399;

  /* Surfaces différenciées */
  --surface-page:#ffffff;
  --surface-light:#f7f9fc;     /* très clair bleuté */
  --surface-tint:#eef2f8;      /* teinte douce */
  --surface-panel:#fbfbfd;     /* panel blanc cassé */
  --surface-blue:#245399;     /* panel blanc cassé */
  --card:#ffffff;

  /* Rayons & ombres */
  --radius:12px;
  --shadow:0 10px 28px -18px rgba(13,23,43,.22);
  --shadow-lg:0 24px 68px -28px rgba(13,23,43,.28);

  /* Typo scale */
  --ff-sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ff-head:"Manrope", var(--ff-sans);

  --fs-900: clamp(2rem, 1.4rem + 2.2vw, 2.8rem);   /* H1 (hors hero) */
  --fs-800: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); /* H2 sections */
  --fs-700: clamp(1.25rem, 1rem + .8vw, 1.6rem);   /* H3 cartes */
  --fs-400: 1rem;        /* Body */
  --fs-300: .925rem;     /* Meta */
  --fs-200: .85rem;      /* Petites mentions */

  --lh-tight:1.2;
  --lh-body:1.65;

  --e: cubic-bezier(.22,.61,.36,1);
}

html{ scroll-behavior:smooth; }
body{
  background:var(--surface-page);
  color:var(--text);
  font-family:var(--ff-sans);
  font-size:var(--fs-400);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Container & header */
.container{ max-width:1140px; }
.site-header{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:saturate(140%) blur(8px); }

/* NAV */
.nav a{
  font-weight:600; color:var(--ink);
  padding:.55rem .85rem; border-radius:10px;
  transition: background .18s var(--e), color .18s var(--e), transform .18s var(--e);
}
.nav a:hover{ background:rgba(25,55,99,.08); color:var(--brand); transform:translateY(-1px); }
.nav a.active{ background:rgba(25,55,99,.12); color:var(--brand); }

/* --------- Sections (différenciation visuelle) --------- */
.section{ padding:72px 0; }
.section--light{ background:var(--surface-light); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--tint{  background:var(--surface-tint);  border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--panel{ background:var(--surface-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--blue{ background:var(--surface-blue); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

.section__head{ text-align:center; margin-bottom:34px; }
.section__title{
  font-family:var(--ff-head);
  font-size:var(--fs-800);
  letter-spacing:-.01em;
  line-height:var(--lh-tight);
  color:var(--brand-800);
  font-weight: 800;
  margin:0;
}
.section__lead{ color:var(--muted); font-size:var(--fs-300); margin-top:.6rem; }

/* --------- Cards sobres --------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition: transform .22s var(--e), box-shadow .22s var(--e), border-color .22s var(--e);
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(25,55,99,.18); }
.card__media{ overflow:hidden; border-radius:calc(var(--radius) - 2px); }
.card__media img{ display:block; width:100%; height:auto; transform:scale(1); transition:transform .6s var(--e); }
.card:hover .card__media img{ transform:scale(1.02); }
.card__body{ padding:18px; }
.card__title{
  font-family:var(--ff-head);
  font-size:var(--fs-700);
  color:var(--brand-800);
  font-weight:400;
  margin:0 0 .4rem;
}
.card__text{ color:var(--text); }

/* Badges & meta */
.badge{
  display:inline-flex; align-items:center; gap:.42rem;
  padding:.2rem .4rem; border-radius:999px;
  background:var(--brand-50); color:var(--brand);
  border:1px solid rgba(25,55,99,.18);
  font-weight:300; font-size:var(--fs-200);
}
.meta{ color:var(--muted); font-size:var(--fs-300); display:flex; gap:.6rem; flex-wrap:wrap; }

/* --------- Buttons / Links --------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:800; letter-spacing:.01em;
  padding:.8rem 1.05rem; border-radius:999px;
  text-decoration:none; border:1px solid var(--brand); color:#fff; background:var(--brand);
  box-shadow:0 12px 24px -16px rgba(25,55,99,.42);
  transition: transform .18s var(--e), filter .18s var(--e), box-shadow .18s var(--e);
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.02); }

.btn--ghost{
  background:#fff; color:var(--brand); border-color:rgba(25,55,99,.28);
  box-shadow:none;
}
.btn--ghost:hover{ box-shadow:0 0 0 3px rgba(25,55,99,.14); }

.link{
  color:var(--brand-600); font-weight:800;
  display:inline-flex; align-items:center; gap:.45rem;
  transition: color .2s var(--e), transform .2s var(--e);
}
.link:hover{ color:var(--brand); transform:translateX(1px); }

/* --------- KPI tuile --------- */
.kpi{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  transition: transform .2s var(--e), box-shadow .2s var(--e);
}
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.kpi__val{ font-family:var(--ff-head); font-weight:800; color:var(--ink); font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); line-height:var(--lh-tight); }
.kpi__label{ color:var(--muted); font-size:var(--fs-300); }

/* --------- Testimonials --------- */
.testimonial{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
.testimonial p{ color:#344256; }

/* --------- Marquee logos --------- */
.marquee-viewport{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; }
.marquee-track{ display:flex; align-items:center; gap:56px; animation: marquee-x var(--speed,28s) linear infinite; will-change: transform; }
@keyframes marquee-x{ 0%{transform: translateX(0)} 100%{ transform: translateX(calc(-1 * var(--loop-w, 0px))) } }
.marquee-content{ display:flex; align-items:center; gap:56px; padding-right:56px; }
.marquee-logo{ display:block; height:28px; width:auto; filter:grayscale(1); opacity:.85; transition: filter .2s var(--e), opacity .2s var(--e), transform .2s var(--e); }
.marquee-logo:hover{ filter:none; opacity:1; transform: translateY(-1px); }

@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none !important; }
}

/* --------- Utilitaires mineurs --------- */
.hr-line{ height:1px; background:var(--line); border:0; }

/* Contenus éditoriaux générés par TinyMCE */
.rich-content{
  color:#334155 !important;
  font-size:1rem !important;
  line-height:1.85 !important;
  white-space:normal !important;
}
.rich-content > * + *{ margin-top:1rem !important; }
.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4{
  display:block !important;
  color:#0f172a !important;
  font-family:var(--ff-head) !important;
  font-weight:850 !important;
  line-height:1.25 !important;
  margin:1.75rem 0 .75rem !important;
}
.rich-content h1{ font-size:2rem !important; }
.rich-content h2{ font-size:1.55rem !important; }
.rich-content h3{ font-size:1.25rem !important; }
.rich-content h4{ font-size:1.1rem !important; }
.rich-content p{ display:block !important; margin:0 0 1rem !important; }
.rich-content strong,
.rich-content b{ color:#0f172a !important; font-weight:800 !important; }
.rich-content em{ font-style:italic !important; }
.rich-content ul,
.rich-content ol{ display:block !important; margin:1rem 0 1rem 1.25rem !important; padding-left:1.25rem !important; }
.rich-content ul{ list-style:disc outside !important; }
.rich-content ol{ list-style:decimal outside !important; }
.rich-content li{ display:list-item !important; padding-left:.25rem !important; margin:.35rem 0 !important; }
.rich-content li::marker{ color:#1d4ed8 !important; font-weight:800 !important; }
.rich-content a{ color:#1d4ed8 !important; font-weight:700 !important; text-decoration:underline !important; text-underline-offset:3px !important; }
.rich-content blockquote{
  display:block !important;
  border-left:4px solid #1d4ed8 !important;
  background:#eff6ff !important;
  color:#1e293b !important;
  margin:1.35rem 0 !important;
  padding:1rem 1.25rem !important;
  border-radius:0 10px 10px 0 !important;
}
.rich-content table{
  width:100% !important;
  border-collapse:collapse !important;
  margin:1.25rem 0 !important;
  overflow:hidden !important;
  border-radius:10px !important;
}
.rich-content th,
.rich-content td{ border:1px solid #e2e8f0 !important; padding:.8rem !important; vertical-align:top !important; }
.rich-content th{ background:#f8fafc !important; color:#0f172a !important; font-weight:800 !important; }
.rich-content img{
  max-width:100% !important;
  height:auto !important;
  border-radius:12px !important;
  border:1px solid #e2e8f0 !important;
  box-shadow:0 18px 40px -28px rgba(15,23,42,.35) !important;
}
.rich-content hr{ border:0 !important; height:1px !important; background:#e2e8f0 !important; margin:1.75rem 0 !important; }
.rich-content pre,
.rich-content code{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; }
.rich-content pre{ overflow:auto !important; border-radius:10px !important; background:#0f172a !important; color:#e2e8f0 !important; padding:1rem !important; }


/* Code du Héro */
      
  /* Dropdown amélioré (hover + tolérance + anim) */
  .dropdown { position: relative; }
  .dropdown-toggle { display:inline-flex; align-items:center; gap:.35rem; }
  .dropdown-menu {
    position: absolute; top: 100%; left: 0; margin-top: .5rem;
    min-width: 240px; background:#fff; border-radius:.5rem;
    box-shadow: 0 20px 40px -12px rgba(2,6,23,.25);
    opacity: 0; transform: translateY(8px) scale(.98);
    pointer-events: none; transition: all .18s ease;
    border: 1px solid rgba(30,64,175,.08);
  }
  .dropdown.open .dropdown-menu,
  .dropdown:hover .dropdown-menu {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
  }
  .dropdown-menu a {
    display:block; padding:10px 14px; color:#1e40af; text-decoration:none;
  }
  .dropdown-menu a:hover {
    background: linear-gradient(90deg, rgba(30,64,175,.07), rgba(30,64,175,.03));
  }
  /* Effet premium sur lien actif */
  .active { font-weight: 700; }
  /* Rotation de la flèche */
  .dropdown .chev { transition: transform .2s ease; }
  .dropdown.open .chev { transform: rotate(180deg); }

  /* Ken Burns */
  .kb-zoom { transform-origin:center; animation: kb 14s ease-in-out forwards; }
  @keyframes kb { 0%{transform:scale(1.05)} 100%{transform:scale(1.2)} }

  .hero-slide { position: relative; min-height: 85vh; }
  .hero-bg    { position:absolute; inset:0; background-size:cover; background-position:center; }
  .hero-overlay { position:absolute; inset:0; background:rgba(5,8,22,.50); }
  .hero-grid  { position:absolute; inset:0; opacity:.07;
    background-image:linear-gradient(to right,#fff 1px,transparent 1px),
                     linear-gradient(to bottom,#fff 1px,transparent 1px);
    background-size:28px 28px;
  }
  .text-shadow-lg{ text-shadow:0 12px 30px rgba(0,0,0,.35); }
  .hero-halo { position:absolute; top:-8rem; right:-6rem; opacity:.25; pointer-events:none; }

  /* ===== LAYERS ===== */
  .layer-wrap { position:static; max-width:72rem; margin-inline:auto; height:100%; }
  .layer      { position:absolute; z-index:2; }
  .layer .inner { will-change: transform, opacity; } /* le parallax agit sur .inner */

  /* Rails (desktop) : l1 (badge) / l2 (titre) / l3 (sous-titre) / l4 (CTAs) */
  @media (min-width: 768px){
    .l1 { top: 22%; }
    .l2 { top: 34%; }
    .l3 { top: 47%; max-width: 44rem; }
    .l4 { top: 60%; }

    /* Alignements horizontaux */
    .left{left:50} .right{right:50} .center{left:50%; transform:translateX(-50%)}
    .right { right: 50; left: auto; text-align: right; }
    .center{ left: 50%; transform: translateX(-50%); text-align: center; }
  }

  /* Mobile : pas d'absolu → empilement naturel */
  @media (max-width: 767px){
    .layer { position:relative; top:auto !important; left:auto !important; right:auto !important;
             transform:none !important; margin:.5rem 0; }
    .layer .inner { transform:none !important; opacity:1 !important; }
    .l3 { max-width: none; }
  }
    
 
  /* Rend les backgrounds non interactifs */
  .hero-bg, .hero-overlay, .hero-grid { pointer-events: none; }
  .hero-overlay { z-index: 0; }
  .hero-grid    { z-index: 0; }
  .layer        { z-index: 3; }                 /* les textes au-dessus */
  .swiper-button-next, .swiper-button-prev,
  .swiper-pagination { z-index: 4; }            /* UI au-dessus des layers */

  /* 1) Tous les layers invisibles par défaut (évite tout ghosting) */
  .hero-swiper .layer .inner {
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease; /* douceur */
    pointer-events: none;
  }

  /* 2) Seuls les layers du slide actif (et de son duplicata actif en loop) sont visibles */
  .hero-swiper .swiper-slide.swiper-slide-active .layer .inner,
  .hero-swiper .swiper-slide.swiper-slide-duplicate-active .layer .inner {
    opacity: 1;
    pointer-events: auto;
  }

  /* 3) Pendant la transition, on masque totalement les autres slides (pour “fade”) */
  .hero-swiper.is-animating .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) .layer .inner {
    opacity: 0 !important;
    transform: none !important;   /* pas de parallax résiduel */
    pointer-events: none !important;
  }

  /* 4) Petit garde-fou : tous les slides empilés mais seul l’actif cliquable */
  .hero-swiper .swiper-slide {
    z-index: 1;
  }
  .hero-swiper .swiper-slide.swiper-slide-active,
  .hero-swiper .swiper-slide.swiper-slide-duplicate-active {
    z-index: 2;
  }