/* Codes promo & réductions — bloc partagé par /code-promo/ et /tarifs/ (liste générée par scripts/generer-codes-promo.mjs) */

/* --- La règle (justificatif) --- */
.cp-regle {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,107,0,0.14), rgba(255,107,0,0.04));
  border: 1px solid rgba(255,107,0,0.45);
}
.cp-regle-ico { width: 44px; height: 44px; flex: none; color: var(--orange); }
.cp-regle h2, .cp-regle h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.cp-regle p { margin: 0; color: var(--grey-light); line-height: 1.55; }
.cp-regle p + p { margin-top: 8px; }
.cp-regle strong { color: #fff; }

/* --- Comment saisir son code : étapes + reproduction du champ 4escape --- */
.cp-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; counter-reset: etape; }
.cp-etape { position: relative; padding: 20px 18px 18px; border-radius: 14px; background: var(--dark-card); border: 1px solid var(--dark-border); }
.cp-etape::before {
  counter-increment: etape; content: counter(etape);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-bottom: 12px;
  background: var(--orange); color: #000; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.cp-etape h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.cp-etape p { margin: 0; color: var(--grey-light); font-size: 0.95rem; line-height: 1.5; }
.cp-etape kbd {
  display: inline-block; padding: 1px 7px; border-radius: 6px; font: inherit; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); white-space: nowrap;
}

.cp-mock { margin: 26px auto 0; max-width: 560px; }
.cp-mock-legende { margin: 0 0 10px; text-align: center; color: var(--grey-light); font-size: 0.92rem; }
.cp-mock-ecran { padding: 18px 18px 16px; border-radius: 12px; background: #1A1610; border: 1px solid #3a3128; box-shadow: 0 12px 40px rgba(0,0,0,0.45); font-family: 'Open Sans', 'DM Sans', sans-serif; }
.cp-mock-titre { margin: 0 0 12px; color: #e4e4e7; font-weight: 700; font-size: 0.95rem; }
.cp-mock-ligne { height: 10px; border-radius: 5px; background: #2a241d; margin: 8px 0; }
.cp-mock-ligne--courte { width: 55%; }
.cp-mock-champ { display: flex; gap: 8px; margin: 16px 0 14px; }
.cp-mock-champ--cible { position: relative; outline: 2px dashed var(--orange); outline-offset: 7px; border-radius: 4px; }
.cp-mock-champ--cible::after { content: "C’est ici"; position: absolute; right: -6px; top: -30px; padding: 2px 9px; border-radius: 999px; background: var(--orange); color: #000; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: .04em; }
.cp-mock-total { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; color: #bdb5ab; font-size: 0.9rem; }
.cp-mock-total--fort { color: #fff; font-weight: 700; }
.cp-mock-input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 6px; background: #0f0c08; border: 1px solid #4a3f33; color: #8a8178; font-size: 0.95rem; }
.cp-mock-btn { flex: none; padding: 9px 18px; border-radius: 6px; background: #E07020; color: #fff; font-weight: 700; font-size: 0.95rem; }
.cp-mock-ok { margin: 10px 0 0; color: #4caf50; font-size: 0.9rem; font-weight: 700; }

/* --- Recherche --- */
.cp-recherche { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.cp-recherche-lbl { display: block; margin-bottom: 10px; color: var(--grey-light); font-size: 1rem; }
.cp-recherche-champ { position: relative; }
.cp-recherche-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--orange); pointer-events: none; }
.cp-q {
  width: 100%; padding: 16px 18px 16px 52px; border-radius: 999px;
  background: var(--dark-card); border: 2px solid rgba(255,107,0,0.45); color: #fff;
  font: inherit; font-size: 1.1rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
.cp-q::placeholder { color: #8a8a8a; }
.cp-q:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,107,0,0.18); }
.cp-q::-webkit-search-cancel-button { cursor: pointer; }
.cp-compte { min-height: 1.4em; margin: 10px 0 0; color: var(--grey-light); font-size: 0.95rem; }

/* --- Groupes et cartes --- */
.cp-groupe { margin-top: 30px; }
.cp-groupe[hidden], .cp-item[hidden], .cp-vide[hidden] { display: none; }
.cp-groupe-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cp-groupe-titre { margin: 0; font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.cp-groupe-remise { padding: 3px 10px; border-radius: 999px; background: rgba(255,107,0,0.16); color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: .02em; }
.cp-groupe-regle { margin: 0 0 14px; color: var(--grey-light); font-size: 0.95rem; }
.cp-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-item { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px; border-radius: 14px; background: var(--dark-card); border: 1px solid var(--dark-border); transition: border-color .2s; }
.cp-item:target { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,0,0.2); }
.cp-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cp-nom { margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; color: #fff; line-height: 1.3; }
.cp-remise { flex: none; color: var(--orange); font-family: var(--font-display); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.cp-lbl { display: inline-block; margin-right: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.cp-code { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-code-val {
  display: inline-block; padding: 6px 12px; border-radius: 8px;
  background: rgba(255,107,0,0.12); border: 1px dashed rgba(255,107,0,0.6);
  color: var(--orange); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 1.05rem; letter-spacing: .06em;
  user-select: all;
}
.cp-code-val--libre { border-style: solid; color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0; font-weight: 600; }
.cp-copier {
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,0.22); color: var(--grey-light);
  font: inherit; font-size: 0.82rem; font-weight: 600; transition: all .2s;
}
.cp-copier:hover, .cp-copier:focus-visible { border-color: var(--orange); color: var(--orange); outline: none; }
.cp-copier.is-copie { border-color: #4caf50; color: #4caf50; }
.cp-justif { margin: 0; color: var(--grey-light); font-size: 0.92rem; line-height: 1.5; }
.cp-vide { margin: 26px auto 0; max-width: 700px; padding: 18px 22px; border-radius: 12px; text-align: center; background: var(--dark-card); border: 1px solid var(--dark-border); color: var(--grey-light); line-height: 1.55; }
.cp-vide strong { color: #fff; }

/* Variante compacte (page Tarifs) */
.cp--compact .cp-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp--compact .cp-item { padding: 13px 14px 12px; gap: 8px; }
.cp--compact .cp-groupe { margin-top: 22px; }
.cp--compact .cp-groupe-titre { font-size: 1.15rem; }
.cp--compact .cp-justif { font-size: 0.88rem; }

/* --- Autres blocs --- */
.cp-encarts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.cp-encart { padding: 22px 22px 20px; border-radius: 14px; background: var(--dark-card); border: 1px solid var(--dark-border); }
.cp-encart h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.cp-encart p { margin: 0; color: var(--grey-light); line-height: 1.55; font-size: 0.97rem; }
.cp-encart p + p { margin-top: 8px; }
.cp-encart a { color: var(--orange); }

/* --- FAQ repliable (même rendu que /tarifs/) --- */
.cp-faq-item { border-bottom: 1px solid var(--dark-border); }
.cp-faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 16px 44px 16px 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--white); }
.cp-faq-item summary::-webkit-details-marker { display: none; }
.cp-faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,107,0,0.14); color: var(--orange); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.cp-faq-item[open] summary::after { content: "−"; }
.cp-faq-item summary:hover { color: var(--orange); }
.cp-faq-item p { margin: 0 0 18px; color: var(--grey-light); line-height: 1.6; }
.cp-faq-item a { color: var(--orange); }

@media (max-width: 1100px) {
  .cp-liste, .cp--compact .cp-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cp-regle { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .cp-regle-ico { width: 36px; height: 36px; }
  .cp-etapes { grid-template-columns: 1fr; gap: 10px; }
  .cp-liste, .cp--compact .cp-liste { grid-template-columns: 1fr; gap: 10px; }
  .cp-encarts { grid-template-columns: 1fr; }
  .cp-q { font-size: 1rem; padding: 14px 16px 14px 48px; }
  .cp-mock-champ { flex-wrap: wrap; }
  .cp-mock-btn { width: 100%; text-align: center; }
}