/* Privacy — page d'accueil (design/BRIEF.md). Base commune : socle.css. */

.accueil {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  padding:
    calc(env(safe-area-inset-top) + var(--espace-haut))
    var(--gouttiere)
    calc(env(safe-area-inset-bottom) + var(--espace-4));
}

.accueil > :not(.diaphragme) { position: relative; z-index: 1; }

.marque {
  margin: 0 0 0 -0.03em; /* alignement optique du P sur la gouttière */
  font-family: var(--police-display);
  font-weight: 400;
  font-size: var(--taille-display);
  line-height: var(--interligne-display);
  letter-spacing: var(--approche-display);
  text-wrap: balance;
}

.accroche {
  margin: 0;
  max-width: 22ch;
  font-size: var(--taille-accroche);
  line-height: var(--interligne-accroche);
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--espace-1);
  width: 100%;
  max-width: 24rem;
  margin-top: var(--espace-2);
}

.aide {
  width: 100%;
  margin: 0;
  padding: var(--espace-2);
  border-radius: var(--rayon-aide);
  background: var(--lame);
  color: var(--baryte);
  font-size: var(--taille-mention);
  line-height: var(--interligne-mention);
  text-wrap: pretty;
}
.aide svg { vertical-align: -2px; }

/* ---------- Le geste : le diaphragme ---------- */

.diaphragme {
  position: absolute;
  z-index: 0;
  width: 150vw;
  height: 150vw;
  right: -45vw;  /* centre dans l'écran, bords coupés à droite et en bas */
  bottom: -35vw;
  pointer-events: none;
}
.diaphragme.ouvert .lame { transform: rotate(-32deg); }

@media (min-width: 900px) {
  .accueil { padding-left: var(--gouttiere-large); padding-right: var(--gouttiere-large); }
  .diaphragme {
    width: 95vh;
    height: 95vh;
    right: -22vh;
    bottom: -30vh;
  }
}