/* Les decks de départ de la page Services : la boîte d'origine (validée), avec des couleurs et un motif
   propres à chaque deck. Chargé après services.css. */
/* les combos : des decks de départ en boîte, comme les decks thématiques vendus en magasin.
   Une boîte de carton imprimé, une fenêtre découpée où l'on voit le haut des cartes ; à l'arrivée,
   le rabat s'ouvre et les cartes glissent hors de la boîte en éventail. Tout est plat : aucun reflet. */
.cl-combos { overflow: hidden; color: var(--blanc);
  background: radial-gradient(rgba(246, 246, 247, .07) 1.5px, transparent 2px) 0 0 / 15px 15px, var(--nuit); }
.cl-combos__rayons { position: absolute; inset: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg at 50% 115%, rgba(255, 0, 77, .12) 0 3deg, transparent 3deg 10deg); }
.cl-combos__tete { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(30px, 5vw, 80px); align-items: end; }
.cl-combos__cote { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cl-combos__cote p { max-width: 44ch; margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: #DCDCE2; }
.decks { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3vw, 56px); margin: clamp(30px, 3vw, 50px) 0 calc(var(--biais) * .3); padding: 0; list-style: none; }
.deck { --boite: var(--rouge); --encre: #fff; --rabat: var(--rouge-fonce); --rayons: rgba(255, 255, 255, .14); display: flex; flex-direction: column; align-items: center; text-align: center; }
.deck--jaune { --boite: var(--jaune); --encre: var(--nuit); --rabat: #E3D740; --rayons: rgba(23, 23, 26, .08); }
.deck--charbon { --boite: var(--charbon-2); --encre: #fff; --rabat: var(--charbon); --rayons: rgba(255, 0, 77, .22); }
.deck--blanc { --boite: var(--blanc); --encre: var(--nuit); --rabat: #D9D9DE; --rayons: rgba(23, 23, 26, .07); }
/* la scène : de l'espace au-dessus de la boîte pour les cartes qui en sortent */
.deck__scene { position: relative; width: min(100%, 320px); container-type: inline-size; }
.deck__scene::before { content: ""; display: block; height: 192cqi; }
.deck__fond, .deck__face, .deck__fenetre { position: absolute; left: 0; right: 0; bottom: 0; height: 112cqi; }
/* l'intérieur de la boîte, qu'on voit par la fenêtre ; il porte aussi l'ombre pleine de la boîte */
.deck__fond { z-index: 0; border-radius: 2.4cqi; background: radial-gradient(rgba(246, 246, 247, .08) 1px, transparent 1.4px) 0 0 / 3cqi 3cqi, var(--charbon); box-shadow: 4cqi 4cqi 0 #000; }
.deck__cartes { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 112cqi; }
/* les cartes s'ouvrent en trois temps : elles montent hors de la boîte jusqu'à ne plus la toucher,
   passent devant elle, puis redescendent jusqu'à la moitié de la boîte. La fermeture joue l'inverse.
   Hauteurs en cqi depuis le bas de la scène : la boîte monte à 112, une carte mesure environ 75. */
.deck__pose { --dx: 0cqi; --rot: 0deg; --d: 0s; position: absolute; left: 50%; bottom: 37cqi; width: 54cqi; margin-left: -27cqi; transform-origin: 50% 100%;
  transform: translate(calc(var(--dx) * .2), 0) rotate(calc(var(--rot) * .15)); transition: transform .45s cubic-bezier(.3, .7, .3, 1) var(--d); }
.deck__cartes[data-n="3"] .deck__pose:nth-child(1) { --dx: -24cqi; --rot: -11deg; --d: .05s; }
.deck__cartes[data-n="3"] .deck__pose:nth-child(2) { --dx: 0cqi; --rot: 0deg; --d: 0s; }
.deck__cartes[data-n="3"] .deck__pose:nth-child(3) { --dx: 24cqi; --rot: 11deg; --d: .1s; }
.deck__cartes[data-n="2"] .deck__pose:nth-child(1) { --dx: -15cqi; --rot: -8deg; --d: 0s; }
.deck__cartes[data-n="2"] .deck__pose:nth-child(2) { --dx: 15cqi; --rot: 8deg; --d: .06s; }
/* 1. au-dessus de la boîte, sans la toucher : le bas des cartes à 129, avec de l'air même sous les coins penchés */
.deck.est-sorti .deck__pose { transform: translate(var(--dx), -92cqi) rotate(var(--rot)); }
/* 2. devant la boîte, 3. posées jusqu'à sa moitié (le bas des cartes à 59) */
.deck.est-dessus .deck__cartes, .deck.est-remonte .deck__cartes { z-index: 8; }
.deck.est-sorti.est-dessus .deck__pose { transform: translate(var(--dx), -22cqi) rotate(var(--rot)); transition: transform .55s var(--claque) var(--d); }
.deck__pose:focus-within { z-index: 2; }
@media (hover: hover) { .deck__pose:hover { z-index: 2; } }
.deck__carte { width: 100%; rotate: none; box-shadow: 2cqi 2cqi 0 rgba(0, 0, 0, .55); }
.deck__carte:focus-visible { rotate: none; }
@media (hover: hover) { .deck__carte:hover { rotate: none; } }
.deck__carte .mini-carte__papier { gap: 1.8cqi; padding: 2.2cqi; }
.deck__carte .mini-carte__nom { font-size: max(9px, 3.4cqi); letter-spacing: .02em; padding: 1cqi 1.4cqi .8cqi; }
.deck__carte .mini-carte__num { font-size: max(9px, 3cqi); }
/* la face de la boîte : carton imprimé, avec la fenêtre découpée (les clics passent par la fenêtre) */
.deck__face { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2.4cqi; padding: 0 7cqi 8cqi; border-radius: 2.4cqi; color: var(--encre);
  background: radial-gradient(rgba(23, 23, 26, .14) 1px, transparent 1.5px) 0 0 / 3cqi 3cqi, repeating-conic-gradient(from 0deg at 50% 30%, var(--rayons) 0 5deg, transparent 5deg 14deg), var(--boite);
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 11% 8%, 11% 57%, 89% 57%, 89% 8%, 11% 8%); }
.deck__sur { margin: 0; font: 600 max(10px, 3.4cqi)/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.deck__nom { margin: 0; font: 900 max(17px, 7.6cqi)/.98 var(--titre); text-transform: uppercase; text-wrap: balance; min-height: 2em; display: flex; align-items: center; }
/* le cadre noir de la fenêtre, par-dessus */
.deck__fenetre { z-index: 4; pointer-events: none; }
.deck__fenetre::before { content: ""; position: absolute; left: 11%; right: 11%; top: 8%; bottom: 43%; border: 1.3cqi solid var(--nuit); border-radius: 1.2cqi; }
/* le rabat du dessus : il bascule vers l'arrière quand la boîte s'ouvre */
.deck__rabat { position: absolute; z-index: 5; left: 3%; right: 3%; bottom: calc(112cqi - 1px); height: 10cqi; border-radius: 2cqi 2cqi 0 0; background: var(--rabat); transform-origin: 50% 100%; transition: transform .5s var(--rapide), opacity .3s .2s; }
.deck__rabat::after { content: ""; position: absolute; left: 36%; right: 36%; top: 30%; height: 3cqi; border-radius: 2cqi; background: rgba(23, 23, 26, .35); }
.deck__scene { perspective: 900px; }
.deck.est-ouvert .deck__rabat { transform: rotateX(-118deg); opacity: 0; }
/* toute la boîte est un bouton : au survol, seul le rabat se soulève un peu pour inviter au clic */
.deck__ouvrir { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 122cqi; display: flex; align-items: flex-start; justify-content: flex-end; padding: 0; border: 0; border-radius: 2.4cqi; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.deck__ouvrir:focus-visible { outline: 3px solid var(--jaune); outline-offset: 6px; }
@media (hover: hover) { .deck:not(.est-ouvert) .deck__scene:has(.deck__ouvrir:is(:hover, :focus-visible)) .deck__rabat { transform: rotateX(-34deg); } }
/* l'étiquette « Ouvrir le deck », posée sur la face, centrée entre le bas de la fenêtre et le libellé « Deck de départ » */
.deck__indice { position: absolute; z-index: 6; left: 50%; bottom: 34.6cqi; margin: 0; translate: -50% 0; display: inline-flex; align-items: center; gap: 1.6cqi; padding: 1.8cqi 3.2cqi 1.6cqi; border-radius: var(--r); background: var(--nuit); color: #fff; font: 700 max(13px, 4.4cqi)/1 var(--bouton); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: background .15s, color .15s; }
.deck__indice i { font-size: 1.2em; transition: rotate .4s var(--claque); }
@media (hover: hover) { .deck__ouvrir:is(:hover) .deck__indice { background: var(--jaune); color: var(--nuit); } }
.deck__ouvrir:focus-visible .deck__indice { background: var(--jaune); color: var(--nuit); }
.deck.est-ouvert .deck__ouvrir { height: 104cqi; }
.deck__numero { position: absolute; z-index: 6; left: -3cqi; bottom: 100cqi; font-size: max(11px, 3.6cqi); rotate: -6deg; }
.deck__texte { max-width: 30ch; margin: clamp(26px, 2.6vw, 36px) 0 0; font-size: 16px; line-height: 1.45; color: #DCDCE2; }

/* ---- chaque deck a ses couleurs et son motif imprimé (même boîte pour tous) */
.deck__face { background: var(--motif), var(--boite); }
.deck--m1 { --boite: var(--rouge); --encre: #fff; --rabat: var(--rouge-fonce);
  --motif: radial-gradient(rgba(23, 23, 26, .14) 1px, transparent 1.5px) 0 0 / 3cqi 3cqi, repeating-conic-gradient(from 0deg at 50% 30%, rgba(255, 255, 255, .15) 0 5deg, transparent 5deg 14deg); }
.deck--m2 { --boite: var(--jaune); --encre: var(--nuit); --rabat: var(--rouge);
  --motif: radial-gradient(rgba(255, 0, 77, .3) 1.1cqi, transparent 1.25cqi) 0 0 / 5cqi 5cqi, radial-gradient(rgba(255, 0, 77, .3) 1.1cqi, transparent 1.25cqi) 2.5cqi 2.5cqi / 5cqi 5cqi; }
.deck--m3 { --boite: var(--charbon-2); --encre: #fff; --rabat: var(--jaune);
  --motif: repeating-linear-gradient(135deg, rgba(255, 0, 77, .28) 0 1.6cqi, transparent 1.6cqi 5.2cqi); }
.deck--m4 { --boite: var(--blanc); --encre: var(--nuit); --rabat: var(--rouge);
  --motif: repeating-radial-gradient(circle at 50% 30%, rgba(23, 23, 26, .08) 0 1.2cqi, transparent 1.2cqi 3.6cqi); }
.deck--m5 { --boite: var(--nuit); --encre: #fff; --rabat: var(--rouge);
  --motif: linear-gradient(135deg, rgba(250, 239, 93, .16) 25%, transparent 25%) -3cqi 0 / 6cqi 6cqi, linear-gradient(225deg, rgba(250, 239, 93, .16) 25%, transparent 25%) -3cqi 0 / 6cqi 6cqi, linear-gradient(315deg, rgba(250, 239, 93, .16) 25%, transparent 25%) 0 0 / 6cqi 6cqi, linear-gradient(45deg, rgba(250, 239, 93, .16) 25%, transparent 25%) 0 0 / 6cqi 6cqi; }
.deck--m6 { --boite: var(--rouge-fonce); --encre: #fff; --rabat: var(--jaune);
  --motif: conic-gradient(rgba(23, 23, 26, .2) 25%, transparent 0 50%, rgba(23, 23, 26, .2) 0 75%, transparent 0) 0 0 / 8cqi 8cqi; }
.deck--m7 { --boite: var(--papier); --encre: var(--nuit); --rabat: var(--jaune);
  --motif: linear-gradient(rgba(255, 0, 77, .2) 1px, transparent 1px) 0 0 / 5cqi 5cqi, linear-gradient(90deg, rgba(255, 0, 77, .2) 1px, transparent 1px) 0 0 / 5cqi 5cqi; }
.deck--m8 { --boite: var(--jaune); --encre: var(--nuit); --rabat: var(--rouge);
  --motif: repeating-conic-gradient(from 0deg at 50% 100%, rgba(255, 0, 77, .22) 0 6deg, transparent 6deg 15deg); }
/* sur la boîte noire, la fenêtre et l'étiquette passent au jaune pour rester visibles */
.deck--m5 .deck__fenetre::before { border-color: var(--jaune); }
.deck--m5 .deck__indice { background: var(--jaune); color: var(--nuit); }
@media (hover: hover) { .deck--m5 .deck__ouvrir:is(:hover) .deck__indice { background: var(--rouge); color: #fff; } }
.deck--m5 .deck__ouvrir:focus-visible .deck__indice { background: var(--rouge); color: #fff; }

@media (max-width: 1060px) {
  .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 60px; }
}
@media (max-width: 640px) {
  .decks { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .deck__scene { width: min(100%, 290px); }
}
@media (max-width: 760px) {
  .decks { --balaye: 76vw; row-gap: 0; margin-top: 18px; margin-bottom: 0; padding-block: 8px 26px; }
  .deck__scene { width: 100%; }
  /* boîte fermée : on retire l'espace réservé aux cartes, il revient à l'ouverture */
  .deck__scene::before { height: 116cqi; transition: height .55s var(--claque); }
  /* la place pour le haut de la montée : les cartes ne sortent pas de la bande qui glisse */
  .decks:has(.est-ouvert) .deck__scene::before { height: 210cqi; }
  .cl-combos__tete { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .deck__scene::before { transition: none !important; }
  .deck__pose, .deck__rabat { transition: none !important; }
}