/* ==========================================================================
   L'Imprimerie — responsive.css
   --------------------------------------------------------------------------
   Toutes les media queries du thème, regroupées par breakpoint.
   À charger APRÈS style.css (voir functions.php).

   Ordre : min-width croissant, puis max-width décroissant
   → le breakpoint le plus petit l'emporte toujours (desktop-first).

   SOMMAIRE
     01. (min-width: 1300px)  Grands écrans
     02. (min-width: 1399px)  Grands écrans
     03. (min-width: 1400px)  Grands écrans (XXL)
     04. (min-width: 1501px)  Très grands écrans
     05. (min-width: 1880px)  Très grands écrans
     06. (min-width: 1922px)  Écrans 2K et +
     07. (max-width: 1879px)  Écrans larges
     08. (max-width: 1600px)  Écrans larges
     09. (max-width: 1500px)  Laptop large
     10. (max-width: 1399px)  Laptop (XXL → XL)
     11. (max-width: 1299px)  Laptop
     12. (max-width: 1200px)  Laptop
     13. (max-width: 1199px)  Tablette paysage (XL → LG)
     14. (max-width: 991px)   Tablette (LG → MD)
     15. (max-width: 767px)   Mobile paysage (MD → SM)
     16. (max-width: 575px)   Mobile (SM → XS)
     17. (max-width: 400px)   Petit mobile
     18. (max-width: 390px)   Petit mobile
     19. (max-width: 375px)   Petit mobile
     20. (max-width: 330px)   Très petit mobile
   ========================================================================== */

/* ==========================================================================
   01. (min-width: 1300px) — Grands écrans
   ==========================================================================  */

@media (min-width: 1300px) {
  /* --- 2.1 Container --- */
  .container2.px-0,
  .container-xxl.px-0,
  .container-xl.px-0,
  .container-lg.px-0,
  .container-md.px-0,
  .container-sm.px-0,
  .container.px-0 {
    max-width: var(--main-container);
  }

  .container2 {
    max-width: 1330px;
  }
}

/* ==========================================================================
   02. (min-width: 1399px) — Grands écrans
   ==========================================================================  */

@media (min-width: 1399px) {
  /* --- 2.2 Grid --- */
  .gx-30 {
    --bs-gutter-x: 30px;
  }

  .gx-25 {
    --bs-gutter-x: 25px;
  }

  .gx-40 {
    --bs-gutter-x: 40px;
  }
}

/* ==========================================================================
   03. (min-width: 1400px) — Grands écrans (XXL)
   ==========================================================================  */

@media (min-width: 1400px) {
  /* --- 2.1 Container --- */
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: calc(var(--main-container) + var(--container-gutters));
  }
}

/* ==========================================================================
   04. (min-width: 1501px) — Très grands écrans
   ==========================================================================  */

@media (min-width: 1501px) {
  /* --- 2.1 Container --- */
  .container3 {
    --main-container: 1440px;
  }
}

/* ==========================================================================
   05. (min-width: 1880px) — Très grands écrans
   ==========================================================================  */

@media (min-width: 1880px) {
  /* --- 2.1 Container --- */
  .custom-container {
    max-width: 1824px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   06. (min-width: 1922px) — Écrans 2K et +
   ==========================================================================  */

@media (min-width: 1922px) {
  /* --- 4.2 Header --- */
  .header-layout2 .menu-area {
    max-width: 1848px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   07. (max-width: 1879px) — Écrans larges
   ==========================================================================  */

@media (max-width: 1879px) {
  /* --- 2.1 Container --- */
  .custom-container {
    margin: 0 48px;
  }
}

/* ==========================================================================
   08. (max-width: 1600px) — Écrans larges
   ==========================================================================  */

@media (max-width: 1600px) {
  /* --- 2.1 Container --- */
  .container-fluid.px-0 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .container-fluid.px-0 .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   09. (max-width: 1500px) — Laptop large
   ==========================================================================  */

@media (max-width: 1500px) {
  /* --- 4.5 Hero Area --- */
  .hero-style5 .hero-title {
    font-size: 120px;
    letter-spacing: normal;
  }

  /* --- 4.12 Video --- */
  .jarallax {
    height: 600px;
  }
  .video-area-1 .video-hero {
    height: 600px;
  }

  .video-area-1 .video-bg iframe {
    width: max(100%, calc(600px * 16 / 9));
  }
}

/* ==========================================================================
   10. (max-width: 1399px) — Laptop (XXL → XL)
   ==========================================================================  */

@media (max-width: 1399px) {
  /* --- 1.2 Typography --- */
  .h1,
  h1 {
    font-size: 48px;
  }

  /* --- 2.1 Container --- */
  :root {
    --main-container: 1250px;
  }
  .container2 {
    max-width: 1140px;
  }

  /* --- 2.2 Grid --- */
  .gx-60 {
    --bs-gutter-x: 40px;
  }
  .gx-90 {
    --bs-gutter-x: 24px;
  }

  /* --- 3.3 Titles --- */
  .sec-title.style3 {
    font-size: 100px;
  }
  .sec-title {
    font-size: 45px;
    line-height: 1.2;
  }

  /* --- 4.2 Header --- */
  .header-button {
    gap: 20px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 100px;
  }
  .hero-style3 .hero-title {
    font-size: 80px;
  }

  .hero-style5 .hero-year-tag {
    margin-top: 80px;
  }
  .hero-style5 .hero-title {
    font-size: 80px;
  }

  /* --- 4.8 Popup Side Menu --- */
  .sidemenu-wrapper .sidemenu-content {
    padding: 100px 80px;
  }

  /* --- 4.9 Blog --- */
  .blog-card.style2 .blog-content .blog-title {
    font-size: 22px;
  }

  .blog-card.style2 .blog-content {
    padding: 30px 26px;
  }
  .blog-grid .blog-content {
    padding: 40px 30px;
  }

  .blog-grid .blog-img {
    min-width: 252px;
  }

  .blog-grid .link-btn {
    margin-top: 30px;
  }
  .blog-card.style4 .blog-title {
    font-size: 22px;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog-post-content .title {
    font-size: 40px;
  }
}

/* ==========================================================================
   11. (max-width: 1299px) — Laptop
   ==========================================================================  */

@media (max-width: 1299px) {
  /* --- 3.3 Titles --- */
  .sec-title.style3 {
    font-size: 80px;
  }

  /* --- 4.1 Widget --- */
  .widget-about .about-text {
    font-size: 16px;
  }

  /* --- 4.3 Footer --- */
  .footer-layout5 .footer-top .footer-top-title {
    font-size: 70px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 90px;
  }

  .hero-text {
    font-size: 20px;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog__sidebar {
    margin-left: 0;
  }
}

/* ==========================================================================
   12. (max-width: 1200px) — Laptop
   ==========================================================================  */

@media (max-width: 1200px) {
  /* --- 2.4 Slick Slider --- */
  .slick-arrow {
    --pos-x: 42px;
  }
}

/* ==========================================================================
   13. (max-width: 1199px) — Tablette paysage (XL → LG)
   ==========================================================================  */

@media (max-width: 1199px) {
  /* --- 1.2 Typography --- */
  .h1,
  h1 {
    font-size: 44px;
    line-height: 1.3;
  }

  .h2,
  h2 {
    font-size: 40px;
    line-height: 1.25;
  }

  .h3,
  h3 {
    font-size: 30px;
  }

  .h4,
  h4 {
    font-size: 24px;
  }

  .h5,
  h5 {
    font-size: 20px;
  }

  .h6,
  h6 {
    font-size: 16px;
  }

  /* --- 2.1 Container --- */
  .container2 {
    max-width: 960px;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* --- 2.2 Grid --- */
  .gy-80 {
    --bs-gutter-y: 40px;
  }

  /* --- 2.4 Slick Slider --- */
  .slick-arrow {
    --icon-size: 60px;
  }

  /* --- 3.3 Titles --- */
  .title-area,
  .sec-title {
    --section-title-space: 60px;
  }

  .title-area.mb-45,
  .sec-title.mb-45 {
    margin-bottom: 36px;
  }

  .title-area.mb-50,
  .sec-title.mb-50 {
    margin-bottom: 40px;
  }

  /* --- 4.1 Widget --- */
  .widget {
    --widget-padding-y: 30px;
    --widget-padding-x: 30px;
  }

  .widget_title {
    font-size: 22px;
  }
  .footer-widget.widget_meta a,
  .footer-widget.widget_pages a,
  .footer-widget.widget_archive a,
  .footer-widget.widget_categories a,
  .footer-widget.widget_nav_menu a {
    margin-bottom: 16px;
  }

  /* --- 4.2 Header --- */
  .header-button {
    margin-left: 25px;
  }

  /* --- 4.3 Footer --- */
  .footer-layout5 .footer-top .footer-top-title {
    font-size: 60px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 80px;
  }
  .hero-style3 {
    padding: 160px 0 70px;
  }

  .hero-style3 .hero-title {
    font-size: 70px;
  }

  /* --- 4.7 Popup Search --- */
  .popup-search-box form {
    max-width: 600px;
  }

  /* --- 4.9 Blog --- */
  .blog-card .blog-title {
    font-size: 20px;
  }
  .blog-card.style2 .blog-content .blog-title {
    font-size: 18px;
  }

  .blog-card.style2 .blog-meta span,
  .blog-card.style2 .blog-meta a {
    font-size: 16px;
  }
  .blog-grid .blog-img {
    min-width: 302px;
  }

  .blog-grid .link-btn {
    margin-top: 70px;
  }
  .blog-card.style4 .blog-content {
    padding: 0 25px 22px;
  }
  .blog-card.style4 .blog-title {
    font-size: 20px;
  }
  .accordion-card.blog-card-accordion .blog-title {
    font-size: 22px;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog-post-content .title {
    font-size: 32px;
    letter-spacing: normal;
  }
  .blog__inner-wrap .row .col-70 {
    width: 67.5%;
  }
  .blog__inner-wrap .row .col-30 {
    width: 32.5%;
  }
  .blog__details-content>.title {
    font-size: 32px;
  }
  .blog__details-inner-content .title {
    font-size: 26px;
  }
  .blog__details-inner-content p {
    width: 100%;
  }

  /* --- 4.11 Simple Sections --- */
  p.mb-40 {
    margin-bottom: 35px;
  }

  p.mb-45 {
    margin-bottom: 38px;
  }

  /* --- 4.13 Process --- */
  .process-card .process-card-text {
    font-size: 16px;
  }

  /* --- margin Right --- */
  .mt-140 {
    margin-top: 80px;
  }
  .mt-lg-140 {
    margin-top: 100px;
  }
  .mt-90 {
    margin-top: 70px;
  }
}

/* ==========================================================================
   14. (max-width: 991px) — Tablette (LG → MD)
   ==========================================================================  */

@media (max-width: 991px) {
  /* --- 2.1 Container --- */
  .custom-container {
    margin: 0 30px;
  }
  .container2 {
    max-width: 720px;
  }

  /* --- 2.2 Grid --- */
  .gy-50 {
    --bs-gutter-y: 40px;
  }

  /* --- 2.4 Slick Slider --- */
  .slick-dots {
    margin: 40px 0 0 0;
  }

  /* --- 3.3 Titles --- */
  .sec-title.style3 {
    font-size: 60px;
  }
  .title-area,
  .sec-title {
    --section-title-space: 50px;
  }

  .title-area.mb-45,
  .sec-title.mb-45 {
    margin-bottom: 35px;
  }

  .sub-title {
    font-size: 16px;
  }

  /* --- 4.1 Widget --- */
  .sidebar-area {
    padding-top: 40px;
  }

  .widget {
    --widget-padding-y: 40px;
    --widget-padding-x: 40px;
  }

  /* --- 4.2 Header --- */
  .navbar-right {
    position: relative;
    top: 4px;
  }
  .header-layout2 .sticky-wrapper {
    padding: 15px 36px;
  }

  .header-layout2 .sidebar-btn {
    margin: 0;
  }

  /* --- 4.3 Footer --- */
  .widget-area {
    padding: 0px 0 30px;
  }
  .footer-layout5 .footer-top .footer-top-title {
    margin-bottom: 30px;
    font-size: 50px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 70px;
  }
  .hero-style5 .hero-year-tag {
    margin-left: 0;
    margin-top: 60px;
  }

  .hero-5 .circle-btn {
    margin-bottom: 120px;
  }

  /* --- 4.9 Blog --- */
  .accordion-card.blog-card-accordion .accordion-button {
    display: block;
  }
  .accordion-card.blog-card-accordion .blog-date-wrap {
    margin-bottom: 20px;
    display: block;
  }
  .accordion-card.blog-card-accordion .blog-title {
    max-width: none;
  }
  .accordion-card.blog-card-accordion .btn-wrap {
    margin-top: 40px;
  }
  .accordion-card.blog-card-accordion .blog-img {
    margin-left: 0;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog__inner-wrap .row .col-70 {
    width: 100%;
  }
  .blog__inner-wrap .row .col-30 {
    width: 100%;
  }
  .blog__sidebar {
    margin-top: 100px;
  }
  .blog__avatar-wrap {
    margin-top: 80px;
    margin-bottom: 80px;
  }

  /* --- 4.13 Process --- */
  .process-card .process-card-text {
    max-width: none;
    font-size: 18px;
  }

  /* --- margin Right --- */
  .mt-lg-140 {
    margin-top: 0;
  }
  .mt-80 {
    margin-top: 40px;
  }
  .pt-70 {
    padding-top: 40px;
  }
  .mb-80 {
    margin-bottom: 40px;
  }
  .space,
  .space-top {
    padding-top: var(--section-space-mobile);
  }

  .space,
  .space-bottom {
    padding-bottom: var(--section-space-mobile);
  }

  .space-extra,
  .space-extra-top {
    padding-top: calc(var(--section-space-mobile) - 30px);
  }

  .space-extra,
  .space-extra-bottom {
    padding-bottom: calc(var(--section-space-mobile) - 30px);
  }

  .space-top-md-none {
    padding-top: 0;
  }

  .space-extra2,
  .space-extra2-top {
    padding-top: 70px;
  }

  .space-extra2,
  .space-extra2-bottom {
    padding-bottom: 70px;
  }

  .pb-105 {
    padding-bottom: 65px;
  }

  .pt-105 {
    padding-top: 65px;
  }

  /* --- 6.3 BOUTON RÉSERVER — Image reserver.png par-dessus le bouton --- */
  .reserver-img-overlay {
    width: 160px;
    right: -30px;
  }

  /* --- 6.9 Header mobile masqué au scroll (carte) --- */
  .sticky-wrapper {
    transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
    will-change: transform;
  }

  body.hide-main-header .sticky-wrapper {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }

  /* Les onglets remontent en douceur quand la barre disparaît */

  .sticky-menu-nav-wrapper {
    transition: top .45s cubic-bezier(.4, 0, .2, 1);
  }

  body.hide-main-header .sticky-menu-nav-wrapper {
    top: 0;
  }

  /* --- Pagination numérotée (page Événements) --- */
    .sticky-wrapper.header-sticky {
        animation: none;
    }
}

/* ==========================================================================
   15. (max-width: 767px) — Mobile paysage (MD → SM)
   ==========================================================================  */

@media (max-width: 767px) {
  /* --- 1.2 Typography --- */
  .h1,
  h1 {
    font-size: 40px;
  }

  .h2,
  h2 {
    font-size: 34px;
    line-height: 1.3;
  }

  .h3,
  h3 {
    font-size: 26px;
  }

  .h4,
  h4 {
    font-size: 22px;
  }

  .h5,
  h5 {
    font-size: 18px;
  }

  .h6,
  h6 {
    font-size: 16px;
  }

  /* --- 2.1 Container --- */
  .container2 {
    max-width: 540px;
  }

  /* --- 3.2 Buttons --- */
  .play-btn {
    --icon-size: 70px;
    --icon-font-size: 24px;
  }

  .btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 17px 25px;
  }

  /* --- 3.3 Titles --- */
  .sec-title.style2 {
    font-size: 32px;
    letter-spacing: normal;
  }
  .sec-title.style3 {
    font-size: 45px;
  }
  .sec-title {
    font-size: 32px;
  }

  /* --- 4.1 Widget --- */
  .widget_info {
    padding: 0;
  }

  .widget_info .widget_title {
    padding: 24px 30px 19px 28px;
  }

  .widget {
    padding: 30px;
  }

  .widget_banner {
    padding: 0;
  }

  .widget_estimate .content p {
    margin-bottom: 25px;
  }

  .widget_estimate .content h5 {
    margin-bottom: 23px;
  }
  .footer-widget .widget_title {
    margin-bottom: 35px;
  }

  .widget-about .about-text {
    margin-bottom: 20px;
  }

  .widget_event-location {
    padding: 30px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 56px;
  }
  .hero-style3 {
    padding: 140px 0 70px;
  }

  .hero-style3 .hero-title {
    font-size: 50px;
  }

  .hero-style3 .hero-3-thumb {
    margin-top: 18px;
    margin-bottom: 20px;
  }
  .hero-5 .circle-btn {
    margin-bottom: 100px;
  }

  .hero-style5 .hero-title {
    font-size: 56px;
    line-height: 66px;
  }

  /* --- 4.7 Popup Search --- */
  .popup-search-box form {
    width: 80%;
  }

  .popup-search-box form input {
    height: 60px;
  }

  .popup-search-box form button {
    width: 60px;
    line-height: 62px;
    height: 60px;
  }

  /* --- 4.8 Popup Side Menu --- */
  .sidemenu-wrapper .sidemenu-content {
    width: 320px;
    padding: 80px 20px 40px;
  }

  /* --- 4.9 Blog --- */
  .blog-card .blog-img img {
    width: 100%;
  }
  .blog-card.style2 .blog-content .blog-title {
    font-size: 24px;
  }

  .blog-card.style2 .blog-meta span,
  .blog-card.style2 .blog-meta a {
    font-size: 16px;
  }
  .blog-grid .blog-img {
    min-width: 180px;
  }

  .blog-grid .link-btn {
    margin-top: 0;
  }

  .blog-grid .blog-content {
    padding: 30px 30px;
  }

  .blog-grid .blog-title {
    font-size: 20px;
    line-height: 30px;
  }

  .blog-grid-static-wrap .blog-grid-static {
    position: initial;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog__details-content>.title {
    font-size: 28px;
  }
  .blog__details-content .title-two {
    font-size: 26px;
  }
  .blog__details-inner-thumb {
    margin-bottom: 30px;
  }
  .blog__details-bottom .post-share {
    justify-content: flex-start;
    margin-top: 20px;
  }
  .blog__avatar-wrap {
    display: block;
  }

  .blog__avatar-wrap .blog__avatar-img img {
    width: auto;
    margin-bottom: 30px;
  }
  blockquote p {
    font-size: 18px;
  }
  .comments-wrap-title {
    font-size: 26px;
  }
  .comments-wrap .latest-comments .children {
    margin: 0;
  }
  .comments-box {
    flex-wrap: wrap;
    gap: 20px;
  }
  .comment-reply-title {
    font-size: 26px;
  }

  /* --- 4.12 Video --- */
  .jarallax {
    height: 400px;
  }
  .video-area-1 .video-hero {
    height: 400px;
    gap: 20px;
  }

  .video-area-1 .video-bg iframe {
    width: max(100%, calc(400px * 16 / 9));
  }

  /* --- 6.7 Hero : version mobile --- */
  /* On masque les 3 blocs Poêlon / Carte de saison / Animation (images + textes) */

  .hero-slider .row.mt-40 {
    display: none !important;
  }

  /* Bouton "Voir la carte" réduit à 96px */

  .arrow-carte-wrapper {
    width: 96px;
    height: 96px;
    bottom: 24px;
  }

  /* On réduit la flèche centrale pour garder les proportions */

  .arrow-carte-icon {
    width: 40px;
    height: 40px;
  }

  .arrow-carte-icon img {
    width: 100%;
    height: auto;
  }

  /* --- Pagination numérotée (page Événements) --- */
	.footer-wrapper .widget_nav_menu li a {
    display: inline-flex !important;
  }
  /* Tout le texte du footer centré */
  .footer-wrapper,
  .footer-wrapper h2,
  .footer-wrapper h3,
  .footer-wrapper p,
  .footer-wrapper li,
  .footer-wrapper .footer-widget,
  .footer-wrapper .copyright-wrap [class*="col-"] {
    text-align: center !important;
  }

  /* Bouton du bandeau haut */
  .footer-wrapper .footer-top-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Réseaux sociaux */
  .footer-wrapper .social-btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Menus et listes de liens */
  .footer-wrapper .widget_nav_menu ul,
  .footer-wrapper .menu-all-pages-container ul {
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
  }
  .footer-wrapper .menu-all-pages-container.list-column2 ul {
    columns: 1 !important;
    display: block !important;
  }
  .footer-wrapper li,
  .footer-wrapper li a {
    justify-content: center;
  }
  .footer-wrapper li::before {
    display: none; /* retire les puces/flèches décalées, à supprimer si tu veux les garder */
  }

  /* Logo / images centrés */
  .footer-wrapper img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Copyright */
  .footer-wrapper .copyright-wrap .row {
    justify-content: center;
  }
}

/* ==========================================================================
   16. (max-width: 575px) — Mobile (SM → XS)
   ==========================================================================  */

@media (max-width: 575px) {
  /* --- 1.2 Typography --- */
  .h1,
  h1 {
    font-size: 34px;
    line-height: 1.35;
  }

  .h2,
  h2 {
    font-size: 30px;
  }

  /* --- 2.1 Container --- */
  .custom-container {
    margin: 0 12px;
  }

  /* --- 2.2 Grid --- */
  .gx-60 {
    --bs-gutter-x: 1.5rem;
  }

  /* --- 3.2 Buttons --- */
  .scroll-top {
    right: 15px;
    bottom: 15px;
    height: 40px;
    width: 40px;
  }

  .scroll-top:after {
    line-height: 40px;
    font-size: 16px;
    height: 40px;
    width: 40px;
  }

  .btn {
    padding: 15.5px 20px;
    font-size: 12px;
    font-weight: 500;
  }

  .btn.circle-btn {
    height: 120px;
    width: 120px;
    line-height: 120px;
  }

  /* --- 3.3 Titles --- */
  .sec-title {
    letter-spacing: normal;
  }
  .sec-title.style3 {
    font-size: 32px;
  }

  /* --- 4.2 Header --- */
  .sidebar-btn {
    height: 50px;
    width: 50px;
  }
  .header-layout2 .sticky-wrapper {
    padding: 15px 0px;
  }

  /* --- 4.3 Footer --- */
  .footer-layout5 .footer-top .footer-top-title {
    font-size: 40px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 39px;
    letter-spacing: normal;
  }
  .hero-style3 .hero-title {
    font-size: 40px;
  }
  .hero-style5 .hero-year-tag {
    margin-top: 40px;
  }

  /* --- 4.9 Blog --- */
  .blog-card.style2 .blog-content .blog-title {
    font-size: 22px;
  }
  .blog-grid {
    flex-direction: column;
  }

  .blog-grid .blog-content {
    align-self: flex-start;
  }

  .blog-grid .blog-meta span,
  .blog-grid .blog-meta a {
    font-size: 16px;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog-post-thumb img {
    height: 350px;
  }
  .blog-post-content .title {
    font-size: 24px;
  }
  blockquote {
    display: block;
  }

  blockquote .blockquote-icon {
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   17. (max-width: 400px) — Petit mobile
   ==========================================================================  */

@media (max-width: 400px) {
  /* --- 2.5 Mobile Menu --- */
  .mobile-menu-wrapper .mobile-menu-area {
    width: 100%;
    max-width: 270px;
  }
}

/* ==========================================================================
   18. (max-width: 390px) — Petit mobile
   ==========================================================================  */

@media (max-width: 390px) {
  /* --- 3.3 Titles --- */
  .sec-title {
    font-size: 30px;
  }
}

/* ==========================================================================
   19. (max-width: 375px) — Petit mobile
   ==========================================================================  */

@media (max-width: 375px) {
  /* --- 1.2 Typography --- */
  .h1,
  h1 {
    font-size: 32px;
  }

  /* --- 4.1 Widget --- */
  .widget_schedule ul li {
    font-size: 16px;
  }

  .recent-post .post-title {
    font-size: 18px;
  }

  /* --- 4.5 Hero Area --- */
  .hero-title {
    font-size: 34px;
  }
  .hero-style3 .hero-title {
    font-size: 40px;
  }
  .hero-style5 .hero-title {
    font-size: 46px;
    line-height: 56px;
  }

  /* --- 4.9 Blog --- */
  .blog-card.style2 .blog-content .blog-title {
    font-size: 18px;
  }

  .blog-card.style2 .blog-meta span,
  .blog-card.style2 .blog-meta a {
    font-size: 16px;
  }
  .blog-grid .blog-title {
    font-size: 18px;
    line-height: 28px;
  }

  /* --- 4.10 Blog (suite) --- */
  .blog-post-content .title {
    font-size: 20px;
  }
  .blog-post-item-two .blog-post-content .title {
    font-size: 22px;
  }
}

/* ==========================================================================
   20. (max-width: 330px) — Très petit mobile
   ==========================================================================  */

@media (max-width: 330px) {
  /* --- 4.1 Widget --- */
  .recent-post .post-title {
    font-size: 16px;
    line-height: 24px;
  }

  .recent-post .recent-post-meta a {
    font-size: 12px;
  }

  .widget_schedule ul li {
    font-size: 12px;
    padding: 0 15px;
  }
}