/*
Theme Name: Astra Child
Template: astra
Version: 1.0.1
*/

/* ============================================================
   SECTION "MES SERVICES"
   Conteneur principal (section parente)
   ============================================================ */
.elementor-element.elementor-element-b44b521.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded {
  background: linear-gradient(135deg, #020c1b 0%, #0a1628 50%, #061020 100%) !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.elementor-element.elementor-element-b44b521.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: orb-gridmove 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes orb-gridmove { to { background-position: 40px 40px; } }

/* ============================================================
   WIDGET HTML — Skills (cartes services)
   ============================================================ */
.elementor-element.elementor-element-96e1788.elementor-widget.elementor-widget-html {
  background: linear-gradient(135deg, #020c1b 0%, #0a1628 50%, #061020 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

.elementor-element.elementor-element-96e1788.elementor-widget.elementor-widget-html::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: orb-gridmove 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   WIDGET HTML — Animation ORB (colonne droite)
   ============================================================ */
.elementor-element.elementor-element-6891a9d,
.elementor-element.elementor-element-6891a9d.elementor-widget.elementor-widget-html,
.elementor-element.elementor-element-6891a9d > .elementor-widget-container {
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
}

.orb-wrap {
  position: relative !important;
  z-index: 10 !important;
}

.orb-badge {
  position: absolute !important;
  z-index: 100 !important;
  background: rgba(10, 30, 60, 0.95) !important;
}

#orb-particles-js canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

/* ============================================================
   CARTES SERVICES — Layout & styles
   ============================================================ */
.cards-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card {
  background: linear-gradient(90deg, #3b94b5 0%, #1b86b2 100%);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.card:hover { border-color: rgba(127,119,221,0.4); }

.card-wide { grid-column: 1 / -1; }

.img-wrap {
  position: relative;
  width: 100%;
  height: 130px;
  overflow: hidden;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  filter: brightness(0.92) contrast(1.05);
  display: block;
}
.img-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(transparent, #07080878);
}

.card-info  { padding: 10px 12px 12px; font-family: 'Space Grotesk'; }
.card-label { font-size: 12px; color: #90dbff; margin: 0 0 2px; font-family: 'Space Grotesk'; }
.card-title { font-size: 14px; font-weight: 500; color: #e8e8e8; margin: 0; font-family: 'Space Grotesk'; }

/* ============================================================
   ANIMATIONS GLOBALES
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.anim1 { animation: float 5s   ease-in-out infinite; }
.anim2 { animation: float 6.5s ease-in-out infinite; }
.anim3 { animation: float 4.8s ease-in-out infinite; }


/* ============================================================
   HEADER NAV MOBILE
   ============================================================ */

/* Accessibilité (texte caché visuellement) */
.pn-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Desktop par défaut */
.pn-desktop{ display:block; }
.pn-burger{ display:none; }
.pn-mobile{ display:none; } /* même si hidden est là, on sécurise */

/* Bouton hamburger */
.pn-burger{
  appearance:none;
  border:1px solid #e6e9f2;
  background:#fff;
  border-radius:10px;
  width:44px;height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}

.pn-burger-bars{
  width:18px;height:12px;
  position:relative;
  display:block;
}
.pn-burger-bars::before,
.pn-burger-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:#0c1a3a;
  border-radius:2px;
}
.pn-burger-bars::before{ top:0; }
.pn-burger-bars::after{ top:10px; }

/* Panel mobile */
#pn-navframe{ position:relative; }

.pn-mobile{
  position:absolute;
  left:0; right:0;
  top:100%;
  background:#fff;
  border-bottom:1px solid #e6e9f2;
  padding:14px 18px 18px;
}

.pn-mobile .pn-menu{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
}

/* Breakpoint mobile */
@media (max-width: 920px){
  #pn-navframe{ padding:14px 16px; }

  .pn-desktop{ display:none; }     /* cache le menu horizontal */
  .pn-cta-wrap{ display:none; }    /* cache le CTA desktop */

  .pn-burger{ display:flex; }      /* affiche le hamburger */

  /* quand le panel n'est pas hidden, on l'affiche */
  .pn-mobile{ display:block; }
}