/* ══════════════════════════════════════════════════════════════════════════
   CARTE DE BON CADEAU — composant partagé

   Repris du composant .gift-voucher d'Equi'del et généralisé : les couleurs et
   l'image de fond, qui y étaient écrites en dur, sont maintenant des variables
   posées par le JS depuis la fiche du professionnel.

   Les règles @media print portent des correctifs Safari iOS durement acquis
   (voir cheque-cadeau/modele.html côté Equi'del) : ne pas les « simplifier »
   sans tester une impression réelle depuis un iPhone.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --c-green: #2d4a1e;
  --c-cream: #f7f4ef;
  --c-accent: #c9a96e;
  --c-accent-dark: #a07840;
  --voucher-bg: none;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

.gift-voucher {
  position: relative; width: 100%;
  /* Trois lignes empilees : en-tete, bloc central, pied de carte. */
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto;
  border-radius: 20px; overflow: hidden;
  /* container-type : les tailles en cqw ci-dessous se calculent sur la largeur
     de la carte, pas de la fenêtre — la carte reste lisible à toute échelle. */
  container-type: inline-size;
  background: var(--c-cream);
  box-shadow: 0 16px 40px rgba(45, 74, 30, .25);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Cale invisible qui impose le format 1200/675 comme hauteur MINIMALE. Avec
   aspect-ratio, la hauteur etait imposee tout court : en dessous d'environ
   500px de large, les tailles de police atteignent le plancher de leurs
   clamp() alors que le cadre continue de retrecir, et le bloc central passait
   par-dessus le pied de carte. Ici le cadre s'allonge plutot que de se
   chevaucher. Elle couvre les trois lignes pour que la hauteur en trop soit
   repartie entre elles, et non ajoutee au-dessus. */
.gift-voucher::before { content: ''; grid-area: 1 / 1 / 4 / 2; padding-top: 56.25%; }

.gift-voucher-bg {
  position: absolute; inset: 0;
  background-image: var(--voucher-bg);
  background-size: cover; background-position: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Voile clair sous le bloc de texte : sans lui, une photo contrastée rend les
   libellés illisibles. */
.gift-voucher-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 64% 42%,
    rgba(247, 244, 239, .4) 0%, rgba(247, 244, 239, .08) 55%, rgba(247, 244, 239, 0) 78%);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.gift-voucher-border {
  position: absolute; inset: 10px; border-radius: 14px;
  border: 3px solid var(--c-green); pointer-events: none;
}

/* Les trois blocs de contenu sont dans le flux (voir min-height ci-dessus).
   position:relative les repasse au-dessus du fond et de la vignette, qui sont
   eux positionnés : sans ça le voile clair passerait par-dessus le texte. */
.gift-voucher-header {
  grid-area: 1 / 1; align-self: start; position: relative; z-index: 1;
  text-align: center; margin: 6.5% 10% 0;
}
.gift-voucher-eyebrow {
  display: block; font-size: clamp(.5rem, 1.6cqw, .75rem); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-accent-dark); margin-bottom: .3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gift-voucher-title {
  font-family: var(--font-serif); font-style: italic; font-weight: 700;
  font-size: clamp(.9rem, 4.2cqw, 2.1rem); color: var(--c-green); margin: 0; line-height: 1.1;
}

.gift-voucher-card {
  grid-area: 2 / 1; align-self: center; position: relative; z-index: 1; margin: 0 8%;
  background: rgba(255, 255, 255, .74); border-radius: 12px;
  border: 1.5px solid var(--c-accent); box-shadow: 0 8px 24px rgba(45, 74, 30, .1);
  padding: clamp(.5rem, 2.2cqw, 1.1rem) clamp(.6rem, 3cqw, 1.6rem);
  display: flex; flex-direction: column; gap: clamp(.2rem, 1.2cqw, .75rem);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.gift-voucher-label {
  display: block; font-size: clamp(.42rem, 1.5cqw, .68rem); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-dark); margin-bottom: .05rem;
}
.gift-voucher-value { outline: none; line-height: 1.1; }
.gift-voucher-main { text-align: center; }
.gift-voucher-main .gift-voucher-value { font-family: var(--font-serif); font-weight: 700; color: var(--c-green); }
.gift-voucher-main.activite .gift-voucher-value { font-size: clamp(.68rem, 2.6cqw, 1.2rem); }
.gift-voucher-main.valeur .gift-voucher-value { font-size: clamp(.85rem, 3.2cqw, 1.6rem); }

.gift-voucher-row { display: flex; gap: clamp(.5rem, 2.6cqw, 1.5rem); }
.gift-voucher-row .gift-voucher-field { flex: 1; text-align: center; min-width: 0; }
.gift-voucher-row .gift-voucher-value {
  font-weight: 600; font-size: clamp(.58rem, 1.8cqw, .9rem); color: #2d2a24;
  border-bottom: 1px dashed rgba(45, 74, 30, .3); padding-bottom: .1rem;
  display: inline-block; min-width: 60%;
}

.gift-voucher-message {
  text-align: center; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(.5rem, 1.7cqw, .85rem); color: #4a453e; line-height: 1.3;
}
.gift-voucher-message:empty { display: none; }

.gift-voucher-meta {
  display: flex; gap: .5rem; justify-content: space-between;
  padding-top: .3rem; border-top: 1px solid rgba(160, 120, 64, .25);
}
.gift-voucher-meta .gift-voucher-field { flex: 1; text-align: center; min-width: 0; }
.gift-voucher-meta .gift-voucher-label { font-size: clamp(.38rem, 1.2cqw, .58rem); }
.gift-voucher-meta .gift-voucher-value {
  font-weight: 600; font-size: clamp(.55rem, 1.8cqw, .82rem); color: #2d2a24;
  border-bottom: 1px dashed rgba(45, 74, 30, .3); padding-bottom: .1rem;
  display: inline-block; min-width: 70%;
}

.gift-voucher-footer {
  grid-area: 3 / 1; align-self: end; position: relative; z-index: 1;
  margin: 0 auto 4.5%; max-width: 90%; width: fit-content;
  font-size: clamp(.4rem, 1.4cqw, .62rem); font-weight: 600; color: var(--c-green);
  text-align: center; background: rgba(247, 244, 239, .8);
  padding: .2rem .8rem; border-radius: 20px; white-space: nowrap;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Filigrane quand le bon a déjà été utilisé : évite qu'un bon photographié
   soit présenté deux fois. */
.gift-voucher.is-redeemed::after {
  content: 'UTILISÉ'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: clamp(1.5rem, 9cqw, 5rem); font-weight: 700;
  color: rgba(180, 40, 40, .38); transform: rotate(-18deg); letter-spacing: .1em;
  pointer-events: none; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* ── Impression ──────────────────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { padding: 0 !important; margin: 0 !important; background: #fff !important; }

  /* À l'écran la carte est une colonne flex (voir plus haut) ; sur papier on
     revient au positionnement absolu figé en %, seul calage qui ait donné un
     résultat identique sur Safari iOS et sur Chrome. La feuille A4 paysage est
     large, le contenu tient sans avoir besoin que le cadre s'allonge. */
  .gift-voucher {
    width: 100% !important; max-width: 100% !important;
    display: block !important; padding: 0 !important; min-height: 0 !important;
    margin: 0 auto !important; box-shadow: none !important;
    border-radius: 0 !important; overflow: hidden !important;
  }

  /* Repères d'écran inutiles une fois sur papier */
  .gift-voucher-value { border-bottom: none !important; }

  /* Safari iOS n'imprime pas fiablement les background-image CSS : on bascule
     sur une vraie balise <img>, invisible à l'écran. */
  .gift-voucher-bg { background-image: none !important; }
  .gift-voucher-bg-print {
    display: block !important; position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important; z-index: 0 !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }

  /* Safari iOS ignore l'opacity d'un radial-gradient à l'impression et le sort
     à pleine force (halo sombre) : on la retire plutôt que de l'atténuer. */
  .gift-voucher-vignette { display: none !important; }
  .gift-voucher-border { z-index: 2 !important; inset: 8px !important; }

  /* Tailles fixes plutôt que clamp()/cqw : Safari iOS calcule le contexte des
     container queries différemment à l'impression. */
  .gift-voucher-header {
    position: absolute !important; top: 6.5% !important; margin: 0 !important;
    left: 8% !important; right: 8% !important; z-index: 3 !important;
  }
  .gift-voucher-title { font-size: 26px !important; }
  .gift-voucher-eyebrow { font-size: 11px !important; }

  .gift-voucher-card {
    position: absolute !important; margin: 0 !important;
    left: 7.5% !important; right: 7.5% !important; top: 26% !important; bottom: auto !important;
    width: auto !important; padding: 18px 22px !important; z-index: 3 !important;
  }
  .gift-voucher-label { font-size: 12px !important; }
  .gift-voucher-main .gift-voucher-value { font-size: 22px !important; }
  .gift-voucher-main.valeur .gift-voucher-value { font-size: 27px !important; }
  .gift-voucher-row .gift-voucher-value { font-size: 17px !important; }
  .gift-voucher-message { font-size: 14px !important; }
  .gift-voucher-meta .gift-voucher-label { font-size: 11px !important; }
  .gift-voucher-meta .gift-voucher-value { font-size: 15px !important; }

  .gift-voucher-footer {
    display: block !important; position: absolute !important; bottom: 3.5% !important;
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    margin: 0 !important; width: max-content !important; max-width: 90% !important;
    text-align: center !important; font-size: 11px !important; z-index: 3 !important;
    background: rgba(247, 244, 239, .85) !important;
    padding: .2rem .8rem !important; border-radius: 20px !important; white-space: nowrap !important;
    -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important;
  }

  @page { size: A4 landscape; margin: 8mm; }
}

.gift-voucher-bg-print { display: none; }