/* =========================================================================
   Identité « Émeraude » — carte de visite numérique AfricaWorks.
   Feuille partagée par la page publique (/c/slug) et la sandbox de design.
   Glassmorphisme : la carte est une plaque de verre dépoli posée sur le fond
   vert forêt. Aucune animation ne dépend de JavaScript, et tout est coupé si
   le téléphone demande moins de mouvement.
   ========================================================================= */

/* ------------------------------------------------------------ l'écran entier */

.em-ecran {
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 720px;
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #0c3f34 0%, #0a3a30 34%, #08352c 62%, #052f27 100%);
  border-radius: 26px;
  font-family: var(--font-inter), system-ui, sans-serif;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}

/* --- décor : moucharabieh doré flou, lueur, orbes, courbes topographiques --- */

.em-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Le motif de points dorés doit passer DERRIÈRE la plaque de verre : c'est lui qui
   rend le dépoli visible. Sur un fond lisse, un backdrop-filter ne se voit pas. */
.em-moucharabieh {
  position: absolute;
  top: 0;
  right: -50px;
  width: 420px;
  height: 360px;
  background-image: radial-gradient(circle, rgba(224, 178, 106, 0.95) 1.5px, transparent 2.1px);
  background-size: 13px 13px;
  filter: blur(2px);
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(85% 85% at 62% 38%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 82%);
  mask-image: radial-gradient(85% 85% at 62% 38%, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 82%);
}

.em-lueur {
  position: absolute;
  top: -110px;
  right: -70px;
  width: 380px;
  height: 380px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(250, 226, 176, 0.85) 0%,
    rgba(224, 176, 100, 0.55) 34%,
    rgba(214, 158, 74, 0) 68%
  );
  filter: blur(10px);
}

/* Deux orbes floues placées DERRIÈRE la carte : c'est leur matière que le verre
   floute. Sans elles, un fond lisse ne laisserait voir aucun effet de dépoli. */
/* Orbes NETTES (aucun flou préalable) : c'est la plaque de verre qui les floute, donc
   elles restent perceptibles à travers elle. Un motif fin, lui, serait détruit par le
   flou — d'où l'échec d'un moucharabieh derrière le verre. */
.em-orbe {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* Une seule promotion GPU, sur les deux grosses masses : Safari iOS plafonne le
     nombre de couches compositées et cesse d'animer au-delà de la limite. */
  will-change: transform;
  transform: translateZ(0);
}

.em-orbe-doree {
  top: 12%;
  right: -70px;
  width: 330px;
  height: 330px;
  background: radial-gradient(
    circle at 42% 42%,
    rgba(240, 196, 116, 1) 0%,
    rgba(232, 180, 98, 0.95) 58%,
    rgba(226, 170, 86, 0.45) 60%,
    rgba(214, 158, 74, 0) 64%
  );
}

.em-orbe-emeraude {
  bottom: 4%;
  left: -80px;
  width: 350px;
  height: 350px;
  background: radial-gradient(
    circle at 55% 45%,
    rgba(88, 224, 172, 0.95) 0%,
    rgba(64, 196, 148, 0.85) 56%,
    rgba(56, 178, 134, 0.4) 58%,
    rgba(56, 168, 128, 0) 62%
  );
}


/* Particules dorées : elles montent lentement, passent DERRIÈRE la carte et s'y
   retrouvent floutées. C'est le mouvement du fond qui rend le dépoli évident. */
/* Bande dorée à bord net, en travers du fond : à travers la plaque, son contour
   devient une tache floue nette — c'est la preuve visuelle du verre dépoli. */
.em-decor .em-bande {
  position: absolute;
  top: 46%;
  left: -10%;
  width: 120%;
  height: 54px;
  transform: rotate(-7deg);
  background: linear-gradient(
    90deg,
    rgba(232, 180, 98, 0) 0%,
    rgba(236, 196, 120, 0.55) 22%,
    rgba(240, 206, 140, 0.7) 50%,
    rgba(232, 180, 98, 0.5) 78%,
    rgba(232, 180, 98, 0) 100%
  );
  pointer-events: none;
}

.em-particules {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.em-particules i {
  position: absolute;
  bottom: -16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 232, 178, 1);
  box-shadow: 0 0 12px rgba(255, 232, 178, 0.95), 0 0 28px rgba(232, 184, 108, 0.65);
  animation: em-flotte linear infinite;
}

/* Les délais NÉGATIFS répartissent les particules sur tout leur trajet dès le
   chargement : sans eux, elles partent toutes du bas et le fond paraît vide. */
.em-particules i:nth-child(1) { left: 7%;  animation-duration: 26s; animation-delay: -3s; }
.em-particules i:nth-child(2) { width: 5px; height: 5px; left: 19%; animation-duration: 34s; animation-delay: -17s; width: 4px; height: 4px; }
.em-particules i:nth-child(3) { left: 32%; animation-duration: 23s; animation-delay: -9s; width: 6px; height: 6px; }
.em-particules i:nth-child(4) { left: 46%; animation-duration: 30s; animation-delay: -22s; }
.em-particules i:nth-child(5) { width: 5px; height: 5px; left: 59%; animation-duration: 27s; animation-delay: -12s; width: 4px; height: 4px; }
.em-particules i:nth-child(6) { left: 71%; animation-duration: 36s; animation-delay: -26s; width: 7px; height: 7px; }
.em-particules i:nth-child(7) { left: 83%; animation-duration: 25s; animation-delay: -6s; }
.em-particules i:nth-child(8) { width: 6px; height: 6px; left: 93%; animation-duration: 32s; animation-delay: -19s; width: 4px; height: 4px; }

.em-topo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  fill: none;
  stroke: #6cbb9c;
  stroke-width: 1.4;
  opacity: 0.9;
}

.em-entete,
.em-carte,
.em-pied {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------- en-tête hors carte */

.em-entete {
  align-self: flex-start;
  padding-left: 2px;
}

.em-marque {
  margin: 0;
  color: #fff;
  font-family: var(--font-poppins), sans-serif;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.em-marque strong {
  font-weight: 700;
}

.em-marque-sous {
  margin: 2px 0 0;
  color: #e9dfc4;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.em-trait {
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 9px;
  background: #a8823f;
  border-radius: 2px;
}

/* ================================================================= LA CARTE
   Plaque de verre dépoli : le fond est flouté et saturé, la surface reste
   claire pour que le texte sombre garde son contraste. */

.em-carte {
  position: relative;
  width: 100%;
  flex: 1;
  padding: 30px 22px 30px;
  background: linear-gradient(
    178deg,
    rgba(252, 248, 241, 0.89) 0%,
    rgba(251, 247, 239, 0.84) 46%,
    rgba(250, 246, 238, 0.82) 100%
  );
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 26px;
  box-shadow:
    0 26px 50px -22px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
  overflow: hidden;
  text-align: center;
}

/* reflet lent qui repasse toutes les 14 s : rappelle que la surface est du verre */
.em-carte::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  animation: em-reflet-lent 14s ease-in-out 3s infinite;
}

/* reflet qui balaie la carte une seule fois, à l'ouverture */
.em-carte::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  animation: em-reflet 1.25s ease-in-out 1.15s both;
}

/* les blocs de contenu passent au-dessus du reflet */
.em-carte > *:not(.em-vague):not(.em-menu) {
  position: relative;
  z-index: 1;
}

/* formes vert pâle qui flottent dans le verre */
.em-vague {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  pointer-events: none;
}

/* Voile clair derrière le bloc identité : il compense la transparence du verre
   exactement là où le texte est posé à même la surface. */
.em-vague-haut {
  top: -40px;
  left: -30px;
  right: -30px;
  width: auto;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 82% 66% at 50% 36%,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.48) 52%,
    rgba(255, 255, 255, 0) 80%
  );
  filter: blur(18px);
}

.em-vague-bas {
  bottom: -80px;
  right: -60px;
  width: 220px;
  height: 190px;
  background: radial-gradient(circle at 50% 50%, rgba(150, 195, 168, 0.34), transparent 78%);
}

/* menu à trois points (sandbox uniquement) */
.em-menu {
  position: absolute;
  top: 19px;
  right: 19px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.em-menu i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #2c4a40;
}

/* ------------------------------------------------------------- identité */

.em-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 6px auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #04302a;
  color: #fff;
  font-family: var(--font-poppins), sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(4, 48, 42, 0.2);
}

.em-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.em-nom {
  margin: 0;
  font-family: var(--font-poppins), sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #061411;
}

.em-role {
  margin: 7px 0 0;
  font-size: 13px;
  color: #465450;
  letter-spacing: 0.01em;
}

.em-trait-or {
  margin: 14px auto 0;
}

.em-description {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #465450;
}

/* ------------------------------------------------------- action principale */

.em-principal {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
  min-height: 58px;
  padding: 0 14px;
  border-radius: 15px;
  background: #04302a;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  text-align: left;
  box-shadow: 0 14px 28px -16px rgba(4, 48, 42, 0.95);
}

.em-icone-carre {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* --------------------------------------------------- tuiles et rangées */

.em-tuiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.em-tuile {
  padding: 12px 6px 11px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
  color: #24382f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.em-cercle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #04302a;
  color: #faf5ec;
}

.em-lignes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.em-ligne {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(4, 48, 42, 0.05);
  font-size: 14px;
  font-weight: 600;
  color: #24382f;
  text-align: left;
}

.em-ligne svg:first-child {
  color: #04302a;
  flex: none;
}

.em-ligne > span:first-of-type,
.em-ligne > span {
  flex: 1;
}

.em-ligne svg:last-child {
  margin-left: auto;
  color: #6f7f79;
  flex: none;
}

/* -------------------------------------------------------- pied hors carte */

.em-pied {
  text-align: center;
  padding-bottom: 4px;
}

.em-pied p {
  margin: 0;
  color: #fff;
  font-family: var(--font-poppins), sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.em-pied .em-trait {
  margin: 9px auto 9px;
  width: 26px;
}

.em-devise {
  font-family: var(--font-inter), system-ui, sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  color: #e3ece6 !important;
}

/* ================================================ liens de la page publique */

a.em-principal,
a.em-tuile,
a.em-ligne,
summary.em-ligne,
button.em-ligne {
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  text-align: left;
}

/* le CTA reste blanc sur vert profond : sa couleur ne doit jamais être héritée */
a.em-principal {
  color: #fff;
}

a.em-tuile:hover,
a.em-ligne:hover,
button.em-ligne:hover {
  background: rgba(255, 255, 255, 0.78);
}

summary.em-ligne {
  list-style: none;
}

summary.em-ligne::-webkit-details-marker {
  display: none;
}

summary.em-ligne svg:last-child {
  transition: transform 0.2s ease;
}

details[open] summary.em-ligne svg:last-child {
  transform: rotate(90deg);
}

/* quatre tuiles possibles (téléphone, WhatsApp, e-mail, site) */
.em-tuiles {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

/* le formulaire d'échange vit dans le même matériau que la carte */
.em-carte .echange {
  margin-top: 8px;
  text-align: left;
}

.em-carte .echange .form {
  margin-top: 12px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.em-carte .champ span {
  color: #33443f;
}

/* bandeaux de retour */
.em-carte .bandeau {
  margin: 0 0 16px;
}

/* ------------------------------------------------ écran « carte désactivée » */

.em-ecran.em-vide .em-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.em-ecran.em-vide h1 {
  margin: 0;
  font-family: var(--font-poppins), sans-serif;
  font-size: 22px;
  color: #061411;
}

.em-vide-deux {
  margin: 0;
  font-size: 13.5px;
  color: #465450;
  line-height: 1.6;
}

/* ------------------------------------------------- page publique plein écran */

.em-page {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100dvh;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 16px 18px;
}

@media (min-width: 520px) {
  .em-page {
    min-height: auto;
    margin: 24px auto;
    border-radius: 26px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  }
}

/* ================================================================= MOUVEMENT
   Tout en CSS : aucune animation ne dépend de JavaScript. */

@keyframes em-monte {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes em-entre {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes em-entre-gauche {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes em-trait {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes em-pop {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes em-derive {
  from {
    transform: translateX(-2.5%) translateY(0);
  }
  to {
    transform: translateX(2.5%) translateY(-1.5%);
  }
}

@keyframes em-onde {
  0% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(4, 48, 42, 0.22), 0 0 0 4px rgba(4, 48, 42, 0.26);
  }
  70% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(4, 48, 42, 0.22), 0 0 0 20px rgba(4, 48, 42, 0);
  }
  100% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(4, 48, 42, 0.22), 0 0 0 4px rgba(4, 48, 42, 0);
  }
}

/* dérive lente des masses colorées : c'est elle qui fait vivre le verre */
@keyframes em-derive-doree {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(-64px, 48px, 0) scale(1.18); }
  66% { transform: translate3d(34px, -40px, 0) scale(0.9); }
}

@keyframes em-derive-emeraude {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40% { transform: translate3d(70px, -52px, 0) scale(1.2); }
  75% { transform: translate3d(-30px, 34px, 0) scale(0.92); }
}

@keyframes em-pulse-lueur {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes em-scintille {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-14px, 10px, 0); }
}

@keyframes em-flotte {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  12% { opacity: 0.95; }
  88% { opacity: 0.5; }
  100% { transform: translateY(-620px) scale(1.35); opacity: 0; }
}

/* la courbe du bas glisse un peu plus vite que les deux autres */
@keyframes em-topo-glisse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(26px); }
}

@keyframes em-reflet-lent {
  0%, 62% { transform: translateX(-140%) skewX(-16deg); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translateX(300%) skewX(-16deg); opacity: 0; }
}

@keyframes em-reflet {
  from {
    transform: translateX(-140%) skewX(-16deg);
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  to {
    transform: translateX(260%) skewX(-16deg);
    opacity: 0;
  }
}

.em-entete {
  animation: em-entre-gauche 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.em-carte {
  animation: em-monte 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) 0.1s both;
}

.em-avatar {
  animation: em-pop 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.3s both, em-onde 5s ease-out 1.2s infinite;
}

.em-nom {
  animation: em-entre 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.4s both;
}

.em-role {
  animation: em-entre 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.48s both;
}

.em-trait-or {
  animation: em-trait 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.56s both;
}

.em-description {
  animation: em-entre 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.6s both;
}

.em-principal {
  animation: em-entre 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 0.7s both;
}

.em-tuiles .em-tuile:nth-child(1) {
  animation: em-entre 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 0.8s both;
}

.em-tuiles .em-tuile:nth-child(2) {
  animation: em-entre 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 0.86s both;
}

.em-tuiles .em-tuile:nth-child(3) {
  animation: em-entre 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 0.92s both;
}

.em-tuiles .em-tuile:nth-child(4) {
  animation: em-entre 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 0.98s both;
}

.em-lignes .em-ligne:nth-child(1) {
  animation: em-entre 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 1s both;
}

.em-lignes .em-ligne:nth-child(2) {
  animation: em-entre 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) 1.06s both;
}

.em-pied {
  animation: em-entre 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) 1.2s both;
}

.em-lueur {
  animation: em-pulse-lueur 9s ease-in-out infinite;
}

.em-moucharabieh {
  animation: em-scintille 15s ease-in-out infinite;
}

.em-orbe-doree {
  animation: em-derive-doree 17s ease-in-out infinite;
}

.em-orbe-emeraude {
  animation: em-derive-emeraude 23s ease-in-out infinite;
}

/* la courbe du bas glisse un peu plus vite que les deux autres */
.em-topo path:nth-child(3) {
  animation: em-topo-glisse 18s ease-in-out infinite;
}


.em-topo {
  animation: em-derive 34s ease-in-out infinite alternate;
}

/* réaction au doigt */
.em-principal,
.em-tuile,
.em-ligne {
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.em-principal:active,
.em-tuile:active,
.em-ligne:active {
  transform: scale(0.986);
}

/* ------------------------------------------------- moins de mouvement */

@media (prefers-reduced-motion: reduce) {
  .em-entete,
  .em-carte,
  .em-avatar,
  .em-nom,
  .em-role,
  .em-trait-or,
  .em-description,
  .em-principal,
  .em-tuiles .em-tuile,
  .em-lignes .em-ligne,
  .em-pied,
  .em-lueur,
  
.em-topo {
    animation: none !important;
  }

  .em-carte::after,
  .em-carte::before {
    animation: none !important;
    opacity: 0;
  }

  .em-trait-or {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------ repli sans flou d'arrière-plan */

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .em-carte {
    background: linear-gradient(178deg, rgba(252, 248, 241, 0.97) 0%, rgba(250, 246, 238, 0.95) 100%);
  }

  .em-tuile,
  .em-ligne,
  button.em-ligne,
  summary.em-ligne,
  .em-carte .echange .form {
    background: rgba(255, 255, 255, 0.92);
  }
}