@charset "utf-8";
/* =====================================================================
   Save the Event · styles propres aux pages Famille et Entreprise
   (/bar-bat-mitsva/, /naissance-bapteme/, /baby-shower-gender-reveal/,
   /anniversaire/, /communion/, /entreprise/). Chargé après site.css.
   Équipe « famille-entreprise ». Préfixe .fx- pour éviter les collisions.
   ===================================================================== */

/* ---------- Carte posée sur le visuel du héros (invitation, quiz, check-in) ---------- */
.phero-vis .fx-card{position:absolute;right:-3%;top:44%;width:min(46%,250px);display:grid;gap:.5em;justify-items:start;padding:clamp(12px,4cqw,22px);border-radius:var(--r-m);background:var(--card);color:var(--ink);box-shadow:var(--shadow-lg);transform:rotate(4deg);font-size:max(11px,2.9cqw);line-height:1.15;animation:fxIn .8s .5s var(--spring,cubic-bezier(.34,1.56,.64,1)) backwards}
.fx-card .fx-orn{width:78%;height:auto;justify-self:center}
.fx-card .fx-k{font-family:var(--f-mono);font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink)}
.fx-card .fx-n{font-family:var(--f-serif);font-style:italic;font-size:2.1em;line-height:1;letter-spacing:-.01em}
.fx-card .fx-d{font-family:var(--f-mono);font-size:.74em;letter-spacing:.06em;color:var(--ink-2)}
.fx-card:not(.fx-quiz):not(.fx-reveal):not(.fx-checkin){justify-items:center;text-align:center;box-shadow:var(--shadow-lg),inset 0 0 0 5px var(--card),inset 0 0 0 6px var(--line)}

/* Quiz live (bar-mitsva) */
.fx-quiz .fx-n{font-family:var(--f-display);font-style:normal;font-weight:750;font-size:1.25em;letter-spacing:-.02em;line-height:1.1}
.fx-bars{display:grid;gap:.4em;width:100%;margin-top:.2em}
.fx-bars i{position:relative;display:block;height:1.9em;border-radius:.5em;background:var(--paper-2);overflow:hidden;font-style:normal}
.fx-bars i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--sun);border-radius:inherit;transform-origin:left;animation:fxBar 1.2s .9s var(--ease,ease) backwards}
.fx-bars i:nth-child(2)::before{background:var(--mint)}
.fx-bars i:nth-child(3)::before{background:var(--coral-soft)}
.fx-bars b{position:relative;display:flex;align-items:center;height:100%;padding-left:.6em;font-weight:600;font-size:.86em}

/* Pronostics (gender reveal) */
.fx-reveal .fx-n{font-family:var(--f-display);font-style:normal;font-weight:780;font-size:1.5em;letter-spacing:-.03em}
.fx-vote{display:flex;gap:.4em;width:100%}
.fx-vote i{flex:1;display:grid;place-items:center;min-height:2.2em;border-radius:99px;font-style:normal;font-weight:650;font-size:.9em;background:var(--coral-soft);color:var(--coral-ink)}
.fx-vote i + i{background:var(--lilac);color:#3B2F86}

/* Check-in QR (entreprise) */
.fx-checkin .fx-n{font-family:var(--f-display);font-style:normal;font-weight:750;font-size:1.35em;letter-spacing:-.02em}
.fx-qr{width:42%;height:auto;justify-self:start;border-radius:4px;background:#fff}
.fx-ok{display:inline-flex;align-items:center;gap:.4em;padding:.35em .7em;border-radius:99px;background:var(--mint);color:var(--green);font-weight:650;font-size:.82em}
.fx-ok::before{content:"✓"}

/* ---------- Tuile « check-in » : lecteur QR animé ---------- */
.fx-scan{position:relative;margin-top:auto;align-self:flex-start;width:128px;aspect-ratio:1;border-radius:18px;background:
  conic-gradient(from 90deg at 2px 2px,transparent 25%,var(--sun) 0) 0 0/50% 50%;opacity:.95}
.fx-scan::before{content:"";position:absolute;inset:14px;border-radius:8px;background:
  repeating-linear-gradient(90deg,rgba(247,246,242,.9) 0 6px,transparent 6px 10px),
  repeating-linear-gradient(0deg,transparent 0 5px,rgba(14,74,55,.9) 5px 9px);mix-blend-mode:normal;opacity:.55}
.fx-scan span{position:absolute;left:8px;right:8px;top:10%;height:3px;border-radius:3px;background:var(--coral);box-shadow:0 0 12px 2px rgba(232,85,58,.6);animation:fxScan 2.4s ease-in-out infinite alternate}

/* ---------- Bloc « côté achats » (entreprise) ---------- */
.fx-h2{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.04em;line-height:.98;font-variation-settings:"wdth" 86}
.fx-proofs{display:grid;gap:12px;font-size:1rem;color:var(--ink)}
.fx-proofs li{align-items:flex-start}
.fx-proofs li svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--green-2)}
.fx-proofs a{color:inherit;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.fx-sheet{position:relative;width:100%;max-width:460px;justify-self:center;background:var(--card);border-radius:var(--r-m);padding:clamp(20px,3vw,32px);box-shadow:var(--shadow-lg);transform:rotate(-1.5deg);display:grid;gap:12px}
.fx-sheet::after{content:"";position:absolute;right:-14px;top:-14px;width:72px;height:72px;border-radius:50%;background:var(--sun);box-shadow:var(--shadow)}
.fx-sheet-h{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.fx-sheet-h b{font-family:var(--f-display);font-size:1.8rem;letter-spacing:-.04em}
.fx-sheet-h span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.fx-row{display:flex;align-items:center;gap:10px;font-size:.95rem}
.fx-row i{flex:1;min-width:20px;border-bottom:2px dotted var(--line);transform:translateY(4px)}
.fx-row::after{content:"✓";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--green);font-size:.8rem;font-weight:700;flex:none}
.fx-sheet-f{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- Petits écrans ---------- */
@media (max-width:959.98px){
  .phero-vis .fx-card{right:-2%;top:auto;bottom:-4%;width:52%}
  .phero-vis .phero-price{bottom:auto;top:52%}
}
@media (max-width:599.98px){
  .fx-sheet{transform:none}
  .fx-sheet::after{width:48px;height:48px;right:-6px;top:-10px}
}

@keyframes fxIn{from{opacity:0;transform:translateY(24px) rotate(10deg)}}
@keyframes fxBar{from{transform:scaleX(0)}}
@keyframes fxScan{to{top:84%}}
@media (prefers-reduced-motion:reduce){
  .phero-vis .fx-card,.fx-bars i::before,.fx-scan span{animation:none}
}

/* ---------- Ajustements de mise en page ---------- */
@media (min-width:1080px){.cards.fx-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:700px){.real-grid.fx-two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.quote.mt-l{margin-top:clamp(32px,5vw,64px)}
.quote.green .av{color:var(--ink)}
.real-grid + .rail-hint + .quote.mt-l{margin-top:clamp(32px,5vw,64px)}
@media (max-width:899.98px){#reperes .frame{display:none}}
/* Grille de 4 cartes en 2 × 2 (entreprise), et 5 cartes sans orpheline (3 + 2 élargies) */
@media (min-width:700px){.cards.c2.fx-quad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){
  .cards.fx-3:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards.fx-3:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  .cards.fx-3:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
}
.fx-nw{white-space:nowrap}