/* p7.css - prototype P7, les recompenses. Registre de nuit, teinte de la carte gardee. */
@font-face { font-family: Satoshi; font-weight: 400; font-display: block; src: url("../../_commun/fonts/satoshi-400.woff2") format("woff2"); }
@font-face { font-family: Satoshi; font-weight: 500; font-display: block; src: url("../../_commun/fonts/satoshi-500.woff2") format("woff2"); }
@font-face { font-family: Satoshi; font-weight: 700; font-display: block; src: url("../../_commun/fonts/satoshi-700.woff2") format("woff2"); }
:root { --teinte: #4A1E2A; --teinte-fond: #2a1419; --teinte-texte: #e3c9cf; --nuit: #0e0d0b; --encre: #f1ede6; --encre-2: rgba(241, 237, 230, .64); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--nuit); color: var(--encre); font-family: Satoshi, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button { font: inherit; }
/* le fond est ne de l onde du dernier tampon (idee 4) : il porte deja la teinte de la carte */
#p7-fond { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 70% at 35% 50%, color-mix(in srgb, var(--teinte) 55%, #0e0d0b), transparent 75%), var(--nuit); }
.p7-barre { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; padding: 18px 28px; font-size: 13px; color: var(--encre-2); pointer-events: none; }
.p7-barre strong { color: var(--encre); }
main { position: relative; z-index: 1; }
.p7-avant { min-height: 80vh; display: grid; place-items: center; color: var(--encre-2); font-size: 15px; padding: 0 7vw; text-align: center; }
.p7-apres { min-height: 80vh; display: grid; align-content: center; padding: 0 7vw; }
.p7-apres small, .p7-txt small { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teinte-texte); margin-bottom: 14px; }
.p7-apres h2 { font-size: clamp(32px, 3.4vw, 52px); margin: 0; }

.p7-section { touch-action: pan-y; }
.p7-section { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
#p7-toile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; }
/* la lumiere de la recompense : un halo chaud derriere la carte, qui s allume AVANT le texte */
#p7-halo { position: absolute; z-index: 1; left: 31%; top: 50%; width: 44vw; height: 44vw; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(255, 190, 110, .18) 55%, transparent 75%); opacity: 0; transform: scale(.6); filter: blur(10px); }
.p7-etiquette { position: absolute; z-index: 3; left: 31%; top: 25%; translate: -50% 0; margin: 0; padding: 9px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 700; background: #f4efe6; color: #1a1416; box-shadow: 0 0 40px rgba(255, 210, 140, .55); opacity: 0; }

.p7-txt { position: absolute; z-index: 3; right: 7vw; top: 50%; translate: 0 -50%; max-width: 34vw; }
.p7-txt h2 { margin: 0 0 .45em; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.04; letter-spacing: -.02em; }
.p7-txt p { margin: 0 0 1.6em; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.5; color: var(--encre-2); max-width: 36ch; }
.p7-txt .p7-exemple { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; color: var(--encre-2); }
.p7-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 30rem; }
.p7-liste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; }
.p7-liste .nom { font-weight: 700; font-size: 16px; }
.p7-liste .seuil { grid-column: 1; font-size: 13px; color: var(--encre-2); }
.p7-liste .etat { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; font-weight: 600; color: var(--encre-2); }
.p7-liste li.is-dispo { background: rgba(255, 220, 160, .12); border-color: rgba(255, 214, 140, .55); box-shadow: 0 0 30px rgba(255, 200, 120, .18); }
.p7-liste li.is-dispo .etat { color: #ffd98c; }

.p7-outils { position: fixed; right: 28px; bottom: 26px; z-index: 10; display: flex; gap: 8px; }
.p7-outils button { font-size: 12px; color: var(--encre-2); background: rgba(14, 13, 11, .62); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 8px 14px; cursor: pointer; }

@media (max-width: 1200px) and (min-width: 761px) and (min-aspect-ratio: 4001/5000) { .p7-txt { max-width: 38vw; right: 5vw; } }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .p7-section { height: auto; min-height: 0; padding: 70px 20px 40px; }   /* Paul, 22/10 : 100vh laissait un trou avant « Et vous, au quotidien » */
  #p7-toile { position: relative; height: 44vh; }
  #p7-halo { left: 50%; top: 30vh; width: 90vw; height: 90vw; }
  .p7-etiquette { left: 50%; top: 80px; }
  .p7-txt { position: relative; right: auto; top: auto; translate: none; max-width: none; }
}