/* =========================================================
   index.html — « Le système », les 3 pièces (2026-09-30)
   La peau de la maquette, sans ruban « PREMIUM » (refaite le 2026-09-30 :
   cadre or épais, reflet, halo, coins 22, icône 88 px, titre Cormorant
   32 px centré, corps 15 px crème 80 % centré). Phrases de la page. Icônes : fenêtres
   d'affichage sur assets/img/accueil-systeme-pieces.jpg (la maquette
   telle quelle, 2160 × 864) ; « screen » + contraste effacent son fond.
   ========================================================= */
.acs-pieces { align-items: stretch; gap: clamp(22px, 2.8vw, 36px); padding-bottom: 18px; }
/* 2026-09-30 (2) : la carte de la maquette, pas un contour fin — verre
   sombre avec reflet en haut, cadre or épais en dégradé (double filet),
   halo or sous la carte, coins 22. */
.acs-pieces > .carte {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 0;   /* pas le gap de .pilier */
  padding: 34px 30px 36px; text-align: center;
  border: 3px solid transparent; border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(22, 30, 52, 0.92), rgba(8, 12, 26, 0.96)) padding-box,
    linear-gradient(145deg, #f6dc98 0%, #b98d3e 22%, #f1d086 48%, #9a7229 72%, #e9c678 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 170, 0.35),          /* filet intérieur clair */
    inset 0 0 0 6px rgba(10, 14, 28, 0.55),
    inset 0 0 0 7px rgba(236, 196, 110, 0.35),          /* second filet */
    0 0 18px rgba(236, 184, 82, 0.35),                  /* lueur du cadre */
    0 28px 44px -20px rgba(236, 184, 82, 0.55);         /* halo sous la carte */
  transition: transform 180ms ease, box-shadow 180ms ease;
}
/* Le reflet du verre, en haut (et une diagonale douce). */
.acs-pieces > .carte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 19px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 22%, transparent 45%),
    linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, 0.05) 62%, transparent 70%);
}
.acs-pieces > .carte:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 170, 0.45), inset 0 0 0 6px rgba(10, 14, 28, 0.55), inset 0 0 0 7px rgba(236, 196, 110, 0.45),
    0 0 24px rgba(236, 184, 82, 0.45), 0 32px 50px -20px rgba(236, 184, 82, 0.65);
}
@media (prefers-reduced-motion: reduce) { .acs-pieces > .carte, .acs-pieces > .carte:hover { transition: none; transform: none; } }
/* 2026-09-30 (3) : icônes pleines, dessinées — or net en dégradé, 72 px,
   sans flou, halo, masque ni fondu : posées sur le verre de la carte. */
.acs-icone { display: block; width: 72px; height: 72px; margin: 0 auto 20px; }
.acs-pieces > .carte h3 { margin: 0 0 14px; text-align: center; font-family: var(--serif); font-size: 32px; font-weight: 400; line-height: 1.15; color: #f1d58f; text-shadow: 0 1px 12px rgba(236, 184, 82, 0.25); }
.acs-pieces > .carte p { margin: 0; text-align: center; font-size: 15px; line-height: 1.65; color: rgba(244, 239, 228, 0.8); }