/*--------------------------------------------------------------
  OPUX360 — Responsive Fixes & Harmonization
  Corrections complètes pour mobile, tablette et desktop
--------------------------------------------------------------*/

/* ============================================================
   VARIABLES RESPONSIVE
   ============================================================ */
:root {
  --header-height-desktop: 80px;
  --header-height-mobile: 70px;
  --container-padding-mobile: 20px;
  --section-spacing-desktop: 130px;
  --section-spacing-mobile: 80px;
}

/* ============================================================
   HEADER RESPONSIVE FIXES
   ============================================================ */

/* Desktop - Logo sizing */
@media (min-width: 992px) {
  .cs_site_branding img {
    width: auto;
    height: 4.125rem; /* 50px */
    max-width: 11.25rem; /* 180px */
  }
}

/* Tablette (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  .cs_site_branding img {
    width: auto;
    height: 2.625rem; /* 42px */
    max-width: 9.375rem; /* 150px */
  }
  
  .cs_main_header_in {
    padding: 1rem 0;
  }
}

/* Mobile (jusqu'à 767px) */
@media (max-width: 767px) {
  .cs_site_branding img {
    width: auto;
    height: 2.375rem; /* 38px */
    max-width: 8.75rem; /* 140px */
  }
  
  .cs_main_header_in {
    padding: 0.875rem 0;
  }
}

/* Très petits écrans (jusqu'à 575px) */
@media (max-width: 575px) {
  .cs_site_branding img {
    width: auto;
    height: 2rem; /* 32px */
    max-width: 7.5rem; /* 120px */
  }
  
  .cs_main_header_in {
    padding: 0.75rem 0;
    gap: 0.5rem;
  }
  
  .cs_menu_toggle {
    width: 2.5rem; /* 40px */
    height: 2.5rem; /* 40px */
  }
  
  .cs_menu_toggle span {
    width: 1.125rem; /* 18px */
  }
}

/* ============================================================
   HERO SECTION RESPONSIVE
   ============================================================ */

/* Hero - Ajustements généraux */
.cs_hero.cs_style_1 {
  padding: 160px 0 80px;
}

@media (max-width: 991px) {
  .cs_hero.cs_style_1 {
    padding: 130px 0 60px;
  }
  
  .cs_hero_title {
    text-align: center;
  }
  
  .cs_hero_subtitle {
    text-align: center;
  }
  
  .cs_btn_group {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .cs_hero.cs_style_1 {
    padding: 110px 0 50px;
  }
}

@media (max-width: 575px) {
  .cs_hero.cs_style_1 {
    padding: 100px 0 40px;
  }
  
  .cs_hero_title.cs_fs_68 {
    font-size: 32px !important;
    line-height: 1.3em;
  }
  
  .cs_hero_subtitle {
    font-size: 16px;
    line-height: 1.6em;
  }
}

/* Hero image responsive */
@media (max-width: 991px) {
  .cs_hero_thumbnail {
    margin-top: 30px;
    text-align: center;
  }
  
  .cs_hero_thumbnail img {
    max-width: 80%;
    height: auto;
  }
}

@media (max-width: 575px) {
  .cs_hero_thumbnail img {
    max-width: 100%;
  }
}

/* ============================================================
   COUNTER SECTION RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .cs_funfact.cs_style_1 {
    margin-bottom: 30px;
  }
  
  .cs_funfact_number.cs_fs_68 {
    font-size: 48px !important;
  }
  
  .cs_funfact h3.cs_fs_29 {
    font-size: 22px !important;
  }
}

@media (max-width: 575px) {
  .cs_funfact_number.cs_fs_68 {
    font-size: 42px !important;
  }
  
  .cs_funfact h3.cs_fs_29 {
    font-size: 20px !important;
  }
}

/* ============================================================
   FEATURES SECTION RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .cs_iconbox.cs_style_1 {
    margin-bottom: 30px;
  }
  
  .cs_section_title.cs_fs_50 {
    font-size: 36px !important;
  }
  
  .cs_section_text.cs_fs_21 {
    font-size: 18px !important;
  }
}

@media (max-width: 575px) {
  .cs_section_title.cs_fs_50 {
    font-size: 28px !important;
    line-height: 1.3em;
  }
  
  .cs_section_text.cs_fs_21 {
    font-size: 16px !important;
  }
  
  .cs_iconbox_title.cs_fs_29 {
    font-size: 22px !important;
  }
  
  .cs_iconbox_subtitle.cs_fs_18 {
    font-size: 16px !important;
  }
}

/* ============================================================
   CARDS SECTION RESPONSIVE
   ============================================================ */

.cs_card.cs_style_1 {
  padding: 60px 40px;
  margin-bottom: 40px;
}

@media (max-width: 1199px) {
  .cs_card.cs_style_1 {
    padding: 50px 30px;
  }
  
  .cs_card.cs_style_1 .cs_section_title.cs_fs_50 {
    font-size: 38px !important;
  }
}

@media (max-width: 991px) {
  .cs_card.cs_style_1 {
    padding: 40px 25px;
    margin-bottom: 30px;
  }
  
  .cs_card.cs_style_1 .cs_card_thumbnail {
    margin-bottom: 30px;
  }
  
  .cs_card.cs_style_1 .cs_section_title.cs_fs_50 {
    font-size: 32px !important;
    text-align: center;
  }
  
  .cs_card.cs_style_1 .cs_section_text {
    text-align: center;
  }
  
  .cs_card.cs_style_1 .cs_list {
    padding-left: 0;
  }
}

@media (max-width: 575px) {
  .cs_card.cs_style_1 {
    padding: 30px 20px;
  }
  
  .cs_card.cs_style_1 .cs_section_title.cs_fs_50 {
    font-size: 26px !important;
  }
  
  .cs_card.cs_style_1 .cs_list li {
    font-size: 16px !important;
  }
}

/* ============================================================
   SERVICE SECTION RESPONSIVE
   ============================================================ */

.cs_iconbox.cs_style_2 {
  padding: 40px 25px;
  margin-bottom: 24px;
}

@media (max-width: 991px) {
  .cs_iconbox.cs_style_2 {
    padding: 35px 20px;
    text-align: center;
  }
  
  .cs_iconbox.cs_style_2 .cs_iconbox_icon {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575px) {
  .cs_iconbox.cs_style_2 {
    padding: 30px 20px;
  }
  
  .cs_iconbox.cs_style_2 h3.cs_fs_21 {
    font-size: 18px !important;
  }
  
  .cs_iconbox.cs_style_2 p {
    font-size: 15px;
  }
}

/* ============================================================
   PRICING SECTION RESPONSIVE
   ============================================================ */

.cs_pricing_table_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1199px) {
  .cs_pricing_table_wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .cs_pricing_table_wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
    margin: 0 auto;
  }
}

.cs_pricing_table.cs_style_1 {
  padding: 40px 30px;
}

@media (max-width: 991px) {
  .cs_pricing_table.cs_style_1 {
    padding: 35px 25px;
  }
  
  .cs_pricing_table.cs_style_1 h2.cs_fs_32 {
    font-size: 28px !important;
  }
}

@media (max-width: 575px) {
  .cs_pricing_table.cs_style_1 {
    padding: 30px 20px;
  }
  
  .cs_pricing_table.cs_style_1 h2.cs_fs_32 {
    font-size: 24px !important;
  }
  
  .cs_pricing_feature_list li {
    font-size: 15px;
  }
}

/* ============================================================
   FAQ SECTION RESPONSIVE
   ============================================================ */

.cs_accordian {
  margin-bottom: 24px;
  padding: 30px;
}

@media (max-width: 991px) {
  .cs_accordian {
    padding: 25px 20px;
  }
  
  .cs_accordian_head.cs_fs_21 {
    font-size: 18px !important;
    padding-right: 40px;
  }
}

@media (max-width: 575px) {
  .cs_accordian {
    padding: 20px 15px;
    margin-bottom: 16px;
  }
  
  .cs_accordian_head.cs_fs_21 {
    font-size: 16px !important;
  }
  
  .cs_accordian_body {
    font-size: 15px;
  }
}

/* ============================================================
   DEMO SECTION RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {
  .cs_contact_form {
    padding: 40px 30px;
  }
  
  .cs_contact_form h2 {
    font-size: 32px !important;
  }
}

@media (max-width: 575px) {
  .cs_contact_form {
    padding: 30px 20px;
  }
  
  .cs_contact_form h2 {
    font-size: 26px !important;
  }
  
  .cs_contact_form input,
  .cs_contact_form textarea {
    font-size: 15px;
    padding: 12px 15px;
  }
}

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

@media (max-width: 991px) {
  .cs_footer.cs_style_1 .cs_footer_widget {
    margin-bottom: 40px;
    text-align: center;
  }
  
  .cs_footer.cs_style_1 .cs_footer_logo {
    margin: 0 auto 20px;
  }
  
  .cs_footer.cs_style_1 .cs_footer_widget ul {
    padding-left: 0;
  }
}

@media (max-width: 575px) {
  .cs_footer.cs_style_1 {
    padding: 60px 0 30px;
  }
  
  .cs_footer.cs_style_1 .cs_footer_widget {
    margin-bottom: 30px;
  }
  
  .cs_footer_copyright {
    font-size: 14px;
    text-align: center;
  }
}

/* ============================================================
   BUTTONS RESPONSIVE
   ============================================================ */

.cs_btn.cs_style_1 {
  padding: 18px 36px;
  font-size: 14px;
}

@media (max-width: 991px) {
  .cs_btn.cs_style_1 {
    padding: 16px 32px;
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .cs_btn.cs_style_1 {
    padding: 14px 28px;
    font-size: 12px;
    width: 100%;
    max-width: 280px;
    text-align: center;
    display: inline-block;
  }
}

/* ============================================================
   SPACING RESPONSIVE
   ============================================================ */

/* Section spacing */
.cs_height_130 {
  height: 130px;
}

.cs_height_lg_80 {
  height: 80px;
}

@media (max-width: 991px) {
  .cs_height_130 {
    height: 80px;
  }
  
  .cs_height_120 {
    height: 70px;
  }
  
  .cs_height_lg_80 {
    height: 60px;
  }
}

@media (max-width: 575px) {
  .cs_height_130 {
    height: 60px;
  }
  
  .cs_height_120 {
    height: 50px;
  }
  
  .cs_height_lg_80 {
    height: 40px;
  }
}

/* ============================================================
   CONTAINER RESPONSIVE
   ============================================================ */

@media (max-width: 575px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
   ROWS & COLUMNS SPACING
   ============================================================ */

.cs_gap_y_24 {
  row-gap: 24px;
}

.cs_gap_y_40 {
  row-gap: 40px;
}

@media (max-width: 991px) {
  .cs_gap_y_40 {
    row-gap: 30px;
  }
}

@media (max-width: 575px) {
  .cs_gap_y_24 {
    row-gap: 20px;
  }
  
  .cs_gap_y_40 {
    row-gap: 24px;
  }
}

/* ============================================================
   IMAGES RESPONSIVE
   ============================================================ */

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

@media (max-width: 991px) {
  .cs_card_thumbnail img,
  .cs_hero_thumbnail img {
    width: 100%;
    height: auto;
  }
}

/* ============================================================
   TEXT ALIGNMENT MOBILE
   ============================================================ */

@media (max-width: 767px) {
  .cs_section_heading.cs_style_1:not(.text-center) {
    text-align: center;
  }
  
  .cs_section_heading.cs_style_1:not(.text-center) .cs_section_title,
  .cs_section_heading.cs_style_1:not(.text-center) .cs_section_text {
    text-align: center;
  }
}

/* ============================================================
   MENU MOBILE - CORRECTIONS SUPPLÉMENTAIRES
   ============================================================ */

@media (max-width: 991px) {
  /* S'assurer que le body ne scroll pas quand le menu est ouvert */
  body.cs_menu_open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  
  /* Menu mobile - amélioration de la visibilité */
  .cs_main_header_center.active {
    display: flex !important;
  }
  
  /* Améliorer l'espacement du menu mobile */
  .cs_nav_list > li > a {
    padding: 1.2rem 1rem !important;
  }
  
  /* CTA dans le menu mobile */
  .cs_header_cta {
    margin-top: 1rem;
  }
}

/* ============================================================
   CORRECTIONS POUR TRÈS PETITS ÉCRANS (< 375px)
   ============================================================ */

@media (max-width: 374px) {
  .cs_site_branding img {
    height: 28px;
    max-width: 100px;
  }
  
  .cs_hero_title.cs_fs_68 {
    font-size: 28px !important;
  }
  
  .cs_section_title.cs_fs_50 {
    font-size: 24px !important;
  }
  
  .cs_btn.cs_style_1 {
    padding: 12px 24px;
    font-size: 11px;
  }
}

/* ============================================================
   LANDSCAPE MODE MOBILE
   ============================================================ */

@media (max-width: 991px) and (orientation: landscape) {
  .cs_hero.cs_style_1 {
    padding: 100px 0 50px;
  }
  
  .cs_main_header_center {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  
  .cs_nav {
    gap: 1.5rem !important;
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  .cs_site_header,
  .cs_menu_toggle,
  .cs_header_overlay,
  .cs_btn,
  .cs_footer {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
  }
}

/* ============================================================
   ACCESSIBILITÉ - FOCUS VISIBLE
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible pour navigation au clavier */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-color, #60c4e3);
  outline-offset: 2px;
}

/* ============================================================
   CORRECTIONS SPÉCIFIQUES POUR SAFARI iOS
   ============================================================ */

@supports (-webkit-touch-callout: none) {
  .cs_main_header_center {
    height: -webkit-fill-available !important;
  }
}