/*======================================================*/
/*  Vitrine "Place au jeu" (nouveauté 2026)              */
/*  Bloc common/placeaujeu.php — couleurs reprises de    */
/*  placeaujeu.com                                       */
/*======================================================*/
.paj {
   --paj-accent: #d9480f;
   --paj-accent-2: #ff7a3d;
   --paj-jaune: #ffd43b;
   --paj-bleu: #74c0fc;
   --paj-vert: #8ce99a;
   --paj-rouge: #ff6b6b;
   position: relative;
   overflow: hidden;
   isolation: isolate;
   padding: 96px 22px;
   color: #f1ebe4;
   background:
      radial-gradient(900px 500px at 85% 15%, rgba(217, 72, 15, 0.45), transparent 60%),
      radial-gradient(700px 500px at 5% 95%, rgba(255, 212, 59, 0.16), transparent 60%),
      linear-gradient(160deg, #26221e 0%, #1c1916 55%, #120f0d 100%);
}

/* Motif pointillé discret façon plateau de jeu */
.paj::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px);
   background-size: 26px 26px;
   -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
   mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}

.paj-inner {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
   align-items: center;
   gap: 56px;
   max-width: 1240px;
   margin: 0 auto;
}

/*--- Badge "Nouveau" avec pastille pulsante ---*/
.paj-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 7px 16px 7px 12px;
   border: 1px solid rgba(255, 122, 61, 0.55);
   border-radius: 50px;
   background: rgba(217, 72, 15, 0.18);
   color: #ffb38a;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.paj-dot {
   position: relative;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--paj-accent-2);
}

.paj-dot::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: var(--paj-accent-2);
   animation: paj-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes paj-ping {
   75%, 100% { transform: scale(2.6); opacity: 0; }
}

/*--- Titre + logo dé ---*/
.paj-title {
   display: flex;
   align-items: center;
   gap: 18px;
   margin: 22px 0 6px;
   font-family: 'Poppins', Verdana, sans-serif;
   font-size: clamp(2.6rem, 6vw, 4.4rem);
   font-weight: 700;
   line-height: 1;
   letter-spacing: -1.5px;
   color: #fff;
}

.paj-logo {
   flex: 0 0 auto;
   width: clamp(52px, 7vw, 72px);
   height: clamp(52px, 7vw, 72px);
   padding: clamp(7px, 1vw, 10px);
   border-radius: 22%;
   background: linear-gradient(135deg, var(--paj-accent-2), var(--paj-accent));
   box-shadow: 0 12px 30px rgba(217, 72, 15, 0.55), inset 0 -4px 0 rgba(0, 0, 0, 0.18);
   animation: paj-roll 6s ease-in-out infinite;
}

/* Le dé "roule" de temps en temps */
@keyframes paj-roll {
   0%, 70%, 100% { transform: rotate(0); }
   78%  { transform: rotate(-200deg) scale(1.08); }
   86%  { transform: rotate(-350deg); }
   92%  { transform: rotate(-360deg); }
}

.paj-tagline {
   margin: 10px 0 18px;
   font-size: clamp(1.25rem, 2.4vw, 1.7rem);
   font-weight: 500;
   color: #f1ebe4;
}

.paj-tagline em {
   font-style: normal;
   color: var(--paj-jaune);
   background: linear-gradient(transparent 62%, rgba(217, 72, 15, 0.55) 62%);
   padding: 0 4px;
}

.paj-desc {
   max-width: 560px;
   font-size: 16px;
   line-height: 1.7;
   color: #cfc6bc;
}

.paj-desc b { color: #fff; font-weight: 600; }

/*--- Pastilles de catégories ---*/
.paj-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 22px 0 28px;
}

.paj-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   font-size: 14px;
   font-weight: 500;
   color: #f1ebe4;
   transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.paj-chip i { color: var(--paj-accent-2); }
.paj-chip:nth-child(2) i { color: var(--paj-rouge); }
.paj-chip:nth-child(3) i { color: var(--paj-bleu); }
.paj-chip:nth-child(4) i { color: var(--paj-vert); }
.paj-chip:nth-child(5) i { color: var(--paj-jaune); }

.paj-chip:hover {
   transform: translateY(-3px);
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 122, 61, 0.6);
}

/*--- Chiffres clés ---*/
.paj-stats {
   display: flex;
   gap: 34px;
   margin-bottom: 34px;
}

.paj-stat b {
   display: block;
   font-size: clamp(2rem, 4vw, 2.8rem);
   font-weight: 700;
   line-height: 1;
   background: linear-gradient(135deg, var(--paj-jaune), var(--paj-accent-2));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-variant-numeric: tabular-nums;
}

.paj-stat span {
   display: block;
   margin-top: 6px;
   font-size: 13px;
   color: #b4aaa0;
   text-transform: uppercase;
   letter-spacing: .6px;
}

/*--- Bouton principal avec reflet ---*/
.paj-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
   overflow: hidden;
   padding: 16px 32px;
   border-radius: 50px;
   background: linear-gradient(135deg, var(--paj-accent-2), var(--paj-accent));
   color: #fff !important;
   font-size: 17px;
   font-weight: 600;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(217, 72, 15, 0.5);
   transition: transform .25s ease, box-shadow .25s ease;
}

.paj-btn::after {
   content: "";
   position: absolute;
   top: 0;
   left: -60%;
   width: 40%;
   height: 100%;
   background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
   transform: skewX(-20deg);
   animation: paj-shine 3.5s ease-in-out infinite;
}

@keyframes paj-shine {
   0%, 60% { left: -60%; }
   100%    { left: 130%; }
}

.paj-btn:hover {
   transform: translateY(-3px) scale(1.02);
   box-shadow: 0 18px 40px rgba(217, 72, 15, 0.65);
}

/*--- Visuel : navigateur incliné + photo en arrière ---*/
.paj-text,
.paj-visual { min-width: 0; }

.paj-visual { perspective: 1400px; }

.paj-stack {
   position: relative;
   display: block;
   padding: 40px 0 40px 40px;
   text-decoration: none;
}

.paj-browser {
   position: relative;
   z-index: 2;
   display: block;
   overflow: hidden;
   border-radius: 16px;
   background: #fffaf3;
   box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
   transform: rotateY(-12deg) rotateX(6deg) rotate(1deg);
   transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.paj-bar {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 11px 14px;
   background: #eadfd2;
}

.paj-lights { display: flex; gap: 6px; }
.paj-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff6b6b; }
.paj-lights i:nth-child(2) { background: #ffd43b; }
.paj-lights i:nth-child(3) { background: #69db7c; }

.paj-url {
   flex: 1;
   padding: 5px 12px;
   border-radius: 8px;
   background: #fff;
   color: #6b625a;
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.paj-url i { color: #2f9e44; }

.paj-screen {
   position: relative;
   display: block;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}

.paj-screen img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1.02);
   transition: transform 1.2s ease;
}

.paj-screen-caption {
   position: absolute;
   left: 16px;
   bottom: 16px;
   padding: 8px 16px;
   border-radius: 10px;
   background: rgba(28, 25, 22, 0.78);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: #fff;
   font-size: 15px;
   font-weight: 600;
}

.paj-shot-back {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 58%;
   overflow: hidden;
   border-radius: 14px;
   border: 4px solid #fffaf3;
   box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
   transform: rotate(-8deg);
   transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.paj-shot-back img { display: block; width: 100%; }

.paj-sticker {
   position: absolute;
   z-index: 3;
   right: -14px;
   bottom: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 104px;
   height: 104px;
   border-radius: 50%;
   background: var(--paj-jaune);
   color: #2b2622;
   font-size: 15px;
   font-weight: 700;
   line-height: 1.15;
   text-align: center;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
   transform: rotate(12deg);
   animation: paj-bob 4s ease-in-out infinite;
}

@keyframes paj-bob {
   0%, 100% { transform: rotate(12deg) translateY(0); }
   50%      { transform: rotate(6deg) translateY(-10px); }
}

.paj-stack:hover .paj-browser { transform: rotateY(0) rotateX(0) rotate(0) scale(1.02); }
.paj-stack:hover .paj-screen img { transform: scale(1.08); }
.paj-stack:hover .paj-shot-back { transform: rotate(-14deg) translate(-18px, -8px); }

/*--- Dés et meeples flottants ---*/
.paj-floaters {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
}

.paj-die,
.paj-logo {
   display: grid;
   grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
   place-items: center;
   font-size: 0;
   line-height: 0;
}

.paj-die {
   position: absolute;
   width: 54px;
   height: 54px;
   padding: 7px;
   border-radius: 13px;
   background: #fffaf3;
   box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
   opacity: .9;
   animation: paj-float 9s ease-in-out infinite;
}

.paj-die i,
.paj-logo i {
   display: block;
   width: 78%;
   height: 78%;
   border-radius: 50%;
   background: #2b2622;
}

.paj-logo i { background: #fff; }

/* Placement des points : faces 5, 3 et 2 */
.paj-logo i:nth-child(1), .paj-d1 i:nth-child(1), .paj-d3 i:nth-child(1) { grid-area: 1 / 1; }
.paj-logo i:nth-child(2), .paj-d1 i:nth-child(2), .paj-d3 i:nth-child(2) { grid-area: 1 / 3; }
.paj-logo i:nth-child(3), .paj-d1 i:nth-child(3), .paj-d3 i:nth-child(3) { grid-area: 2 / 2; }
.paj-logo i:nth-child(4), .paj-d1 i:nth-child(4), .paj-d3 i:nth-child(4) { grid-area: 3 / 1; }
.paj-logo i:nth-child(5), .paj-d1 i:nth-child(5), .paj-d3 i:nth-child(5) { grid-area: 3 / 3; }
.paj-d2 i:nth-child(1) { grid-area: 1 / 1; }
.paj-d2 i:nth-child(2) { grid-area: 2 / 2; }
.paj-d2 i:nth-child(3) { grid-area: 3 / 3; }
.paj-d4 i:nth-child(1) { grid-area: 1 / 3; }
.paj-d4 i:nth-child(2) { grid-area: 3 / 1; }

.paj-d1 { top: 3%;  left: 1%;  --r: -18deg; }
.paj-d2 { top: 72%; left: 44%; --r: 24deg;  width: 42px; height: 42px; padding: 6px; animation-delay: -3s; background: var(--paj-jaune); }
.paj-d3 { top: 6%;  right: 6%; --r: 32deg;  width: 40px; height: 40px; padding: 6px; animation-delay: -5s; background: var(--paj-accent-2); }
.paj-d3 i { background: #fff; }
.paj-d4 { bottom: 7%; left: 12%; --r: -40deg; width: 46px; height: 46px; animation-delay: -1.5s; background: var(--paj-bleu); }

@keyframes paj-float {
   0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
   50%      { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 25deg)); }
}

/* Silhouette de pion "meeple" */
.paj-meeple {
   position: absolute;
   width: 44px;
   height: 44px;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4c10 0 16 7 16 17 0 7-4 11-6 13l28 10c8 3 8 15 0 17l-18 3 10 28c2 5-2 8-7 8H60L50 80 40 100H27c-5 0-9-3-7-8l10-28-18-3c-8-2-8-14 0-17l28-10c-2-2-6-6-6-13 0-10 6-17 16-17z'/%3E%3C/svg%3E") center / contain no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4c10 0 16 7 16 17 0 7-4 11-6 13l28 10c8 3 8 15 0 17l-18 3 10 28c2 5-2 8-7 8H60L50 80 40 100H27c-5 0-9-3-7-8l10-28-18-3c-8-2-8-14 0-17l28-10c-2-2-6-6-6-13 0-10 6-17 16-17z'/%3E%3C/svg%3E") center / contain no-repeat;
   opacity: .75;
   animation: paj-float 11s ease-in-out infinite;
}

.paj-m1 { top: 44%; left: 1.5%; --r: 12deg;  background: var(--paj-vert); }
.paj-m2 { top: 80%; right: 4%;  --r: -16deg; background: var(--paj-rouge); animation-delay: -4s; width: 36px; height: 36px; }
.paj-m3 { top: 3%;  left: 47%;  --r: 20deg;  background: var(--paj-bleu); animation-delay: -7s; width: 32px; height: 32px; }

/*--- Responsive ---*/
@media (max-width: 900px) {
   .paj { padding: 72px 18px; }
   .paj-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
   .paj-visual { order: -1; max-width: 620px; margin: 0 auto; width: 100%; }
   .paj-browser { transform: rotate(-1.5deg); }
   .paj-d2, .paj-m3 { display: none; }
}

@media (max-width: 560px) {
   .paj-stack { padding: 26px 0 30px 18px; }
   .paj-sticker { width: 80px; height: 80px; font-size: 12px; right: -6px; }
   .paj-stats { gap: 20px; }
   .paj-stat span { font-size: 11px; }
   .paj-btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 16px; }
   .paj-screen-caption { font-size: 12px; left: 10px; bottom: 10px; padding: 6px 10px; }
   .paj-die, .paj-meeple { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
   .paj *, .paj *::before, .paj *::after { animation: none !important; }
}