/* Vues : atterrissage, tableau, famille, hotte, profil.
   Composition des maquettes 01_maquettes : scène plein écran, contenu posé directement
   dessus, cartes en verre sombre à liseré doré, titres serif, pills rubis. */

/* ---- atterrissage : héro plein écran posé sur la scène (maquette 01) ---- */
.hero-full {
  position: relative; min-height: calc(100svh - 118px);
  display: flex; flex-direction: column;
  padding: clamp(2rem, 7vh, 5rem) 0 0;
  --hx: 0px; --hy: 0px;
}
.hero-copy {
  position: relative; max-width: 760px;
  transform: translate3d(calc(var(--hx) * -.4), calc(var(--hy) * -.4), 0);
  transition: transform .35s ease-out;
}
.hero-copy > * { animation: hero-rise .8s cubic-bezier(.22,.61,.36,1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .12s; }
.hero-copy > *:nth-child(3) { animation-delay: .24s; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

h1.display {
  font-size: clamp(2.7rem, 5vw, 4.2rem); line-height: 1.08; letter-spacing: -.01em;
  color: var(--ivoire); margin: 0 0 1.1rem;
  text-shadow: 0 3px 24px rgba(3, 8, 16, .65);
}
h1.display em { font-style: italic; color: var(--dore-clair); text-shadow: 0 3px 22px rgba(217, 164, 65, .35); }
/* Titre décoratif : les lettres s'élèvent une à une (injecté par decor.js). */
h1.display.letters .ltr { display: inline-block; animation: ltr-in .65s cubic-bezier(.22,.61,.36,1) calc(var(--li, 0) * 45ms) both; }
h1.display.letters .ltr.gold { color: var(--dore-clair); }
@keyframes ltr-in { from { opacity: 0; transform: translateY(18px) rotate(2deg); } to { opacity: 1; transform: none; } }

.hero-sub {
  color: var(--ivoire-doux); font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 38ch;
  margin: 0 0 1.7rem; text-shadow: 0 2px 12px rgba(3, 8, 16, .6);
}
.hero-cta { display: flex; gap: .9rem; flex-wrap: wrap; }
.btn.cta-big { padding: .85rem 1.55rem; border-radius: 999px; font-size: 1.02rem; }
.btn.cta-big.ruby { background: linear-gradient(135deg, #c73a4c, #9c2436); box-shadow: 0 10px 26px rgba(163, 38, 56, .38); }
.btn.cta-big.ghost { border-color: rgba(246, 241, 229, .5); }

/* Barre de fonctionnalités dorée en pied d'écran (maquette 01). */
.feature-strip {
  margin-top: auto; padding: 1.15rem 0 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 3vw, 2.8rem);
  border-top: 1px solid rgba(232, 194, 117, .22);
}
.feature { display: flex; align-items: center; gap: .7rem; animation: hero-rise .8s .34s cubic-bezier(.22,.61,.36,1) both; }
.feature svg { width: 27px; height: 27px; color: var(--dore); flex: none; filter: drop-shadow(0 0 8px rgba(217, 164, 65, .35)); }
.feature b { display: block; font-size: .97rem; color: var(--ivoire); }
.feature span { display: block; font-size: .84rem; color: #a7b4c4; }
.feature:nth-child(2) { animation-delay: .42s; }
.feature:nth-child(3) { animation-delay: .5s; }
.feature:nth-child(4) { animation-delay: .58s; }
.feature:nth-child(5) { animation-delay: .66s; }

/* Kickers dorés (typographie éditoriale). */
.kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dore); margin: 0 0 .35rem;
}
section > .kicker { margin-top: 1.6rem; }

/* Section « protocole » : bento de verre nocturne sous la ligne de flottaison. */
.rules-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.rule {
  position: relative; overflow: hidden; grid-column: span 2;
  background: rgba(12, 22, 35, .62); backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 164, 65, .22); border-radius: 16px;
  padding: 1.5rem 1.35rem 1.4rem; color: var(--ivoire-doux);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.rule:nth-child(1), .rule:nth-child(2) { grid-column: span 3; }
.rule:nth-child(6) { grid-column: span 6; display: flex; align-items: center; gap: 1.6rem; }
.rule:nth-child(6) b { flex: 0 0 auto; max-width: 220px; margin-bottom: 0; }
.rule::before {
  content: attr(data-n); position: absolute; right: .55rem; top: -.35rem;
  font-family: Georgia, serif; font-size: 3.6rem; font-weight: 700;
  color: rgba(217, 164, 65, .16); pointer-events: none;
}
.rule:hover { transform: translateY(-4px); border-color: rgba(217, 164, 65, .55); box-shadow: 0 16px 34px rgba(6, 14, 26, .45); }
.rule b { display: block; font-family: Georgia, serif; font-size: 1.12rem; color: var(--ivoire); margin-bottom: .45rem; }
.rule p { margin: 0; font-size: .95rem; }

.scene-familles {
  border-radius: 20px; min-height: 300px; margin: 1.4rem 0; overflow: hidden; position: relative;
  border: 1px solid rgba(217, 164, 65, .25); box-shadow: 0 14px 40px rgba(4, 10, 20, .45);
}
.scene-familles::before {
  content: ""; position: absolute; inset: -4%; z-index: 0;
  background: url("/assets/fond-familles.png") center/cover no-repeat;
  animation: kenburns 34s 2s ease-in-out infinite alternate-reverse; will-change: transform;
}
.scene-familles figcaption {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem 1.4rem; color: var(--ivoire);
  background: linear-gradient(transparent, rgba(11, 22, 38, .85)); font-family: Georgia, serif;
}

/* ---- tableau de bord : cartes verre sur fond-salon ---- */
.fam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.1rem; }
.fam-card {
  background: rgba(12, 22, 35, .66); backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 164, 65, .22); border-top: 4px solid var(--dore);
  border-radius: var(--rayon); padding: 1.1rem 1.3rem; min-width: 0;
  box-shadow: 0 14px 40px rgba(4, 10, 20, .45); color: var(--ivoire-doux);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.fam-card:hover { transform: translateY(-3px); border-color: rgba(217, 164, 65, .5); box-shadow: 0 18px 44px rgba(4, 10, 20, .55); }
.fam-card h3 { color: var(--ivoire); margin-bottom: .2rem; }
.progress { height: 10px; background: rgba(246, 241, 229, .12); border-radius: 999px; overflow: hidden; margin: .5rem 0; }
.progress > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--petrole), var(--dore), var(--petrole));
  background-size: 200% 100%; animation: bar-sheen 5s linear infinite;
  transition: width .8s cubic-bezier(.22,.61,.36,1);
}
@keyframes bar-sheen { to { background-position: 200% 0; } }
.progress-hint { font-size: .88rem; color: #9fb0c2; }

/* ---- vue famille : cartes souhaits en verre qui s'élèvent au survol ---- */
.family-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.family-head > * { min-width: 0; }
.family-actions, .invitation-actions, .share-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.family-actions { margin: .4rem 0; }
.group { margin: 1.4rem 0; }
.group-title { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.group-title > * { min-width: 0; }
.wish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: .8rem; }
.wish {
  background: rgba(12, 22, 35, .66); backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 164, 65, .18); border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(4, 10, 20, .4);
  display: flex; flex-direction: column; min-width: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wish:hover { transform: translateY(-4px); border-color: rgba(217, 164, 65, .45); box-shadow: 0 16px 36px rgba(4, 10, 20, .55); }
.wish .img { height: 150px; width: 100%; object-fit: cover; background: #22344a center/cover no-repeat; transition: filter .25s; }
.wish:hover .img { filter: brightness(1.08) saturate(1.06); }
.wish .body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; color: var(--ivoire-doux); }
.wish .body h4, .wish .body b { color: var(--ivoire); }
.wish .price { font-weight: 800; color: var(--dore-clair); font-size: 1.1rem; }
.wish .desc { font-size: .92rem; color: #b7c4d2; }
.wish .meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.wish .actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: auto; padding-top: .6rem; }
.wish.reserved { border-color: rgba(201, 83, 106, .6); }
.wish.mine { border-color: var(--dore); box-shadow: 0 0 0 2px rgba(217, 164, 65, .35), 0 8px 24px rgba(4, 10, 20, .4); }
.child-frame { border: 2px dashed rgba(217, 164, 65, .55); border-radius: 14px; padding: 1rem 1.1rem; background: rgba(217, 164, 65, .05); }
.child-frame .group-title h3 { color: var(--dore-clair); }
.group.locked { opacity: .95; }
.lock-note {
  background: rgba(16, 31, 51, .65); color: var(--ivoire); border: 1px dashed rgba(217, 164, 65, .5);
  border-radius: 12px; padding: .9rem 1.1rem; font-style: italic;
}
.contrib-bar { height: 8px; background: rgba(246, 241, 229, .12); border-radius: 999px; overflow: hidden; }
.contrib-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--petrole-clair), var(--dore), var(--petrole-clair));
  background-size: 200% 100%; animation: bar-sheen 5s linear infinite;
  transition: width .8s cubic-bezier(.22,.61,.36,1);
}
/* RM-24 bis : objectif atteint (total promis ≥ prix). */
.goal-reached { color: var(--dore); font-weight: 700; }
.goal-flag {
  display: inline-flex; align-items: center; padding: .35rem .85rem;
  border: 1px solid var(--dore); border-radius: 999px; color: var(--dore);
  font-weight: 700; font-size: .85rem; background: rgba(217, 164, 65, .1);
}

/* ---- hotte ---- */
.hotte-list { display: flex; flex-direction: column; gap: .8rem; }
.hotte-row {
  background: rgba(12, 22, 35, .66); backdrop-filter: blur(10px);
  border: 1px solid rgba(217, 164, 65, .18); border-radius: 12px; padding: .9rem 1.1rem;
  box-shadow: 0 6px 20px rgba(4, 10, 20, .38); color: var(--ivoire-doux);
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.hotte-row:hover { transform: translateY(-2px); border-color: rgba(217, 164, 65, .4); box-shadow: 0 10px 26px rgba(4, 10, 20, .48); }
.hotte-row h4, .hotte-row b { color: var(--ivoire); }
.hotte-row .grow { flex: 1 1 260px; min-width: 0; }
.hotte-row select { width: auto; max-width: 100%; }

/* ---- profil ---- */
.stat-list { list-style: none; padding: 0; margin: .5rem 0; }
.stat-list li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid rgba(232, 194, 117, .14); }
.premium-box { border: 2px solid var(--dore); border-radius: 14px; padding: 1rem 1.2rem; background: rgba(217, 164, 65, .07); }

/* ---- modale « Ajouter un cadeau » (maquette 08) ---- */
.modal-lead { color: var(--ivoire-doux); margin: .1rem 0 1.1rem; }
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  margin: .9rem 0 0; padding: 1.15rem 1rem; cursor: pointer; text-align: center;
  border: 1.5px dashed rgba(232, 194, 117, .55); border-radius: 12px;
  background: rgba(246, 241, 229, .05); color: var(--ivoire-doux);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--dore-clair); background: rgba(246, 241, 229, .09); }
.dropzone b { font-size: .95rem; color: var(--ivoire); }
.dropzone .muted { font-size: .82rem; }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.dz-icon { color: var(--dore); }
.dz-icon svg { width: 30px; height: 30px; display: block; }
details.advanced { border-top: 1px solid rgba(232, 194, 117, .18); margin-top: 1rem; padding-top: .7rem; }
details.advanced summary { cursor: pointer; color: var(--dore-clair); font-weight: 600; font-size: .9rem; }
details.advanced[open] summary { margin-bottom: .3rem; }

/* ---- invitations et souvenirs annuels ---- */
.auth-panel { max-width: 500px; }
.invitation-panel { max-width: 780px; }
.invitation-message { margin: 1rem 0; border-left: 3px solid var(--dore); padding: .5rem 1rem; white-space: pre-wrap; color: var(--ivoire); }
.invitation-context { border-bottom: 1px solid rgba(217, 164, 65, .25); margin-bottom: 1rem; }
.invitation-actions { margin-top: 1.2rem; }
.share-result:not(:empty) { margin-top: 1.2rem; padding-top: .5rem; border-top: 1px solid rgba(217, 164, 65, .25); }
.share-actions { margin: 1rem 0; }
.invitation-list { display: grid; gap: .8rem; }
.invitation-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .8rem; border: 1px solid rgba(217, 164, 65, .25); border-radius: 10px; }
.invitation-row .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.invitation-row p { margin: .3rem 0 0; }
.archive-controls:not(:empty) { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(217, 164, 65, .2); }
.archive-controls p { flex: 1 1 260px; min-width: 0; margin: 0; }
.archive-wish:hover { transform: none; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule, .rule:nth-child(1), .rule:nth-child(2) { grid-column: span 1; }
  .rule:nth-child(6) { grid-column: span 2; flex-direction: column; align-items: flex-start; gap: .4rem; }
}
@media (max-width: 720px) {
  .wish-grid { grid-template-columns: 1fr; }
  .rules-bento { grid-template-columns: 1fr; }
  .rule, .rule:nth-child(1), .rule:nth-child(2), .rule:nth-child(6) { grid-column: auto; }
  #sleigh { height: 52px; }
  .hero-full { min-height: calc(100svh - 96px); }
  .hero-copy, .hero-full::after { transform: none; }
  .feature { flex: 1 1 45%; }
  h1 { font-size: 1.7rem; }
  h1.display { font-size: clamp(2rem, 8.5vw, 3rem); }
  .child-frame { padding: .8rem; }
  .fam-card { padding: 1rem; }
}
@media (max-width: 480px) {
  .family-actions, .invitation-actions, .share-actions { width: 100%; }
  .family-actions > *, .share-actions > * { flex: 1 1 auto; }
  .invitation-actions > * { flex: 1 1 100%; }
  .hero-cta > * { width: 100%; }
  .feature { flex-basis: 100%; }
  .hero-full { gap: 2rem; }
}