/* Arcanes Promo : bloc « Tirez un arcane » de l'accueil. La Carte garde la DA des Arcanes (violet nuit + or) dans tous les thèmes ;
   le cadre autour suit le thème du site. Mesures de la Carte en em : 1em = 1 px de la carte de référence 240×384, échelle --ac. */
@font-face{font-family:"AP Cinzel";font-weight:700;font-display:swap;src:url(../fonts/cinzel-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AP Cinzel";font-weight:700;font-display:swap;src:url(../fonts/cinzel-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"AP Cinzel Decorative";font-weight:700;font-display:swap;src:url(../fonts/cinzel-decorative-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AP Cinzel Decorative";font-weight:700;font-display:swap;src:url(../fonts/cinzel-decorative-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"AP Nunito";font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"AP Nunito";font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---- le cadre ---- */
.ap-bande { border-color: var(--accent); background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--accent) 12%, var(--surface))); text-align: center; overflow: hidden; }
.ap-tete h2 { margin-bottom: .2rem; }
.ap-tete p { margin: 0 auto; color: var(--text-dim); max-width: 46ch; }
.ap-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }

/* ---- l'éventail ---- */
.ap-eventail { display: flex; justify-content: center; align-items: flex-start; padding: 2.2rem 0 1.6rem; }
.ap-eventail .arcane-card { --ac: .78; margin: 0 -1.6rem; transition: transform .35s ease, opacity .35s ease; transform-origin: 50% 110%; position: relative; }
.ap-eventail .arcane-card[hidden] { display: none; }
.ap-eventail .ap-g { transform: rotate(-9deg) translateY(16px); z-index: 1; }
.ap-eventail .ap-c { transform: translateY(-4px); z-index: 2; }
.ap-eventail .ap-d { transform: rotate(9deg) translateY(16px); z-index: 1; }
.ap-eventail .arcane-card:hover, .ap-eventail .arcane-card:focus-visible { transform: translateY(-14px) rotate(0); z-index: 3; }
.ap-eventail .arcane-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.ap-eventail.ap-tire .arcane-card:not([hidden]) { animation: ap-tirer .45s ease both; }
.ap-eventail.ap-tire .ap-c { animation-delay: .06s; }
.ap-eventail.ap-tire .ap-d { animation-delay: .12s; }
@keyframes ap-tirer { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 760px) { .ap-eventail .arcane-card { --ac: .6; margin: 0 -1.4rem; } }
@media (max-width: 460px) { .ap-eventail { padding-top: 1.6rem; } .ap-eventail .arcane-card { --ac: .46; margin: 0 -1.1rem; } }
@media (prefers-reduced-motion: reduce) { .ap-eventail .arcane-card { transition: none; } .ap-eventail.ap-tire .arcane-card { animation: none; } }

/* ---- la Carte ---- */
.arcane-card { --ac: 1; font-size: calc(var(--ac) * 1px); width: 240em; height: 384em; box-sizing: border-box; padding: 8em; border-radius: 18em; flex: none; display: block;
  background: linear-gradient(180deg, #2E1F57 0%, #1A1033 100%); border: 1.5em solid rgba(212,176,56,.6); box-shadow: 0 8em 28em rgba(110,61,199,.35);
  font-family: "AP Nunito", sans-serif; color: #F2EBD6; text-align: center; text-decoration: none; line-height: normal; letter-spacing: normal; }
.arcane-card * { box-sizing: border-box; }
.arcane-card > .ac-in { height: 100%; border: 1em solid rgba(212,176,56,.3); border-radius: 12em; padding: 14em 14em 10em; display: flex; flex-direction: column; align-items: center; gap: 7em; overflow: hidden; }
.ac-num { display: flex; align-items: center; gap: .6em; font-family: "AP Cinzel", serif; font-weight: 700; font-size: 13em; letter-spacing: .18em; color: #D4B038; }
.ac-num::before, .ac-num::after { content: ""; width: 1.7em; height: 1px; background: rgba(212,176,56,.5); }
.ac-seal { display: block; width: 104em; height: 104em; flex: none; border-radius: 50%; border: 1.5em solid rgba(212,176,56,.75); padding: 6em; margin-top: 2em; }
.ac-seal > span { width: 100%; height: 100%; border-radius: 50%; border: 1em dashed rgba(212,176,56,.35); background: radial-gradient(circle at 50% 40%, #3A2870 0%, #160D2E 75%); display: flex; align-items: center; justify-content: center; }
.ac-seal svg { width: 46em; height: 46em; fill: none; stroke: #F2D987; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ac-name { font-family: "AP Cinzel Decorative", serif; font-weight: 700; font-size: 21em; line-height: 1.15; color: #F2D987; margin-top: .2em; }
.ac-cat { font-size: 10.5em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #B4A9D0; }
.ac-tag { font-size: 13em; line-height: 1.4; color: #F2EBD6; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ac-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4em; }
.ac-badges span { font-size: 10.5em; font-weight: 700; padding: .3em .75em; border-radius: 999px; border: 1px solid rgba(212,176,56,.4); color: #F2D987; }
.ac-foot { display: block; width: 100%; border-top: 1px solid rgba(212,176,56,.2); padding-top: .65em; font-size: 10.5em; font-weight: 700; letter-spacing: .06em; color: #B4A9D0; }
