/* ============================================================
   Portail ISPEC — système visuel
   Nuit indigo (fond du logo ISPEC) · or marial · plaques-fenêtres
   ============================================================ */

/* ---------- Polices (locales, fichiers woff2) ---------- */
@font-face { font-family: 'PlexLatin'; font-style: normal; font-weight: 100 900;
  src: url('assets/fonts/plex-sans-latin.woff2') format('woff2'); font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2190-2193, U+2212; }
@font-face { font-family: 'PlexArabic'; font-style: normal; font-weight: 400;
  src: url('assets/fonts/plex-arabic-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'PlexArabic'; font-style: normal; font-weight: 500;
  src: url('assets/fonts/plex-arabic-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'PlexArabic'; font-style: normal; font-weight: 600;
  src: url('assets/fonts/plex-arabic-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400;
  src: url('assets/fonts/marcellus-latin.woff2') format('woff2'); font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 400;
  src: url('assets/fonts/amiri-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Amiri'; font-style: normal; font-weight: 700;
  src: url('assets/fonts/amiri-700.woff2') format('woff2'); font-display: swap; }

/* ---------- Jetons ---------- */
:root {
  /* ---- surfaces : pilotées par les réglages visuels ---- */
  --night:      #080c1c;
  --panel:      #131b39;
  --line:       #2a3563;
  /* teintes dérivées : suivent automatiquement les valeurs ci-dessus */
  --panel-2:    color-mix(in srgb, var(--panel) 74%, #05070f);
  --line-soft:  color-mix(in srgb, var(--line) 44%, transparent);
  --night-2:    color-mix(in srgb, var(--night) 70%, var(--panel));

  /* ---- marque des applications (icônes) ---- */
  --mark-1:     #7c96df;
  --mark-2:     #4a69c0;
  --mark-size:  30px;

  --india:      #4a69c0;   /* repris de l'app arabe (--hd2) */
  --india-deep: #1d3468;   /* repris de l'app arabe (--side2) */
  --peri:       #7c96df;   /* repris de l'app arabe (--hd1) */

  --gold:       #d9b45c;
  --gold-soft:  color-mix(in srgb, var(--gold) 60%, #ffffff);
  --crimson:    #b92f4f;

  --text:       #eef1fb;
  --text-dim:   #9aa5cc;
  --text-faint: #6f7ba6;

  --font-body: 'PlexLatin', 'PlexArabic', 'Segoe UI', system-ui, sans-serif;
  --font-disp: 'Marcellus', 'Amiri', 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

  --r: 5px;
  --gutter: clamp(1.1rem, 4vw, 3.2rem);
  --shadow: 0 26px 60px -34px #000, 0 2px 0 rgba(255,255,255,.03) inset;
}

/* marque : tracé dégradé, avec repli sur la couleur unie */
html[data-mark='trait'] .mark-icon svg { stroke: url(#ispecMarkGrad) var(--mark-1); }

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}
body[dir='rtl'] { font-family: 'PlexArabic', 'PlexLatin', system-ui, sans-serif; }

/* ---------- Atmosphère ---------- */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1150px 620px at 10% -12%, rgba(74,105,192,.24), transparent 62%),
    radial-gradient(880px 520px at 102% -6%,  rgba(217,180,92,.10), transparent 58%),
    radial-gradient(1000px 760px at 50% 118%, rgba(185,47,79,.10), transparent 62%);
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px);
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 16%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 26%, #000 16%, transparent 76%);
}

/* ---------- Utilitaires ---------- */
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-size: .70rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); font-weight: 600; margin: 0;
}

/* ============================================================
   Écran d'entrée
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: radial-gradient(900px 620px at 50% 42%, #131c3e 0%, #080c1c 70%);
  padding: var(--gutter);
  transition: opacity .62s cubic-bezier(.4,0,.2,1), transform .62s cubic-bezier(.4,0,.2,1);
}
.gate.is-open { opacity: 0; transform: scale(1.06); filter: blur(9px); pointer-events: none; }

.gate__panel {
  text-align: center; max-width: 660px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.gate__marks {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.1rem, 4vw, 2.2rem); margin-bottom: 1.6rem;
}
.gate__ispec { height: clamp(58px, 8vw, 84px); width: auto; display: block;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
.gate__ndps  { height: clamp(94px, 13vw, 132px); width: auto; display: block;
  border-radius: 3px; box-shadow: 0 10px 26px -10px #000, 0 0 0 1px rgba(217,180,92,.28); }
.gate__rule {
  width: 1px; height: clamp(74px, 11vw, 112px);
  background: linear-gradient(180deg, transparent, rgba(217,180,92,.55), transparent);
}
.gate__title {
  font-family: var(--font-disp); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 1.44;
  letter-spacing: .005em; margin: 1.15rem 0 0; max-width: 22ch;
}
body[dir='rtl'] .gate__title { font-family: 'Amiri', serif; line-height: 2.1;
  margin-top: 1.3rem; max-width: 28ch; font-size: clamp(1.8rem, 3.8vw, 2.45rem); }
.gate__sub { color: var(--text-dim); margin: 1.3rem 0 0; font-size: 1rem;
  line-height: 1.85; }
body[dir='rtl'] .gate__sub { margin-top: 1.5rem; line-height: 2.05; }

.gate__enter {
  margin-top: 1.9rem;
  display: inline-flex; align-items: center; gap: .7rem;
  font: inherit; font-weight: 600; font-size: 1.02rem; letter-spacing: .06em;
  color: #1a1405; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border: 1px solid #a8863c; border-radius: var(--r);
  padding: .8rem 1.9rem;
  box-shadow: 0 12px 30px -14px rgba(217,180,92,.75);
  transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
body[dir='rtl'] .gate__enter { letter-spacing: 0; }
.gate__enter:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 18px 40px -16px rgba(217,180,92,.85); }
.gate__enter:active { transform: translateY(0); }
.gate__enter .arw { transition: transform .22s ease; }
body:not([dir='rtl']) .gate__enter:hover .arw { transform: translateX(4px); }
body[dir='rtl'] .gate__enter:hover .arw { transform: translateX(-4px); }
body[dir='rtl'] .gate__enter .arw { transform: scaleX(-1); display: inline-block; }

.gate__foot { margin-top: 2rem; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
/* le logo complet porte déjà le nom de l'institut : la ligne devient
   inutile en français, mais reste utile en arabe où le logo est latin */
.gate__panel > p:empty { display: none; }
.gate__panel > p:empty + .gate__title { margin-top: 0; }
/* deux lignes d'institution : la première est celle de l'institut,
   la seconde celle de la congrégation — elles se suivent de près */
.gate__kicker { margin: 0; }
.gate__kicker + .gate__kicker { margin-top: .5rem; }
/* l'arabe ne se prête pas à l'interlettrage : il détache les lettres
   qui doivent s'enchaîner, ce qui gêne la lecture. Le français garde
   son espacement de petites capitales. */
body[dir='rtl'] .gate__kicker { letter-spacing: 0; }

/* ============================================================
   Coquille
   ============================================================ */
.shell { position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease .12s, transform .6s cubic-bezier(.2,.7,.3,1) .12s; }
.shell.is-live { opacity: 1; transform: none; }

/* ---------- En-tête ---------- */
.masthead {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(8,12,28,.80);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.masthead__in {
  display: flex; align-items: center; gap: clamp(.9rem, 2.6vw, 2rem);
  padding-block: .75rem; flex-wrap: wrap;
}
.house { display: flex; align-items: center; gap: .8rem; }
.house__mark { height: 44px; width: auto; display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); }
.house__txt { display: flex; flex-direction: column; line-height: 1.16; }
.house__name {
  font-family: var(--font-disp); font-size: 1.42rem; letter-spacing: .1em;
  color: var(--gold-soft);
}
.house__sub { font-size: .7rem; color: var(--text-faint); letter-spacing: .05em; max-width: 34ch; }

.masthead__div { width: 1px; align-self: stretch; min-height: 40px;
  background: linear-gradient(180deg, transparent, var(--line), transparent); }

.assoc { display: flex; align-items: center; gap: .7rem; }
.assoc__mark { width: 38px; height: 52px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(217,180,92,.34); }
.assoc__txt { display: flex; flex-direction: column; line-height: 1.2; }
.assoc__name { font-family: 'Amiri', serif; font-size: .96rem; color: var(--text); }
.assoc__sub { font-size: .68rem; color: var(--text-faint); max-width: 30ch; }

.ctrl { margin-inline-start: auto; display: flex; align-items: center; gap: .55rem; }

.lang {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: rgba(255,255,255,.03);
}
.lang button {
  font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  background: transparent; color: var(--text-dim); border: 0;
  padding: .5rem .92rem; cursor: pointer; transition: background .18s, color .18s;
}
.lang button + button { border-inline-start: 1px solid var(--line); }
.lang button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.lang button[aria-pressed='true'] { background: linear-gradient(180deg, var(--india), var(--india-deep));
  color: #fff; }

.iconbtn {
  font: inherit; cursor: pointer; color: var(--text-dim);
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-radius: var(--r); padding: .5rem .72rem; font-size: .78rem;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: color .18s, border-color .18s, background .18s;
}
.iconbtn:hover { color: var(--text); border-color: var(--peri); background: rgba(124,150,223,.10); }

/* ---------- Introduction ---------- */
.lede { padding-block: clamp(2.2rem, 5vw, 3.8rem) clamp(1.4rem, 3vw, 2.2rem); }
.lede__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 1.4rem 2.4rem;
}
.lede__row > * { min-width: 0; }
.lede h1 {
  font-family: var(--font-disp); font-weight: 400;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.14;
  margin: .55rem 0 0; max-width: 22ch;
}
body[dir='rtl'] .lede h1 { font-family: 'Amiri', serif; }
.lede p { color: var(--text-dim); margin: .7rem 0 0; max-width: 56ch; font-size: 1.02rem; }
/* le sur-titre garde son or et sa petite taille : sans cette règle, la
   règle .lede p ci-dessus, plus spécifique, l'écrase */
.lede .eyebrow { font-size: .70rem; color: var(--gold); margin: 0; max-width: none; }
.lede__meta { text-align: end; font-size: .78rem; color: var(--text-faint);
  letter-spacing: .1em; text-transform: uppercase; margin: 0; white-space: nowrap; }

/* ============================================================
   Plaques d'application
   ============================================================ */
.plates {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  /* 3 colonnes à partir d'environ 1000 px de contenu ; se réduit
     ensuite à 2 puis 1 selon la largeur disponible */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
  align-items: stretch;
}

.plate {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1),
              border-color .28s ease, box-shadow .28s ease;
}
.plate.is-in { opacity: 1; transform: none; }
.plate:hover { border-color: rgba(217,180,92,.5);
  box-shadow: 0 34px 70px -34px #000, 0 0 0 1px rgba(217,180,92,.18); }
.plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.07) 47%, transparent 60%);
  transform: translateX(-120%); transition: transform .85s cubic-bezier(.3,0,.2,1);
}
.plate:hover::after { transform: translateX(120%); }

/* barre de fenêtre : reprise de l'habillage de l'app arabe */
.plate__chrome {
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem .85rem;
  background: linear-gradient(180deg, var(--india), var(--india-deep));
  border-bottom: 1px solid #14224a;
}
.dots { display: inline-flex; gap: .3rem; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.42); display: block; }
.plate__chrome .label { font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.92); font-weight: 600; }
.chrome-badge { width: 19px; height: 26px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5); background: #fff; flex: none;
  margin-inline: .1rem .2rem; }
.plate__chrome .num { margin-inline-start: auto; font-family: var(--font-disp);
  font-size: .92rem; color: rgba(255,255,255,.72); letter-spacing: .06em; }

.plate__body { padding: 1.35rem 1.35rem 1.15rem; display: flex; flex-direction: column;
  gap: 1rem; flex: 1; }

.plate__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 1rem;
}
.plate__head > div { min-width: 0; }
.plate__logo {
  flex: none; width: 64px; height: 64px; border-radius: var(--r);
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--mark-2) 42%, #16203f), #121939);
  border: 1px solid var(--line); color: var(--gold);
}
.plate__logo img { width: 100%; height: 100%; object-fit: cover; }
.plate__logo.is-wide img { object-fit: contain; padding: 8px; }

/* marques : icônes vectorielles */
.mark-icon { display: grid; place-items: center; line-height: 0;
  color: var(--mark-1); }
.mark-icon svg { width: var(--mark-size, 30px); height: var(--mark-size, 30px); display: block; }

.plate__kicker { font-size: .69rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--peri); margin: 0; line-height: 1.5; }
.plate__name { font-family: var(--font-disp); font-weight: 400; font-size: 1.34rem;
  line-height: 1.3; margin: 0; }
body[dir='rtl'] .plate__name { font-family: 'Amiri', serif; font-size: 1.45rem; line-height: 1.5; }

.plate__desc { color: var(--text-dim); margin: 0; font-size: .95rem; }

.chips { display: flex; flex-wrap: wrap; gap: .38rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: .74rem; color: var(--text-dim); letter-spacing: .04em;
  border: 1px solid var(--line-soft); border-radius: 100px; padding: .22rem .68rem;
  background: rgba(255,255,255,.02);
}

.plate__note { display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: .55rem; font-size: .78rem;
  color: var(--text-faint); margin: 0; }
.plate__note span:last-child { min-width: 0; }
.plate__note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 3px rgba(217,180,92,.16); }

.plate__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.plate__url {
  font-family: var(--font-mono); font-size: .76rem; color: var(--text-faint);
  direction: ltr; unicode-bidi: isolate; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.open {
  flex: none; text-decoration: none; font-weight: 600; font-size: .88rem;
  letter-spacing: .04em; padding: .58rem 1.15rem; border-radius: var(--r);
  white-space: nowrap;
  color: #fff; background: linear-gradient(180deg, var(--india), var(--india-deep));
  border: 1px solid #2d4795;
  box-shadow: 0 12px 26px -16px rgba(74,105,192,.95);
  display: inline-flex; align-items: center; gap: .45rem;
  transition: transform .18s ease, filter .2s ease, box-shadow .25s ease;
}
.open:hover { transform: translateY(-2px); filter: brightness(1.1);
  box-shadow: 0 18px 34px -16px rgba(74,105,192,1); }
.open:active { transform: translateY(0); }
.open .arw { transition: transform .22s ease; }
body:not([dir='rtl']) .open:hover .arw { transform: translateX(3px); }
body[dir='rtl'] .open .arw { display: inline-block; transform: scaleX(-1); }
body[dir='rtl'] .open:hover .arw { transform: scaleX(-1) translateX(-3px); }

/* plaque réservée */
.plate.is-soon { background: transparent; border-style: dashed;
  border-color: rgba(124,150,223,.34); box-shadow: none; }
.plate.is-soon::after { display: none; }
.plate.is-soon:hover { border-color: rgba(217,180,92,.5); }
.plate.is-soon .plate__chrome { background: linear-gradient(180deg, #2b3566, #1d2549); }
.plate.is-soon .plate__name { color: var(--text-dim); }
.plate.is-soon .plate__logo { background: transparent; border-style: dashed;
  border-color: rgba(124,150,223,.4); color: rgba(124,150,223,.8); }

/* ============================================================
   Pied de page
   ============================================================ */
.foot { margin-top: auto; border-top: 1px solid var(--line);
  background: rgba(6,9,22,.6); }
.foot__in { padding-block: 1.7rem 2rem; display: grid; gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.foot h2 { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .5rem; font-weight: 600; }
.foot p { margin: 0; font-size: .86rem; color: var(--text-dim); }
.foot p:empty { display: none; }
.foot .ar { font-family: 'Amiri', serif; font-size: .98rem; }
.foot__sig { grid-column: 1 / -1; border-top: 1px solid var(--line-soft);
  padding-top: 1.1rem; display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; font-size: .76rem; color: var(--text-faint); }

/* ============================================================
   Variantes pilotées par les réglages visuels
   ============================================================ */

/* --- marque : trait, plein, ou pastille encadrée ---
   « plein » ajoute le remplissage par-dessus le trait : les formes
   fermées s'alourdissent et les tracés ouverts (pompon, base) restent
   visibles au lieu de disparaître. */
html[data-mark='plein'] .mark-icon svg {
  stroke: currentColor; stroke-width: 1.1; fill: currentColor;
}
html[data-mark='plein'] .plate__logo { color: var(--mark-1); }

html[data-mark='cachet'] .plate__logo {
  background: radial-gradient(circle at 50% 50%, #1d2751 0%, #121939 72%);
  box-shadow: 0 0 0 1px rgba(217,180,92,.42) inset, 0 0 0 5px rgba(217,180,92,.10);
}
html[data-mark='cachet'] .plate__logo::after {
  content: ''; position: absolute; width: 78%; height: 78%;
  border: 1px dashed rgba(217,180,92,.42); border-radius: 50%;
}
html[data-mark='cachet'] .plate__logo { position: relative; }
html[data-mark='cachet'] .mark-icon { position: relative; z-index: 1; }

/* --- densité --- */
html[data-density='compact'] .plate__body { padding: 1rem 1.1rem .95rem; gap: .75rem; }
html[data-density='compact'] .plate__logo { width: 50px; height: 50px; }
html[data-density='compact'] .mark-icon svg { width: 24px; height: 24px; }
html[data-density='compact'] .plate__name { font-size: 1.2rem; }
html[data-density='compact'] .plate__desc { font-size: .88rem; }
html[data-density='compact'] .plate__foot { padding-top: .8rem; }
html[data-density='compact'] .plates { gap: .9rem; }
html[data-density='ample'] .plate__body { padding: 1.8rem 1.7rem 1.5rem; gap: 1.35rem; }
html[data-density='ample'] .plate__logo { width: 76px; height: 76px; }
html[data-density='ample'] .mark-icon svg { width: 36px; height: 36px; }
html[data-density='ample'] .plate__name { font-size: 1.55rem; }
html[data-density='ample'] .plate__desc { font-size: 1rem; }
html[data-density='ample'] .plates { gap: 1.7rem; }

/* --- éléments optionnels --- */
html.no-chips .chips { display: none; }
html.no-status .plate__note { display: none; }

/* ---------- panneau de réglages ---------- */
#tweaks-root { position: relative; z-index: 200; }

/* ============================================================
   Adaptations
   ============================================================ */
@media (max-width: 900px) {
  .masthead__div { display: none; }
  .assoc__sub, .house__sub { display: none; }
  .lede { padding-block: 1.8rem 1rem; }
  .lede__meta { text-align: start; }
  .lede__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ctrl { margin-inline-start: 0; width: 100%; }
}
@media (max-width: 520px) {
  .gate__marks { gap: .8rem; }
  .gate__ispec { height: 50px; }
  .gate__ndps { height: 78px; }
  .plate__head { gap: .8rem; }
  .plate__logo { width: 54px; height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .gate, .shell, .plate, .plate::after, .open, .gate__enter { transition-duration: .01ms !important; }
  .plate { opacity: 1; transform: none; }
}