/* =================================================================
   TRUSTeat - Page d'accueil « portail » (choix de l'univers)
   Complète style.css (polices, tokens, boutons).
   Animation d'entrée du logo + mise en valeur de l'univers survolé.
   Tout est désactivé si l'utilisateur a demandé à réduire les animations.
   ================================================================= */

.portal {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: #fff;
  background:
    radial-gradient(1100px 620px at 50% 18%, rgba(83,136,187,.20), rgba(83,136,187,0) 70%),
    linear-gradient(180deg, #0c2340 0%, #0a1d36 100%);
  overflow: hidden;
  isolation: isolate;
}
/* Trame fine, registre « instrument de mesure » */
.portal::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(900px 600px at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(900px 600px at 50% 30%, #000 30%, transparent 75%);
}

/* ---------- Barre haute ---------- */
.portal-top {
  display: flex; justify-content: flex-end; align-items: center;
  padding-top: 22px;
}
.portal-login {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.86);
  padding: 8px 2px;
  transition: color .2s ease;
}
.portal-login svg { width: 20px; height: 20px; }
.portal-login:hover { color: #fff; }

/* ---------- Centre ---------- */
.portal-main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: 8px 40px;
}

.logo-anim {
  position: relative;
  width: clamp(160px, 18vw, 230px);
  aspect-ratio: 1;
  margin: 0 auto 26px;
}
.logo-anim__svg { width: 100%; height: 100%; overflow: visible; }

/* Ondes (signal capteur) émises par le logo */
.logo-anim__ping {
  position: absolute;
  left: 50%; top: 48.5%;
  width: 67%; aspect-ratio: 1;
  border: 1.5px solid rgba(83,136,187,.75);
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  opacity: 0;
  pointer-events: none;
}

.portal-eyebrow {
  font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-light);
  margin: 0 0 .7rem;
}
.portal-title {
  color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  margin: 0 0 clamp(28px, 4vw, 46px);
  text-wrap: balance;
}

/* ---------- Les trois univers ---------- */
.universes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
}
.uni {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 26px 28px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.035);
  color: #fff;
  text-align: center;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .35s ease, border-color .35s ease,
              box-shadow .45s ease, opacity .35s ease, filter .35s ease;
  will-change: transform;
}
/* filet d'accent qui se déploie en haut de la carte */
.uni::before {
  content: "";
  position: absolute; left: 22px; right: 22px; top: -1px; height: 3px;
  background: var(--blue-mid);
  border-radius: 0 0 2px 2px;
  transform: scaleX(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.uni__ico {
  width: 76px; height: 76px;
  margin-bottom: 18px;
  color: var(--blue-light);
  transition: color .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.uni__ico svg { width: 100%; height: 100%; overflow: visible; }
.uni__ico * { transform-box: fill-box; }
.uni__kicker {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: 0 0 .35rem;
  transition: color .35s ease;
}
.uni__name {
  font-family: var(--font-title); font-weight: 700;
  font-size: 1.42rem; line-height: 1.15;
  color: #fff;
  margin: 0 0 .6rem;
  transition: color .35s ease;
}
.uni__text {
  font-size: .95rem; line-height: 1.5;
  color: rgba(255,255,255,.72);
  margin: 0 0 1.2rem;
  max-width: 28ch;
  transition: color .35s ease;
}
.uni__go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .95rem;
  color: #fff;
  transition: color .35s ease;
}
.uni__go svg { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.uni__badge {
  position: absolute; top: 14px; right: 14px;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75);
  border: 1px dashed rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 4px 10px;
  transition: color .35s ease, border-color .35s ease;
}

/* État actif (survol souris ou focus clavier) */
.uni.is-active,
.uni:focus-visible {
  transform: translateY(-8px);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4);
  outline: none;
}
.uni.is-active::before, .uni:focus-visible::before { transform: scaleX(1); }
.uni.is-active .uni__ico, .uni:focus-visible .uni__ico { color: var(--blue-mid); transform: scale(1.06); }
.uni.is-active .uni__kicker, .uni:focus-visible .uni__kicker { color: var(--blue-mid); }
.uni.is-active .uni__name, .uni:focus-visible .uni__name { color: var(--navy); }
.uni.is-active .uni__text, .uni:focus-visible .uni__text { color: var(--grey-900); }
.uni.is-active .uni__go, .uni:focus-visible .uni__go { color: var(--navy); }
.uni.is-active .uni__go svg, .uni:focus-visible .uni__go svg { transform: translateX(5px); }
.uni.is-active .uni__badge, .uni:focus-visible .uni__badge { color: var(--blue-mid); border-color: rgba(0,103,160,.45); }
.universes.has-active .uni:not(.is-active) { opacity: .5; filter: saturate(.6); }

/* ---------- Animations des icônes (au survol) ---------- */
/* GMS : le chariot roule, les roues tournent, le flocon scintille */
.ic-cart { transform-origin: 50% 100%; }
.ic-wheel { transform-origin: center; }
.ic-snow { transform-origin: center; }
.uni.is-active .ic-cart, .uni:focus-visible .ic-cart { animation: cart-roll 1.6s cubic-bezier(.45,0,.25,1) infinite; }
.uni.is-active .ic-wheel, .uni:focus-visible .ic-wheel { animation: wheel-spin 1.6s cubic-bezier(.45,0,.25,1) infinite; }
.uni.is-active .ic-snow, .uni:focus-visible .ic-snow { animation: snow-twinkle 1.6s ease-in-out infinite; }
@keyframes cart-roll {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(7px); }
  60% { transform: translateX(6px) rotate(-1.5deg); }
}
@keyframes wheel-spin {
  0%, 100% { transform: rotate(0); }
  45%, 60% { transform: rotate(200deg); }
}
@keyframes snow-twinkle {
  0%, 100% { transform: rotate(0) scale(1); opacity: 1; }
  50% { transform: rotate(60deg) scale(1.18); opacity: .85; }
}

/* Cuisine : le couvercle se soulève, la vapeur monte */
.ic-lid { transform-origin: 30% 100%; }
.ic-steam path { stroke-dasharray: 16; stroke-dashoffset: 0; opacity: .9; }
.uni.is-active .ic-lid, .uni:focus-visible .ic-lid { animation: lid-lift 1.4s ease-in-out infinite; }
.uni.is-active .ic-steam path, .uni:focus-visible .ic-steam path { animation: steam-rise 1.4s ease-in-out infinite; }
.uni.is-active .ic-steam path:nth-child(2), .uni:focus-visible .ic-steam path:nth-child(2) { animation-delay: .22s; }
.uni.is-active .ic-steam path:nth-child(3), .uni:focus-visible .ic-steam path:nth-child(3) { animation-delay: .44s; }
@keyframes lid-lift {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-4px) rotate(-7deg); }
  45% { transform: translateY(-1px) rotate(-2deg); }
  60% { transform: translateY(-3px) rotate(-5deg); }
  80% { transform: translateY(0) rotate(0); }
}
@keyframes steam-rise {
  0% { stroke-dashoffset: 16; opacity: 0; transform: translateY(4px); }
  35% { opacity: 1; }
  100% { stroke-dashoffset: -16; opacity: 0; transform: translateY(-5px); }
}

/* Industriel : l'engrenage tourne, la fumée s'élève */
.ic-gear { transform-origin: center; }
.ic-smoke circle { transform-origin: center; opacity: 0; }
.uni.is-active .ic-gear, .uni:focus-visible .ic-gear { animation: gear-turn 3s linear infinite; }
.uni.is-active .ic-smoke circle, .uni:focus-visible .ic-smoke circle { animation: smoke-up 1.8s ease-out infinite; }
.uni.is-active .ic-smoke circle:nth-child(2), .uni:focus-visible .ic-smoke circle:nth-child(2) { animation-delay: .6s; }
.uni.is-active .ic-smoke circle:nth-child(3), .uni:focus-visible .ic-smoke circle:nth-child(3) { animation-delay: 1.2s; }
@keyframes gear-turn { to { transform: rotate(360deg); } }
@keyframes smoke-up {
  0% { opacity: 0; transform: translate(0, 4px) scale(.5); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translate(5px, -14px) scale(1.5); }
}

/* ---------- Liaison logo -> univers survolé ---------- */
.portal-link {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.portal-link path {
  fill: none;
  stroke: rgba(83,136,187,.75);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.portal-link .pl-flow { stroke: #fff; stroke-dasharray: 2 10; opacity: .7; animation: pl-flow 1s linear infinite; }
.portal-link .pl-dot { fill: #fff; }
@keyframes pl-flow { to { stroke-dashoffset: -12; } }
.portal-main, .portal-top, .portal-foot { position: relative; z-index: 1; }

/* ---------- Pied ---------- */
.portal-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding-block: 18px 24px;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
}
.portal-foot a { color: rgba(255,255,255,.7); }
.portal-foot a:hover { color: #fff; }

/* =================================================================
   Animation d'entrée
   ================================================================= */
.lg-base { transform-box: view-box; transform-origin: 1117px 1112px; }
.lg-e, .lg-a, .lg-t { transform-box: fill-box; transform-origin: 50% 85%; }
.lg-tag, .lg-by { transform-box: fill-box; }

.js-anim .lg-base   { animation: lg-base-in 1.05s cubic-bezier(.16,1,.3,1) both; }
.js-anim .lg-e      { animation: lg-pop .55s cubic-bezier(.3,1.6,.5,1) 1.15s both; }
.js-anim .lg-a      { animation: lg-pop .55s cubic-bezier(.3,1.6,.5,1) 1.27s both; }
.js-anim .lg-t      { animation: lg-pop .55s cubic-bezier(.3,1.6,.5,1) 1.39s both; }
.js-anim .lg-tag    { animation: lg-tag-in .8s cubic-bezier(.2,.8,.2,1) 1.45s both; }
.js-anim .lg-by     { animation: lg-by-in .8s cubic-bezier(.2,.8,.2,1) 1.75s both; }
.js-anim .logo-anim__ping.is-intro { animation: lg-ping 1.5s cubic-bezier(.2,.7,.3,1) 1.9s 1 both; }
.js-anim .reveal { animation: rise-in .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 1.3s); }
.js-anim .portal-top { animation: fade-in .8s ease 1.6s both; }
.js-anim .portal-foot { animation: fade-in .8s ease 1.9s both; }

@keyframes lg-base-in {
  0%   { opacity: 0; transform: rotate(-135deg) scale(.35); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes lg-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.07) translateY(-1.5%); }
}
@keyframes lg-tag-in {
  0% { opacity: 0; transform: translate(-60px, 60px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lg-by-in {
  0% { opacity: 0; transform: translateX(90px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lg-ping {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  15%  { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(1.75); }
}
@keyframes rise-in {
  0% { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Le logo « répond » au survol d'un univers : ondes répétées */
.portal.is-hovering .logo-anim__ping.is-loop { animation: lg-ping 1.6s cubic-bezier(.2,.7,.3,1) infinite; }
.portal.is-hovering .logo-anim__ping.is-loop + .is-loop { animation-delay: .8s; }
.portal.is-hovering .logo-anim__svg { transform: scale(1.04); }

/* ---------- Bascule TRUSTeat -> ReactEvent au survol d'« Industriel » ---------- */
.re-logo {
  position: absolute; left: 50%; top: 50%;
  width: 140%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.re-logo__svg { width: 100%; height: auto; overflow: visible; }
.re-logo .re-text { opacity: 0; transform: translateX(-26px); transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.re-logo .re-d {
  transform-box: fill-box; transform-origin: 50% 50%;
  opacity: 0; transform: scale(.2) rotate(-90deg);
  transition: opacity .25s ease, transform .3s cubic-bezier(.4,0,.6,1);
}
.logo-anim__svg { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.portal.is-re .logo-anim__svg { opacity: 0; transform: scale(.55) rotate(90deg); transition: transform .45s cubic-bezier(.5,0,.75,0), opacity .3s ease .1s; }
.portal.is-re .logo-anim__ping { visibility: hidden; }
.portal.is-re .re-logo .re-text { opacity: 1; transform: none; transition: opacity .45s ease .3s, transform .6s cubic-bezier(.2,.8,.2,1) .3s; }
.portal.is-re .re-logo .re-d { opacity: 1; transform: none; transition: opacity .3s ease, transform .65s cubic-bezier(.3,1.5,.5,1); }
.portal.is-re .re-logo .re-d--green { transition-delay: .18s; }
.portal.is-re .re-logo .re-d--blue  { transition-delay: .28s; }
.portal.is-re .re-logo .re-d--steel { transition-delay: .38s; }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .portal-top { padding-top: 14px; }
  .logo-anim { width: 132px; margin-bottom: 18px; }
  .portal-title { margin-bottom: 24px; }
  .universes { grid-template-columns: 1fr; max-width: 520px; gap: 12px; }
  .uni {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left;
    padding: 18px 18px 18px 16px;
  }
  .uni__ico { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 4; align-self: center; }
  .uni__kicker { margin: 0; }
  .uni__name { font-size: 1.2rem; margin: 0 0 .25rem; }
  .uni__text { font-size: .9rem; margin: 0 0 .4rem; max-width: none; }
  .uni__go { margin-top: 0; font-size: .9rem; }
  .uni__badge { top: 10px; right: 10px; font-size: .62rem; padding: 3px 8px; }
  .uni.is-active, .uni:focus-visible { transform: none; }
  .portal-link { display: none; }
}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .portal *, .portal *::before { animation: none !important; transition-duration: .01ms !important; }
  .portal-link { display: none; }
}