/* =====================================================================
   Le Cocon de Juju — bons cadeaux et entreprises (site public)
   Complète site.css : boutique des bons, aperçu fidèle au PDF, pages
   de confirmation, vérification par QR code, page entreprises, espace entreprise.
   ===================================================================== */

/* ---------------------------------------------------------------- en-tête */

.gift-hero { padding-bottom: clamp(24px, 4vw, 48px); }
.gift-hero .lead { margin-bottom: 0; }
.gift-perks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--encre-2); font-size: 0.95rem; }
.gift-perks li { display: inline-flex; align-items: center; gap: 8px; }
.gift-perks .icon { color: var(--passiflore); }
.gift-kicker { font-size: 0.95rem; color: var(--passiflore); font-weight: 500; margin-bottom: 0.5em; }
.gift-section { padding-top: 0; }

/* ---------------------------------------------------------------- boutique */

.gift-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(28px, 4vw, 56px); align-items: start; }
.gift-form { display: grid; gap: 20px; min-width: 0; }
.gift-step {
  margin: 0; padding: clamp(20px, 3vw, 30px); min-width: 0;
  border: 1px solid var(--ligne); border-radius: var(--r-m); background: #fff;
  display: grid; gap: 16px;
}
.gift-step legend {
  float: left; width: 100%; padding: 0; margin: 0 0 4px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-titre); font-size: clamp(1.3rem, 2.2vw, 1.55rem); color: var(--encre);
}
.gift-step legend + * { clear: both; }
.gift-num {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-texte); font-size: 0.95rem; font-weight: 500;
  background: var(--lavande-pale); color: var(--passiflore);
  box-shadow: inset 0 0 0 1.5px var(--lavande-2);
}
.gift-help { margin: -6px 0 0; color: var(--encre-2); font-size: 0.93rem; display: flex; gap: 10px; align-items: flex-start; }
.gift-help .icon { color: var(--passiflore); margin-top: 0.2em; }
.gift-panel { display: grid; gap: 18px; }
.gift-panel[hidden], .gift-sub[hidden], [data-delivery-panel][hidden], [data-recipient-email][hidden], [data-amount-custom][hidden] { display: none; }
.gift-group h3 { font-size: 1.12rem; font-weight: 500; margin: 0 0 10px; }
.gift-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gift-kinds label, .gift-delivery label, .gift-payment label { display: grid; gap: 2px; align-content: start; }
.gift-kinds .icon, .gift-delivery .icon, .gift-payment .icon { width: 22px; height: 22px; color: var(--passiflore); margin-bottom: 6px; }
.gift-kinds strong { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 500; }
.gift-variants { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gift-variants small, .gift-amounts small { font-family: var(--font-titre); font-size: 1rem; color: var(--passiflore); }
.gift-amounts { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.gift-amounts label { text-align: center; }
.gift-amounts strong { font-family: var(--font-titre); font-size: 1.1rem; font-weight: 500; }
.gift-custom { max-width: 320px; }
.gift-qty { max-width: 220px; }
.gift-delivery, .gift-payment { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.gift-sub { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: var(--brume); }
.gift-row-street { display: grid; grid-template-columns: minmax(0, 3fr) minmax(80px, 1fr); gap: 16px; }
.gift-row-city { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr) minmax(0, 1.4fr); gap: 16px; }
.gift-payinfo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--petale-pale); color: var(--encre-2); font-size: 0.95rem; }
.gift-payinfo .icon { width: 22px; height: 22px; color: var(--passiflore); margin-top: 2px; }

.gift-confirm { display: grid; gap: 16px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-m); background: var(--brume); }
.gift-summary { margin: 0; display: grid; gap: 8px; }
.gift-summary > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.gift-summary > div[hidden] { display: none; }
.gift-summary dt { color: var(--encre-2); min-width: 0; }
.gift-summary dd { margin: 0; text-align: right; white-space: nowrap; font-weight: 500; color: var(--encre); }
.gift-sum-total { padding-top: 10px; border-top: 1px solid var(--lavande-2); }
.gift-sum-total dt { color: var(--encre); font-weight: 500; }
.gift-sum-total dd { font-family: var(--font-titre); font-size: 1.45rem; font-weight: 400; color: var(--passiflore); }
.gift-confirm .btn { min-height: 54px; font-size: 1.02rem; }

.gift-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.gift-preview-note { margin: 14px 0 0; font-size: 0.85rem; color: var(--encre-2); display: flex; gap: 8px; align-items: flex-start; }
.gift-preview-note .icon { margin-top: 0.25em; color: var(--passiflore); }
.gift-total-mini { margin: 10px 0 0; display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ligne); color: var(--encre-2); }
.gift-total-mini strong { font-family: var(--font-titre); font-size: 1.35rem; font-weight: 400; color: var(--passiflore); }

.gift-etapes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gift-conditions { margin-top: clamp(32px, 5vw, 56px); }
.gift-conditions h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

@media (max-width: 1000px) {
  .gift-layout { grid-template-columns: 1fr; }
  .gift-aside { position: static; order: -1; max-width: 560px; width: 100%; margin-inline: auto; }
  .gift-total-mini { display: none; }
}
@media (max-width: 640px) {
  .gift-kinds { grid-template-columns: 1fr; }
  .gift-row-city { grid-template-columns: minmax(80px, 1fr) minmax(0, 2fr); }
  .gift-row-city > :last-child { grid-column: 1 / -1; }
  .gift-step { padding: 18px 16px; }
  .gift-step legend { font-size: 1.25rem; }
  .gift-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gift-amounts label { padding-inline: 6px; }
}
@media (max-width: 380px) {
  .gift-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gift-row-street { grid-template-columns: minmax(0, 2fr) minmax(70px, 1fr); }
}

/* ---------------------------------------------------------------- aperçu du bon (fidèle au PDF A5) */

.gift-preview {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 2480 / 1748; overflow: hidden;
  background: #fcfafd; border-radius: 14px; color: #2b1938;
  box-shadow: 0 30px 60px -34px rgba(43, 25, 56, 0.55), 0 0 0 1px rgba(43, 25, 56, 0.06);
}
.gift-preview::after { /* cadre fin du bon */
  content: ""; position: absolute; inset: 1.77cqw; border: 0.17cqw solid #d9c6e6; pointer-events: none;
}
.gp-panel { position: absolute; inset: 0 auto 0 0; width: 43.55%; background: linear-gradient(180deg, #f0e6f6, #f8f3fa); }
.gp-panel img { position: absolute; height: auto; max-width: none; }
.gp-circle { left: 11.11%; top: 18.88%; width: 66.67%; }
.gp-word { left: 24.81%; top: 29.63%; width: 35.19%; }
.gp-points { left: 41.85%; top: 40.05%; width: 21.3%; }
.gp-fleur { left: 50.46%; top: 44.05%; width: 51.85%; }
.gp-business { position: absolute; left: 12.04%; top: 86.2%; display: grid; line-height: 1.25; }
.gp-business strong { font-family: var(--font-titre); font-weight: 400; font-size: 1.86cqw; }
.gp-business span { font-weight: 300; font-size: 1.25cqw; color: #5b4a66; }
.gp-body { position: absolute; left: 47.58%; right: 3.63%; top: 9.1%; bottom: 6.2%; display: flex; flex-direction: column; min-width: 0; }
.gp-title { font-family: var(--font-titre); font-style: italic; font-size: 7.1cqw; line-height: 1; color: #5e2f8c; margin-left: -0.24cqw; }
.gp-dots {
  height: 0.42cqw; width: 21cqw; margin: 2.2cqw 0 0 0.16cqw;
  background: radial-gradient(circle closest-side, #b088cb 0 90%, transparent 100%) 0 0 / 1.05cqw 0.42cqw repeat-x;
}
.gp-dots-small { width: 31.6cqw; height: 0.33cqw; margin: 0 0 2.6cqw; background-size: 1.05cqw 0.33cqw; }
.gp-offer { margin-top: 4.2cqw; }
.gp-offer-title { font-family: var(--font-titre); font-size: 4cqw; line-height: 1.08; color: #2b1938; overflow-wrap: anywhere; }
.gift-preview.is-amount .gp-offer-title { font-size: 5.3cqw; }
.gp-offer-sub { font-weight: 300; font-size: 2cqw; line-height: 1.3; color: #5b4a66; margin-top: 0.8cqw; }
.gp-line { display: grid; margin-top: 2.6cqw; min-width: 0; }
.gp-line[hidden] { display: none; }
.gp-label { font-weight: 500; font-size: 1.29cqw; color: #8a7f93; line-height: 1.2; }
.gp-name { font-family: var(--font-titre); font-size: 2.98cqw; line-height: 1.15; overflow-wrap: anywhere; }
.gp-from { font-family: var(--font-titre); font-size: 2.5cqw; line-height: 1.2; overflow-wrap: anywhere; }
.gp-message {
  margin: 1.8cqw 0 0; font-family: var(--font-titre); font-style: italic; font-size: 1.85cqw; line-height: 1.39; color: #5b4a66;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-line;
}
.gp-message:empty { display: none; }
.gp-foot { margin-top: auto; }
.gp-foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; }
.gp-foot-text { display: grid; gap: 0.5cqw; min-width: 0; }
.gp-code { font-weight: 500; font-size: 2.58cqw; letter-spacing: 0.28cqw; line-height: 1.1; color: #2b1938; }
.gp-valid { font-size: 1.45cqw; color: #5b4a66; line-height: 1.3; }
.gp-qr { width: 12.8cqw; aspect-ratio: 1; flex-shrink: 0; display: grid; place-items: center; background: #fff; border: 0.1cqw solid #ece4f1; color: #c9b8d6; }
.gp-qr .icon { width: 82%; height: 82%; }

/* ---------------------------------------------------------------- confirmation et vérification */

.gift-next h2, .gift-recap h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
.gift-next-steps { margin: 0 0 20px; padding-left: 1.3em; color: var(--encre-2); display: grid; gap: 6px; }
.gift-next-steps strong { color: var(--encre); }
.gift-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.gift-actions form { margin: 0; }
.gift-recap-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; color: var(--encre-2); font-size: 0.95rem; }
.gift-recap-list li { display: flex; gap: 10px; align-items: flex-start; }
.gift-recap-list .icon { color: var(--passiflore); margin-top: 0.25em; }
.gift-recap-list strong { color: var(--encre); font-weight: 500; }

.gift-status { display: grid; gap: 20px; }
.gift-status-head { display: flex; gap: 16px; align-items: flex-start; }
.gift-status-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-bottom: 0.2em; }
.gift-status-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.gift-status-icon .icon { width: 26px; height: 26px; }
.gift-status.is-ok .gift-status-icon { background: var(--succes-pale); color: var(--succes); }
.gift-status.is-ko .gift-status-icon { background: var(--erreur-pale); color: var(--erreur); }
.gift-status.is-ok { border-color: #bfe0cd; }
.gift-mono { font-family: var(--font-texte); letter-spacing: 0.08em; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }

/* ---------------------------------------------------------------- page entreprises */

.biz-first { padding-top: clamp(24px, 4vw, 48px); }
.biz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.biz-anchors { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.biz-onsite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.biz-photo { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4 / 3.2; box-shadow: var(--ombre); }
.biz-photo img { width: 100%; height: 100%; object-fit: cover; }
.biz-form { display: grid; gap: 16px; }
.biz-form-head h3 { margin-bottom: 0.2em; }
.biz-form-head p { margin: 0; color: var(--encre-2); font-size: 0.95rem; }
.biz-tiers { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.biz-tiers th, .biz-tiers td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ligne); }
.biz-tiers th { font-weight: 500; color: var(--encre-2); font-size: 0.88rem; }
.biz-tiers td.num, .biz-tiers th.num { text-align: right; white-space: nowrap; }
.biz-tiers tr.is-current td { background: var(--lavande-pale); }
.biz-tiers .biz-disc { display: inline-block; padding: 2px 10px; border-radius: var(--r-full); background: var(--petale); color: var(--encre); font-size: 0.85rem; font-weight: 500; }
.biz-table-wrap { overflow-x: auto; border-radius: var(--r-m); border: 1px solid var(--ligne); background: #fff; }
.biz-table-wrap .biz-tiers tr:last-child td { border-bottom: 0; }
.biz-promise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.biz-promise li { padding: 18px 20px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--ligne); }
.biz-promise strong { display: block; font-family: var(--font-titre); font-weight: 500; font-size: 1.12rem; margin-bottom: 4px; }
.biz-promise span { color: var(--encre-2); font-size: 0.93rem; }
.biz-promise .icon { width: 24px; height: 24px; color: var(--passiflore); margin-bottom: 8px; }
.biz-estimate { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--brume); }
.biz-estimate p { margin: 0; color: var(--encre-2); font-size: 0.93rem; }
.biz-estimate strong { color: var(--encre); font-weight: 500; }
.biz-estimate .biz-big { font-family: var(--font-titre); font-size: 1.5rem; color: var(--passiflore); }
.biz-employees[hidden], [data-biz-kind][hidden] { display: none; }
@media (max-width: 480px) {
  .biz-tiers th, .biz-tiers td { padding: 10px 10px; }
  .biz-tiers th { letter-spacing: 0.02em; font-size: 0.74rem; }
}
@media (max-width: 900px) {
  .biz-hero-grid, .biz-onsite { grid-template-columns: 1fr; }
  .biz-promise { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- espace entreprise */

.portal-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: flex-end; }
.portal-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.portal-kpis li { padding: 16px 18px; border-radius: var(--r-m); background: #fff; border: 1px solid var(--ligne); }
.portal-kpis strong { display: block; font-family: var(--font-titre); font-size: 1.8rem; font-weight: 400; line-height: 1.1; color: var(--passiflore); }
.portal-kpis span { color: var(--encre-2); font-size: 0.88rem; }
.portal-block { display: grid; gap: 16px; }
.portal-block h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.portal-order { display: grid; gap: 14px; }
.portal-order-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.portal-order-head h3 { font-size: 1.25rem; margin: 0; }
.portal-order-head p { margin: 2px 0 0; color: var(--encre-2); font-size: 0.92rem; }
.portal-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.portal-table th, .portal-table td { padding: 10px 12px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.portal-table th { font-size: 0.85rem; color: var(--encre-2); font-weight: 500; }
.portal-table td.num, .portal-table th.num { text-align: right; white-space: nowrap; }
.portal-table .sub { display: block; color: var(--encre-2); font-size: 0.85rem; }
.portal-table .code { font-weight: 500; letter-spacing: 0.05em; white-space: nowrap; }
.portal-table tr:last-child td { border-bottom: 0; }
.p-badge { display: inline-flex; padding: 2px 10px; border-radius: var(--r-full); font-size: 0.8rem; font-weight: 500; white-space: nowrap; background: var(--lavande-pale); color: var(--passiflore-fonce); }
.p-badge.ok { background: var(--succes-pale); color: #1e5a3d; }
.p-badge.used { background: #eee9f1; color: var(--encre-2); }
.p-badge.ko { background: var(--erreur-pale); color: #8c1d17; }
.portal-assign summary { cursor: pointer; color: var(--passiflore); font-size: 0.9rem; font-weight: 500; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.portal-assign summary::-webkit-details-marker { display: none; }
.portal-assign form { display: grid; gap: 8px; margin-top: 10px; min-width: 220px; }
.portal-assign input { min-height: 42px; padding: 8px 12px; font-size: 0.93rem; }
.portal-assign .btn { min-height: 40px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-note { font-size: 0.88rem; color: var(--encre-2); }
@media (max-width: 800px) {
  .portal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-table thead { display: none; }
  .portal-table, .portal-table tbody, .portal-table tr, .portal-table td { display: block; width: 100%; }
  .portal-table tr { padding: 12px 14px; border-bottom: 1px solid var(--ligne); }
  .portal-table td { border: 0; padding: 3px 0; }
  .portal-table td.num { text-align: left; }
  .portal-table td[data-label]::before { content: attr(data-label) " : "; color: var(--encre-2); font-size: 0.85rem; }
}