/* ==========================================================================
   REMIND — section5.css
   Section 5 : « Pensé pour disparaître. Conçu pour vous protéger. »
   (maquetteSection5.png). Confidentialité : texte + liste à gauche,
   illustration bouclier/Europe à droite, 5 cartes en bas. Scopé sous .priv.
   ========================================================================== */

.priv{ padding: clamp(48px, 7vw, 100px) 0 clamp(30px, 4vw, 60px); }

/* ---- Titre ---- */
.priv__title{
  margin: 0;
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.priv__title span{ display: block; }
.priv__head .rule{ margin: clamp(14px, 1.6vw, 22px) 0 0; }

/* ---- Haut : texte | illustration ---- */
.priv__top{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: stretch;
  margin-top: clamp(28px, 3.6vw, 52px);
}
.priv__sub{ margin: 0 0 14px; font-weight: 600; font-size: clamp(21px, 2.1vw, 29px); color: var(--ink); }
.priv__p{ margin: 0 0 16px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-72); }
.priv__strong{ margin: 0 0 20px; font-family: var(--sans); font-weight: 600; font-size: clamp(15px, 1.25vw, 18px); color: var(--ink); }

.priv__list{ display: flex; flex-direction: column; gap: 16px; }
.priv__list li{ display: flex; gap: 14px; align-items: flex-start; }
.priv__list .lico{
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.priv__list .lico svg{ width: 21px; height: 21px; color: var(--terra); }
.priv__list p{
  margin: 0; padding-left: 14px;
  border-left: 2px solid rgba(24,26,20,.14);
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5; color: var(--ink);
}

/* ---- Illustration ---- */
.priv__card{
  background: #F4ECDF;
  border-radius: 24px;
  padding: clamp(24px, 3vw, 44px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.priv__viz{ width: 100%; max-width: 440px; height: auto; }
.priv__viz-title{ margin: clamp(14px, 2vw, 24px) 0 8px; font-weight: 600; font-size: clamp(20px, 1.9vw, 27px); color: var(--ink); }
.priv__viz-sub{ margin: 0; max-width: 42ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: var(--ink-72); }

/* ---- Cartes du bas ---- */
.priv__cards{
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(34px, 4.4vw, 62px);
  perspective: 1400px;                    /* profondeur commune pour le flip 3D */
}
.priv__cards li{
  background: #F4ECDF;
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pcard__ico{
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pcard__ico svg{ width: 28px; height: 28px; }
.pcard__t{ font-weight: 600; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.2; color: var(--ink); }
.pcard__rule{ width: 26px; height: 2px; background: var(--terra); border-radius: 2px; margin: 11px 0 13px; }
.pcard__d{ margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-72); }

/* ---- Illustration animée : orbite qui tourne + étoiles vivantes ---- */
.priv__orbit{
  transform-box: fill-box;
  transform-origin: center;               /* = centre de l'ellipse = le cadenas */
  animation: privOrbit 16s linear infinite;
}
@keyframes privOrbit{ to{ transform: rotate(360deg); } }

.priv__viz .pstar use{
  transform-box: fill-box;
  transform-origin: center;
}
/* 4 trajectoires + durées/délais variés → mouvement continu perçu comme aléatoire */
@keyframes twkA{ 0%,100%{ transform: translate(0,0) scale(.8) rotate(0); opacity:.45; } 50%{ transform: translate(12px,-15px) scale(1.3) rotate(25deg); opacity:1; } }
@keyframes twkB{ 0%,100%{ transform: translate(0,0) scale(.85) rotate(0); opacity:.5;} 50%{ transform: translate(-15px,11px) scale(1.2) rotate(-22deg); opacity:1; } }
@keyframes twkC{ 0%,100%{ transform: translate(0,0) scale(.8) rotate(0); opacity:.45;} 50%{ transform: translate(14px,13px) scale(1.25) rotate(18deg); opacity:1; } }
@keyframes twkD{ 0%,100%{ transform: translate(0,0) scale(.9) rotate(0); opacity:.55;} 50%{ transform: translate(-12px,-13px) scale(1.35) rotate(-28deg); opacity:.95; } }
.priv__viz .pstar:nth-child(1) use{ animation: twkA 5.3s ease-in-out infinite; animation-delay: -.4s; }
.priv__viz .pstar:nth-child(2) use{ animation: twkB 7.1s ease-in-out infinite; animation-delay: -1.6s; }
.priv__viz .pstar:nth-child(3) use{ animation: twkC 6.2s ease-in-out infinite; animation-delay: -2.3s; }
.priv__viz .pstar:nth-child(4) use{ animation: twkD 8.0s ease-in-out infinite; animation-delay: -.9s; }
.priv__viz .pstar:nth-child(5) use{ animation: twkC 6.7s ease-in-out infinite; animation-delay: -3.1s; }
.priv__viz .pstar:nth-child(6) use{ animation: twkA 7.6s ease-in-out infinite; animation-delay: -2.0s; }
.priv__viz .pstar:nth-child(7) use{ animation: twkD 5.9s ease-in-out infinite; animation-delay: -1.2s; }
.priv__viz .pstar:nth-child(8) use{ animation: twkB 6.9s ease-in-out infinite; animation-delay: -3.7s; }

/* ---- Révélation en cascade (section5.js) ---- */
.priv.js-anim [data-reveal]{
  opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.priv.js-anim [data-reveal].is-in{ opacity: 1; transform: none; }

/* Cartes du bas : FLIP COMPLET sur elle-même — chaque carte fait un tour
   d'axe vertical autour de son propre centre (dos masqué → milieu du tour
   propre au lieu d'un texte en miroir) + révélation séquentielle (section5.js). */
.priv.js-anim .priv__cards li[data-reveal]{
  opacity: 0;
  transform: rotateY(-360deg);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: opacity .5s var(--ease), transform .9s var(--ease);
}
.priv.js-anim .priv__cards li[data-reveal].is-in{
  opacity: 1;
  transform: rotateY(0deg);
}

/* ---- Responsive ---- */
@media (max-width: 940px){
  .priv__top{ grid-template-columns: 1fr; }
  .priv__cards{ grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
}
@media (max-width: 620px){
  .priv__cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px){
  .priv__cards{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .priv.js-anim [data-reveal]{ opacity: 1; transform: none; }
  .priv.js-anim .priv__cards li[data-reveal]{ opacity: 1; transform: none; }
  .priv__orbit, .priv__viz .pstar use{ animation: none; }
}