/* Bloc « Carte cadeau » (accueil) : bandeau vert foncé qui renvoie vers carte-cadeau.html. */
.gifthome { background: var(--color-accent-dark); color: var(--color-white); padding: 88px 0; overflow: hidden; }
.gifthome-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center;
}
.gifthome-eyebrow { margin: 0 0 12px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.gifthome-title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.12; color: var(--color-white); }
.gifthome-text { margin: 0 0 28px; max-width: 540px; font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.65; opacity: 0.92; }
.gifthome-points { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 640px; }
.gifthome-points li { padding: 16px 16px 14px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 16px; background: rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 6px; }
.gifthome-point-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.gifthome-point-text { font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.45; opacity: 0.88; }
.gifthome-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 999px;
  background: var(--color-white); color: var(--color-accent-dark); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.gifthome-cta:hover { background: var(--color-bg); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22); }
.gifthome-cta:focus-visible { outline: 3px solid var(--color-white); outline-offset: 3px; }

/* Carte cadeau flottante + montants */
.gifthome-visual { display: flex; justify-content: center; }
.gifthome-float { animation: gh-float 7s ease-in-out infinite; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gifthome-card {
  position: relative; width: 340px; max-width: 100%;
  container-type: inline-size; /* les unités « cqw » ci-dessous = % de la largeur de CETTE carte */
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.3)); /* l'ombre suit les coins arrondis du PNG */
  transform: rotate(3deg); transition: transform 0.5s var(--ease);
}
.gifthome-card-img { display: block; width: 100%; height: auto; }
.gifthome-visual:hover .gifthome-card { transform: rotate(0deg) scale(1.02); }

/* Montant affiché SUR la carte : tout est en pourcentages de la carte (jamais de px fixes), donc il suit sa taille à tous les écrans.
   - left 25 % : à 25 % de la largeur depuis la gauche ; bottom 17 % : au-dessus du bord bas de la carte ;
   - taille du texte en cqw (largeur de la carte) et max-width : le montant ne peut jamais dépasser du bord droit. */
.gifthome-price {
  position: absolute; left: 25%; bottom: 17%; max-width: 70%;
  font-family: var(--font-display); font-weight: 700; line-height: 1; white-space: nowrap;
  font-size: 2rem; /* repli pour les navigateurs sans cqw */
  color: #C4608D; /* repli (navigateurs sans cqw / background-clip: text) : rose uni */
  pointer-events: none;
}
@supports (width: 1cqw) {
  .gifthome-price {
    font-size: 9.5cqw;
    /* Effet « encre imprimée sur carton », SANS mix-blend-mode : le texte est découpé dans 3 calques de fond de CE MÊME élément,
       fusionnés entre eux (background-blend-mode: multiply) : grain × dégradé rose × photo du carton.
       Comme tout est dans l'élément, l'effet est présent dès la première image, y compris pendant l'animation d'apparition.
       La photo du carton est recalée au pixel près sous le texte (tout en cqw = % de la carte) : le texte « voit » le carton qu'il recouvre.
         - largeur de la carte = 100cqw, hauteur = 100cqw × 428/680 = 62.94cqw (rapport de l'image) ;
         - le texte commence à 25cqw du bord gauche ; son bas est à 17 % du bas de la carte, sa hauteur = 1 × la taille du texte (9.5cqw),
           donc son haut est à 62.94 × 0.83 − 9.5 = 42.74cqw du haut de la carte. */
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='.8 0 0 0 .4 .8 0 0 0 .4 .8 0 0 0 .4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(115deg, #B0477A 0%, #DA86AA 24%, #C4608D 46%, #E39AB9 66%, #BC5784 84%, #A8416F 100%),
      url("../images/cartes/carte_cadeau.png");
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 5cqw 5cqw, 100% 100%, 100cqw 62.94cqw;
    background-position: 0 0, 0 0, -25cqw -42.74cqw;
    background-blend-mode: multiply, multiply, normal;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55)) blur(0.15px);
  }
}
.gifthome-price.is-pop { animation: gh-price-pop 0.55s var(--ease); }
@keyframes gh-price-pop { 0% { opacity: 0; transform: translateY(35%) scale(0.92); } 100% { opacity: 1; transform: none; } }
.gifthome-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gifthome-chip {
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.45);
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; color: var(--color-white);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.gifthome-chip.is-on { background: var(--color-white); color: var(--color-accent-dark); border-color: var(--color-white); }

@keyframes gh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.gifthome.js-anim .gh-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.gifthome.js-anim .gh-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .gifthome { padding: 64px 0; }
  .gifthome-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .gifthome-visual { order: -1; }
}
@media (max-width: 640px) {
  .gifthome { padding: 52px 0; }
  .gifthome-inner { padding: 0 20px; }
  .gifthome-points { grid-template-columns: 1fr; }
  .gifthome-card { width: 300px; transform: rotate(2deg); }
  .gifthome-cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gifthome-float { animation: none; }
  .gifthome-card { transform: none; transition: none; }
  .gifthome-price.is-pop { animation: none; }
  .gifthome.js-anim .gh-reveal { opacity: 1; transform: none; transition: none; }
  .gifthome-chip, .gifthome-cta { transition: none; }
}