/* =============================================================
   FAIRE-PART DE MARIAGE — feuille de style
   Palette injectée depuis config.js (couleurs) ; les valeurs
   ci-dessous sont les valeurs de repli.
   ============================================================= */

:root{
  --bleu-profond:#16263f;
  --bleu-encre:#1e3557;
  --bleu-poudre:#8da4c4;
  --ivoire:#f6f1e7;
  --blanc-casse:#fbf8f2;
  --or:#c2a14d;
  --or-clair:#e0c88a;
  --cire:#8c2f39;

  --encre:#24303f;
  --encre-douce:#5d6b7d;

  /* L'or sert à deux choses très différentes : des filets et des ornements,
     où il peut rester clair, et du TEXTE, où il doit atteindre 4,5:1 sur le
     papier. --or-texte est calculé au chargement à partir de --or. */
  --or-texte:#8a6d1f;

  /* Couleurs des motifs, dérivées de la palette au chargement. */
  --motif-trait:#8da4c4;
  --motif-feuille:#b9c8de;
  --motif-fleur:#c8a9b4;
  --motif-coeur:#c2a14d;

  --serif:"Cormorant Garamond",Didot,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",-apple-system,BlinkMacSystemFont,sans-serif;

  --r:14px;
  --ombre: color-mix(in srgb, var(--bleu-profond) 70%, black);
  --ombre-papier:
    0 1px 2px color-mix(in srgb, var(--ombre) 8%, transparent),
    0 12px 32px -14px color-mix(in srgb, var(--ombre) 28%, transparent);
  --t:cubic-bezier(.22,.61,.36,1);

  --pad: clamp(20px, 5.5vw, 44px);
}

*,*::before,*::after{box-sizing:border-box}

/* Réserve de motifs : présente dans le DOM, jamais affichée. */
.sprite{ position:absolute; width:0; height:0; overflow:hidden }

/* L'attribut hidden doit toujours l'emporter sur display:flex/grid. */
[hidden]{display:none!important}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  color:var(--encre);
  background:
    radial-gradient(130% 80% at 50% -10%, #ffffff 0%, var(--blanc-casse) 42%, #ece4d6 100%)
    fixed;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

/* ---------- Focus visible, partout ---------- */
:focus-visible{
  outline:2.5px solid var(--or);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Pétales d'arrière-plan ---------- */
.petals{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(141,164,196,.16) 0 7px, transparent 8px),
    radial-gradient(circle at 86% 26%, rgba(194,161,77,.13) 0 5px, transparent 6px),
    radial-gradient(circle at 22% 78%, rgba(194,161,77,.10) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 86%, rgba(141,164,196,.14) 0 6px, transparent 7px);
}

/* =============================================================
   1. SCÈNE — L'ENVELOPPE
   ============================================================= */
.stage{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center;
  padding:max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 50% 0%, #ffffff 0%, var(--blanc-casse) 45%, #e9e0d0 100%);
  transition:opacity .7s var(--t), visibility .7s;
}
.stage__inner{ width:100%; max-width:420px; text-align:center }

.stage__names{
  font-family:var(--serif);
  font-size:clamp(17px,4.6vw,22px);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--bleu-encre);
  margin:0 0 clamp(20px,6vw,34px);
  opacity:.92;
  animation:fadeDown .9s var(--t) both .15s;
}

.stage__hint{
  font-size:13.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-douce);
  margin:clamp(22px,6vw,34px) 0 0;
  animation:pulse 2.8s ease-in-out infinite;
}
.stage__fallback{ margin-top:18px }

/* --- L'enveloppe elle-même --- */
.envelope{
  position:relative;
  width:min(100%,380px);
  aspect-ratio:3 / 2;
  margin-inline:auto;
  perspective:1400px;
  animation:fadeUp 1s var(--t) both .3s;
}

/* corps / doublure fleurie */
.env__lining{
  position:absolute; inset:0; z-index:1;
  border-radius:4px;
  overflow:hidden;
  background:var(--ivoire);
  box-shadow:inset 0 0 44px color-mix(in srgb, var(--ombre) 16%, transparent);
}
.lining-art{width:100%;height:100%;display:block}

/* carte qui sort */
.env__card{
  position:absolute; z-index:2;
  left:5.5%; width:89%; height:93%;
  bottom:3.5%;
  background:
    linear-gradient(168deg,#fffdf9 0%, var(--blanc-casse) 55%, #f3ece0 100%);
  border-radius:3px;
  /* Deux ombres : le contact avec l'enveloppe, puis la portée. */
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 5px -2px color-mix(in srgb, var(--ombre) 38%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--ombre) 48%, transparent);
  overflow:hidden;
  will-change:transform;
}
/* Le liseré doré, dessiné en dedans pour ne pas grossir la carte. */
.env__card::after{
  content:""; position:absolute; inset:5%;
  border:1px solid color-mix(in srgb, var(--or) 55%, transparent);
  border-radius:2px; pointer-events:none;
}
.env__card-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(3px,1.2cqw,7px);
  padding:12% 9%;
  text-align:center;
  container-type:inline-size;
}
.env__card-rule{ display:none }
.env__card-sur{
  font-size:clamp(6px,2.6cqw,9px); letter-spacing:.3em; text-transform:uppercase;
  color:var(--or-texte); font-weight:500;
}
.env__card-mono{
  font-family:var(--serif); font-size:clamp(18px,8.5cqw,34px); line-height:1;
  letter-spacing:.08em; color:var(--bleu-encre);
}
.env__card-noms{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(9px,4cqw,16px); line-height:1.25;
  color:var(--encre-douce);
}
.env__card-orn{ width:min(62%,120px); height:auto; color:var(--or); opacity:.85 }
.env__card-date{
  font-size:clamp(6px,2.4cqw,9px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--encre-douce);
}

/* devant */
.env__front{ position:absolute; inset:0; z-index:3 }
.env__corner{ position:absolute; display:block }
.env__corner--l,.env__corner--r{
  top:0; width:52%; height:100%;
  background:linear-gradient(100deg,var(--bleu-encre),var(--bleu-profond));
}
.env__corner--l{ left:0;  clip-path:polygon(0 0,100% 50%,0 100%); box-shadow:inset -1px 0 0 rgba(255,255,255,.06) }
.env__corner--r{ right:0; clip-path:polygon(100% 0,0 50%,100% 100%) }
.env__corner--b{
  left:0; bottom:0; width:100%; height:62%;
  background:linear-gradient(175deg,
    color-mix(in srgb, var(--bleu-encre) 70%, var(--bleu-profond)),
    var(--bleu-profond));
  clip-path:polygon(0 100%,50% 0,100% 100%);
  filter:drop-shadow(0 -1px 0 rgba(224,200,138,.3));
}
.env__front::after{
  content:""; position:absolute; inset:0;
  border-radius:4px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--or-clair) 26%, transparent),
    0 22px 44px -18px color-mix(in srgb, var(--ombre) 55%, transparent);
  pointer-events:none;
}

/* rabat */
/* Le rabat porte la rotation ; chaque face porte sa propre découpe
   (clip-path sur le parent aplatirait le contexte 3D). */
.env__flap{
  position:absolute; z-index:4;
  top:0; left:0; width:100%; height:62%;
  transform-origin:top center;
  transform:rotateX(0deg);
  transform-style:preserve-3d;
  transition:transform .95s var(--t), z-index 0s linear .45s;
}
.env__face{
  position:absolute; inset:0; display:block;
  clip-path:polygon(0 0,100% 0,50% 100%);
  backface-visibility:hidden;
  overflow:hidden;
}
/* extérieur : bleu profond */
.env__face--out{
  background:linear-gradient(185deg,
    color-mix(in srgb, var(--bleu-encre) 78%, white 10%),
    var(--bleu-profond));
  filter:drop-shadow(0 1px 0 rgba(224,200,138,.42));
}
.env__face--out::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(185deg,transparent 58%,rgba(0,0,0,.24));
}
/* intérieur : papier ivoire et motifs floraux */
.env__face--in{
  transform:rotateX(180deg);
  background:var(--ivoire);
  box-shadow:inset 0 0 30px color-mix(in srgb, var(--ombre) 14%, transparent);
}
.env__face--in svg{ width:100%; height:100%; display:block }

/* sceau de cire */
.seal{
  position:absolute; z-index:6;
  left:50%; top:56%;
  width:clamp(74px,22%,96px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  padding:0; border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--t), filter .35s var(--t);
}
.seal svg{width:100%;height:100%;overflow:visible}
.seal__mono{
  font-family:var(--serif); font-size:30px; font-weight:500;
  letter-spacing:.04em; fill:var(--or-clair); fill-opacity:.95;
}
.seal:hover{ transform:translate(-50%,-50%) scale(1.06) rotate(-3deg) }
.seal:active{ transform:translate(-50%,-50%) scale(.96) }
.seal::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(140,47,57,.4);
  animation:halo 3s ease-out infinite;
}

@keyframes halo{
  0%{box-shadow:0 0 0 0 rgba(140,47,57,.34)}
  70%{box-shadow:0 0 0 22px rgba(140,47,57,0)}
  100%{box-shadow:0 0 0 0 rgba(140,47,57,0)}
}

/* --- ÉTAT : ouverture ---
   Ces règles portent l'ouverture quand GSAP n'a pas pu se charger. Dès
   qu'il prend la main (classe is-gsap), on s'efface : deux moteurs sur
   les mêmes transformations produiraient des saccades. */
body.is-opening .seal{ pointer-events:none }
body.is-opening:not(.is-gsap) .seal{
  animation:sealBreak .85s var(--t) forwards;
}
body.is-opening .seal::before{ animation:none; box-shadow:none }
body.is-opening:not(.is-gsap) .env__flap{
  transform:rotateX(-172deg);
  z-index:0;
}
body.is-opening:not(.is-gsap) .env__card{ transform:translateY(-46%) }
body.is-opening .stage__hint,
body.is-opening .stage__fallback{ opacity:0; transition:opacity .3s }

body.is-open .stage{ opacity:0; visibility:hidden; pointer-events:none }

@keyframes sealBreak{
  0%  { transform:translate(-50%,-50%) scale(1) rotate(0) }
  22% { transform:translate(-50%,-50%) scale(1.14) rotate(-7deg) }
  100%{ transform:translate(-50%,40%) scale(.82) rotate(26deg); opacity:0 }
}

/* =============================================================
   2. L'INVITATION
   ============================================================= */
.invite{
  position:relative; z-index:1;
  max-width:620px;
  margin-inline:auto;
  padding:clamp(24px,7vw,56px) 18px calc(96px + env(safe-area-inset-bottom));
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--t) .15s, transform .9s var(--t) .15s;
}
body.is-open .invite{ opacity:1; transform:none }
body.is-sealed{ overflow:hidden }
body.is-open{ overflow:auto }

.paper{
  position:relative;
  background:linear-gradient(168deg,#fffdf9,var(--blanc-casse) 60%,#f4eee2);
  border:1px solid rgba(194,161,77,.26);
  border-radius:var(--r);
  box-shadow:var(--ombre-papier);
  padding:var(--pad);
  margin-bottom:clamp(16px,4vw,24px);
  text-align:center;
}
.paper::before{
  content:""; position:absolute; inset:7px;
  border:1px solid rgba(141,164,196,.26);
  border-radius:calc(var(--r) - 6px);
  pointer-events:none;
}

/* --- Textes --- */
.lede{
  font-family:var(--serif);
  font-size:clamp(19px,5vw,23px);
  line-height:1.62; font-weight:300;
  color:var(--encre);
  margin:0;
}
.muted{ color:var(--encre-douce); font-size:15px; margin:0 0 6px }

.h-lg{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,7vw,34px);
  color:var(--bleu-profond);
  margin:0 0 6px;
}
.h-sm{
  font-size:11.5px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--or-texte); font-weight:400; margin:0 0 20px;
}

/* --- Compte à rebours --- */
.cd{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
}
.cd li{ display:flex; flex-direction:column; gap:4px; padding:8px 2px;
  border-left:1px solid rgba(141,164,196,.3) }
.cd li:first-child{ border-left:0 }
.cd strong{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,8.5vw,40px); line-height:1;
  color:var(--bleu-profond);
  font-variant-numeric:tabular-nums;
}
.cd span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-douce) }

/* =============================================================
   LECTEUR PDF
   ============================================================= */
.pdfwrap{ margin-bottom:clamp(16px,4vw,24px) }

.pdfdoc{ display:grid; gap:clamp(12px,3vw,18px) }

.pdfpage{
  position:relative;
  background:var(--blanc-casse);
  border:1px solid rgba(194,161,77,.3);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--ombre-papier);
}
.pdfpage canvas{ display:block; width:100%; height:auto }

.pdfstate{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:180px; margin:0; padding:24px;
  text-align:center; font-size:15px; color:var(--encre-douce);
  background:linear-gradient(168deg,#fffdf9,var(--blanc-casse));
  border:1px solid rgba(194,161,77,.26);
  border-radius:var(--r);
}
.pdfstate--erreur, .pdfstate--vide{ min-height:120px; display:block; line-height:1.6 }
.pdfstate a{ color:var(--bleu-encre); text-underline-offset:3px }

.spinner--dark{
  border-color:rgba(22,38,63,.2);
  border-top-color:var(--bleu-encre);
  display:block;
}

.pdfbar{ display:flex; justify-content:center; margin-top:clamp(14px,3.5vw,20px) }
.pdfbar .btn{ background:rgba(255,255,255,.6) }

/* =============================================================
   3. BOUTONS
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 26px;
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px; border:1px solid var(--or);
  background:transparent; color:var(--bleu-encre);
  cursor:pointer; text-decoration:none;
  transition:background .3s var(--t), color .3s var(--t), transform .18s var(--t), box-shadow .3s var(--t);
}
.btn:hover{ background:rgba(194,161,77,.1) }
.btn:active{ transform:translateY(1px) }
.btn--gold{
  width:100%;
  background:linear-gradient(135deg,var(--bleu-encre),var(--bleu-profond));
  color:var(--ivoire); border-color:transparent;
  box-shadow:0 10px 24px -12px rgba(22,38,63,.65);
}
.btn--gold:hover{ background:linear-gradient(135deg,#27405f,#1a2c49) }
.btn--sm{ min-height:40px; font-size:11.5px; padding:0 20px }
.btn--ghost{ border-color:rgba(141,164,196,.6) }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed }

.btn .spinner{ display:none; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite }
.btn.is-busy .spinner{ display:block }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* =============================================================
   4. FORMULAIRE RSVP
   ============================================================= */
.rsvp{ text-align:left }
.rsvp .h-lg,.rsvp .muted,.deadline,.invited-as{ text-align:center }
.deadline{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--or-texte); margin:10px 0 0;
}
.invited-as{
  margin:16px 0 0; padding:10px 14px;
  background:rgba(141,164,196,.1);
  border:1px solid rgba(141,164,196,.3); border-radius:8px;
  font-size:14px; color:var(--bleu-encre);
}

#rsvpForm{ margin-top:26px; display:grid; gap:20px }

.field{ display:grid; gap:7px; border:0; padding:0; margin:0; min-width:0 }
.field > label, .field > legend{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bleu-encre); font-weight:500; padding:0;
}
.req{ color:var(--cire) }
.opt{ text-transform:none; letter-spacing:0; color:var(--encre-douce); font-weight:300 }
.hint{ margin:0; font-size:13px; color:var(--encre-douce) }

input[type=text],select,textarea{
  width:100%; font:inherit; font-size:16px; /* 16px = pas de zoom iOS */
  color:var(--encre);
  padding:12px 14px; min-height:48px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(141,164,196,.5);
  border-radius:9px;
  transition:border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance:none; appearance:none;
}
textarea{ resize:vertical; min-height:96px; line-height:1.55 }
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d6b7d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px;
  padding-right:38px;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--or); background:#fff;
  box-shadow:0 0 0 3px rgba(194,161,77,.18);
  outline:none;
}
input[aria-invalid="true"],textarea[aria-invalid="true"]{ border-color:var(--cire) }

.choices{ display:grid; gap:9px }
.choice{ position:relative; display:block; cursor:pointer }
.choice input{ position:absolute; opacity:0; width:1px; height:1px }
.choice__box{
  display:flex; align-items:center; gap:12px;
  min-height:52px; padding:12px 16px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(141,164,196,.5); border-radius:9px;
  font-size:15.5px;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.choice__mark{
  flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  border:1.5px solid var(--bleu-poudre);
  display:grid; place-items:center;
  transition:border-color .25s;
}
.choice__mark::after{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--or); transform:scale(0); transition:transform .22s var(--t);
}
.choice input:checked + .choice__box{
  border-color:var(--or); background:#fff;
  box-shadow:0 4px 14px -8px rgba(22,38,63,.4);
}
.choice input:checked + .choice__box .choice__mark{ border-color:var(--or) }
.choice input:checked + .choice__box .choice__mark::after{ transform:scale(1) }
.choice input:focus-visible + .choice__box{ outline:2.5px solid var(--or); outline-offset:3px }

.err{
  margin:0; font-size:13.5px; color:var(--cire);
  display:flex; align-items:center; gap:6px;
}
.err::before{ content:"!"; flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  background:var(--cire); color:#fff; font-size:11px; display:grid; place-items:center; font-weight:500 }
.err--form{ padding:12px 14px; background:rgba(140,47,57,.07);
  border:1px solid rgba(140,47,57,.3); border-radius:9px; align-items:flex-start }

.privacy{ margin:0; text-align:center; font-size:12.5px; color:var(--encre-douce) }

.rsvp__done{ text-align:center; padding:12px 0 }
.rsvp__seal{ color:var(--or); width:52px; margin:0 auto 18px }
.rsvp__done p{
  font-family:var(--serif); font-size:clamp(19px,5vw,23px);
  line-height:1.6; color:var(--bleu-encre); margin:0 0 22px;
}

/* =============================================================
   5. MUSIQUE / PIED DE PAGE
   ============================================================= */
.music{
  position:fixed; z-index:30;
  right:14px; bottom:calc(14px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 16px 0 13px;
  border-radius:999px; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivoire);
  background:rgba(22,38,63,.92);
  border:1px solid rgba(224,200,138,.4);
  box-shadow:0 8px 22px -10px rgba(22,38,63,.8);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .5s var(--t), transform .5s var(--t), background .3s;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body.is-open .music{ opacity:1; transform:none; pointer-events:auto }
.music__icon{ width:19px; height:19px; display:block; color:var(--or-clair) }
.music svg{ width:19px; height:19px; display:block }
.music .ic-pause{ display:none }
.music[aria-pressed="true"] .ic-play{ display:none }
.music[aria-pressed="true"] .ic-pause{ display:block }

.footer{ text-align:center; color:var(--bleu-encre); padding:26px 0 0 }
.footer .flourish{ max-width:150px; margin-bottom:14px }
.footer p{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:19px; letter-spacing:.06em;
}

/* =============================================================
   6. ANIMATIONS
   ============================================================= */
@keyframes fadeUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
@keyframes fadeDown{ from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* =============================================================
   7. GRAND ÉCRAN
   ============================================================= */
@media (min-width:720px){
  .btn--gold{ width:auto; min-width:260px; margin-inline:auto }
  #rsvpForm{ justify-items:stretch }
  #rsvpForm > .btn--gold{ justify-self:center }
}

/* =============================================================
   8. ACCESSIBILITÉ — « réduire les animations »
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .seal::before{ box-shadow:none }
  .stage__hint{ opacity:1 }
}

/* Impression : on imprime l'invitation, pas l'enveloppe */
@media print{
  .stage,.music,.petals,#rsvpForm,.stage__fallback,.pdfbar{ display:none !important }
  body{ background:#fff }
  .invite{ opacity:1 !important; transform:none !important; max-width:none }
  .paper{ box-shadow:none; break-inside:avoid }
}

/* Texte réservé aux lecteurs d'écran */
.sr-only{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}