/* NARVALIO — le visuel de carte d'accès, et le surtitre qui l'accompagne.
 *
 * Extrait de home.css pour être partagé : la page d'accueil et l'espace
 * partenaire montrent la même carte. Charger home.css sur une autre page était
 * exclu — elle porte « * { margin: 0 } » et « a { text-decoration: none } »,
 * qui écraseraient la typographie de la page hôte.
 *
 * N'utilise que des variables définies dans app.css : cette feuille se pose
 * donc par-dessus n'importe quelle page du site sans rien d'autre.
 */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--glacier);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--glacier); }

/* La scène PORTE la largeur et sert de conteneur de requête : tout ce qui est
   à l'intérieur de la carte se dimensionne alors en cqw, c'est-à-dire en
   pourcentage de la largeur de la carte elle-même.
   C'est indispensable : en pixels figés (26px de marge, 19px pour le code),
   la carte n'est juste qu'à sa taille d'origine. Réduite à 265 px pour le
   bandeau partenaire, le code passait à la ligne et la mise en garde était
   tranchée. En cqw, elle est correcte à n'importe quelle taille. */
.card-stage {
  display: flex; justify-content: center;
  perspective: 1200px;
  width: 100%; max-width: 400px; margin-inline: auto;
  container-type: inline-size;
}

.acard {
  width: 100%; aspect-ratio: 85.6/54;
  background: linear-gradient(155deg, #123049 0%, #0A1E30 55%, #071726 100%);
  border: 1px solid var(--line); border-radius: 3cqw;
  padding: 6.5cqw 7cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(237, 231, 218, .06);
  /* Légère inclinaison au repos, redressée au survol : la carte se lit comme un
     objet posé, pas comme une image plate. */
  transform: rotateY(-9deg) rotateX(4deg);
  transition: transform .5s ease;
  position: relative; overflow: hidden;
}
.acard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(127, 176, 204, .10) 50%, transparent 60%);
}
.card-stage:hover .acard { transform: rotateY(0) rotateX(0); }

/* Toutes les cotes internes en cqw : elles reproduisent exactement le rendu
   d'origine à 400 px (26/400 = 6.5 %, 13/400 = 3.25 %, 50/400 = 12.5 %…) et
   suivent la carte quand elle rétrécit. Le logo, lui, se dimensionne en em pour
   rester accroché au mot-symbole qu'il accompagne. */
.acard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.acard .wm { display: flex; align-items: center; gap: 2.75cqw; }
.acard .wm svg { width: 1.85em; height: 1.85em; flex: none; }
.acard .wm .t {
  font-family: var(--mono); font-size: 3.25cqw;
  letter-spacing: .28em; text-indent: .28em;
  white-space: nowrap;
}
.qr { width: 12.5cqw; height: 12.5cqw; opacity: .9; flex: none; }
.uid-label {
  font-family: var(--mono); font-size: 2.15cqw; letter-spacing: .2em;
  color: var(--glacier); text-transform: uppercase; margin-bottom: 1.75cqw;
}
.uid {
  font-family: var(--mono); font-size: 4.75cqw;
  letter-spacing: .13em; color: var(--tusk);
  /* Un identifiant coupé en deux ne se lit plus comme un identifiant. */
  white-space: nowrap;
}
.acard-foot {
  font-size: 2.4cqw; color: var(--tusk-dim); line-height: 1.5; max-width: 32ch;
}

/* Bandeau de l'espace partenaire : le texte à gauche, la carte à droite.
   Sur écran étroit la carte passe dessous — et rétrécit, sinon elle mangerait
   tout l'espace avant qu'on ait lu la première ligne. */
.aff-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items: center;
  margin: 4px 0 26px;
}
.aff-slogan {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--tusk);
}
/* La largeur se règle sur la SCÈNE, jamais sur la carte : c'est la scène qui
   sert de conteneur de requête, donc c'est elle qui donne l'échelle interne. */
.aff-hero .card-stage { max-width: 330px; }
@media (max-width: 620px) {
  .aff-hero { grid-template-columns: 1fr; gap: 18px; }
  .aff-hero .card-stage { max-width: 300px; }
}

/* Une inclinaison qui bouge au survol n'apporte rien à qui demande moins
   d'animation — et peut gêner. */
@media (prefers-reduced-motion: reduce) {
  .acard { transform: none; transition: none; }
}