/* ============================================================
   Hero Phase 2 · Option A — pile de valises codée et dynamique
   (v5.0, 24/09/2026)
   Demande de Paul : « coder quelque chose de dynamique dans le
   même esprit à la place de la pile de valises » (l'image PNG
   fournie reste en réserve dans images/, non affichée).
   Même esprit que la maquette : 01 Le cadre (navy, base large)
   → 02 Vos équipes (bordeaux) → 03 Votre autonomie (corail,
   sommet étroit). Dynamisme : empilement animé au chargement
   (la fondation d'abord), tilt 3D qui suit la souris (JS),
   blocs qui se soulèvent au survol, grille blueprint qui
   défile (01), réseau qui pulse (02), rayons qui tournent (03).
   Chargée uniquement par phase-2a-autonomie.html.
   ============================================================ */

.p2-visual { min-width: 0; width: 100%; max-width: 380px; justify-self: end; }

/* Pile : ordre visuel inversé (01 en bas, 03 au sommet) sans toucher
   à l'ordre du DOM (lecture 01 → 03 préservée pour l'accessibilité) */
.p2c-stack {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s ease-out;
}

/* --- Entrée en cascade : la fondation d'abord --- */
.p2c-item {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(22px) scale(.95);
  animation: p2c-in .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
.p2c-item--1 { animation-delay: .1s; }
.p2c-item--2 { animation-delay: .3s; }
.p2c-item--3 { animation-delay: .5s; }
@keyframes p2c-in {
  to { opacity: 1; transform: none; }
}

/* --- Les valises --- */
.p2c-block {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 26px 26px 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 18px 32px -16px rgba(23, 23, 48, .45),
              inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
}
.p2c-item--1 .p2c-block { width: 100%; }
.p2c-item--2 .p2c-block { width: 91%; }
.p2c-item--3 .p2c-block { width: 78%; }

/* Survol : le bloc se soulève */
.p2c-item:hover .p2c-block {
  transform: translateY(-5px);
  box-shadow: 0 26px 40px -18px rgba(23, 23, 48, .55),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Fonds dégradés dans la charte */
.p2c-block--1 { background: linear-gradient(160deg, #2E3252 0%, #1B1E31 100%); }
.p2c-block--2 { background: linear-gradient(160deg, #8E3346 0%, #56202C 100%); }
.p2c-block--3 { background: linear-gradient(160deg, #FF6A55 0%, #E02C2C 100%);
  box-shadow: 0 18px 32px -14px rgba(242, 58, 58, .5),
              inset 0 1px 0 rgba(255, 255, 255, .25); }

/* 01 · grille blueprint qui défile lentement */
.p2c-block--1::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  animation: p2c-grid 14s linear infinite;
}
@keyframes p2c-grid {
  to { background-position: 44px 22px, 22px 44px; }
}

/* 03 · rayons de soleil qui tournent lentement */
.p2c-block--3::before {
  content: '';
  position: absolute; inset: -45%;
  background: repeating-conic-gradient(from 0deg at 50% 58%,
    rgba(255, 255, 255, .10) 0deg 4deg, transparent 4deg 11deg);
  animation: p2c-rays 46s linear infinite;
}
@keyframes p2c-rays {
  to { transform: rotate(360deg); }
}

/* Contenu au-dessus des textures animées */
.p2c-body, .p2c-art { position: relative; z-index: 1; }

/* Textes */
.p2c-num {
  display: block;
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  font-variant-numeric: lining-nums;
}
/* La règle de la charte sur `strong` forcerait les titres en bleu nuit :
   on réaffirme le blanc explicitement sur chaque niveau de texte. */
.p2c-block, .p2c-block .p2c-title, .p2c-block .p2c-num, .p2c-block .p2c-sub { color: #fff; }
.p2c-title {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 2px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.p2c-sub {
  display: block;
  margin-top: 9px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* Pictogrammes */
.p2c-art { flex: none; color: rgba(255, 255, 255, .85); }
.p2c-art svg { display: block; }
.p2c-block--1 .p2c-art svg { width: 46px; height: 46px; }
.p2c-art--network svg { width: 112px; height: auto; }
.p2c-art--arrow { align-self: flex-start; margin-top: 2px; }
.p2c-art--arrow svg { width: 26px; height: 26px; }

/* 02 · nœuds du réseau qui pulsent en décalé.
   ⚠️ Opacité uniquement : une animation CSS en `transform` écraserait
   l'attribut `transform="translate(...)"` des <g> et casserait le réseau. */
.p2c-node { animation: p2c-pulse 3s ease-in-out infinite; }
.p2c-node > circle:first-child { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .8); stroke-width: 1.4; }
.p2c-node .p2c-head, .p2c-node .p2c-shoulders { fill: rgba(255, 255, 255, .92); }
@keyframes p2c-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* Clasps métalliques sur le dessus des valises 01 et 02
   (visibles sous la valise empilée au-dessus) */
.p2c-grips { position: absolute; top: -6px; left: 0; right: 0; z-index: 2; }
.p2c-grips::before, .p2c-grips::after {
  content: '';
  position: absolute; top: 0;
  width: 28px; height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ECE7DF 0%, #C6BFB4 100%);
  box-shadow: 0 1px 2px rgba(23, 23, 48, .25);
}
.p2c-grips::before { left: 16%; }
.p2c-grips::after { right: 16%; }

/* --- Responsive --- */
@media (max-width: 960px) {
  .p2-visual { justify-self: start; max-width: 400px; }
}
@media (max-width: 420px) {
  .p2c-block { padding: 20px 18px 18px; }
  .p2c-title { font-size: 1.28rem; white-space: normal; }
  .p2c-sub { font-size: .6rem; }
  .p2c-art--network svg { width: 96px; }
  .p2c-block--1 .p2c-art svg { width: 38px; height: 38px; }
}

/* --- Accessibilité : aucune animation si l'utilisateur les réduit --- */
@media (prefers-reduced-motion: reduce) {
  .p2c-item { opacity: 1; animation: none; transform: none; }
  .p2c-block--1::before, .p2c-block--3::before, .p2c-node { animation: none; }
  .p2c-stack { transform: none !important; transition: none; }
  .p2c-item:hover .p2c-block { transform: none; }
}