/* =========================
   Variables & bases globales
   ========================= */
:root{
  --brand:#0071E3;           /* bleu principal */
  --brand-2:#549DEB;         /* bleu secondaire */

  /* Méga-menu ultra smooth */
  --dd-duration:760ms;                       /* vitesse panneau */
  --dd-ease:cubic-bezier(.16,1,.3,1);        /* easing doux */
  --dd-stagger:760ms;                        /* vitesse des items */
  --overlay-duration:var(--dd-duration);
  --header-bg-ease:var(--dd-ease);
}

body{
  font-family:'Lato',sans-serif;
  overflow-x:hidden; /* évite les scrolls horizontaux sur mobile */
  cursor:default;
}

h1,h2,h3{ font-family:'Lato',sans-serif; }

/* =========================
   Anim & canvas de fond
   ========================= */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}
.fade-in{ animation:fadeIn 1s ease-out forwards; }

/* =========================
   Flip cards
   ========================= */
.flip-card{ perspective:1200px; }
.flip-card-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.flip-card:hover .flip-card-inner{ transform:rotateY(180deg); }
.flip-card-front,.flip-card-back{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:1.5rem;
}
.flip-card-back{ transform:rotateY(180deg); }

/* Mobile fix */
@media (max-width:767px){
  .flip-card{ height:auto; }
  .flip-card-inner{ height:auto; transform:none !important; }
  .flip-card.flipped .flip-card-inner{ transform:none !important; }
  .flip-card-front,.flip-card-back{ position:relative; inset:auto; width:100%; height:auto; }
  .flip-card-back{ display:none; }
}

/* =========================
   Cartes "solutions"
   ========================= */
.solution-card.selected{
  background-color:#2563eb; color:#fff;
  box-shadow:0 10px 15px -3px rgba(37,99,235,.5),
             0 4px 6px -4px rgba(37,99,235,.5);
}
.solution-card.selected:hover{
  background-color:#2563eb; color:#fff;
  box-shadow:0 10px 15px -3px rgba(37,99,235,.5),
             0 4px 6px -4px rgba(37,99,235,.5);
}

/* Accessibilité focus */
a:focus,button:focus{ outline:2px solid #2563eb; outline-offset:2px; }

/* Effets verre & reflets */
.solution-card::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.2px);
  background-size:14px 14px; opacity:.25; pointer-events:none;
  transition:opacity .3s ease;
}
.solution-card::before{
  content:""; position:absolute; inset:0; border-radius:1rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),
             inset 0 0 40px rgba(255,255,255,.08);
  pointer-events:none; transition:opacity .3s ease, transform .3s ease;
}
.solution-card:hover::before,
.solution-card.selected::before{
  background:
    linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(300deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%);
  transform:translateZ(0);
}
.solution-card.selected{
  background:rgba(0,113,227,.86) !important; color:#fff !important;
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 20px 35px -15px rgba(37,99,235,.6);
}
.solution-card:hover h3,.solution-card.selected h3{ color:#fff; }
.solution-card:hover h5,.solution-card.selected h5{ color:#f0f7ff; }
.solution-card:hover p,.solution-card.selected p{ color:#eef6ff; }

/* =========================
   Cartes comparatif (cmp-*)
   ========================= */
.cmp-card{
  position:relative; overflow:hidden; border-radius:1rem;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 25px -12px rgba(37,99,235,.25);
  backdrop-filter:blur(12px) saturate(125%); -webkit-backdrop-filter:blur(12px) saturate(125%);
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.cmp-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px -20px rgba(37,99,235,.35); }
.cmp-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(1200px 200px at 10% -10%, rgba(0,113,227,.15), transparent 60%),
    radial-gradient(1200px 200px at 110% 120%, rgba(0,113,227,.12), transparent 60%);
  opacity:.7;
}
.cmp-card-inner{ position:relative; padding:1.25rem; }
.cmp-chip{
  font-size:.7rem; line-height:1;
  background:linear-gradient(90deg,#D4EAF7,#EAF4FF);
  color:#0B65C6; border:1px solid rgba(0,113,227,.25);
  padding:.4rem .6rem; border-radius:9999px; white-space:nowrap;
}
.cmp-dot{ flex:none; width:.5rem; height:.5rem; border-radius:9999px; background:#0071E3; margin-top:.4rem; opacity:.85; }
.cmp-extra{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s cubic-bezier(.25,1,.5,1), opacity .5s ease;
}
.cmp-card.open .cmp-extra{ max-height:220px; opacity:1; }
.cmp-toggle{
  font-size:.875rem; color:#0B65C6; padding:.4rem .75rem; border-radius:.6rem;
  background:rgba(212,234,247,.35); border:1px solid rgba(0,113,227,.18);
  transition:background .25s ease, transform .25s ease;
}
.cmp-toggle:hover{ background:rgba(212,234,247,.6); transform:translateY(-1px); }

/* =========================
   Tables responsives (#features)
   ========================= */
@media (max-width:640px){
  #features table{
    display:block; border-collapse:separate; border-spacing:0;
    min-width:auto !important; width:100% !important;
  }
  #features thead{ display:none; }
  #features tbody{ display:block; }
  #features tr{
    display:block; margin-bottom:.75rem;
    border:1px solid #e5e7eb; border-radius:.5rem; overflow:hidden; background:#fff;
  }
  #features td,#features th{
    display:flex; width:100%; box-sizing:border-box; align-items:flex-start;
    justify-content:space-between; gap:.75rem; padding:.75rem 1rem; border:0; border-bottom:1px solid #e5e7eb; word-break:break-word;
  }
  #features td:last-child{ border-bottom:0; }
  #features td::before{ content:attr(data-label); font-weight:600; flex:0 0 45%; }
}
#features td,#features th{ padding:.5rem .75rem; }

/* =========================
   CTA “façon Apple”
   ========================= */
.cta-links{ display:flex; gap:1.25rem; flex-wrap:wrap; justify-content:center; }
.cta-link{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem;
  border-radius:9999px; text-decoration:none; color:black; background:transparent;
  transition:background-color .2s ease, color .2s ease;
  font-weight:500; line-height:1.2; font-size:small;
}
.cta-link:hover{ background:rgba(0,113,227,.08); }
.cta-svg{ width:36px; height:36px; }
.cta-ico{ border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(84,157,235,.15); }
.cta-ico svg{ width:16px; height:16px; }
.cta-after{ width:12px; height:12px; display:inline-block; }
.cta-link--external .cta-after{ transform:translateY(1px); }

/* =========================
   Header & Méga-menu (smooth)
   ========================= */

/* Header comportement lissé */
header.glass{
  background:#fff; color:#000; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:
    background-color var(--dd-duration) var(--header-bg-ease),
    backdrop-filter .25s ease;
}
header.glass.is-opaque{ background:#fff !important; backdrop-filter:none; -webkit-backdrop-filter:none; }
header.glass.is-transparent{
  background:rgba(255,255,255,.60) !important; border-bottom-color:transparent !important;
  backdrop-filter:saturate(100%) blur(6px); -webkit-backdrop-filter:saturate(100%) blur(6px);
}
#mainNav a{ color:#000 !important; }

/* Panneaux full-width */
.dropdown-panel{
  position:fixed; left:0; right:0; z-index:50; border-radius:0; color:#000; box-shadow:none;

  /* ultra smooth open/close sans !important */
  transition-property:opacity, transform, visibility;
  transition-duration:var(--dd-duration);
  transition-timing-function:var(--dd-ease);
  will-change:opacity, transform;

  /* états par défaut (fermés) — le JS ajoute/retire .invisible */
  opacity:0; transform:translateY(-0.5rem); visibility:hidden;
}

/* panel visible */
.dropdown-panel:not(.invisible){
  opacity:1; transform:translateY(0); visibility:visible;
  transition-delay:0ms, 0ms, 0ms; /* opacity, transform, visibility */
}

/* panel masqué : on retarde seulement visibility */
.dropdown-panel.invisible{
  transition-delay:0ms, 0ms, var(--dd-duration); /* opacity, transform, visibility */
}

/* Liens/colonnes méga-menu */
.dropdown-panel .dd-link{
  display:block; padding:.5rem .75rem; color:#000; background:transparent; border-radius:0;
  border:1px solid transparent; box-shadow:none;
  transition:background-color .2s ease, color .2s ease;
  font-size:1.25rem; line-height:1.5rem; font-weight:800;
}
#dd-right-fonctionnalites,#dd-right-tarifs,#dd-right-services{ display:flex; flex-direction:column; gap:.25rem; }
#dd-right-fonctionnalites a,#dd-right-tarifs a,#dd-right-services a{
  display:block; padding:.375rem .5rem; line-height:1.35; border-radius:0;
  color:#000; transition:background-color .2s ease; font-weight:300; font-size:.8rem;
}
.dropdown-panel .text-gray-700{ color:#000; }
#mobileMenu a{ color:#000; font-weight:100; }

/* Ajustements sans changement HTML */
header.glass .max-w-7xl{ justify-content:flex-end !important; }
.dropdown-panel>.max-w-7xl,
.dropdown-panel>.dd-inner,
.dropdown-panel>.container{ padding-left:var(--menu-offset,0px); }
#dd-fonctionnalites nav{ margin-left:0 !important; }

/* Verrou opaque côté JS */
body.nav-open header.glass{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
@supports selector(body:has(.dropdown-panel)){
  body:has(.dropdown-panel:not(.invisible):not(.pointer-events-none)) header.glass{
    background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
}

/* Stagger (gauche + droite) — même tempo que le panneau */
@keyframes dd-fade-up{
  from{ opacity:0; transform:translateY(6px); }
  to{   opacity:1; transform:translateY(0); }
}
.dropdown-panel .dd-link,
.dropdown-panel .stagger>a{ will-change:opacity, transform; }
.dropdown-panel.is-open nav .dd-link{
  opacity:0; transform:translateY(6px);
  animation:dd-fade-up var(--dd-stagger) var(--dd-ease) forwards;
  animation-delay:calc(var(--i,0) * 70ms);
}
.dropdown-panel.is-open .stagger>a{
  opacity:0; transform:translateY(6px);
  animation:dd-fade-up var(--dd-stagger) var(--dd-ease) forwards;
  animation-delay:calc(var(--i,0) * 70ms);
}

/* Overlay synchronisé */
#pageOverlay{
  transition-property:opacity, visibility;
  transition-duration:var(--overlay-duration);
  transition-timing-function:var(--dd-ease);
  opacity:0; visibility:hidden;
}
#pageOverlay.hidden{
  transition-delay:0ms, var(--overlay-duration); /* opacity, visibility */
  opacity:0; visibility:hidden;
}
#pageOverlay:not(.hidden){
  transition-delay:0ms, 0ms; opacity:1; visibility:visible;
}

/* Petits dropdowns basiques (si utilisés ailleurs) */
.dropdown{
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.group\/nav:hover .dropdown,
.group\/nav:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* Divers */
#mainNav a:hover{ text-decoration:none; }

/* ==== Smooth méga-menu (patch safe, non destructif) ==== */
/* 1) Variables par défaut si non définies ailleurs */
:root{
  --dd-duration: 760ms;                       /* ajuste la vitesse globale ici */
  --dd-ease: cubic-bezier(.16,1,.3,1);
}

/* 2) Panneau : anime opacity/transform + visibility (sync avec ton JS) */
.dropdown-panel{
  /* on n'ajoute QUE les propriétés de transition (pas d'override visuel) */
  transition-property: opacity, transform, visibility;
  transition-duration: var(--dd-duration);
  transition-timing-function: var(--dd-ease);
  will-change: opacity, transform;
}

/* 3) Décale la coupure de visibilité UNIQUEMENT quand le panneau se ferme.
   -> évite le “trou” entre deux panneaux pendant le switch (ton JS affiche
      le nouveau d’abord, puis masque l’ancien ; on ne coupe visibility
      qu’après la fin de l’anim de fermeture) */
.dropdown-panel.invisible{
  transition-delay: 0ms, 0ms, var(--dd-duration); /* opacity, transform, visibility */
}

/* Quand visible, pas de délai de visibility */
.dropdown-panel:not(.invisible){
  transition-delay: 0ms, 0ms, 0ms;
}

/* === Backdrop partagé des méga-menus (anti-flash) === */
#dd-backdrop{
  position: fixed;
  left: 0; right: 0;
  z-index: 49;                 /* sous les panels (50), au-dessus de l’overlay (40) */
  background: #fff;
  opacity: 0;
  transform: translateY(-0.5rem);
  visibility: hidden;
  transition:
    opacity var(--dd-duration, 760ms) var(--dd-ease, cubic-bezier(.16,1,.3,1)),
    transform var(--dd-duration, 760ms) var(--dd-ease, cubic-bezier(.16,1,.3,1)),
    visibility var(--dd-duration, 760ms) var(--dd-ease, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
#dd-backdrop:not(.invisible){
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0ms, 0ms, 0ms;
}
#dd-backdrop.invisible{
  transition-delay: 0ms, 0ms, var(--dd-duration, 760ms); /* on coupe visibility après l’anim */
}