/* croix-celtique.css — La Croix Celtique */
.cc-wrap{max-width:900px;margin:0 auto;padding:24px 16px 60px}
.cc-head{text-align:center;margin-bottom:26px}
.cc-eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:#9a7b3a;margin:0 0 6px}
.cc-head h1{font-size:clamp(26px,5vw,40px);margin:0 0 10px}
.cc-intro,.cc-q{max-width:60ch;margin:0 auto;color:#555}
.cc-q{font-style:italic;margin-top:8px;color:#7a5}
.cc-error{background:#fbe9e9;color:#a12;border:1px solid #e7bcbc;padding:10px 14px;border-radius:8px;text-align:center}

/* formulaire */
.cc-form{max-width:520px;margin:24px auto 0;display:flex;flex-direction:column;gap:12px}
.cc-form label{font-weight:600}.cc-form label span{font-weight:400;color:#888}
.cc-form input[type=text]{padding:12px 14px;border:1px solid #d8cfc0;border-radius:8px;font-size:16px}
.cc-actions{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.cc-btn{display:block;width:100%;padding:14px 18px;border:0;border-radius:10px;font-size:17px;font-weight:600;cursor:pointer;text-align:center;line-height:1.3}
.cc-btn small{display:block;font-weight:400;font-size:13px;opacity:.85;margin-top:3px}
.cc-btn-free{background:#efe6d3;color:#3a2f1c}
.cc-btn-paid{background:#5b3fa0;color:#fff}
.cc-btn[disabled]{opacity:.45;cursor:not-allowed}
.cc-note{background:#f4efe3;border-radius:8px;padding:10px 14px;color:#6a5b3c;text-align:center;margin:0}
.cc-pts{text-align:center;color:#777;margin-top:4px}

/* plateau croix + bâton (grille 5×4) */
.cc-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,auto);
  gap:6px;max-width:560px;margin:0 auto 30px;place-items:center}
.cc-slot{position:relative;margin:0;width:100%;max-width:96px}
.cc-slot img{width:100%;height:auto;display:block;border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.cc-slot .cc-num{position:absolute;top:-8px;left:-8px;z-index:3;background:#5b3fa0;color:#fff;
  font-size:11px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
/* carte 2 « en travers » : même cellule de grille que la carte 1 (superposition), juste pivotée.
   PAS de position:absolute (sinon elle se centre sur tout le plateau -> part à droite). */
.cc-cross2{grid-column:2;grid-row:2;max-width:80px;transform:rotate(90deg);z-index:2;align-self:center;justify-self:center}
.cc-cross2 .cc-num{transform:rotate(-90deg)}   /* badge redressé malgré la rotation du slot */

/* rituel : positions VIDES (emplacement pointillé, PAS de dos) tant qu'on n'y a pas posé de carte ;
   la pioche (78 dos) est au-dessus. La carte apparaît quand on la pose. */
.cc-slot img{transition:opacity .35s ease}
.cc-slot.cc-empty img{opacity:0}
.cc-slot.cc-empty::after{content:"";position:absolute;inset:0;border:1.5px dashed rgba(91,63,160,.4);
  border-radius:6px;background:rgba(91,63,160,.05);pointer-events:none}
.cc-slot.cc-empty .cc-num{opacity:.5}
.cc-hidden{display:none!important}
.cc-pick{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin:0 auto 22px;max-width:720px}
.cc-pick .cc-instr{flex-basis:100%;text-align:center;color:#6a5b3c;margin:0 0 8px;font-weight:600;font-size:16px}
.cc-pick .cc-picked{flex-basis:100%;text-align:center;color:#5b3fa0;margin:2px 0 6px;font-size:13px}
.cc-back{width:38px;height:60px;border:0;border-radius:4px;cursor:pointer;color:#c9a24b;font-size:13px;
  background:linear-gradient(135deg,#3a2f6a,#5b3fa0);box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .12s}
.cc-back:hover:not(:disabled){transform:translateY(-4px)}
@media(max-width:560px){.cc-back{width:30px;height:47px;font-size:11px}}
.cc-back:disabled{opacity:.25;cursor:default;transform:none}
.cc-pick.spent{opacity:0;transition:opacity .5s;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cc-slot::after,.cc-pick.spent,.cc-back{transition:none}}
.cc-rev img{transform:rotate(180deg)}

/* lectures */
.cc-reads{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.cc-read{display:flex;gap:14px;align-items:flex-start;background:#faf7f0;border:1px solid #ece3d2;border-radius:10px;padding:12px 14px}
.cc-thumb{width:64px;flex:0 0 64px;border-radius:5px;box-shadow:0 1px 5px rgba(0,0,0,.18)}
.cc-thumb.cc-rev{transform:rotate(180deg)}
.cc-read-h{margin:0 0 5px;font-weight:600}
.cc-read-n{display:inline-flex;width:22px;height:22px;background:#5b3fa0;color:#fff;border-radius:50%;
  align-items:center;justify-content:center;font-size:12px;margin-right:6px}
.cc-read-c{color:#9a7b3a;font-style:italic;margin-left:6px}
.cc-read-t{margin:0;color:#444;line-height:1.55}

/* synthèse / upsell */
.cc-synth,.cc-upsell{margin-top:26px;padding:18px 20px;border-radius:12px}
.cc-synth{background:#f1ecff;border:1px solid #d9cef2}
.cc-synth h2{margin:0 0 8px}
.cc-pdf,.cc-synth a.cc-pdf{display:inline-block;margin-top:12px;background:#5b3fa0;color:#fff !important;
  padding:11px 18px;border-radius:8px;text-decoration:none;font-weight:600}
.cc-pdf:hover{background:#4a2f8a;color:#fff !important}
.cc-upsell{background:#fbf6e9;border:1px solid #ecdfbf;text-align:center}
.cc-upsell .cc-btn{max-width:420px;margin:12px auto 0}
.cc-again{text-align:center;margin-top:28px}.cc-again a{color:#5b3fa0}

@media(max-width:560px){
  .cc-board{max-width:100%;gap:3px}.cc-slot{max-width:64px}
  .cc-slot .cc-num{width:16px;height:16px;font-size:9px;top:-5px;left:-5px}
  .cc-read{flex-direction:row}.cc-thumb{width:52px;flex-basis:52px}
}