/* ================================================
   CSS MOBILE PROFESSIONNEL - AIDES-INFOS.FR
   Pour écrans < 768px
   ================================================ */

/* =========================
   ÉLÉMENTS MOBILES - CACHÉS SUR DESKTOP
   ========================= */
.mobile-site-info,
.mobile-menu-btn {
  display: none;
}

@media screen and (max-width: 768px) {

  /* =========================
     RESET & BASE MOBILE
     ========================= */
  * {
    box-sizing: border-box !important;
  }

  html {
    font-size: 16px !important;
  }

  body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: #f6f6f5 !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
  }

  /* =========================
     HEADER MOBILE
     Logo 25px à gauche + Bouton bleu pâle à droite
     ========================= */
  .header-main {
    padding: 0.3rem 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }

  .header-container {
    padding: 0 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .header-logo-link {
    display: flex !important;
    align-items: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* LOGO 25px - FORCER AVEC SÉLECTEURS ULTRA SPÉCIFIQUES */
  .header-main .header-container .header-logo-link .logo-aides,
  .header-main .header-container .header-logo-link .header-logo-img,
  .header-main .header-container .header-logo-link img,
  .header-main .logo-aides,
  .header-logo-img.logo-aides,
  img.logo-aides,
  img.header-logo-img,
  .logo-aides,
  .logo-maprime,
  .logo-cee,
  .logo-eco {
    height: 65px;
    min-height: 65px;
    max-height: 65px;
    width: auto;
  }

  /* Cacher le texte du header sur mobile */
  .header-text-group {
    display: none !important;
  }

  /* Afficher le bouton Demande de rappel du header en bleu pâle */
  .header-btn-container {
    display: block !important;
    position: static !important;
  }

  .header-btn-wrapper {
    position: static !important;
  }

  #headerContactBtn {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #f5f5ff !important;
    color: #000090 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    gap: 0.3rem !important;
    height: auto !important;
    box-shadow: none !important;
  }

  #headerContactBtn svg {
    stroke: #000090 !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* =========================
     NAV-BAR MOBILE
     Texte site à gauche + Hamburger à droite
     ========================= */
  .nav-bar {
    background: white !important;
    border-top: 1px solid #e5e5e4 !important;
    border-bottom: 1px solid #e5e5e4 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .nav-container {
    padding: 0.6rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
  }

  /* Cacher les liens de navigation desktop */
  .nav-links {
    display: none !important;
  }

  /* Cacher le bouton Demande de rappel de la nav sur mobile */
  .contact-rdv-btn {
    display: none !important;
  }

  /* Afficher le texte du site sur mobile - ALIGNÉ À GAUCHE */
  .mobile-site-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .mobile-site-info .site-name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #161615 !important;
    text-align: left !important;
  }

  .mobile-site-info .site-desc {
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: #161615 !important;
    text-align: left !important;
  }

  /* Afficher le hamburger sur mobile */
  .mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border: 1px solid #e5e5e4 !important;
    cursor: pointer !important;
    gap: 5px !important;
    padding: 8px !important;
    flex-shrink: 0 !important;
  }

  .mobile-menu-btn span {
    display: block !important;
    width: 20px !important;
    height: 2.5px !important;
    background: #000090 !important;
  }

  /* =========================
     SIDE MENU MOBILE
     ========================= */
  .side-menu,
  .side-menu-tva {
    display: none !important;
  }

  /* =========================
     HERO SECTION
     ========================= */
  .hero-section,
  .hero,
  [class*="hero"] {
    padding: 1.5rem 0.5rem !important;
  }

  .hero-container,
  .hero-wrapper {
    flex-direction: column !important;
    gap: 1.5rem !important;
    padding: 0 !important;
  }

  .hero-content,
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem !important;
  }

  .hero h1,
  .hero-content h1 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
  }

  .hero p,
  .hero-content p {
    font-size: 0.95rem !important;
  }

  /* =========================
     SIMULATEUR MOBILE
     ========================= */
  .simulator-section,
  #simulator {
    padding: 1rem 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .simulator-container {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    padding: 0 !important;
  }

  .simulator-header {
    padding: 1rem 0.5rem !important;
    font-size: 1rem !important;
  }

  .simulator-body {
    padding: 1rem 0.5rem !important;
  }

  .form-step {
    padding: 0 !important;
  }

  .form-step h3 {
    font-size: 1.1rem !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }

  .form-step button,
  .option-btn,
  .form-options button {
    width: 100% !important;
    padding: 1rem 0.5rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    border: 1px solid #ddc !important;
  }

  .form-navigation {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .btn-prev,
  .btn-next {
    width: 100% !important;
    padding: 1rem 0.5rem !important;
    font-size: 1rem !important;
  }

  /* =========================
     SECTIONS GÉNÉRALES
     ========================= */
  section,
  .section {
    padding: 2rem 0.5rem !important;
    width: 100% !important;
  }

  section h2,
  .section h2 {
    font-size: 1.3rem !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
  }

  /* =========================
     CARTES / GRILLES
     ========================= */
  .cards-grid,
  .aides-grid,
  .avantages-grid,
  .features-grid,
  .temoignages-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .card,
  .aide-card,
  .avantage-card,
  .temoignage-card {
    width: 100% !important;
    margin: 0 !important;
  }

  /* =========================
     CTA SECTION
     ========================= */
  .cta-section {
    padding: 2rem 0.5rem !important;
  }

  .cta-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
  }

  .cta-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .cta-buttons a,
  .cta-buttons button {
    width: 100% !important;
    text-align: center !important;
    padding: 1rem 0.5rem !important;
  }

  /* =========================
     FAQ MOBILE
     ========================= */
  .faq-wrapper {
    padding: 0 !important;
  }

  .faq-item {
    margin-bottom: 0.5rem !important;
  }

  .faq-item summary {
    padding: 1rem 0.5rem !important;
    font-size: 0.85rem !important;
  }

  .faq-content {
    padding: 0 1rem 1rem !important;
    font-size: 0.85rem !important;
  }

  /* =========================
     CALLBACK SECTION MOBILE
     ========================= */
  .callback-section {
    padding: 1.5rem 0.5rem !important;
  }

  .callback-wrapper {
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: stretch !important;
  }

  .callback-left,
  .callback-right {
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }

  .callback-left h3,
  .callback-right h3 {
    font-size: 1rem !important;
  }

  .callback-left a {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.75rem 1rem !important;
  }

  .callback-divider {
    display: none !important;
  }

  .callback-right-buttons {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  #estimezAidesBtn {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
  }

  /* =========================
     FOOTER MOBILE
     ========================= */
  footer {
    padding: 1.5rem 0.5rem !important;
  }

  .footer-wrapper {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .footer-col-main,
  .footer-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  .footer-col h3 {
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
  }

  .footer-col ul {
    line-height: 1.8rem !important;
  }

  .footer-col a {
    font-size: 0.7rem !important;
  }

  /* =========================
     COPYRIGHT MOBILE
     ========================= */
  .copyright-section {
    padding: 1.5rem 0.5rem !important;
  }

  .copyright-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  .copyright-logo img {
    height: 2.5rem !important;
  }

  .copyright-text {
    font-size: 0.65rem !important;
    line-height: 1.4 !important;
  }

  /* =========================
     PAGES D'AIDES MOBILE
     ========================= */
  .aide-wrapper-relatif {
    position: relative !important;
  }

  .aide-bandeau-image {
    height: 100px !important;
    padding: 1rem 0.5rem !important;
  }

  .aide-bandeau-image img {
    max-height: 70px !important;
  }

  .aide-content-wrapper {
    padding: 1.5rem 0.5rem !important;
    margin: 0 !important;
  }

  .aide-breadcrumb {
    font-size: 0.65rem !important;
    flex-wrap: wrap !important;
  }

  .aide-h1 {
    font-size: 1.4rem !important;
  }

  .aide-h2 {
    font-size: 1.2rem !important;
  }

  .aide-h3 {
    font-size: 1rem !important;
  }

  .aide-intro,
  .aide-p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .aide-btn-group {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .aide-btn-proprietaire {
    width: 100% !important;
    min-height: auto !important;
    padding: 1rem 0.5rem !important;
  }

  .aide-btn-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .aide-conditions-box {
    padding: 1.25rem !important;
  }

  .aide-conditions-list,
  .aide-conditions-sublist {
    padding-left: 1.25rem !important;
    font-size: 0.85rem !important;
  }

  .aide-info-box {
    flex-direction: column !important;
  }

  .aide-info-icon {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    justify-content: flex-start !important;
  }

  .aide-info-content {
    padding: 1rem 0.5rem !important;
  }

  .aide-section-guide {
    padding: 2rem 0.5rem !important;
  }

  .aide-section-guide-inner {
    padding: 1.5rem !important;
  }

  .aide-guide-card {
    padding: 1.5rem !important;
    min-height: auto !important;
  }

  /* =========================
     MODALS MOBILE
     ========================= */
  #callbackModal,
  #confirmationModal,
  #cookieSettings,
  #rejectConfirmation {
    padding: 0.5rem !important;
  }

  .modal-content,
  .confirmation-content,
  .reject-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 95vh !important;
    border-radius: 8px !important;
  }

  .modal-body {
    padding: 1.25rem 1rem !important;
  }

  .modal-header-box {
    padding: 0.75rem 1rem !important;
    height: auto !important;
    min-height: 65px !important;
  }

  .modal-header-title {
    font-size: 0.85rem !important;
  }

  .modal-form-group {
    margin-bottom: 0.75rem !important;
  }

  .modal-label {
    font-size: 0.8rem !important;
  }

  .modal-input,
  .modal-textarea {
    padding: 0.65rem !important;
    font-size: 16px !important;
  }

  #customCalendar {
    width: calc(100% - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
  }

  .calendar-footer {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .calendar-footer button {
    flex: 1 !important;
    min-width: 70px !important;
    padding: 0.4rem !important;
    font-size: 0.75rem !important;
  }

  .plage-horaire-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .plage-horaire-label {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.85rem !important;
  }

  #callbackSubmitBtn {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }

  .modal-disclaimer {
    font-size: 0.6rem !important;
  }

  /* =========================
     COOKIE BANNER MOBILE
     ========================= */
  .cookie-banner {
    padding: 1rem 0.5rem !important;
  }

  .cookie-banner-content {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .cookie-banner-buttons {
    flex-direction: column !important;
    width: 100% !important;
  }

  .cookie-banner-buttons button {
    width: 100% !important;
  }

  #cookieSettings {
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
  }

  .cookie-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .cookie-radio-group {
    gap: 1.25rem !important;
  }

  /* =========================
     PAGES LÉGALES MOBILE
     ========================= */
  .page-content-blue,
  .page-content-white {
    padding: 2rem 0.5rem !important;
    min-height: auto !important;
  }

  .legal-content {
    padding: 0 !important;
  }

  .legal-h1 {
    font-size: 1.4rem !important;
  }

  .legal-h2 {
    font-size: 1.1rem !important;
  }

  .legal-p,
  .legal-list {
    font-size: 0.9rem !important;
  }

  /* =========================
     BOUTON HAUT DE PAGE
     ========================= */
  #backToTop {
    display: none !important;
  }

  /* =========================
     UTILITAIRES MOBILE
     ========================= */
  [class*="container"],
  [class*="wrapper"] {
    max-width: 100% !important;
  }

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


  /* =========================
     CTA BOX - CAROUSEL ET PANEL EMPILES
     ========================= */
  .cta-box {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.5rem !important;
  }

  .cta-carousel {
    width: calc(100% - 1rem) !important;
    height: auto !important;
    aspect-ratio: 4/3 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0.5rem !important;
  }

  .cta-panel {
    width: calc(100% - 1rem) !important;
    height: auto !important;
    margin: 0.5rem !important;
    margin-left: 0 !important;
    padding: 1rem !important;
    transform: scaleY(1.0) !important;
    transform-origin: top center !important;
  }
}

/* =========================
   FIX iOS
   ========================= */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

  /* =========================
     CTA BOX - CAROUSEL ET PANEL EMPILÉS