/* ==========================================================================
   T005-V03 — Pages ESN enfants (Réseaux, Sécurité, Cybersécurité, Cloud, Système, DevOps)
   Règles CSS complémentaires à t005-esn.css pour les sections spécifiques aux pages enfants.
   Ces règles s'appliquent aux classes absentes de t005-esn.css :
   - .xp-back-wrap, .xp-back (lien retour vers ESN parent)
   - .esn-jobs, .esn-familles, .esn-famille, .esn-metiers (section métiers)
   - .xp-closing-tagline, .xp-closing-sub (textes spécifiques de la section closing)

   Extraites depuis Site SecuriKeys IT — complet/site/style.css
   Préfixe `body.sk-maquette main` : même cascade que la maquette
   ========================================================================== */

/* Lien retour vers la page ESN parent */
body.sk-maquette main .xp-back-wrap { background: var(--paper); padding: 22px 0; }
body.sk-maquette main .xp-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-soft);
}
body.sk-maquette main .xp-back svg { transition: transform var(--dur-fast) var(--ease-out); }
body.sk-maquette main .xp-back:hover { color: var(--navy-700); }
body.sk-maquette main .xp-back:hover svg { transform: translateX(-3px); }

/* Section métiers ESN */
body.sk-maquette main .esn-jobs { padding: 80px 0; background: var(--paper-alt); }
body.sk-maquette main .esn-jobs h2 { margin-bottom: 34px; }

body.sk-maquette main .esn-familles { display: flex; flex-direction: column; gap: 30px; }
body.sk-maquette main .esn-famille h3 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

body.sk-maquette main .esn-metiers { display: flex; flex-wrap: wrap; gap: 10px; }
body.sk-maquette main .esn-metiers li {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--lime-500);
  border-radius: 4px;
  background: var(--white);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--navy-700);
}

/* Section closing - textes spécifiques */
body.sk-maquette main .xp-closing-tagline {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
  color: var(--lime-500);
  margin-bottom: 16px;
}
body.sk-maquette main .xp-closing-sub {
  color: rgba(255,255,255,.75);
  font-size: 1.06rem;
  margin-bottom: 32px;
}

/* Responsive breakpoints - à compléter selon style.css si nécessaire */
@media (max-width: 640px) {
  body.sk-maquette main .esn-jobs { padding: 56px 0; }
  body.sk-maquette main .esn-metiers li { font-size: 0.88rem; padding: 8px 13px; }
}

/* T005-V03-R4 — Robot au coin gauche du bandeau (.peek-corner).
   Reprise de style.css (maquette), lignes 1724-1763 : boîte carrée 440px sortie
   de 255px à gauche, coupée par l'overflow:hidden de .xp-hero ; 360px sous
   1240px ; masquée sous 1120px. Le montage n'a lieu qu'à partir de 1021px
   (script des pages de la maquette, repris dans t006-real-3d.js). */
body.sk-maquette main .peek-corner {
  position: absolute;
  left: -255px;
  top: max(6px, calc(50% - 112px));
  width: 440px;
  height: 440px;
  z-index: 0;
  animation: peekIn 720ms var(--ease-out) 700ms both;
}
/* L'hôte inséré par t006-real-3d.js remplace le conteneur direct de la maquette. */
body.sk-maquette main .peek-corner > .sk-real-3d-host { width: 100%; height: 100%; }
@keyframes peekIn {
  from { transform: translateX(-90px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.sk-maquette main .peek-corner { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 1240px) {
  body.sk-maquette main .peek-corner { left: -210px; width: 360px; height: 360px; top: max(6px, calc(50% - 92px)); }
}
@media (max-width: 1120px) {
  body.sk-maquette main .peek-corner { display: none; }
}