/* =========================================================================
   eduka.me - feuille de style unique
   Site statique. Aucune dependance externe : ni CDN, ni police distante,
   ni script tiers. Les polices sont auto-hebergees dans /assets/fonts/.
   Reference visuelle : handoff_site_eduka/reference.html
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. POLICES AUTO-HEBERGEES
   Urbane : police de titre fournie par l'editeur, graisses 600 et 500
   uniquement. Les .otf d'origine sont conserves dans /assets/fonts/otf/ et
   ne sont pas servis. Si la licence web d'Urbane n'etait pas acquise, il
   suffit de retirer les deux blocs @font-face "Urbane" : Jost 600 prend
   le relais comme police de titre, le reste du site est inchange.
   ------------------------------------------------------------------------- */
@font-face{font-family:"Urbane";src:url("../fonts/urbane-demibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Urbane";src:url("../fonts/urbane-medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("../fonts/jost-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* -------------------------------------------------------------------------
   2. JETONS DE DESIGN
   ------------------------------------------------------------------------- */
:root{
  --font-display:"Urbane","Jost","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Public Sans",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;

  --violet:#9400d7;
  --violet-strong:#7a00b0;
  --violet-light:#c07af0;

  --bg:#fbfafc;
  --surface:#ffffff;
  --surface-2:#f4eff8;
  --text:#191622;
  --text-muted:#4b465a;
  --text-faint:#6d6779;
  --border:#e4dfea;
  --border-strong:#cdbfd9;
  --accent:#9400d7;
  --accent-text:#7a00b0;
  --accent-soft:#f3e6fb;
  --on-accent:#ffffff;
  --invert-bg:#191622;
  --invert-surface:#241f30;
  --invert-text:#ffffff;
  --invert-muted:#bdb7c9;
  --invert-border:#3a3348;
  --danger:#b3261e;
  --ok:#1f6f43;
  --shot-a:#efe9f3;
  --shot-b:#e7dfee;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:22px; --r-pill:999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:28px;
  --s-7:36px; --s-8:48px; --s-9:64px; --s-10:88px;
  --shadow-1:0 2px 14px rgba(25,22,34,.06);
  --shadow-2:0 20px 50px -28px rgba(25,22,34,.55);
  --wrap:1200px;

  color-scheme:light dark;
}

/* Theme sombre. Les selecteurs [data-theme] sont conserves pour qu'un
   selecteur de theme puisse etre ajoute plus tard sans toucher au CSS ;
   le site publie ne suit aujourd'hui que prefers-color-scheme. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141119; --surface:#1c1825; --surface-2:#241f30;
    --text:#f3f1f6; --text-muted:#bdb7c9; --text-faint:#9c95ab;
    --border:#322c40; --border-strong:#453c58;
    --accent:#9400d7; --accent-text:#c07af0; --accent-soft:#2a1638;
    --invert-bg:#241f30; --invert-surface:#2f2840; --invert-border:#453c58;
    --danger:#ff9d94; --ok:#7fd3a3;
    --shot-a:#241f30; --shot-b:#2b2438;
    --shadow-1:0 2px 14px rgba(0,0,0,.35);
    --shadow-2:0 20px 50px -28px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#141119; --surface:#1c1825; --surface-2:#241f30;
  --text:#f3f1f6; --text-muted:#bdb7c9; --text-faint:#9c95ab;
  --border:#322c40; --border-strong:#453c58;
  --accent:#9400d7; --accent-text:#c07af0; --accent-soft:#2a1638;
  --invert-bg:#241f30; --invert-surface:#2f2840; --invert-border:#453c58;
  --danger:#ff9d94; --ok:#7fd3a3;
  --shot-a:#241f30; --shot-b:#2b2438;
  --shadow-1:0 2px 14px rgba(0,0,0,.35);
  --shadow-2:0 20px 50px -28px rgba(0,0,0,.8);
}

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-text);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-wrap:break-word}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  line-height:1.12;margin:0;text-wrap:pretty}
h1{font-size:56px}
h2{font-size:42px}
h3{font-size:23px}
p{margin:0}
ul,ol{margin:0}

a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent-text);outline-offset:2px;border-radius:4px}

img{max-width:100%}

/* Le site est presque immobile : seules les couleurs transitionnent. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--s-6);padding-right:var(--s-6)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:60;background:var(--surface);
  border:1px solid var(--border-strong);padding:10px 16px;border-radius:var(--r-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

section{scroll-margin-top:84px}
.section{padding-top:var(--s-9)}
.section-sm{padding-top:56px}
.section-hero{padding-top:40px}

/* -------------------------------------------------------------------------
   4. LOGOTYPE
   Fichier PNG fourni, transparent, 141 x 60. Servi a 30px de haut dans
   l'en-tete et 24px dans le pied de page, donc au double de sa taille
   d'affichage : net sur ecran a haute densite.
   ------------------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo:hover{text-decoration:none}
.logo img{display:block;height:30px;width:auto}
.logo .lg-dark{display:none}
:root[data-theme="dark"] .logo .lg-light{display:none}
:root[data-theme="dark"] .logo .lg-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo .lg-light{display:none}
  :root:not([data-theme="light"]) .logo .lg-dark{display:block}
}

/* -------------------------------------------------------------------------
   5. BOUTONS ET PASTILLE
   ------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-text);font-weight:600;font-size:17px;line-height:1;
  padding:15px 26px;min-height:44px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--invert-bg);color:#fff;text-decoration:none}
.btn-primary:active{background:var(--violet-strong)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--violet);color:var(--accent-text);
  background:var(--surface);text-decoration:none}
.btn-light{background:#fff;color:var(--violet-strong)}
.btn-light:hover{background:var(--violet);color:#fff;text-decoration:none}
.btn-sm{padding:11px 20px;font-size:15px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.badge{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-text);
  background:var(--accent-soft);border-radius:var(--r-pill);padding:6px 13px;line-height:1.3}

/* -------------------------------------------------------------------------
   6. EN-TETE
   ------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid transparent}
@supports (background:color-mix(in srgb,red 90%,transparent)){
  .site-header{background:color-mix(in srgb,var(--bg) 90%,transparent)}
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .site-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.site-header .bar{display:flex;align-items:center;gap:var(--s-5);
  padding-top:18px;padding-bottom:18px;position:relative}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:var(--s-6);font-size:15px}
.site-nav a{color:var(--text-muted)}
.site-nav a:hover{color:var(--accent-text)}
.site-nav a.btn-primary{color:#fff}
/* Emplacement reserve au futur selecteur de langue : juste avant
   "Se connecter". Ne rien afficher tant qu'une seule langue existe. */
.lang-slot{display:none}
.nav-toggle{display:none;margin-left:auto;background:none;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:8px 14px;min-height:44px;color:var(--text);
  font-family:var(--font-text);font-size:15px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.nav-toggle:hover{border-color:var(--violet);color:var(--accent-text)}

/* -------------------------------------------------------------------------
   7. BLOCS DE TEXTE
   ------------------------------------------------------------------------- */
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);margin:0 0 14px}
.lead{font-size:19px;color:var(--text-muted);text-wrap:pretty}
.note{font-size:14px;color:var(--text-faint)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.small{font-size:15px}
.text-16{font-size:16px}
.mesure{max-width:60ch}
.mesure-46{max-width:46ch}
.mesure-50{max-width:50ch}
.mesure-52{max-width:52ch}
.h3-29{font-size:29px}

/* Paragraphe unique de la section "Le problème" : Urbane 500. */
.probleme-txt{font-family:var(--font-display);font-size:32px;font-weight:500;
  line-height:1.32;max-width:30ch;text-wrap:pretty}

.panel{background:var(--surface-2);border-radius:var(--r-xl);padding:56px}
.panel-32{padding:32px}
.panel-48{padding:48px}
.card{background:var(--surface);border-radius:var(--r-lg);padding:30px;
  box-shadow:var(--shadow-1);border:1px solid var(--border)}
.card-20{padding:20px}
.card strong{font-weight:600}

/* -------------------------------------------------------------------------
   8. GRILLES DE SECTION
   .two-col marque les grilles qui passent a une colonne sous 960px.
   ------------------------------------------------------------------------- */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-8);align-items:center}
.grid-probleme{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.grid-eleves{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-8);align-items:center}
.grid-1-1-start{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.card-large{grid-column:span 2;padding:36px;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-7);align-items:center}
.card-stack{padding:30px;display:grid;grid-template-columns:1fr;gap:var(--s-5)}
.stack-12{display:grid;gap:12px}
.stack-12-start{display:grid;gap:12px;align-content:start}
.shots-eleves{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s-5);align-items:start}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}

/* -------------------------------------------------------------------------
   9. CONTENEUR DE CAPTURE
   Tant que les captures n'existent pas, .shot-frame porte le ratio
   definitif, l'identifiant attendu et la legende definitive. A la
   substitution, le <div class="shot-frame"> devient un <img> : la legende
   et les regles ci-dessous ne changent pas.
   ------------------------------------------------------------------------- */
figure.shot{margin:0}
.shot-frame{border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--shot-a),var(--shot-a) 10px,
                                       var(--shot-b) 10px,var(--shot-b) 20px);
  border:1px solid var(--border)}
.shot-frame.raised{box-shadow:var(--shadow-2)}
.shot-tag{font-size:13px;font-weight:600;color:var(--text-muted);background:var(--surface);
  padding:8px 13px;border-radius:var(--r-sm);border:1px solid var(--border);text-align:center}
.shot img{display:block;width:100%;height:auto;border-radius:var(--r-md);
  border:1px solid var(--border)}
.shot img.raised{box-shadow:var(--shadow-2)}
figcaption{font-size:14px;color:var(--text-faint);margin-top:12px;line-height:1.5}
.ratio-16-10{aspect-ratio:16/10}
.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3{aspect-ratio:4/3}
.ratio-9-16{aspect-ratio:9/16}
.ratio-10-7{aspect-ratio:10/7}
.ratio-a4{aspect-ratio:1000/1400}
.shot-phone{max-width:220px}

/* -------------------------------------------------------------------------
   10. SCHEMA "COMMENT CA MARCHE"
   Vrai texte, couleurs prises aux variables de theme : lisible en clair
   comme en sombre. Sous 620px, le schema cede la place a la meme
   information en liste ordonnee.
   ------------------------------------------------------------------------- */
.schema{width:100%;height:auto;display:block;font-family:var(--font-text)}
.schema-liste{display:none;margin:0;padding-left:20px;color:var(--text-muted)}
.schema-liste li{margin-bottom:10px}
.schema-liste strong{color:var(--text);font-weight:600}

/* -------------------------------------------------------------------------
   11. BANDEAU DE CHIFFRES
   ------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.stat{background:var(--surface-2);border-radius:18px;padding:26px}
.stat b{display:block;font-family:var(--font-display);font-size:36px;font-weight:600;
  color:var(--accent-text);letter-spacing:-.02em}
.stat span{font-size:15px;color:var(--text-muted)}

/* -------------------------------------------------------------------------
   12. BLOC SOMBRE
   ------------------------------------------------------------------------- */
.dark-block{background:var(--invert-bg);color:#fff;border-radius:var(--r-xl);padding:52px;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8)}
.dark-block h2{color:#fff;font-size:36px}
.dark-block p{color:var(--invert-muted)}
.dark-block .eyebrow{color:#c79cea}
.dark-block figcaption{color:var(--invert-muted)}
.dark-block .shot-frame{border-color:var(--invert-border)}
.dark-block .shot-tag{background:var(--invert-surface);color:var(--invert-muted);
  border-color:var(--invert-border)}
.dark-block .shot img{border-color:var(--invert-border)}
.mini{background:var(--invert-surface);border-radius:var(--r-md);padding:20px}
.mini strong{font-weight:600;color:#fff}
.mini p{font-size:15px;margin-top:6px}

/* -------------------------------------------------------------------------
   13. LISTES DE FONCTIONS
   ------------------------------------------------------------------------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.features h3{font-size:19px;margin-bottom:10px}
.features ul{margin:0;padding-left:18px;color:var(--text-muted);font-size:16px}
.features li{margin-bottom:6px}
.liste{margin:0;padding-left:20px;color:var(--text-muted)}
.liste li{margin-bottom:8px}
.liste li:last-child{margin-bottom:0}

/* Domaines de la page Fonctionnalites */
.domaine{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:start}
.domaine-shots{display:grid;gap:var(--s-5)}

/* -------------------------------------------------------------------------
   14. FORMULAIRE
   ------------------------------------------------------------------------- */
.field{display:grid;gap:6px;margin-bottom:var(--s-4)}
.field label{font-size:14px;font-weight:600}
.field .hint{font-size:13px;color:var(--text-faint)}
.field input,.field select,.field textarea{font-family:var(--font-text);font-size:16px;
  color:var(--text);background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);padding:12px 14px;width:100%;
  transition:border-color .15s ease}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--accent-text)}
.field.error input,.field.error select,.field.error textarea{border-color:var(--danger);border-width:2px}
.field .err{font-size:14px;color:var(--danger);font-weight:600}
/* La case de consentement fait 24px : c'est la taille de cible minimale
   exigee par WCAG 2.2 (2.5.8). Son etiquette, cliquable, prolonge la cible
   sur toute la hauteur de la ligne. */
.field-check{grid-template-columns:auto 1fr;display:grid;gap:10px;align-items:start}
.field-check input{width:24px;height:24px;margin-top:1px;flex:none}
.field-check label{font-weight:400;font-size:15px;min-height:44px;display:flex;align-items:center}
/* Le message d'erreur se place sous le texte de l'etiquette, dans la
   deuxieme colonne. Sans cette regle il tomberait dans la colonne de la
   case, large de 24px, et repousserait tout vers la droite. */
.field-check .err{grid-column:2;margin-top:-4px}
.field-leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Le titre du formulaire garde son niveau (h2 sur une page dediee, h3 dans
   une section de l'accueil) mais toujours la taille d'un titre 3. */
.form-site h2,.form-site h3{font-size:23px}
.form-note{font-size:14px;color:var(--text-faint)}
.alert{border-radius:var(--r-md);padding:16px 18px;font-size:16px;border:1px solid var(--border)}
.alert-ok{background:var(--accent-soft);color:var(--text);border-color:var(--border-strong)}
.alert-ko{background:var(--surface);color:var(--text);border-color:var(--danger)}
.alert strong{font-weight:600}
.form-submit{width:100%}

/* -------------------------------------------------------------------------
   15. PIED DE PAGE
   ------------------------------------------------------------------------- */
.site-footer{background:var(--surface-2);margin-top:var(--s-9)}
.site-footer .bar{display:flex;gap:var(--s-6);align-items:center;flex-wrap:wrap;
  padding-top:32px;padding-bottom:32px;font-size:15px;color:var(--text-muted)}
.site-footer .logo img{height:24px}
.site-footer a{color:var(--text-muted)}
.site-footer a:hover{color:var(--accent-text)}
.site-footer .mention{margin-left:auto;font-size:13px;color:var(--text-faint)}

/* -------------------------------------------------------------------------
   16. PAGES DE TEXTE (donnees et securite, conditions, confidentialite, 404)
   ------------------------------------------------------------------------- */
.page-head{padding-top:var(--s-8);padding-bottom:var(--s-2)}
.prose{max-width:70ch}
.prose h2{font-size:32px;margin-top:var(--s-8);margin-bottom:var(--s-3)}
.prose h2:first-of-type{margin-top:var(--s-6)}
.prose h3{margin-top:var(--s-6);margin-bottom:var(--s-2)}
.prose p{color:var(--text-muted);margin-bottom:var(--s-4)}
.prose ul{color:var(--text-muted);padding-left:20px;margin-bottom:var(--s-4)}
.prose li{margin-bottom:8px}
.page-404{padding-top:var(--s-10);padding-bottom:var(--s-10);text-align:center}
.page-404 .actions{justify-content:center}

/* -------------------------------------------------------------------------
   17. POINTS DE RUPTURE
   Conception d'abord mobile : l'ordre du DOM est l'ordre de lecture
   mobile, aucune reorganisation par order.
   ------------------------------------------------------------------------- */
@media (max-width:960px){
  .hero-grid,.dark-block,.two-col,.domaine{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .features{grid-template-columns:1fr 1fr}
  h1{font-size:40px}
  h2{font-size:32px}
  .dark-block h2{font-size:32px}
  .panel{padding:32px}
  .dark-block{padding:32px}
  .card-large{padding:32px}

  /* Menu mobile : la navigation se replie sous la barre. */
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-1);
    padding:var(--s-2) var(--s-6) var(--s-5)}
  .site-nav.is-open{display:flex}
  .site-nav a{font-size:17px;padding:12px 0}
  .site-nav a.btn{margin-top:var(--s-2);padding:15px 26px}
  .nav-toggle{display:block}
}

@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding-left:var(--s-4);padding-right:var(--s-4)}

  /* La pastille bêta passe sous le logotype. L'ordre du DOM (logotype,
     bouton Menu, pastille) reste l'ordre de lecture : rien n'est deplace
     par `order`. */
  .site-header .bar{display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:var(--s-3) var(--s-4)}
  .site-header .logo{grid-column:1;grid-row:1}
  .site-header .nav-toggle{grid-column:2;grid-row:1;margin-left:0}
  .site-header .badge{grid-column:1 / -1;grid-row:2;justify-self:start}

  .section{padding-top:40px}
  .section-sm{padding-top:40px}
  .stats,.features,.benefits,.shots-eleves{grid-template-columns:1fr}
  .card-large{grid-column:span 1}
  h1{font-size:34px}
  h2{font-size:32px}
  .panel{padding:24px}
  .dark-block{padding:24px}
  .card,.card-large{padding:24px}
  .btn{width:100%}
  .site-nav a.btn{width:100%}
  .shot-phone{max-width:100%}
  .site-footer .bar{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .site-footer .mention{margin-left:0}
  .schema{display:none}
  .schema-liste{display:block}
  .prose h2{font-size:26px}
}

/* -------------------------------------------------------------------------
   18. UTILITAIRES D'ESPACEMENT
   Calques sur la reference visuelle. Places en dernier pour l'emporter sur
   les marges par defaut des composants (une <ul class="liste mb-20">, par
   exemple, doit bien garder ses 20px sous elle).
   ------------------------------------------------------------------------- */
.mb-6{margin-bottom:6px}
.mb-10{margin-bottom:10px}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-22{margin-bottom:22px}
.mb-28{margin-bottom:28px}
.mb-30{margin-bottom:30px}
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}