/* ==========================================================================
   T005-V04 — Infogerance et pages expertise
   Regles de `Site SecuriKeys IT — complet/site/style.css` utilisees par le <main>
   de infogerance.html et des 11 expertise-*.html, absentes de socle-maquette.css,
   t005-esn.css et t005-esn-enfants.css (les 11 expertises reprennent la famille
   xp-* des pages ESN). Ordre de la maquette conserve ; prefixe `body.sk-maquette main`.
   Genere par scripts/t005/v04/generer_css.py.
   ========================================================================== */


/* 1. Infogerance (infogerance.html) : hero globe, bandeau photo, competences, packs, robot de cloture */
body.sk-maquette main .competences { padding: 88px 0; background: var(--paper); position: relative; overflow: hidden; }
body.sk-maquette main .competences::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, var(--lime-100), transparent 70%); top: -200px; right: -180px; opacity: 0.6; pointer-events: none; animation: lightDriftSlow 34s ease-in-out infinite; }
body.sk-maquette main .skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
body.sk-maquette main .skill-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; background: var(--navy-700); border: 1px solid var(--navy-500); border-radius: var(--r-lg); padding: 26px 24px; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), opacity var(--dur-slow) var(--ease-out); min-height: 44px; }
body.sk-maquette main .skill-card:hover, body.sk-maquette main .skill-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--lime-500); background: var(--navy-600); }
body.sk-maquette main .skill-card:active { transform: translateY(-1px) scale(0.99); }
body.sk-maquette main .skill-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--navy-900); color: var(--lime-500); transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base) var(--ease-out); }
body.sk-maquette main .skill-card:hover .skill-icon { background: var(--lime-500); color: var(--navy-700); transform: rotate(-6deg) scale(1.06); }
body.sk-maquette main .skill-card h3 { font-size: 1.08rem; margin-bottom: 2px; color: var(--white); }
body.sk-maquette main .skill-card p { font-size: 0.92rem; color: rgba(255,255,255,.72); }
body.sk-maquette main .skill-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--lime-500); }
body.sk-maquette main .skill-more svg { transition: transform var(--dur-base) var(--ease-out); }
body.sk-maquette main .skill-card--ask { background: var(--lime-500); border-color: var(--lime-600); }
body.sk-maquette main .skill-card--ask:hover, body.sk-maquette main .skill-card--ask:focus-visible { background: var(--lime-600); border-color: var(--navy-700); }
body.sk-maquette main .skill-card--ask .skill-icon { background: var(--navy-700); color: var(--lime-500); }
body.sk-maquette main .skill-card--ask:hover .skill-icon { background: var(--navy-900); color: var(--lime-500); }
body.sk-maquette main .skill-card--ask h3 { color: var(--navy-700); }
body.sk-maquette main .skill-card--ask p { color: var(--navy-800); }
body.sk-maquette main .skill-card--ask .skill-more { color: var(--navy-700); }
body.sk-maquette main .skill-card:hover .skill-more svg { transform: translateX(4px); }
body.sk-maquette main .packs { padding: 88px 0; background: var(--navy-700); position: relative; overflow: hidden; }
body.sk-maquette main .packs-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
body.sk-maquette main .packs-blob { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
body.sk-maquette main .packs-blob--a { width: 480px; height: 480px; background: radial-gradient(circle at 35% 35%, var(--lime-700), transparent 72%); top: -180px; right: -120px; opacity: 0.3; animation: packsDriftA 24s ease-in-out infinite; }
body.sk-maquette main .packs-blob--b { width: 420px; height: 420px; background: radial-gradient(circle at 60% 40%, var(--navy-300), transparent 72%); bottom: -180px; left: -100px; opacity: 0.35; animation: packsDriftB 28s ease-in-out infinite; animation-delay: -8s; }
body.sk-maquette main .packs h2 { color: var(--white); }
body.sk-maquette main .packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
body.sk-maquette main .pack-card { background: var(--navy-800); border: 1.5px solid var(--navy-500); border-radius: var(--r-lg); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 12px); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
body.sk-maquette main .pack-card:hover { border-color: var(--navy-400); }
body.sk-maquette main .pack-card.is-featured { border-color: var(--lime-500); box-shadow: 0 0 0 1px var(--lime-500), var(--shadow-lg); }
body.sk-maquette main .pack-badge { display: none; background: var(--lime-500); color: var(--navy-700); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-align: center; padding: 7px; }
body.sk-maquette main .pack-card.is-featured .pack-badge { display: block; }
body.sk-maquette main .pack-name { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.2rem; transition: color var(--dur-fast); }
body.sk-maquette main .pack-role { font-size: 0.86rem; color: rgba(255,255,255,.55); margin-bottom: 10px; }
body.sk-maquette main .pack-price { display: flex; align-items: baseline; gap: 6px; }
body.sk-maquette main .pack-price .amount { font-family: "Poppins", sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--lime-500); }
body.sk-maquette main .pack-price .period { font-size: 0.85rem; color: rgba(255,255,255,.55); }
body.sk-maquette main .pack-from { font-size: 0.76rem; color: rgba(255,255,255,.45); margin-top: 2px; }
body.sk-maquette main .pack-features { padding: 4px 26px 26px; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--navy-500); padding-top: 18px; margin: 0 26px; }
body.sk-maquette main .pack-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: rgba(255,255,255,.82); }
body.sk-maquette main .pack-features svg { flex-shrink: 0; margin-top: 2px; color: var(--lime-500); }
body.sk-maquette main .pack-features .pack-includes-label { color: var(--lime-500); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 6px 0 -2px; }
body.sk-maquette main .pack-note { margin: 14px 26px 0; font-size: 0.78rem; color: rgba(255,255,255,.5); font-style: italic; }
body.sk-maquette main .pack-cta { margin: 20px 26px 26px; display: block; text-align: center; }
body.sk-maquette main .pack-card--static { display: flex; flex-direction: column; }
body.sk-maquette main .pack-static-head { display: flex; flex-direction: column; gap: 6px; padding: 28px 26px 22px; color: var(--white); }
body.sk-maquette main .pack-card--static .pack-features { margin-top: auto; }
body.sk-maquette main .xp-hero--globe { padding-bottom: 84px; }
body.sk-maquette main .xp-hero--globe .xp-hero-mark { display: none; }
body.sk-maquette main .xp-hero--globe .xp-hero-inner { max-width: var(--wrap); }
body.sk-maquette main .xp-hero--globe .xp-hero-inner > * { max-width: 600px; }
body.sk-maquette main .xp-hero-globe { position: absolute; top: 50%; right: 3%; transform: translateY(-50%); width: 400px; height: 400px; }
body.sk-maquette main .xp-hero-globe, body.sk-maquette main .xp-hero-globe * { pointer-events: none !important; }
@media (max-width: 1150px) { body.sk-maquette main .xp-hero-globe { width: 300px; height: 300px; right: 1%; } }
@media (max-width: 1150px) { body.sk-maquette main .xp-hero--globe .xp-hero-inner > * { max-width: 460px; } }
@media (max-width: 900px) { body.sk-maquette main .xp-hero-globe { display: none; } }
@media (max-width: 900px) { body.sk-maquette main .xp-hero--globe { padding-bottom: 72px; } }
@media (max-width: 1024px) { body.sk-maquette main .skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) { body.sk-maquette main .packs-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
@media (max-width: 768px) { body.sk-maquette main .competences, body.sk-maquette main .why, body.sk-maquette main .packs, body.sk-maquette main .contact { padding: 60px 0; } }
@media (max-width: 768px) { body.sk-maquette main .skills-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { body.sk-maquette main .pack-price .amount { font-size: 1.8rem; } }
body.sk-maquette main .peek-robot { position: absolute; right: -60px; bottom: -238px; width: 460px; height: 460px; z-index: 0; }
body.sk-maquette main .peek-robot, body.sk-maquette main .peek-robot * { pointer-events: none !important; }
@media (max-width: 1100px) { body.sk-maquette main .peek-robot { right: -70px; bottom: -207px; width: 400px; height: 400px; } }
@media (max-width: 900px) { body.sk-maquette main .peek-robot { display: none; } }
body.sk-maquette main .photo-band { position: relative; height: 320px; overflow: hidden; background: var(--navy-700); }
body.sk-maquette main .photo-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.sk-maquette main .photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32, 38, 49, 0.16), rgba(32, 38, 49, 0.40)); pointer-events: none; }
@media (max-width: 900px) { body.sk-maquette main .photo-band { height: 240px; } }
@media (max-width: 560px) { body.sk-maquette main .photo-band { height: 170px; } }

/* 2. Specifique Cybersecurite (expertise-cybersecurite.html) : bloc tests d'intrusion */
body.sk-maquette main .xp-pentest { padding: 72px 0 76px; border-top: 1px solid var(--line); }
body.sk-maquette main .xp-pentest h2 { max-width: 22ch; margin-bottom: 18px; }
body.sk-maquette main .xp-pentest-lead { font-size: 1.1rem; color: var(--ink); max-width: 68ch; margin-bottom: 40px; }
body.sk-maquette main .xp-pentest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-bottom: 44px; }
body.sk-maquette main .xp-pentest-card { background: var(--paper-soft); border-radius: var(--r-lg); padding: 28px 30px; border-left: 3px solid var(--lime-500); }
body.sk-maquette main .xp-pentest-tag { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
body.sk-maquette main .xp-pentest-card h3 { margin-bottom: 12px; }
body.sk-maquette main .xp-pentest-card p { max-width: 52ch; }
body.sk-maquette main .xp-pentest-cve { max-width: 70ch; }
body.sk-maquette main .xp-pentest-cve h3 { margin-bottom: 14px; }
body.sk-maquette main .xp-pentest-cve p + p { margin-top: 14px; }
body.sk-maquette main .xp-pentest-cve code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--paper-alt); padding: 2px 7px; border-radius: 5px; color: var(--navy-700); }
body.sk-maquette main .xp-pentest-note { margin-top: 20px; padding: 18px 22px; background: var(--lime-050); border-radius: var(--r-md); color: var(--ink); }
body.sk-maquette main .xp-pentest-livrable { max-width: 70ch; margin-top: 40px; }
body.sk-maquette main .xp-pentest-livrable h3 { margin-bottom: 12px; }
@media (max-width: 900px) { body.sk-maquette main .xp-pentest { padding: 56px 0 60px; } }
@media (max-width: 900px) { body.sk-maquette main .xp-pentest-grid { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 900px) { body.sk-maquette main .xp-pentest-card { padding: 24px 22px; } }
@media (max-width: 900px) { body.sk-maquette main .xp-pentest-note { padding: 16px 18px; } }
@keyframes lightDriftSlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.1); }
}
@keyframes packsDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-70px, 60px) scale(1.15); }
}
@keyframes packsDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(80px, -50px) scale(1.18); }
}

/* 3. Adaptation WordPress : t006-real-3d.js insere un hote `.sk-real-3d-host` dans
   le conteneur de la maquette (#infogerance-globe, #peek-robot) ; il en prend
   toute la surface, comme la scene montee directement dans la maquette. */
body.sk-maquette main .xp-hero-globe > .sk-real-3d-host,
body.sk-maquette main .peek-robot > .sk-real-3d-host { width: 100%; height: 100%; }

/* La regle provisoire `.eyebrow` du theme (style.css) ajoute `text-transform:uppercase`,
   absent de la maquette : « Nos expertises » passait en capitales (mesure Playwright,
   +8 px). Meme retablissement que sur l'accueil (accueil-adaptations.css), limite a
   cette famille pour laisser la page ESN validee inchangee. */
body.sk-maquette main .eyebrow { text-transform: none; }

/* style.css l. 6 (rang 6) : en mouvement reduit, la maquette coupe aussi les animations des
   pseudo-elements ; le socle ne reprend que `main *`. Sans cette regle, le halo
   `.competences::before` continuait de deriver. */
@media (prefers-reduced-motion: reduce) { body.sk-maquette main *::before, body.sk-maquette main *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }