/* =====================================================================
   Card de service — composant partage
   ---------------------------------------------------------------------
   Reproduit fidelement la card du guide (.upsells-card sur
   guide.byohana.fr) : photo en 16/10, titre, description, pastille de
   delai, prix voyageur et bouton QR. On y ajoute deux choses que le guide
   n'a pas, parce qu'elles s'adressent au proprietaire et non au voyageur :

     - le gain de l'hote, en vert, flottant au-dessus de la card ;
     - l'etiquette de provenance (service de l'hote, partenaire local,
       GetYourGuide).

   Utilise par /merci-pdv et /propal-500, dans un mockup de tablette.
   Les services et leurs prix viennent de js/services.js, source de
   verite unique. Le rendu vient de js/cards-guide.js.

   Comme les autres composants partages : var() avec valeur de repli,
   aucun :root redeclare, et bumper le ?v=N apres modification.
   ===================================================================== */

.cg {
    position: relative;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,0.05);
    text-align: left;
}

/* ---- Photo ---- */
.cg-media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: rgba(197,160,89,0.1); overflow: hidden; }
.cg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Provenance du service.
   Elle etait posee en aplat de couleur sur la photo : illisible sur une image
   claire, et hors charte. Elle est devenue une pastille de la meme famille
   que la duree, differenciee par un simple point de couleur. */
.cg-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
    color: rgba(0,0,0,0.62); background: rgba(0,0,0,0.04);
    padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap;
}
.cg-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
    background: var(--cg-teinte, var(--zinc, #5A5048));
}
/* Trois teintes de la charte : le point suffit a distinguer, l'aplat non. */
.cg[data-cat="hote"]       { --cg-teinte: var(--sienna, #BA4A2C); }
.cg[data-cat="partenaire"] { --cg-teinte: var(--gold, #C8A44D); }
.cg[data-cat="gyg"]        { --cg-teinte: var(--espresso, #1C1611); }

/* Sur mobile, dans la tablette, l'etiquette de provenance passait a la
   ligne et se faisait rogner : elle ne se lisait plus, elle encombrait.
   La couleur du point la porte deja ; le texte revient au-dela. */


/* ---- Corps ---- */
.cg-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; }
.cg-title { font-family: var(--font-body, inherit); font-size: 0.98rem; font-weight: 600; color: var(--espresso, #1C1611); margin: 0; line-height: 1.25; }
.cg-desc { font-size: 0.8rem; color: rgba(0,0,0,0.6); line-height: 1.45; margin: 0; }
.cg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.7rem; font-weight: 500; color: rgba(0,0,0,0.62);
    background: rgba(0,0,0,0.04); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.cg-pill svg { width: 12px; height: 12px; flex: 0 0 auto; color: rgba(0,0,0,0.5); }

.cg-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.06); margin-top: auto;
}
/* Dans une tablette, une card fait 240 a 260 px : le libelle du bouton ne
   tient plus et depassait du cadre. On le retire, l'icone suffit. */
.cg { container-type: inline-size; }
@container (max-width: 300px) {
    .cg-cta-l { display: none; }
    .cg-cta { padding: 8px; }
    .cg-desc { display: none; }
    /* La provenance disparait : dans une card etroite elle passait a la ligne
       ou se faisait rogner a droite. Le point de couleur du titre la porte
       deja, et la vraie information ici, c'est la duree. */
    .cg-tag { display: none; }
    .cg-pills { gap: 5px; flex-wrap: nowrap; }
    .cg-pill { font-size: 0.63rem; padding: 3px 8px; }
    .cg-pill svg { width: 11px; height: 11px; }
    .cg-title { font-size: 0.92rem; }
}
/* Repli pour les navigateurs sans @container (Safari < 16) : la largeur de
   l'ecran reste une approximation utile. */
@supports not (container-type: inline-size) {
    @media (max-width: 560px) { .cg-tag { display: none; } }
}
.cg-price {
    font-weight: 700; font-size: 1.24rem; line-height: 1; color: var(--espresso, #1C1611);
    font-variant-numeric: tabular-nums lining-nums;
}
.cg-cur { font-size: 0.82rem; margin-left: 2px; color: rgba(0,0,0,0.55); font-weight: 600; }
.cg-unit { font-size: 0.68rem; font-weight: 500; color: rgba(0,0,0,0.5); margin-left: 3px; }
.cg-cta {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 0.72rem; font-weight: 600; color: #fff;
    background: var(--sienna, #BA4A2C); border: 0; border-radius: 999px; padding: 8px 12px; line-height: 1;
}
.cg-cta svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ---- Le gain de l'hote ----
   Il vivait EN DEHORS du cadre, en haut : l'ecran de la tablette masque ce
   qui deborde, la pastille etait coupee en deux. Elle est desormais posee
   DANS la photo, en haut a droite. Rien ne peut plus la rogner. */
.cg-gain {
    position: absolute; top: 9px; right: 9px; z-index: 5;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
    padding: 6px 11px 7px; border-radius: 11px;
    background: rgba(255,255,255,0.94); color: var(--gain, #2F7A54);
    border: 1px solid rgba(255,255,255,0.9);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px -6px rgba(28,22,17,0.4);
    font-variant-numeric: tabular-nums lining-nums;
    transform-origin: 100% 0;
    animation: cgGain 4.6s ease-in-out infinite;
}
.cg-gain small {
    font-size: 0.56rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--zinc, #5A5048); opacity: 0.85; line-height: 1;
}
.cg-gain-n {
    font-family: var(--font-display, inherit); font-weight: 600;
    font-size: 1.06rem; line-height: 1.05; letter-spacing: -0.01em;
}
.cg:nth-child(2n) .cg-gain { animation-delay: 1.1s; }
.cg:nth-child(3n) .cg-gain { animation-delay: 2.2s; }
.cg:nth-child(4n) .cg-gain { animation-delay: 3.3s; }
@keyframes cgGain {
    0%, 66%, 100% { transform: scale(1); }
    75%           { transform: scale(1.09); }
    85%           { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cg-gain { animation: none; }
}

/* ---- Grille de cards dans une tablette ---- */
.cg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; padding: 24px 12px 14px; }
@media (max-width: 520px) { .cg-grid { gap: 22px 10px; padding: 20px 8px 12px; } }

/* ---- Sequence de paiement (uniquement /merci-pdv) ----
   La card bascule sur un QR code, puis sur la confirmation. C'est ce que
   voit le voyageur quand il reserve. */
.cg-seq {
    position: absolute; inset: 0; z-index: 4;
    background: #fff;
    opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s;
}
.cg.is-qr .cg-seq, .cg.is-paid .cg-seq { opacity: 1; visibility: visible; }
/* Les deux etats se superposent : le QR se change en confirmation sur place. */
.cg-seq-qr, .cg-seq-ok {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px; text-align: center;
    transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.3,1);
}
.cg.is-qr  .cg-seq-qr { opacity: 1; transform: scale(1); }
.cg.is-qr  .cg-seq-ok { opacity: 0; transform: scale(.82); }
.cg.is-paid .cg-seq-qr { opacity: 0; transform: scale(.82); }
.cg.is-paid .cg-seq-ok { opacity: 1; transform: scale(1); }
.cg-seq-qr img { width: 96px; height: 96px; display: block; margin: 0 auto 8px; }
.cg-seq-lab { font-size: 0.76rem; color: rgba(0,0,0,0.6); line-height: 1.35; }
.cg-seq-ok-ic {
    width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 9px;
    background: var(--gain, #2F7A54); display: flex; align-items: center; justify-content: center;
}
.cg-seq-ok-ic svg { width: 24px; height: 24px; color: #fff; }
.cg-seq-ok-t { font-weight: 700; font-size: 0.94rem; color: var(--espresso, #1C1611); }

/* Le curseur qui vient toucher la card : c'est lui qui raconte le clic. */
.cg-curseur {
    position: absolute; z-index: 6; width: 26px; height: 26px; pointer-events: none;
    opacity: 0; transition: opacity .3s ease, transform .55s cubic-bezier(.3,.9,.3,1);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.cg-curseur.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cg-curseur { display: none; } }

/* ---- La card se clique ----
   Un clic joue la sequence : QR code, paiement, puis retour au service. */
.cg:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.1); }
.cg:focus-visible { outline: 2px solid var(--sienna, #BA4A2C); outline-offset: 3px; }
.cg.is-qr, .cg.is-paid { transform: none; }

/* ---- Indice de defilement ----
   Remplace le defilement automatique : l'ecran bougeait tout seul, ce qui
   empechait de lire une card avant qu'elle ne parte. Ici on montre juste
   qu'il y a une suite, et le lecteur decide. */
.cg-plus {
    position: absolute; left: 50%; bottom: 22px; z-index: 6;
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px 7px 15px; border-radius: 999px;
    background: rgba(28,22,17,0.82); color: #fff;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px -8px rgba(0,0,0,0.6);
    pointer-events: none;
    transition: opacity .4s ease, transform .4s ease;
    animation: cgPlus 2.4s ease-in-out infinite;
}
.cg-plus svg { width: 15px; height: 15px; }
.cg-plus.is-off { opacity: 0; transform: translateX(-50%) translateY(8px); }
@keyframes cgPlus {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(5px); }
}
@media (prefers-reduced-motion: reduce) { .cg-plus { animation: none; } }