/* ═══════════════════════════════════════════
   FormationExtensionDeCils.fr — Porcelaine & Prune
   Fraunces (display) + Jost (texte)
═══════════════════════════════════════════ */
:root{
  --porcelaine:#FBF8F5;
  --voile:#F3ECE8;
  --voile2:#EAE0DB;
  --prune:#2A1E28;
  --prune2:#3D2C3B;
  --mauve:#9A7E94;
  --mauve-pale:#C9B4C3;
  --rose:#B65D6B;
  --rose2:#96434F;
  --encre:#231823;
  --ligne:rgba(154,126,148,.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Jost',sans-serif;
  background:var(--porcelaine);
  color:var(--encre);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-size:16px;
}

/* ── TOPBAR ── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:58px;
  background:rgba(251,248,245,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ligne);
}
.topbar-brand{
  font-family:'Fraunces',serif;
  font-size:15px;font-weight:500;letter-spacing:.01em;
  color:var(--encre);text-decoration:none;
}
.topbar-brand em{color:var(--rose);font-style:italic}
.topbar-cta{display:none}
@media(min-width:768px){
  .topbar-cta{
    display:block;background:var(--prune);color:var(--porcelaine);
    padding:10px 20px;border-radius:100px;
    font-size:13px;font-weight:500;letter-spacing:.04em;
    text-decoration:none;transition:background .2s,opacity .3s;
    opacity:0;pointer-events:none;
  }
  .topbar-cta:hover{background:var(--rose2)}
  .topbar-cta.show{opacity:1;pointer-events:auto}
}

/* ── FAB MOBILE ── */
.mobile-fab{display:none}
@media(max-width:767px){
  .mobile-fab{
    display:flex;position:fixed;bottom:16px;left:16px;right:16px;z-index:300;
    background:var(--prune);color:var(--porcelaine);
    border:none;border-radius:100px;padding:17px 24px;
    font-family:'Jost',sans-serif;font-size:15.5px;font-weight:500;letter-spacing:.02em;
    align-items:center;justify-content:center;gap:8px;cursor:pointer;
    box-shadow:0 10px 34px rgba(42,30,40,.32);
    opacity:0;pointer-events:none;transform:translateY(8px);
    transition:opacity .3s,transform .3s,background .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-fab.show{opacity:1;pointer-events:auto;transform:translateY(0)}
}

/* ── HERO ── */
.hero{padding-top:58px;display:flex;flex-direction:column;position:relative}
@media(min-width:960px){.hero{min-height:100svh;flex-direction:row}}
.hero-left{
  padding:44px 20px 40px;display:flex;flex-direction:column;
  border-bottom:1px solid var(--ligne);position:relative;
}
@media(min-width:960px){
  .hero-left{flex:1;padding:70px 60px 70px 48px;justify-content:center;border-bottom:none;border-right:1px solid var(--ligne)}
}

/* Éventail de cils — signature */
.lash-fan{
  position:absolute;top:12px;right:-30px;width:230px;height:230px;
  opacity:.5;pointer-events:none;
}
@media(min-width:960px){.lash-fan{width:340px;height:340px;top:40px;right:-40px}}

.badge-free{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(182,93,107,.08);
  border:1px solid rgba(182,93,107,.25);
  border-radius:100px;padding:7px 15px;
  margin-bottom:26px;width:fit-content;
  font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rose2);position:relative;z-index:1;
}
.hero-eyebrow{
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mauve);margin-bottom:18px;
  display:flex;align-items:center;gap:10px;position:relative;z-index:1;
}
.hero-eyebrow::after{content:'';width:30px;height:1px;background:var(--mauve)}
.hero-h1{
  font-family:'Fraunces',serif;
  font-size:clamp(2rem,7.4vw,3.6rem);
  font-weight:500;line-height:1.08;letter-spacing:-.015em;
  color:var(--encre);margin-bottom:22px;position:relative;z-index:1;
}
.hero-h1 .italic{font-style:italic;font-weight:400;color:var(--rose)}
.hero-lead{
  font-size:16.5px;font-weight:300;color:var(--prune2);
  line-height:1.75;margin-bottom:34px;max-width:520px;position:relative;z-index:1;
}
.hero-lead strong{color:var(--encre);font-weight:500}

.metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--ligne);border:1px solid var(--ligne);
  border-radius:14px;overflow:hidden;margin-bottom:30px;
}
@media(min-width:960px){.metrics{max-width:420px}}
.metric{background:var(--porcelaine);padding:18px 10px;text-align:center}
.metric strong{
  display:block;font-family:'Fraunces',serif;font-weight:500;
  font-size:1.8rem;color:var(--rose);line-height:1;margin-bottom:5px;
}
.metric span{font-size:11.5px;color:var(--mauve);line-height:1.35}

.trust-pills{display:flex;flex-wrap:wrap;gap:8px}
.trust-pill{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--ligne);border-radius:100px;padding:7px 13px;
  font-size:12px;font-weight:400;color:var(--prune2);background:var(--porcelaine);
}
.trust-pill svg{width:12px;height:12px;color:var(--rose);flex-shrink:0}

/* ── FORMULAIRE ── */
.hero-right{background:var(--voile);padding:30px 16px 48px}
@media(min-width:960px){
  .hero-right{width:470px;flex-shrink:0;padding:38px 30px;display:flex;flex-direction:column;justify-content:center}
}
.form-wrap{
  background:var(--porcelaine);
  border:1px solid rgba(154,126,148,.3);
  border-radius:20px;padding:26px 18px;
  box-shadow:0 10px 44px rgba(42,30,40,.1);
}
@media(min-width:480px){.form-wrap{padding:32px 28px}}
.form-badges{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:20px}
.form-badge{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:400;color:var(--prune2);
  background:rgba(154,126,148,.09);border:1px solid rgba(154,126,148,.16);
  border-radius:9px;padding:8px 10px;
}
.form-pretitle{
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);margin-bottom:7px;
}
.form-title{
  font-family:'Fraunces',serif;font-size:1.35rem;font-weight:500;
  color:var(--encre);line-height:1.25;margin-bottom:6px;
}
.form-sub{font-size:13px;font-weight:300;color:var(--prune2);line-height:1.6;margin-bottom:20px}
.form-sub strong{color:var(--encre);font-weight:500}
.fields{display:flex;flex-direction:column;gap:11px}
.field label{
  display:block;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mauve);margin-bottom:4px;
}
.field input,.field select{
  width:100%;padding:14px;background:var(--porcelaine);
  border:1.5px solid rgba(154,126,148,.35);border-radius:10px;
  font-family:'Jost',sans-serif;font-size:16px;font-weight:400;
  color:var(--encre);outline:none;
  transition:border-color .18s,box-shadow .18s;
  appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;
}
.field input::placeholder{color:var(--mauve-pale)}
.field input:focus,.field select:focus{
  border-color:var(--rose);box-shadow:0 0 0 3px rgba(182,93,107,.14);
}
.field input:focus-visible,.field select:focus-visible,
.btn-submit:focus-visible,.tech-item:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--rose);outline-offset:2px;
}
.field-error-input{border-color:#b03030!important}
.error-msg{font-size:11.5px;color:#b03030;margin-top:3px;display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:360px){.field-row{grid-template-columns:1fr}}
.field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B65D6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.tech-label{
  font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mauve);margin-bottom:7px;display:block;
}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tech-item{
  padding:12px 10px;background:var(--porcelaine);
  border:1.5px solid rgba(154,126,148,.35);border-radius:10px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
  transition:border-color .14s,background .14s;
  user-select:none;-webkit-tap-highlight-color:transparent;min-height:48px;
}
.tech-item.on{border-color:var(--rose);background:rgba(182,93,107,.06)}
.tech-check{
  width:18px;height:18px;border-radius:5px;
  border:1.5px solid var(--mauve-pale);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .14s;
}
.tech-item.on .tech-check{background:var(--rose);border-color:var(--rose)}
.tech-mark{opacity:0;font-size:10px;color:#fff;font-weight:700;transition:opacity .14s}
.tech-item.on .tech-mark{opacity:1}
.tech-name{font-size:13.5px;font-weight:400;color:var(--encre)}
.btn-submit{
  width:100%;margin-top:5px;padding:18px 24px;
  background:var(--prune);border:none;border-radius:100px;
  font-family:'Jost',sans-serif;font-size:15.5px;font-weight:500;
  color:var(--porcelaine);letter-spacing:.03em;cursor:pointer;
  transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;-webkit-tap-highlight-color:transparent;
}
.btn-submit:hover,.btn-submit:active{background:var(--rose2)}
.btn-submit:disabled{opacity:.65;cursor:wait}
.btn-submit svg{width:16px;height:16px;flex-shrink:0}
.form-note{
  margin-top:12px;font-size:11px;color:var(--mauve);text-align:center;line-height:1.6;
  padding:9px 12px;background:rgba(154,126,148,.08);border-radius:9px;
  border:1px solid rgba(154,126,148,.14);
}
.form-note a{color:var(--rose);text-decoration:underline}
.confirm-area{display:none;text-align:center;padding:24px 0}
.confirm-icon{
  width:58px;height:58px;border-radius:50%;
  background:rgba(182,93,107,.1);border:1px solid rgba(182,93,107,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;font-size:22px;color:var(--rose);
}
.confirm-area h3{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:500;color:var(--encre);margin-bottom:10px}
.confirm-area p{font-size:14px;font-weight:300;color:var(--prune2);line-height:1.8;margin-bottom:20px}
.confirm-area p strong{color:var(--encre);font-weight:500}
.confirm-badge{
  display:inline-block;border:1px solid var(--ligne);border-radius:100px;padding:8px 20px;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mauve);
}

/* ── SECTIONS ── */
.section-inner{max-width:1100px;margin:0 auto}
.section-eyebrow{
  font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rose);margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.section-eyebrow::before{
  content:'';display:inline-block;width:22px;height:12px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M2 11 Q4 3 6 1 M7 11 Q9 2 12 0.5 M12 11 Q15 3 18 1.5 M16 11 Q19 5 21 3.5' stroke='%23B65D6B' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.section-title{
  font-family:'Fraunces',serif;
  font-size:clamp(1.55rem,5vw,2.25rem);font-weight:500;
  color:var(--encre);margin-bottom:42px;line-height:1.15;letter-spacing:-.01em;
}
.section-title em{font-style:italic;font-weight:400;color:var(--rose)}

.section-steps{padding:66px 20px;background:var(--voile);border-top:1px solid var(--ligne)}
@media(min-width:768px){.section-steps{padding:84px 40px}}
.steps-grid{display:flex;flex-direction:column;gap:2px}
@media(min-width:720px){.steps-grid{flex-direction:row}}
.step{background:var(--porcelaine);padding:30px 22px;flex:1;border-radius:2px}
@media(min-width:720px){.step{padding:36px 28px}}
.step-num{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:2.6rem;font-weight:400;line-height:1;
  color:rgba(182,93,107,.28);margin-bottom:16px;
}
.step h3{font-family:'Fraunces',serif;font-size:16px;font-weight:500;color:var(--encre);margin-bottom:9px;line-height:1.3}
.step p{font-size:13.5px;font-weight:300;color:var(--prune2);line-height:1.7}

.section-promesses{padding:66px 20px;border-top:1px solid var(--ligne)}
@media(min-width:768px){.section-promesses{padding:84px 40px}}
.promesses-grid{display:flex;flex-direction:column;gap:30px}
@media(min-width:720px){.promesses-grid{flex-direction:row;gap:34px}}
.promesse{padding-top:22px;border-top:2px solid var(--voile2);flex:1}
.promesse h3{font-family:'Fraunces',serif;font-size:15.5px;font-weight:500;color:var(--encre);margin-bottom:10px;line-height:1.35}
.promesse p{font-size:13.5px;font-weight:300;color:var(--prune2);line-height:1.8}

.section-sombre{padding:66px 20px;background:var(--prune);border-top:1px solid var(--ligne);position:relative;overflow:hidden}
@media(min-width:768px){.section-sombre{padding:84px 40px}}
.sombre-wrap{max-width:800px;margin:0 auto;text-align:center;position:relative;z-index:1}
.sombre-eyebrow{
  font-size:11.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mauve-pale);margin-bottom:12px;display:block;
}
.sombre-title{
  font-family:'Fraunces',serif;
  font-size:clamp(1.65rem,6vw,2.6rem);font-weight:500;line-height:1.1;
  color:var(--porcelaine);margin-bottom:18px;letter-spacing:-.01em;
}
.sombre-title em{color:#D99AA4;font-style:italic;font-weight:400}
.sombre-lead{font-size:15px;font-weight:300;color:rgba(251,248,245,.68);line-height:1.8;margin-bottom:38px}
.sombre-lead strong{color:var(--porcelaine);font-weight:500}
.sombre-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;overflow:hidden;margin-bottom:38px;
}
@media(min-width:480px){.sombre-stats{grid-template-columns:repeat(4,1fr)}}
.sombre-stat{background:rgba(255,255,255,.03);padding:22px 12px;text-align:center}
.sombre-stat strong{
  display:block;font-family:'Fraunces',serif;font-weight:500;
  font-size:1.75rem;color:#D99AA4;margin-bottom:5px;line-height:1;
}
.sombre-stat span{font-size:11.5px;color:rgba(251,248,245,.5);line-height:1.4}
.sombre-cta{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--rose);color:var(--porcelaine);
  padding:17px 30px;border-radius:100px;
  font-family:'Jost',sans-serif;font-size:15px;font-weight:500;letter-spacing:.03em;
  border:none;cursor:pointer;transition:background .2s;min-height:52px;
  -webkit-tap-highlight-color:transparent;text-decoration:none;
}
.sombre-cta:hover{background:var(--rose2)}
.sombre-cta svg{width:15px;height:15px}

.section-temoignages{padding:66px 20px;background:var(--voile);border-top:1px solid var(--ligne)}
@media(min-width:768px){.section-temoignages{padding:84px 40px}}
.temoignages-grid{display:flex;flex-direction:column;gap:14px}
@media(min-width:560px){.temoignages-grid{flex-direction:row;flex-wrap:wrap}
.temoignage{flex:1;min-width:240px}}
.temoignage{
  background:var(--porcelaine);border:1px solid var(--ligne);
  border-radius:16px;padding:24px 20px;
  display:flex;flex-direction:column;gap:12px;
}
.temo-stars{font-size:13px;color:var(--rose);letter-spacing:2px}
.temo-text{font-size:13.5px;font-weight:300;color:var(--prune2);line-height:1.75;font-style:italic}
.temo-text::before{content:'\201C';color:var(--rose);font-size:1.4em;font-style:normal}
.temo-author{display:flex;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--ligne)}
.temo-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--mauve),var(--rose));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--porcelaine);flex-shrink:0;
}
.temo-name{font-size:12.5px;font-weight:500;color:var(--encre)}
.temo-location{font-size:11px;color:var(--mauve)}

.section-faq{padding:66px 20px;border-top:1px solid var(--ligne)}
@media(min-width:768px){.section-faq{padding:84px 40px}}
.faq-grid{display:flex;flex-direction:column;gap:12px}
@media(min-width:720px){.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}}
.faq-item{padding:22px 20px;background:var(--porcelaine);border:1px solid var(--ligne);border-radius:14px}
.faq-q{font-family:'Fraunces',serif;font-size:14.5px;font-weight:500;color:var(--encre);margin-bottom:9px;line-height:1.4}
.faq-a{font-size:13px;font-weight:300;color:var(--prune2);line-height:1.75}

.section-villes{padding:66px 20px;background:var(--voile);border-top:1px solid var(--ligne)}
@media(min-width:768px){.section-villes{padding:84px 40px}}
.villes-lead{font-size:14px;font-weight:300;color:var(--prune2);max-width:540px;line-height:1.75;margin-bottom:30px}
.villes-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ligne);border:1px solid var(--ligne);
  border-radius:14px;overflow:hidden;
}
@media(min-width:720px){.villes-grid{grid-template-columns:repeat(4,1fr)}}
.ville-card{background:var(--porcelaine);padding:22px 16px;text-decoration:none;display:block;transition:background .15s}
.ville-card:hover{background:rgba(182,93,107,.05)}
.ville-card h3{font-family:'Fraunces',serif;font-size:.95rem;font-weight:500;color:var(--encre);margin-bottom:7px;line-height:1.3}
.ville-card p{font-size:12px;font-weight:300;color:var(--prune2);line-height:1.6;margin-bottom:12px}
.ville-card .ville-lien{
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rose);display:flex;align-items:center;gap:4px;
}
.ville-card .ville-lien svg{width:9px;height:9px}

/* ── PAGES VILLES ── */
.page-ville-hero{
  padding:100px 20px 50px;border-bottom:1px solid var(--ligne);
  position:relative;overflow:hidden;
}
@media(min-width:768px){.page-ville-hero{padding:130px 40px 64px}}
.ville-hero-inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.fil-ariane{font-size:12px;color:var(--mauve);margin-bottom:20px}
.fil-ariane a{color:var(--mauve);text-decoration:none}
.fil-ariane a:hover{color:var(--rose)}
.page-ville-h1{
  font-family:'Fraunces',serif;
  font-size:clamp(1.8rem,6.5vw,3rem);font-weight:500;line-height:1.1;
  color:var(--encre);margin-bottom:18px;letter-spacing:-.015em;
}
.page-ville-h1 em{font-style:italic;font-weight:400;color:var(--rose)}
.ville-intro{font-size:16px;font-weight:300;color:var(--prune2);line-height:1.8;max-width:680px}
.ville-intro strong{color:var(--encre);font-weight:500}

.ville-contenu{padding:54px 20px}
@media(min-width:768px){.ville-contenu{padding:70px 40px}}
.ville-contenu-inner{max-width:760px;margin:0 auto}
.ville-contenu h2{
  font-family:'Fraunces',serif;font-size:clamp(1.25rem,4vw,1.6rem);font-weight:500;
  color:var(--encre);margin:38px 0 16px;line-height:1.25;
}
.ville-contenu h2:first-child{margin-top:0}
.ville-contenu p{font-size:15px;font-weight:300;color:var(--prune2);line-height:1.85;margin-bottom:16px}
.ville-contenu p strong{color:var(--encre);font-weight:500}
.ville-cta-inline{text-align:center;margin:44px 0 0}

.ville-form-section{padding:54px 20px;background:var(--voile);border-top:1px solid var(--ligne)}
@media(min-width:768px){.ville-form-section{padding:70px 40px}}
.ville-form-inner{max-width:520px;margin:0 auto}
.ville-form-titre{
  font-family:'Fraunces',serif;text-align:center;
  font-size:clamp(1.4rem,5vw,1.9rem);font-weight:500;color:var(--encre);
  margin-bottom:10px;line-height:1.2;
}
.ville-form-sous{text-align:center;font-size:14px;font-weight:300;color:var(--prune2);margin-bottom:28px;line-height:1.7}

.autres-villes{padding:54px 20px;border-top:1px solid var(--ligne)}
@media(min-width:768px){.autres-villes{padding:64px 40px}}
.autres-villes-inner{max-width:900px;margin:0 auto}
.autres-villes h2{
  font-family:'Fraunces',serif;font-size:1.3rem;font-weight:500;
  color:var(--encre);margin-bottom:20px;
}
.autres-villes-liste{display:flex;flex-wrap:wrap;gap:9px}
.autres-villes-liste a{
  font-size:13px;color:var(--prune2);text-decoration:none;
  border:1px solid var(--ligne);border-radius:100px;padding:9px 17px;
  transition:border-color .15s,color .15s;background:var(--porcelaine);
}
.autres-villes-liste a:hover{border-color:var(--rose);color:var(--rose)}

/* ── FOOTER ── */
footer{
  border-top:1px solid var(--ligne);padding:26px 20px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:84px;background:var(--porcelaine);
}
@media(min-width:768px){footer{padding:28px 40px;margin-bottom:0}}
.footer-brand{font-family:'Fraunces',serif;font-size:13px;color:var(--prune2)}
.footer-brand em{color:var(--rose);font-style:italic}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{font-size:12px;color:var(--mauve);text-decoration:none}
.footer-links a:hover{color:var(--rose)}
.footer-copy{font-size:12px;color:var(--mauve);width:100%;text-align:center}
@media(min-width:768px){.footer-copy{width:auto;text-align:right}}

/* ── ANIMATIONS ── */
.fade{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.fade.vis{opacity:1;transform:none}
.fd1{transition-delay:.1s}
.fd2{transition-delay:.2s}
.fd3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  .fade{opacity:1;transform:none;transition:none}
}