/* Paul Informatique — V4.4 : section « Cybersécurité en pratique » de l'accueil.
   Chargé uniquement par la page d'accueil. Tout est scopé sous .pi-cyber. */

.project-section.three.pi-cyber {
  --cy-bg: #061423;
  --cy-card: #0b1d31;
  --cy-card-2: #0d2238;
  --cy-line: rgba(148, 190, 230, .14);
  --cy-text: #c3d2e1;
  --cy-muted: #9fb3c8;
  --cy-accent: #40c4f0;
  padding: clamp(80px, 8vw, 120px) 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(64, 196, 240, .10), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(19, 196, 161, .08), transparent 40%),
    linear-gradient(180deg, #06121f 0%, var(--cy-bg) 100%);
  color: var(--cy-text);
}
.pi-cyber .shape-image { display: none; } /* décors du thème (conçus pour fond clair) */

/* ---------- En-tête ---------- */
.pi-cyber__head { max-width: 760px; margin: 0 0 clamp(36px, 4vw, 52px); }
.pi-cyber__eyebrow { margin: 0 0 12px; color: #5fd3f5; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.pi-cyber__title { margin: 0; color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; text-transform: none; }
.pi-cyber__intro { margin: 16px 0 0; color: var(--cy-text); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; }

/* ---------- Grille : 1 carte principale + 3 secondaires ---------- */
.pi-cyber__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }

.pi-cyber-card {
  --acc: var(--cy-accent);
  --acc-rgb: 64, 196, 240;
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--cy-line); border-radius: 16px;
  background: linear-gradient(180deg, var(--cy-card-2), var(--cy-card));
  box-shadow: 0 16px 40px rgba(0, 6, 14, .35);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.pi-cyber-card::before { /* petite ligne d'accent en haut de carte */
  content: ""; position: absolute; z-index: 2; top: 0; left: 24px; width: 56px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--acc);
}
.pi-cyber-card--pentest { --acc: #40c4f0; --acc-rgb: 64, 196, 240; }
.pi-cyber-card--audit { --acc: #2dd4bf; --acc-rgb: 45, 212, 191; }
.pi-cyber-card--phishing { --acc: #f5a524; --acc-rgb: 245, 165, 36; }
.pi-cyber-card--hardening { --acc: #34d399; --acc-rgb: 52, 211, 153; }

.pi-cyber-card__media { position: relative; overflow: hidden; background: #050f1b; aspect-ratio: 3 / 2; }
.pi-cyber-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pi-cyber-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 24px 26px; }

.pi-cyber-card__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 11px;
  border: 1px solid rgba(var(--acc-rgb), .38); border-radius: 999px; background: rgba(var(--acc-rgb), .1);
  color: var(--acc); font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
}
.pi-cyber-card__badge i { font-size: 12px; }
.pi-cyber-card__title { margin: 0 0 10px; color: #fff; font-size: 22px; line-height: 1.25; text-transform: none; }
.pi-cyber-card__text { margin: 0 0 18px; color: var(--cy-text); font-size: 15.5px; line-height: 1.65; }
.pi-cyber-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.pi-cyber-card__tags li {
  padding: 4px 10px; border: 1px solid rgba(148, 190, 230, .18); border-radius: 6px;
  background: rgba(255, 255, 255, .03); color: var(--cy-muted); font-size: 13px; line-height: 1.4;
}
.pi-cyber-card__cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: auto;
  color: var(--acc); font-size: 15px; font-weight: 700; transition: gap .2s ease, color .2s ease;
}
.pi-cyber-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toute la carte est cliquable */
.pi-cyber-card__cta:hover, .pi-cyber-card__cta:focus-visible { color: #fff; gap: 12px; }
.pi-cyber-card__cta:focus-visible { outline: none; }
.pi-cyber-card:focus-within { outline: 2px solid var(--acc); outline-offset: 3px; }

/* Carte principale Pentest : contenu / visuel côte à côte, bouton plein */
.pi-cyber-card--main { grid-column: 1 / -1; }
.pi-cyber-card--main .pi-cyber-card__title { font-size: clamp(26px, 2.4vw, 34px); }
.pi-cyber-card--main .pi-cyber-card__text { max-width: 560px; font-size: 16.5px; }
.pi-cyber-card--main .pi-cyber-card__cta {
  padding: 12px 20px; border-radius: 8px; background: var(--acc); color: #061018;
}
.pi-cyber-card--main .pi-cyber-card__cta:hover, .pi-cyber-card--main .pi-cyber-card__cta:focus-visible { color: #061018; background: #7fd8f6; }

@media (hover: hover) {
  .pi-cyber-card:hover {
    transform: translateY(-3px); border-color: rgba(var(--acc-rgb), .45);
    box-shadow: 0 20px 46px rgba(0, 6, 14, .42), 0 0 0 1px rgba(var(--acc-rgb), .12), 0 0 28px rgba(var(--acc-rgb), .10);
  }
  .pi-cyber-card:hover .pi-cyber-card__media img { transform: scale(1.02); }
}

/* Centrage du bouton « Demander un audit » conservé */
.pi-cyber .inner-btn { justify-content: center; margin-top: clamp(36px, 4vw, 48px); }

/* ---------- Tablette et plus : Pentest en deux zones ---------- */
@media (min-width: 768px) {
  .pi-cyber-card--main { flex-direction: row; min-height: 380px; }
  .pi-cyber-card--main .pi-cyber-card__body { flex: 0 0 57%; justify-content: center; padding: clamp(30px, 3.4vw, 48px); }
  .pi-cyber-card--main .pi-cyber-card__media { flex: 1 1 43%; aspect-ratio: auto; border-left: 1px solid var(--cy-line); }
  .pi-cyber-card--main .pi-cyber-card__media img { position: absolute; inset: 0; object-position: 72% center; }
  .pi-cyber-card--main .pi-cyber-card__cta { margin-top: 4px; }
}

@media (min-width: 992px) {
  .pi-cyber-card--main { min-height: 440px; } /* présence renforcée de la carte principale */
}

/* ---------- Tablette : secondaires en 2 + 1 ---------- */
@media (min-width: 768px) and (max-width: 991px) {
  .pi-cyber__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-cyber-card--hardening { grid-column: 1 / -1; flex-direction: row; }
  .pi-cyber-card--hardening .pi-cyber-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 260px; border-right: 1px solid var(--cy-line); }
  .pi-cyber-card--hardening .pi-cyber-card__media img { position: absolute; inset: 0; }
}

/* ---------- Mobile : une colonne, visuel au-dessus ---------- */
@media (max-width: 767px) {
  .pi-cyber__grid { grid-template-columns: minmax(0, 1fr); }
  .pi-cyber-card--main .pi-cyber-card__media { order: -1; aspect-ratio: 16 / 9; }
  .pi-cyber-card--main .pi-cyber-card__cta { width: 100%; justify-content: center; }
  .pi-cyber-card__body { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-cyber-card, .pi-cyber-card__media img, .pi-cyber-card__cta { transition: none; }
}

/* V4.4.1 : lignes d'information secondaires de la carte Campagnes de phishing */
.pi-cyber-card__note { margin: -8px 0 20px; color: var(--cy-muted); font-size: 13px; line-height: 1.5; }
.pi-cyber-card__note + .pi-cyber-card__note { margin-top: -16px; }