/* site.css — layout classes for the static Protector Access site.
   Pairs with styles.css (design tokens + Futura PT @font-face). */
.pa-wrap { max-width: 1320px; margin: 0 auto; }
.pa-sec { padding: 104px 56px; }
@media (max-width: 900px){ .pa-sec{ padding: 64px 24px; } }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pa-accent); }
.on-dark .eyebrow, .eyebrow.on-dark { color: rgba(255,255,255,.7); }
h1,h2,h3 { margin: 0; }
.btn { font-family: var(--pa-font-sans); font-weight: 600; font-size: 15px; letter-spacing: .04em; padding: 15px 26px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; border: 1px solid transparent; transition: all 140ms cubic-bezier(.16,.84,.32,1); white-space: nowrap; }
.btn-primary { background: var(--pa-accent); color: #fff; }
.btn-primary:hover { background: var(--pa-accent-hover); }
.btn-light { background: #fff; color: var(--pa-midnight); }
.btn-light:hover { background: #f4f1f7; }
.btn-outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.btn-outline-dark:hover { background: rgba(255,255,255,.08); }
.btn .arrow { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.btn-primary .arrow { background: rgba(255,255,255,.2); color: #fff; }
.btn-light .arrow { background: var(--pa-accent); color: #fff; }
.card-hover { transition: transform 200ms cubic-bezier(.16,.84,.32,1), box-shadow 200ms; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(20,0,41,.14); }
@media (max-width: 900px){
  .pa-grid-2, .pa-grid-3, .pa-grid-4, .pa-hero-grid, .pa-split { grid-template-columns: 1fr !important; }
  .pa-mega-inner { grid-template-columns: 1fr 1fr !important; }
  .pa-stats { grid-template-columns: 1fr 1fr !important; }
  h1 { font-size: 40px !important; }
}

/* ============================================================
   RESPONSIVE — ajout (header mobile, débordements, bandeaux)
   ============================================================ */

/* --- Menu hamburger : caché en desktop --- */
.pa-burger{ display:none; }
.pa-burger span{ display:block; width:24px; height:2px; background:#140029; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.pa-mobile-menu{ display:none; }

@media (max-width: 860px){
  html, body{ overflow-x:hidden; }
  .pa-topbar{ padding-left:20px !important; padding-right:20px !important; }
  .pa-nav, .pa-actions{ display:none !important; }
  .pa-burger{ display:inline-flex !important; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
  header > div[data-mega]{ display:none !important; }   /* dropdown survol désactivé sur mobile */

  .pa-mobile-menu{ flex-direction:column; gap:0; padding:8px 20px 22px; background:#fff; border-bottom:1px solid var(--pa-border); }
  .pa-mobile-menu.open{ display:flex !important; }
  .pa-mobile-menu > a{ color:#140029; text-decoration:none; font-size:16px; font-weight:600; padding:15px 4px; border-bottom:1px solid var(--pa-border); }
  .pa-mobile-menu > a.btn{ border-bottom:0; }
  .pa-mobile-menu .pa-mobile-myp{ border:1.5px solid #290052; color:#290052; border-radius:999px; text-align:center; margin-top:12px; padding:14px; }

  /* animation croix */
  .pa-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .pa-burger.is-open span:nth-child(2){ opacity:0; }
  .pa-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* --- Bandeaux de stats en style inline (sans classe) --- */
@media (max-width: 900px){
  [style*="repeat(6,1fr)"]{ grid-template-columns:repeat(3,1fr) !important; }
  [style*="repeat(5,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width: 560px){
  [style*="repeat(6,1fr)"]{ grid-template-columns:repeat(2,1fr) !important; }
  [style*="repeat(5,1fr)"]{ grid-template-columns:1fr !important; }
}

/* --- Padding latéral réduit sur petits écrans (sections/footer en inline) --- */
@media (max-width: 560px){
  section{ padding-left:20px !important; padding-right:20px !important; }
  footer { padding-left:20px !important; padding-right:20px !important; }
  h1{ font-size:32px !important; }
}

/* ============================================================
   ACCUEIL — hero, bento services, grille mâts (mobile)
   Placé en dernier pour primer sur les règles génériques.
   ============================================================ */
@media (max-width: 860px){
  /* Hero : le wrap portait 56px inline -> respiration correcte */
  .pa-hero-sec{ padding:0 !important; }
  .pa-hero-wrap{ padding:28px 24px 0 !important; }
  .pa-hero-grid{ padding:20px 0 48px !important; gap:36px !important; }
  .pa-hero-grid > div:last-child{ height:300px !important; }   /* colonne images */

  /* Bento services : 1 colonne, plus aucune hauteur forcée (fin du vide blanc) */
  .pa-bento{ grid-template-columns:1fr !important; }
  .pa-bento > a{ grid-column:auto !important; min-height:0 !important; flex-direction:column !important; }
  .pa-bento [style*="flex-basis:46%"]{ flex-basis:auto !important; width:100% !important; height:190px !important; }

  /* Grille comparative des mâts (repeat(4,minmax)) : 1 colonne */
  [data-mats-grid]{ grid-template-columns:1fr !important; }
  [data-mats-tab]{ padding:12px 13px !important; font-size:13px !important; }
}