/* =========================================================
   MFACADEMY — INDEX PAGE
   Fichier : assets/css/index.css
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --mf-orange:
    #F9650D;

  --mf-orange-soft:
    rgba(249, 101, 13, .10);

  --mf-orange-light:
    #fff4ed;

  --mf-black:
    #080808;

  --mf-dark:
    #111111;

  --mf-text:
    #333333;

  --mf-muted:
    #666666;

  --mf-light:
    #f8f9fa;

  --mf-white:
    #ffffff;

  --mf-border:
    #e8e8e8;

  --mf-heading:
    "Poppins",
    Arial,
    sans-serif;

  --mf-body:
    "Open Sans",
    Arial,
    sans-serif;

}


/* =========================================================
   RESET / GLOBAL
========================================================= */

html,
body {

  overflow-x:
    hidden;

}


body {

  font-family:
    var(--mf-body);

}


h1,
h2,
h3,
h4,
h5,
h6 {

  font-family:
    var(--mf-heading);

}


.mf-home-hero *,
.mf-languages-section *,
.mf-testimonials-section *,
.mf-features-section * {

  box-sizing:
    border-box;

}


img {

  max-width:
    100%;

}


a {

  transition:
    .25s ease;

}



/* =========================================================
   HEADER
========================================================= */

.mf-main-header .sitename {

  margin:
    0;

  font-family:
    var(--mf-heading);

}


.mf-header-whatsapp {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  white-space:
    nowrap;

}


.mf-header-whatsapp i {

  font-size:
    15px;

}


@media (max-width: 991px) {

  .mf-header-whatsapp span {

    display:
      none;

  }

}



/* =========================================================
   HERO
========================================================= */

.mf-home-hero {

  position:
    relative;

  width:
    100%;

  min-height:
    790px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 75% 45%,
      rgba(249, 101, 13, .17),
      transparent 30%
    ),

    radial-gradient(
      circle at 10% 20%,
      rgba(249, 101, 13, .08),
      transparent 25%
    ),

    var(--mf-black);

  color:
    var(--mf-white);

}


.mf-home-hero-bg {

  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

}


.mf-home-glow {

  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(75px);

  opacity:
    .45;

  animation:
    mfHomeGlow
    7s
    ease-in-out
    infinite;

}


.mf-home-glow-1 {

  width:
    420px;

  height:
    420px;

  top:
    -150px;

  right:
    -100px;

  background:
    rgba(249, 101, 13, .18);

}


.mf-home-glow-2 {

  width:
    280px;

  height:
    280px;

  left:
    -90px;

  bottom:
    -100px;

  background:
    rgba(249, 101, 13, .09);

  animation-delay:
    -3s;

}


.mf-home-grid {

  position:
    absolute;

  inset:
    0;

  opacity:
    .11;

  background-image:

    linear-gradient(
      rgba(255,255,255,.06) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.06) 1px,
      transparent 1px
    );

  background-size:
    60px 60px;

  mask-image:
    radial-gradient(
      circle at center,
      #000 20%,
      transparent 75%
    );

}


.mf-home-number {

  position:
    absolute;

  color:
    rgba(255,255,255,.018);

  font-size:
    120px;

  line-height:
    1;

  font-weight:
    900;

  user-select:
    none;

}


.mf-home-number-1 {

  left:
    3%;

  top:
    8%;

}


.mf-home-number-2 {

  right:
    42%;

  bottom:
    8%;

}


.mf-home-number-3 {

  right:
    3%;

  top:
    28%;

}


.mf-home-hero .container {

  position:
    relative;

  z-index:
    5;

}


.mf-home-hero-content {

  position:
    relative;

  z-index:
    5;

}


.mf-home-badge {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 15px;

  margin-bottom:
    24px;

  border:
    1px solid
    rgba(249,101,13,.35);

  border-radius:
    50px;

  background:
    rgba(249,101,13,.08);

  color:
    rgba(255,255,255,.92);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .8px;

}


.mf-home-badge span {

  width:
    8px;

  height:
    8px;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--mf-orange);

  box-shadow:
    0 0 0 5px
    rgba(249,101,13,.10);

  animation:
    mfHomePulse
    2s
    ease-in-out
    infinite;

}


.mf-home-hero-content h1 {

  max-width:
    800px;

  margin:
    0;

  color:
    var(--mf-white);

  font-family:
    var(--mf-heading);

  font-size:
    clamp(
      44px,
      5.6vw,
      74px
    );

  line-height:
    1.04;

  letter-spacing:
    -2.5px;

  font-weight:
    800;

}


.mf-home-hero-content h1 span {

  display:
    block;

  color:
    var(--mf-orange);

}


.mf-home-description {

  max-width:
    690px;

  margin:
    24px 0 0;

  color:
    rgba(255,255,255,.76);

  font-size:
    17px;

  line-height:
    1.75;

  font-weight:
    400;

}


.mf-home-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    11px;

  margin-top:
    31px;

}


.mf-home-btn {

  min-height:
    54px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    14px 20px;

  border-radius:
    10px;

  text-decoration:
    none;

  font-family:
    var(--mf-heading);

  font-size:
    11px;

  font-weight:
    800;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

}


.mf-home-btn i {

  font-size:
    14px;

}


.mf-home-btn-primary {

  background:
    var(--mf-orange);

  color:
    var(--mf-white);

  border:
    1px solid
    var(--mf-orange);

  box-shadow:
    0 14px 30px
    rgba(249,101,13,.20);

}


.mf-home-btn-primary:hover {

  color:
    var(--mf-white);

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 38px
    rgba(249,101,13,.30);

}


.mf-home-btn-secondary {

  border:
    1px solid
    rgba(255,255,255,.20);

  background:
    rgba(255,255,255,.04);

  color:
    var(--mf-white);

  backdrop-filter:
    blur(8px);

}


.mf-home-btn-secondary:hover {

  color:
    var(--mf-white);

  transform:
    translateY(-3px);

  border-color:
    var(--mf-orange);

  background:
    rgba(249,101,13,.08);

}


.mf-home-language-list {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    23px;

}


.mf-home-language {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    8px 11px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    8px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.52);

  font-size:
    9px;

  font-weight:
    700;

}


.mf-home-language.active {

  color:
    var(--mf-white);

  border-color:
    rgba(249,101,13,.28);

  background:
    rgba(249,101,13,.08);

}


.mf-home-language span {

  font-size:
    15px;

}


.mf-home-points {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    18px;

  margin-top:
    23px;

}


.mf-home-points > div {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    rgba(255,255,255,.58);

  font-size:
    10px;

  font-weight:
    700;

}


.mf-home-points span {

  width:
    18px;

  height:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  color:
    var(--mf-orange);

  background:
    rgba(249,101,13,.12);

  font-size:
    10px;

}



/* =========================================================
   HERO — VISUEL
========================================================= */

.mf-home-visual {

  position:
    relative;

  width:
    100%;

  min-height:
    590px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.mf-home-orbit {

  position:
    absolute;

  border:
    1px solid
    rgba(249,101,13,.12);

  border-radius:
    50%;

  pointer-events:
    none;

}


.mf-home-orbit-1 {

  width:
    520px;

  height:
    520px;

  animation:
    mfHomeRotate
    30s
    linear
    infinite;

}


.mf-home-orbit-2 {

  width:
    380px;

  height:
    380px;

  border-style:
    dashed;

  animation:
    mfHomeRotateReverse
    22s
    linear
    infinite;

}


.mf-home-dashboard {

  position:
    relative;

  z-index:
    3;

  width:
    min(100%, 430px);

  padding:
    24px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    23px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.40),
    inset 0 1px 0
    rgba(255,255,255,.06);

  backdrop-filter:
    blur(18px);

  transform:
    perspective(1000px)
    rotateY(-4deg);

  animation:
    mfHomeFloat
    6s
    ease-in-out
    infinite;

}


.mf-home-dashboard-header {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

}


.mf-home-dashboard-header > div:first-child > span {

  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--mf-orange);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.3px;

}


.mf-home-dashboard-header h3 {

  margin:
    0;

  color:
    var(--mf-white);

  font-family:
    var(--mf-heading);

  font-size:
    22px;

  line-height:
    1.2;

  font-weight:
    800;

}


.mf-home-dashboard-icon {

  width:
    43px;

  height:
    43px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border:
    1px solid
    rgba(249,101,13,.22);

  border-radius:
    12px;

  background:
    rgba(249,101,13,.09);

  font-size:
    18px;

}


.mf-dashboard-languages {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    6px;

  margin-top:
    20px;

}


.mf-dashboard-language {

  min-width:
    0;

  padding:
    9px 7px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.025);

}


.mf-dashboard-language.active {

  border-color:
    rgba(249,101,13,.22);

  background:
    rgba(249,101,13,.06);

}


.mf-dashboard-language > span {

  display:
    block;

  margin-bottom:
    5px;

  font-size:
    15px;

}


.mf-dashboard-language div {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    3px;

}


.mf-dashboard-language strong {

  color:
    var(--mf-white);

  font-size:
    8px;

  font-weight:
    800;

}


.mf-dashboard-language small {

  color:
    rgba(255,255,255,.36);

  font-size:
    6px;

}


.mf-dashboard-lesson {

  margin-top:
    16px;

  padding:
    14px;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    14px;

  background:
    rgba(0,0,0,.15);

}


.mf-dashboard-lesson-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    11px;

  color:
    rgba(255,255,255,.38);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .8px;

}


.mf-dashboard-question {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    11px;

  border-radius:
    10px;

  background:
    rgba(255,255,255,.045);

}


.mf-dashboard-question-icon {

  width:
    31px;

  height:
    31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    8px;

  background:
    rgba(249,101,13,.10);

}


.mf-dashboard-question > div {

  flex:
    1;

  min-width:
    0;

}


.mf-dashboard-question small {

  display:
    block;

  color:
    var(--mf-orange);

  font-size:
    6px;

  font-weight:
    800;

}


.mf-dashboard-question strong {

  display:
    block;

  margin-top:
    3px;

  color:
    var(--mf-white);

  font-size:
    9px;

  line-height:
    1.35;

}


.mf-dashboard-question div span {

  display:
    block;

  margin-top:
    3px;

  color:
    rgba(255,255,255,.36);

  font-size:
    7px;

}


.mf-dashboard-question button {

  width:
    29px;

  height:
    29px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  background:
    rgba(249,101,13,.12);

  color:
    var(--mf-white);

  font-size:
    12px;

  cursor:
    pointer;

  transition:
    .2s ease;

}


.mf-dashboard-question button:hover {

  background:
    var(--mf-orange);

  transform:
    scale(1.05);

}


.mf-dashboard-answer {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    7px;

  padding:
    9px;

  border-radius:
    9px;

  background:
    rgba(249,101,13,.05);

}


.mf-dashboard-answer > span {

  width:
    22px;

  height:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  color:
    var(--mf-orange);

  background:
    rgba(249,101,13,.12);

  font-size:
    8px;

}


.mf-dashboard-answer strong {

  display:
    block;

  color:
    var(--mf-white);

  font-size:
    8px;

}


.mf-dashboard-answer small {

  display:
    block;

  margin-top:
    3px;

  color:
    rgba(255,255,255,.35);

  font-size:
    6px;

}


.mf-dashboard-progress {

  margin-top:
    16px;

}


.mf-dashboard-progress > div:first-child {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    7px;

  color:
    rgba(255,255,255,.42);

  font-size:
    8px;

}


.mf-dashboard-progress strong {

  color:
    var(--mf-orange);

}


.mf-dashboard-progress-bar {

  width:
    100%;

  height:
    6px;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    rgba(255,255,255,.08);

}


.mf-dashboard-progress-bar span {

  display:
    block;

  width:
    82%;

  height:
    100%;

  border-radius:
    20px;

  background:
    linear-gradient(
      90deg,
      var(--mf-orange),
      #ff9a61
    );

}


.mf-dashboard-skills {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    6px;

  margin-top:
    14px;

}


.mf-dashboard-skills > div {

  min-width:
    0;

  padding:
    9px 4px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);

  text-align:
    center;

}


.mf-dashboard-skills span {

  display:
    block;

  margin-bottom:
    4px;

}


.mf-dashboard-skills strong {

  display:
    block;

  color:
    var(--mf-white);

  font-size:
    6.5px;

}


.mf-dashboard-skills small {

  display:
    block;

  margin-top:
    2px;

  color:
    rgba(255,255,255,.34);

  font-size:
    5.5px;

}


.mf-dashboard-message {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    12px;

  padding:
    9px;

  border:
    1px solid
    rgba(249,101,13,.12);

  border-radius:
    10px;

  background:
    rgba(249,101,13,.045);

}


.mf-dashboard-message > span {

  width:
    27px;

  height:
    27px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    8px;

  background:
    rgba(249,101,13,.11);

  color:
    var(--mf-orange);

}


.mf-dashboard-message strong {

  display:
    block;

  color:
    var(--mf-white);

  font-size:
    7px;

}


.mf-dashboard-message small {

  display:
    block;

  margin-top:
    2px;

  color:
    rgba(255,255,255,.32);

  font-size:
    6px;

}


.mf-home-floating {

  position:
    absolute;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    11px;

  background:
    rgba(18,18,18,.80);

  box-shadow:
    0 17px 40px
    rgba(0,0,0,.28);

  backdrop-filter:
    blur(10px);

}


.mf-home-floating > span {

  width:
    29px;

  height:
    29px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    8px;

  background:
    rgba(249,101,13,.10);

}


.mf-home-floating strong {

  display:
    block;

  color:
    var(--mf-white);

  font-size:
    8px;

}


.mf-home-floating small {

  display:
    block;

  margin-top:
    2px;

  color:
    rgba(255,255,255,.34);

  font-size:
    6px;

}


.mf-home-floating-top {

  top:
    48px;

  right:
    -10px;

  animation:
    mfHomeSmallFloat
    4s
    ease-in-out
    infinite;

}


.mf-home-floating-bottom {

  bottom:
    48px;

  left:
    -14px;

  animation:
    mfHomeSmallFloat
    5s
    ease-in-out
    infinite reverse;

}


.mf-home-scroll {

  position:
    absolute;

  left:
    50%;

  bottom:
    20px;

  z-index:
    5;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    6px;

  transform:
    translateX(-50%);

  color:
    rgba(255,255,255,.28);

}


.mf-home-scroll span {

  position:
    relative;

  width:
    20px;

  height:
    30px;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius:
    20px;

}


.mf-home-scroll span::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    6px;

  width:
    4px;

  height:
    7px;

  transform:
    translateX(-50%);

  border-radius:
    5px;

  background:
    var(--mf-orange);

  animation:
    mfHomeScroll
    1.7s
    ease-in-out
    infinite;

}


.mf-home-scroll small {

  font-size:
    6px;

  letter-spacing:
    1px;

}



/* =========================================================
   COMPTEURS
========================================================= */

.mf-stats-section {

  padding:
    55px 0;

  background:
    var(--mf-white);

}


.mf-stat-item {

  min-height:
    100%;

  text-align:
    center;

}


.mf-stat-item .purecounter {

  display:
    block;

  color:
    var(--mf-orange);

  font-family:
    var(--mf-heading);

  font-size:
    42px;

  line-height:
    1;

  font-weight:
    800;

}


.mf-stat-item p {

  margin:
    9px 0 0;

  color:
    #222222;

  font-size:
    14px;

  font-weight:
    700;

}



/* =========================================================
   TITRES COMMUNS
========================================================= */

.mf-section-header {

  max-width:
    760px;

  margin:
    0 auto 42px;

  text-align:
    center;

}


.mf-section-header > span {

  display:
    block;

  margin-bottom:
    9px;

  color:
    var(--mf-orange);

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    1px;

}


.mf-section-header h2 {

  margin:
    0;

  color:
    #111111;

  font-family:
    var(--mf-heading);

  font-size:
    clamp(
      32px,
      4.5vw,
      48px
    );

  line-height:
    1.1;

  font-weight:
    800;

  letter-spacing:
    -1.3px;

}


.mf-section-header h2 strong {

  display:
    block;

  color:
    var(--mf-orange);

}


.mf-section-header p {

  max-width:
    680px;

  margin:
    15px auto 0;

  color:
    var(--mf-muted);

  font-size:
    14px;

  line-height:
    1.7;

}



/* =========================================================
   NOS LANGUES
========================================================= */

.mf-languages-section {

  position:
    relative;

  padding:
    80px 0;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fafafa 100%
    );

}


.mf-language-card {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    var(--mf-border);

  border-radius:
    18px;

  background:
    var(--mf-white);

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.06);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}


.mf-language-card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(249,101,13,.25);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.10);

}


.mf-language-number {

  position:
    absolute;

  top:
    14px;

  right:
    15px;

  z-index:
    3;

  color:
    rgba(255,255,255,.96);

  font-family:
    var(--mf-heading);

  font-size:
    34px;

  line-height:
    1;

  font-weight:
    900;

  text-shadow:
    0 2px 9px
    rgba(0,0,0,.50);

}


.mf-language-image {

  position:
    relative;

  width:
    100%;

  height:
    245px;

  flex-shrink:
    0;

  overflow:
    hidden;

  background:
    #111111;

}


.mf-language-image img {

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  object-fit:
    cover !important;

  object-position:
    center center;

  opacity:
    1 !important;

  visibility:
    visible !important;

  transition:
    transform .5s ease;

}


.mf-language-card:hover
.mf-language-image img {

  transform:
    scale(1.045);

}


.mf-language-card-content {

  padding:
    19px 20px 0;

}


.mf-language-card-content > span {

  display:
    block;

  margin-bottom:
    6px;

  color:
    var(--mf-orange);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    1px;

}


.mf-language-card-content h3 {

  margin:
    0;

  color:
    #111111;

  font-family:
    var(--mf-heading);

  font-size:
    24px;

  line-height:
    1.22;

  font-weight:
    800;

}


.mf-language-card-content p {

  margin:
    10px 0 0;

  color:
    var(--mf-muted);

  font-size:
    13px;

  line-height:
    1.65;

}


.mf-language-tags {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    6px;

  padding:
    0 20px;

  margin-top:
    14px;

}


.mf-language-tags span {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    7px 8px;

  border:
    1px solid
    #ededed;

  border-radius:
    7px;

  background:
    #f7f7f7;

  color:
    #555555;

  font-size:
    8px;

  line-height:
    1.2;

  font-weight:
    700;

}


.mf-language-link {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    calc(100% - 40px);

  margin:
    16px 20px 18px;

  padding:
    12px 14px;

  border:
    0;

  border-radius:
    8px;

  background:
    #111111;

  color:
    var(--mf-white);

  font-family:
    var(--mf-heading);

  font-size:
    10px;

  font-weight:
    800;

  text-decoration:
    none;

}


.mf-language-link i {

  color:
    var(--mf-orange);

  font-size:
    16px;

  transition:
    transform .25s ease,
    color .25s ease;

}


.mf-language-link:hover {

  color:
    var(--mf-white);

  background:
    var(--mf-orange);

}


.mf-language-link:hover i {

  color:
    var(--mf-white);

  transform:
    translateX(3px);

}



/* =========================================================
   TÉMOIGNAGES
========================================================= */

.mf-testimonials-section {

  padding:
    85px 0;

  background:
    var(--mf-white);

}


.mf-testimonials-wrapper {

  position:
    relative;

  width:
    100%;

  max-width:
    900px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.mf-testimonials-slider {

  width:
    100%;

  max-width:
    720px;

}


.mf-testimonial-card {

  display:
    none;

  width:
    100%;

  padding:
    40px;

  border:
    1px solid
    #ededed;

  border-radius:
    18px;

  background:
    var(--mf-white);

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.07);

  text-align:
    center;

  animation:
    mfTestimonialFade
    .45s
    ease;

}


.mf-testimonial-card.active {

  display:
    block;

}


.mf-testimonial-stars {

  margin-bottom:
    17px;

  color:
    var(--mf-orange);

  font-size:
    23px;

  line-height:
    1;

  letter-spacing:
    3px;

}


.mf-testimonial-card > p {

  max-width:
    620px;

  margin:
    0 auto 26px;

  color:
    #444444;

  font-size:
    16px;

  line-height:
    1.8;

  font-style:
    italic;

}


.mf-testimonial-author {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

}


.mf-testimonial-author > div {

  width:
    48px;

  height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--mf-orange);

  color:
    var(--mf-white);

  font-size:
    18px;

  font-weight:
    800;

}


.mf-testimonial-author section {

  text-align:
    left;

}


.mf-testimonial-author strong {

  display:
    block;

  color:
    #111111;

  font-family:
    var(--mf-heading);

  font-size:
    15px;

  font-weight:
    800;

}


.mf-testimonial-author span {

  display:
    block;

  margin-top:
    3px;

  color:
    #888888;

  font-size:
    10px;

}


.mf-testimonial-arrow {

  position:
    absolute;

  top:
    50%;

  z-index:
    2;

  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  transform:
    translateY(-50%);

  border:
    1px solid
    #ededed;

  border-radius:
    50%;

  background:
    var(--mf-white);

  color:
    var(--mf-orange);

  font-size:
    15px;

  cursor:
    pointer;

  box-shadow:
    0 6px 18px
    rgba(0,0,0,.08);

  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease;

}


.mf-testimonial-arrow:hover {

  transform:
    translateY(-50%)
    scale(1.05);

  background:
    var(--mf-orange);

  color:
    var(--mf-white);

}


.mf-testimonial-prev {

  left:
    0;

}


.mf-testimonial-next {

  right:
    0;

}


.mf-testimonial-dots {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  margin-top:
    22px;

}


.mf-testimonial-dots button {

  width:
    9px;

  height:
    9px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    #d5d5d5;

  cursor:
    pointer;

  transition:
    width .25s ease,
    background .25s ease;

}


.mf-testimonial-dots button.active {

  width:
    25px;

  border-radius:
    20px;

  background:
    var(--mf-orange);

}



/* =========================================================
   FONCTIONNALITÉS
========================================================= */

.mf-features-section {

  padding:
    80px 0;

  background:
    var(--mf-light);

}


.mf-feature-card {

  width:
    100%;

  height:
    100%;

  padding:
    30px;

  border:
    1px solid
    var(--mf-border);

  border-radius:
    16px;

  background:
    var(--mf-white);

  text-align:
    center;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.05);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.mf-feature-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(249,101,13,.18);

  box-shadow:
    0 18px 38px
    rgba(0,0,0,.09);

}


.mf-feature-icon {

  width:
    62px;

  height:
    62px;

  margin:
    0 auto 17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    16px;

  background:
    var(--mf-orange-light);

  color:
    var(--mf-orange);

  font-size:
    24px;

}


.mf-feature-card h3 {

  margin:
    0;

  color:
    #111111;

  font-family:
    var(--mf-heading);

  font-size:
    22px;

  line-height:
    1.25;

  font-weight:
    800;

}


.mf-feature-card p {

  margin:
    11px 0 0;

  color:
    var(--mf-muted);

  font-size:
    13px;

  line-height:
    1.7;

}



/* =========================================================
   FOOTER
========================================================= */

.simple-footer {

  padding:
    25px 15px;

  background:
    var(--mf-black);

  text-align:
    center;

}


.simple-footer p {

  margin:
    0;

  color:
    rgba(255,255,255,.48);

  font-size:
    12px;

}


.simple-footer strong {

  color:
    var(--mf-white);

}



/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes mfHomeGlow {

  0%,
  100% {

    transform:
      scale(1);

  }

  50% {

    transform:
      scale(1.12);

  }

}


@keyframes mfHomePulse {

  0%,
  100% {

    opacity:
      1;

    transform:
      scale(1);

  }

  50% {

    opacity:
      .65;

    transform:
      scale(.85);

  }

}


@keyframes mfHomeFloat {

  0%,
  100% {

    transform:
      perspective(1000px)
      rotateY(-4deg)
      translateY(0);

  }

  50% {

    transform:
      perspective(1000px)
      rotateY(-4deg)
      translateY(-10px);

  }

}


@keyframes mfHomeSmallFloat {

  0%,
  100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-7px);

  }

}


@keyframes mfHomeRotate {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}


@keyframes mfHomeRotateReverse {

  from {

    transform:
      rotate(360deg);

  }

  to {

    transform:
      rotate(0deg);

  }

}


@keyframes mfHomeScroll {

  0% {

    opacity:
      0;

    transform:
      translateX(-50%)
      translateY(0);

  }

  30% {

    opacity:
      1;

  }

  70% {

    opacity:
      1;

  }

  100% {

    opacity:
      0;

    transform:
      translateX(-50%)
      translateY(12px);

  }

}


@keyframes mfTestimonialFade {

  from {

    opacity:
      0;

    transform:
      translateY(8px);

  }

  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}



/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 991px) {


  /* HERO */

  .mf-home-hero {

    min-height:
      920px;

    padding:
      90px 20px 75px;

  }


  .mf-home-hero-content {

    text-align:
      center;

  }


  .mf-home-badge {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .mf-home-description {

    margin-left:
      auto;

    margin-right:
      auto;

  }


  .mf-home-actions {

    justify-content:
      center;

  }


  .mf-home-language-list {

    justify-content:
      center;

  }


  .mf-home-points {

    justify-content:
      center;

  }


  .mf-home-visual {

    min-height:
      520px;

    margin-top:
      35px;

  }


  /* LANGUES */

  .mf-language-image {

    height:
      230px;

  }


  /* TÉMOIGNAGES */

  .mf-testimonial-prev {

    left:
      10px;

  }


  .mf-testimonial-next {

    right:
      10px;

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {


  /* HERO */

  .mf-home-hero {

    min-height:
      auto;

    padding:
      70px 15px 65px;

  }


  .mf-home-hero-content h1 {

    font-size:
      38px;

    line-height:
      1.08;

    letter-spacing:
      -1.2px;

  }


  .mf-home-description {

    font-size:
      14px;

    line-height:
      1.7;

  }


  .mf-home-actions {

    flex-direction:
      column;

    gap:
      9px;

  }


  .mf-home-btn {

    width:
      100%;

    min-height:
      52px;

  }


  .mf-home-language-list {

    justify-content:
      center;

  }


  .mf-home-points {

    flex-direction:
      column;

    align-items:
      center;

    gap:
      9px;

  }


  .mf-home-visual {

    min-height:
      450px;

    margin-top:
      18px;

  }


  .mf-home-dashboard {

    width:
      100%;

    max-width:
      100%;

    padding:
      19px;

    border-radius:
      20px;

    transform:
      none;

    animation:
      none;

  }


  .mf-home-dashboard-header h3 {

    font-size:
      19px;

  }


  .mf-home-dashboard-icon {

    width:
      40px;

    height:
      40px;

  }


  .mf-home-orbit-1 {

    width:
      320px;

    height:
      320px;

  }


  .mf-home-orbit-2 {

    width:
      255px;

    height:
      255px;

  }


  .mf-home-floating {

    max-width:
      165px;

    padding:
      9px 10px;

  }


  .mf-home-floating-top {

    top:
      0;

    right:
      0;

    transform:
      scale(.78);

    transform-origin:
      right center;

  }


  .mf-home-floating-bottom {

    bottom:
      0;

    left:
      0;

    transform:
      scale(.78);

    transform-origin:
      left center;

  }


  .mf-home-scroll {

    display:
      none;

  }


  /* COMPTEURS */

  .mf-stats-section {

    padding:
      45px 15px;

  }


  .mf-stat-item .purecounter {

    font-size:
      36px;

  }


  .mf-stat-item p {

    font-size:
      13px;

  }


  /* SECTIONS */

  .mf-languages-section,
  .mf-testimonials-section,
  .mf-features-section {

    padding:
      60px 15px;

  }


  .mf-section-header {

    margin-bottom:
      30px;

  }


  .mf-section-header > span {

    font-size:
      10px;

  }


  .mf-section-header h2 {

    font-size:
      30px;

    line-height:
      1.1;

  }


  .mf-section-header p {

    font-size:
      13px;

    line-height:
      1.65;

  }


  /* LANGUES */

  .mf-language-card {

    border-radius:
      16px;

  }


  .mf-language-image {

    height:
      220px;

  }


  .mf-language-number {

    top:
      11px;

    right:
      13px;

    font-size:
      31px;

  }


  .mf-language-card-content {

    padding:
      18px 19px 0;

  }


  .mf-language-card-content > span {

    font-size:
      9px;

  }


  .mf-language-card-content h3 {

    font-size:
      22px;

  }


  .mf-language-card-content p {

    margin-top:
      9px;

    font-size:
      12px;

    line-height:
      1.65;

  }


  .mf-language-tags {

    gap:
      6px;

    padding:
      0 19px;

    margin-top:
      13px;

  }


  .mf-language-tags span {

    padding:
      6px 8px;

    font-size:
      8px;

  }


  .mf-language-link {

    width:
      calc(100% - 38px);

    margin:
      15px 19px 16px;

    padding:
      12px 13px;

    font-size:
      10px;

  }


  /* TÉMOIGNAGES */

  .mf-testimonial-card {

    padding:
      28px 18px;

  }


  .mf-testimonial-stars {

    font-size:
      21px;

    letter-spacing:
      2px;

  }


  .mf-testimonial-card > p {

    font-size:
      14px;

    line-height:
      1.7;

  }


  .mf-testimonial-author > div {

    width:
      44px;

    height:
      44px;

    font-size:
      16px;

  }


  .mf-testimonial-author strong {

    font-size:
      14px;

  }


  .mf-testimonial-author span {

    font-size:
      9px;

  }


  .mf-testimonial-arrow {

    width:
      36px;

    height:
      36px;

    font-size:
      13px;

  }


  .mf-testimonial-prev {

    left:
      -3px;

  }


  .mf-testimonial-next {

    right:
      -3px;

  }


  /* FONCTIONNALITÉS */

  .mf-feature-card {

    padding:
      24px 20px;

  }


  .mf-feature-icon {

    width:
      56px;

    height:
      56px;

    font-size:
      21px;

  }


  .mf-feature-card h3 {

    font-size:
      20px;

  }


  .mf-feature-card p {

    font-size:
      12px;

  }


  /* FOOTER */

  .simple-footer {

    padding:
      22px 15px;

  }


  .simple-footer p {

    font-size:
      11px;

    line-height:
      1.6;

  }

}



/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 420px) {


  .mf-home-hero-content h1 {

    font-size:
      34px;

  }


  .mf-home-badge {

    font-size:
      9px;

    padding:
      7px 11px;

  }


  .mf-home-description {

    font-size:
      13px;

  }


  .mf-home-language {

    font-size:
      8px;

    padding:
      7px 9px;

  }


  .mf-home-dashboard {

    padding:
      16px;

  }


  .mf-home-dashboard-header h3 {

    font-size:
      17px;

  }


  .mf-dashboard-language strong {

    font-size:
      7px;

  }


  .mf-dashboard-question strong {

    font-size:
      8px;

  }


  .mf-dashboard-question div span {

    font-size:
      6px;

  }


  .mf-language-image {

    height:
      205px;

  }


  .mf-language-card-content h3 {

    font-size:
      20px;

  }


  .mf-language-card-content p {

    font-size:
      11.5px;

  }


  .mf-testimonial-arrow {

    width:
      32px;

    height:
      32px;

  }

}



/* =========================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}

/* Colle ici tout le code CSS que je t'ai envoyé */

/*==========================
 NOS ENGAGEMENTS
==========================*/

.services-section{

    padding:90px 8%;
    background:#f7f9fc;

}

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title span{

    color:#007bff;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;

}

.section-title h2{

    font-size:40px;
    margin-top:10px;
    color:#222;
    font-weight:700;

}

.section-title p{

    max-width:650px;
    margin:20px auto;
    color:#777;
    line-height:28px;

}

/* Grid */

.services-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;

}

/* Card */

.service-box{

    background:#fff;
    padding:40px 30px;
    border-radius:18px;
    text-align:center;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.service-box:hover{

    transform:translateY(-12px);
    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.service-icon{

    width:85px;
    height:85px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6efd,#00b4ff);
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;

}

.service-icon i{

    font-size:34px;
    color:#fff;

}

.service-box h3{

    font-size:24px;
    margin-bottom:15px;
    color:#222;

}

.service-box p{

    color:#666;
    line-height:28px;

}

/* Responsive */

@media(max-width:768px){

.section-title h2{

font-size:30px;

}

.services-section{

padding:70px 20px;

}

}

.sitename .black-text {
    color: #000000;
}

.sitename .orange-text {
    color: #F9650D;
}

.btn-getstarted {
    background-color: #F9650D;
    color: #000000;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
}

.btn-getstarted:hover {
    background-color: #000000;
    color: #F9650D;
}


.navmenu a.active {
    color: #F9650D !important;
}



/* ===========================
   STYLE DU BOUTON D'ACTION
============================ */

.btn-action {

    /* Permet au lien de prendre la forme d'un bouton */
    display: inline-block;

    /* Couleur de fond du bouton */
    background-color: #ff8c00;

    /* Couleur du texte */
    color: #ffffff;

    /* Taille du texte */
    font-size: 16px;

    /* Texte en gras */
    font-weight: 600;

    /* Espace intérieur :
       12px = hauteur du bouton
       30px = largeur du bouton */
    padding: 12px 30px;

    /* Arrondir les coins */
    border-radius: 30px;

    /* Supprimer le soulignement du lien */
    text-decoration: none;

    /* Alignement du texte */
    text-align: center;

    /* Animation lors du survol */
    transition: all 0.3s ease;

    /* Curseur en forme de main */
    cursor: pointer;
}


/* ===========================
   EFFET AU SURVOL
============================ */

.btn-action:hover {

    /* Nouvelle couleur au passage de la souris */
    background-color: #e67e00;

    /* Petite élévation du bouton */
    transform: translateY(-3px);

    /* Ombre du bouton */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);

    /* Garde le texte blanc */
    color: #ffffff;
}


/* ===========================
   VERSION MOBILE
============================ */

@media (max-width: 768px) {

    .btn-action {

        /* Bouton légèrement plus petit sur téléphone */
        font-size: 14px;

        padding: 10px 22px;
    }
}

/* ===========================
   STYLE PETIT FOOTER
============================ */

.simple-footer {

    /* Couleur de fond */
    background: #111827;

    /* Couleur du texte */
    color: #ffffff;

    /* Hauteur du footer */
    padding: 20px 0;

    /* Centre le texte */
    text-align: center;

    /* Taille du texte */
    font-size: 14px;

}


/* Style du nom de l'entreprise */

.simple-footer strong {

    color: #ff8c00;

}

/* Classe virtuelle */

.virtual-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


.virtual-card .icon {
    font-size: 45px;
    color: #F9650D;
    margin-bottom: 20px;
}


.virtual-card h3 {
    color: #000000;
    font-size: 28px;
    font-weight: 700;
}


.virtual-card p {
    color: #555;
}


.virtual-card .info {
    margin: 25px 0;
    text-align: left;
}


.virtual-card .info div {
    margin-bottom: 12px;
}


.virtual-card .info i {
    color: #F9650D;
    margin-right: 10px;
}


.join-btn {
    display: inline-block;
    background: #F9650D;
    color: #000000;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 700;
    text-decoration: none;
}


.join-btn:hover {
    background: #000000;
    color: #F9650D;
}



html {
  scroll-behavior: smooth;
}







<!-- =========================================================
     STATISTIQUES
========================================================= -->

<section
  id="counts"
  class="mf-about-stats"
>

  <div class="container">

    <div class="mf-about-stats-grid">


      <!-- APPRENANTS -->

      <div
        class="mf-about-stat"
        data-aos="fade-up"
        data-aos-delay="100"
      >

        <div class="mf-about-stat-icon">

          <i class="bi bi-people-fill"></i>

        </div>

        <strong>

          <span
            data-purecounter-start="0"
            data-purecounter-end="1000"
            data-purecounter-duration="1"
            class="purecounter"
          >
            0
          </span>+

        </strong>

        <p>
          Apprenants
        </p>

      </div>



      <!-- FORMATIONS -->

      <div
        class="mf-about-stat"
        data-aos="fade-up"
        data-aos-delay="150"
      >

        <div class="mf-about-stat-icon">

          <i class="bi bi-mortarboard-fill"></i>

        </div>

        <strong>

          <span
            data-purecounter-start="0"
            data-purecounter-end="10"
            data-purecounter-duration="1"
            class="purecounter"
          >
            0
          </span>+

        </strong>

        <p>
          Formations
        </p>

      </div>



      <!-- SESSIONS -->

      <div
        class="mf-about-stat"
        data-aos="fade-up"
        data-aos-delay="200"
      >

        <div class="mf-about-stat-icon">

          <i class="bi bi-calendar-check-fill"></i>

        </div>

        <strong>

          <span
            data-purecounter-start="0"
            data-purecounter-end="42"
            data-purecounter-duration="1"
            class="purecounter"
          >
            0
          </span>+

        </strong>

        <p>
          Sessions
        </p>

      </div>



      <!-- FORMATEURS -->

      <div
        class="mf-about-stat"
        data-aos="fade-up"
        data-aos-delay="250"
      >

        <div class="mf-about-stat-icon">

          <i class="bi bi-person-video3"></i>

        </div>

        <strong>

          <span
            data-purecounter-start="0"
            data-purecounter-end="24"
            data-purecounter-duration="1"
            class="purecounter"
          >
            0
          </span>+

        </strong>

        <p>
          Formateurs
        </p>

      </div>

    </div>

  </div>

</section>




/* =========================================================
   STATISTIQUES — MF ACADEMY
   RESPONSIVE
========================================================= */

.mf-about-stats {

  width: 100%;

  padding: 55px 0;

  background: #ffffff;

}


.mf-about-stats .container {

  width: 100%;

}


/* =========================================================
   GRILLE
========================================================= */

.mf-about-stats-grid {

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;

  width: 100%;

}


/* =========================================================
   CARTE STATISTIQUE
========================================================= */

.mf-about-stat {

  min-width: 0;

  padding: 30px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: #ffffff;

  border: 1px solid #eeeeee;

  border-radius: 16px;

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;

}


.mf-about-stat:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(249,101,13,.25);

  box-shadow:
    0 15px 35px rgba(0,0,0,.09);

}


/* =========================================================
   ICÔNE
========================================================= */

.mf-about-stat-icon {

  width: 58px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 15px;

  border-radius: 14px;

  background: #fff4ed;

  color: #F9650D;

  font-size: 24px;

}


/* =========================================================
   CHIFFRE
========================================================= */

.mf-about-stat > strong {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 2px;

  color: #111111;

  font-family:
    "Poppins",
    Arial,
    sans-serif;

  font-size: 38px;

  line-height: 1;

  font-weight: 800;

}


.mf-about-stat .purecounter {

  color: #F9650D;

}


/* =========================================================
   TEXTE
========================================================= */

.mf-about-stat p {

  margin: 9px 0 0;

  color: #555555;

  font-family:
    "Open Sans",
    Arial,
    sans-serif;

  font-size: 14px;

  line-height: 1.4;

  font-weight: 600;

}


/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 991px) {

  .mf-about-stats {

    padding: 45px 20px;

  }


  .mf-about-stats-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 16px;

  }


  .mf-about-stat {

    padding: 26px 18px;

  }


  .mf-about-stat-icon {

    width: 54px;

    height: 54px;

    font-size: 22px;

  }


  .mf-about-stat > strong {

    font-size: 34px;

  }


  .mf-about-stat p {

    font-size: 13px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

  .mf-about-stats {

    padding: 40px 15px;

  }


  .mf-about-stats-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 12px;

  }


  .mf-about-stat {

    min-height: 150px;

    padding: 22px 10px;

    border-radius: 13px;

  }


  .mf-about-stat-icon {

    width: 46px;

    height: 46px;

    margin-bottom: 12px;

    border-radius: 12px;

    font-size: 19px;

  }


  .mf-about-stat > strong {

    font-size: 29px;

  }


  .mf-about-stat p {

    margin-top: 7px;

    font-size: 11px;

  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width: 360px) {

  .mf-about-stats {

    padding:
      35px 10px;

  }


  .mf-about-stats-grid {

    gap:
      9px;

  }


  .mf-about-stat {

    min-height:
      140px;

    padding:
      18px 7px;

  }


  .mf-about-stat-icon {

    width:
      42px;

    height:
      42px;

    font-size:
      17px;

  }


  .mf-about-stat > strong {

    font-size:
      25px;

  }


  .mf-about-stat p {

    font-size:
      10px;

  }

}