/**
 * mobile-fix.css — Correctifs ergonomiques mobile complets
 * Conciergerie Privée Suzosky
 * Ce fichier doit être chargé APRÈS tous les autres CSS (responsive.css, refonte-premium.css, conversion.css, etc.)
 */

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL — Empêcher le scroll horizontal sur toutes les pages
   ═══════════════════════════════════════════════════════════════════ */
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLETTES (≤ 991px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* ── Onglets du formulaire de recherche banner : passer en flex-wrap ── */
  .banner-search .tab-title-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
  }
  .banner-search .tab-title {
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 120px;
    margin-bottom: 3px !important;
    text-align: center;
  }

  /* ── Contact info : visible au-dessus du formulaire ── */
  .contact-info {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px;
    padding: 20px !important;
    left: auto !important;
    top: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SMARTPHONES UNIQUEMENT (≤ 767px) — CORRECTIF COMPLET ANTI-SUPERPOSITION
   ═══════════════════════════════════════════════════════════════════
   DIAGNOSTIC : Sur smartphone, le texte se superpose car :
     1) Le layout CSS table (display:table / table-cell) empêche le
        contenu de pousser la hauteur du banner naturellement.
     2) padding-top: 140px (prévu pour le header desktop) gaspille
        de l'espace alors que seule la barre toggle (40px) est visible.
     3) overflow: hidden coupe le contenu au lieu de le laisser couler.
     4) height: 100vh (banner-quality-fix) contraint la hauteur
        quand le contenu dépasse le viewport.
     5) margin-top: 110px sur banner-search-inner ajoute de l'espace.
     6) Les onglets banner-search empilés à 100% font ~200px de haut.

   SOLUTION : Passer en display:block, hauteur auto, overflow visible,
   padding-top réduit, espacement correct entre chaque élément.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ══ GLOBAL ANTI-DÉBORDEMENT TEXTE ══ */
  * {
    -webkit-text-size-adjust: 100% !important;
  }
  body, p, h1, h2, h3, h4, h5, h6,
  span, a, li, blockquote, summary, label, input, select, button, td, th {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 1 : BANNER / HEADER / HERO — DÉMANTÈLEMENT TABLE LAYOUT
     ══════════════════════════════════════════════════════════════════ */

  /* ── 1a. Passer le banner de table à block ── */
  #header #banner .css-table {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }
  #header #banner .css-table-cell {
    display: block !important;
    vertical-align: initial !important;
    padding-top: 50px !important;  /* toggle bar 40px + 10px respiration */
    padding-bottom: 20px !important;
  }

  /* ── 1b. Banner : hauteur auto, pas de contrainte ── */
  #banner,
  #banner .banner-bg,
  #banner .banner-bg-item {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  #header #banner {
    overflow: visible !important;
    position: relative !important;
  }

  /* ── 1c. Arrière-plan : couvrir toute la hauteur dynamique ── */
  #banner .banner-bg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 0 !important;
    height: 100% !important;
  }
  #banner .banner-bg-item {
    width: 100% !important;
    height: 100% !important;
  }
  /* Owl carousel wrapper aussi */
  #banner .banner-bg .owl-wrapper-outer,
  #banner .banner-bg .owl-wrapper,
  #banner .banner-bg .owl-item {
    height: 100% !important;
  }

  /* ── 1d. CRITIQUE: banner-search doit rester dans le flux ── */
  /* responsive.css @480px met position:absolute;top:100px → OVERLAP */
  #header .banner-search {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  /* ── 1e. Marge du banner-search-inner réduite ── */
  #header.triangle .banner-search-inner {
    margin-top: 10px !important;
  }
  #header .hero-conversion ~ .banner-search .banner-search-inner {
    margin-top: 10px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 2 : BRAND PROMISE BAR — empiler proprement
     ══════════════════════════════════════════════════════════════════ */
  .brand-promise-bar {
    padding: 6px 0 !important;
  }
  .brand-promise-bar .promise-text {
    font-size: .72rem !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
  }
  .brand-promise-bar .promise-text .separator {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 3 : HERO CONVERSION — taille et espacement maîtrisés
     ══════════════════════════════════════════════════════════════════ */
  .hero-conversion {
    padding: 0 12px 10px !important;
  }
  .hero-tagline {
    font-size: .68rem !important;
    padding: 4px 12px !important;
    margin-bottom: 10px !important;
    display: inline-block !important;
  }
  .hero-conversion h1 {
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
    padding: 0 5px !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
  }
  .hero-conversion .sub {
    font-size: .88rem !important;
    padding: 0 5px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
  }

  /* ── CTA buttons : adaptés au tactile ── */
  .hero-conversion .cta-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  .hero-conversion .cta-group .btn-primary-gold,
  .hero-conversion .cta-group .btn-outline-light {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    padding: 12px 18px !important;
    font-size: .88rem !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* ── SLA badge ── */
  .hero-sla-badge {
    font-size: .72rem !important;
    margin-top: 8px !important;
    padding: 5px 12px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 4 : BANNER SEARCH — onglets compacts, champs empilés
     ══════════════════════════════════════════════════════════════════ */
  .banner-search-inner {
    padding: 0 8px !important;
  }

  /* Onglets : en grille 3+2 compacte au lieu de vertical 100% */
  .banner-search .tab-title-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  .banner-search .tab-title {
    width: auto !important;
    flex: 1 1 30% !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-bottom: 2px !important;
  }
  .banner-search .tab-title > a {
    font-size: .72rem !important;
    padding: 8px 6px !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
  }

  /* Contenu du formulaire : empilé */
  .banner-search .tab-content-list {
    padding: 12px 8px 8px !important;
  }
  .banner-search .default-form {
    text-align: left !important;
  }
  .banner-search span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .banner-search .where-input,
  .banner-search .hire-input,
  .banner-search .departure-input,
  .banner-search .return-input,
  .banner-search .arrival-input,
  .banner-search .point-a,
  .banner-search .point-b,
  .banner-search .people,
  .banner-search .model.select-box {
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }
  .banner-search .where-input input,
  .banner-search .hire-input input,
  .banner-search .departure-input input,
  .banner-search .return-input input,
  .banner-search .point-a select,
  .banner-search .point-b select,
  .banner-search .people select,
  .banner-search .model.select-box select {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
  .banner-search input,
  .banner-search select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .banner-search .submit-btn {
    width: 100% !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-left: none !important;
    text-align: center !important;
  }
  .banner-search .submit-btn button,
  .banner-search .submit-btn a {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 5 : PROOF BAR — 2 colonnes avec espacement correct
     ══════════════════════════════════════════════════════════════════ */
  .proof-bar {
    padding: 20px 0 !important;
  }
  .proof-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }
  .proof-metric {
    padding: 10px 6px !important;
    text-align: center !important;
  }
  .proof-metric:not(:last-child)::after {
    display: none !important;
  }
  .proof-metric .metric-number {
    font-size: 1.6rem !important;
    display: block !important;
    line-height: 1.2 !important;
  }
  .proof-metric .metric-label {
    font-size: .75rem !important;
    display: block !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 6 : TOUTES LES SECTIONS — padding adapté, pas de collision
     ══════════════════════════════════════════════════════════════════ */
  .segment-selector,
  .fleet-teaser,
  .services-key,
  .social-proof,
  .pricing-preview,
  .education-content,
  .sla-process,
  .brand-story,
  .faq-section,
  .why-us {
    padding: 30px 0 !important;
  }
  .section-header,
  .section-title {
    margin-bottom: 25px !important;
  }
  .section-header h2,
  .section-title h2 {
    font-size: 1.35rem !important;
    padding: 0 15px !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  .section-header p {
    font-size: .88rem !important;
    padding: 0 15px !important;
    line-height: 1.5 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 7 : SEGMENT CARDS — 1 colonne, pleine largeur
     ══════════════════════════════════════════════════════════════════ */
  .segment-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .segment-card {
    padding: 22px 16px !important;
  }
  .segment-card .card-icon {
    font-size: 2rem !important;
    margin-bottom: 10px !important;
  }
  .segment-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  .segment-card p {
    font-size: .85rem !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 8 : SERVICES (about cards) — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .about .feature.col-sm-6,
  .about .col-lg-3.col-md-3.col-sm-6 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px !important;
  }
  .about .feature h5 {
    font-size: 1rem !important;
    margin-top: 10px !important;
    line-height: 1.3 !important;
  }
  .about .feature p {
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }
  .about .preamble h3 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
  }
  .about .preamble p {
    font-size: .88rem !important;
    line-height: 1.6 !important;
    padding: 0 10px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 9 : FLEET TEASER — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .fleet-grid-teaser {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    padding: 0 15px !important;
  }
  .fleet-teaser-card .card-body {
    padding: 14px !important;
  }
  .fleet-teaser-card h4 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  .fleet-teaser-card .card-price {
    font-size: .88rem !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 10 : BRAND STORY — 1 colonne, pas de chevauchement
     ══════════════════════════════════════════════════════════════════ */
  .brand-story .story-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 15px !important;
  }
  .brand-story .story-content {
    padding-right: 0 !important;
  }
  .story-content h2 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
  }
  .brand-story .story-text {
    font-size: .88rem !important;
    line-height: 1.6 !important;
  }
  .brand-story .story-visual .visual-badge {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    display: inline-block !important;
    margin-top: 10px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 11 : SLA PROCESS — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .process-steps {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .process-step {
    padding: 18px 14px !important;
  }
  .process-step:not(:last-child)::after {
    display: none !important;
  }
  .process-step h4 {
    font-size: .95rem !important;
    line-height: 1.3 !important;
  }
  .process-step p {
    font-size: .82rem !important;
    line-height: 1.5 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 12 : GRID 2×2 SERVICES CLÉS — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .grid-2x2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 15px !important;
  }
  .card-service {
    padding: 20px 16px !important;
  }
  .card-service h3 {
    font-size: .95rem !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .card-service p {
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 13 : TESTIMONIALS — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .testimonial-premium {
    padding: 18px 14px !important;
  }
  .testimonial-premium blockquote {
    font-size: .88rem !important;
    line-height: 1.55 !important;
  }
  .testimonial-premium .author-name {
    font-size: .85rem !important;
  }
  .testimonial-premium .author-role {
    font-size: .75rem !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 14 : PRICING CARDS — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .pricing-card {
    padding: 22px 16px !important;
  }
  .pricing-card h4 {
    font-size: 1rem !important;
    line-height: 1.3 !important;
  }
  .pricing-card .price-amount {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }
  .pricing-card .card-features li {
    font-size: .82rem !important;
    line-height: 1.4 !important;
    padding: 5px 0 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 15 : WHY US — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .why-us h2 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    padding: 0 15px !important;
  }
  .why-us .bullets {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 15px !important;
  }
  .why-us .bullets li {
    font-size: .88rem !important;
    padding: 10px 12px !important;
    line-height: 1.4 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 16 : EDUCATION CONTENT — 1 colonne
     ══════════════════════════════════════════════════════════════════ */
  .edu-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .edu-card {
    padding: 18px 14px !important;
  }
  .edu-card h4 {
    font-size: .95rem !important;
    line-height: 1.3 !important;
  }
  .edu-card p {
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 17 : QUICK LEAD FORM
     ══════════════════════════════════════════════════════════════════ */
  .quick-lead-segmented {
    padding: 30px 0 !important;
  }
  .quick-lead-segmented h3 {
    font-size: 1.15rem !important;
    padding: 0 15px !important;
    line-height: 1.35 !important;
  }
  .quick-lead-segmented .subtitle {
    font-size: .88rem !important;
    padding: 0 15px !important;
    line-height: 1.5 !important;
  }

  /* Onglets lead : wrap horizontal compact */
  .lead-tabs {
    padding: 0 12px !important;
    gap: 4px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .lead-tab-btn {
    font-size: .78rem !important;
    padding: 8px 10px !important;
    min-height: 40px !important;
    flex: 1 1 auto !important;
    white-space: nowrap !important;
  }

  /* Quick form fields */
  .quick-form {
    flex-direction: column !important;
    padding: 0 15px !important;
    gap: 8px !important;
  }
  .quick-form input,
  .quick-form select {
    width: 100% !important;
    min-width: unset !important;
    min-height: 44px !important;
    font-size: .88rem !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }
  .quick-form .btn-primary-gold {
    width: 100% !important;
    min-height: 44px !important;
    font-size: .88rem !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 18 : FAQ
     ══════════════════════════════════════════════════════════════════ */
  .faq-section h2 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    padding: 0 15px !important;
  }
  .faq-section .container {
    padding: 0 15px !important;
  }
  .faq-item summary {
    font-size: .9rem !important;
    padding: 12px 14px !important;
    line-height: 1.4 !important;
  }
  .faq-item p {
    font-size: .85rem !important;
    padding: 0 14px 12px !important;
    line-height: 1.55 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 19 : NEWSLETTER
     ══════════════════════════════════════════════════════════════════ */
  .newsletter-enhanced {
    padding: 25px 15px !important;
  }
  .newsletter-enhanced h3 {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
  }
  .newsletter-enhanced .nl-sub {
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }
  .newsletter-enhanced form {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 8px !important;
  }
  .newsletter-enhanced input[type="email"] {
    min-width: unset !important;
    width: 100% !important;
    min-height: 44px !important;
    font-size: .88rem !important;
    box-sizing: border-box !important;
  }
  .newsletter-enhanced .btn-primary-gold {
    width: 100% !important;
    min-height: 44px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 20 : PARTENAIRES LOGOS
     ══════════════════════════════════════════════════════════════════ */
  .partners-premium {
    padding: 25px 0 !important;
  }
  .partners-premium h5 {
    font-size: .75rem !important;
  }
  .partners-premium h3 {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
    padding: 0 15px !important;
  }
  .partners-premium .partners-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 15px !important;
  }
  .partners-premium .partners-logos img {
    max-width: 100px !important;
    width: auto !important;
    height: auto !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 21 : GROUPE (Notre groupe)
     ══════════════════════════════════════════════════════════════════ */
  .notre-groupe .col-lg-4,
  .notre-groupe .col-md-4,
  .notre-groupe .col-sm-4 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 10px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 22 : FOOTER — colonnes empilées
     ══════════════════════════════════════════════════════════════════ */
  #footer .col-lg-3,
  #footer .col-md-3 {
    width: 100% !important;
    float: none !important;
  }
  #footer .widget {
    margin-bottom: 20px !important;
  }
  #footer .widget h5 {
    font-size: .95rem !important;
    line-height: 1.3 !important;
  }
  #footer .widget p,
  #footer .widget li,
  #footer .widget li a {
    font-size: .85rem !important;
    line-height: 1.5 !important;
  }
  #footer .widget-newsletter input[type="text"] {
    width: 100% !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
  }
  #footer .widget-newsletter button {
    width: 100% !important;
  }
  .footer-copyrights p {
    font-size: .78rem !important;
    line-height: 1.4 !important;
    padding: 0 10px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 23 : ÉLÉMENTS FLOTTANTS — WhatsApp, Back to top
     ══════════════════════════════════════════════════════════════════ */
  .whatsapp-vip {
    bottom: 70px !important;
    right: 10px !important;
  }
  .whatsapp-vip a {
    padding: 10px 14px !important;
    font-size: .8rem !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  #back-to-top {
    bottom: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 24 : HEADER LOGO TRIANGLE — compact
     ══════════════════════════════════════════════════════════════════ */
  #header.triangle .header-logo:after {
    width: 160px !important;
    border-width: 80px 80px 0 80px !important;
  }
  #header.triangle .header-logo a img {
    max-height: 50px !important;
    width: auto !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SECTION 25 : CONTAINERS — empêcher débordement horizontal
     ══════════════════════════════════════════════════════════════════ */
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PETITS SMARTPHONES (≤ 480px) — Ajustements complémentaires
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Hero encore plus compact ── */
  .hero-conversion h1 {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }
  .hero-conversion .sub {
    font-size: .82rem !important;
    margin-bottom: 10px !important;
  }
  .hero-tagline {
    font-size: .62rem !important;
    padding: 3px 8px !important;
    margin-bottom: 6px !important;
  }
  .hero-sla-badge {
    font-size: .68rem !important;
    padding: 4px 10px !important;
  }

  /* ── Proof metrics : 1 colonne ── */
  .proof-metrics {
    grid-template-columns: 1fr !important;
  }

  /* ── Section headings ── */
  .section-header h2,
  .section-title h2 {
    font-size: 1.15rem !important;
  }

  /* ── Card service ── */
  .card-service {
    padding: 16px 12px !important;
  }
  .card-service h3 {
    font-size: .88rem !important;
  }
  .card-service p {
    font-size: .8rem !important;
  }

  /* ── Pricing compact ── */
  .pricing-card .price-amount {
    font-size: 1.5rem !important;
  }

  /* ── Education cards ── */
  .edu-card {
    padding: 16px 12px !important;
  }
  .edu-card h4 {
    font-size: .9rem !important;
  }

  /* ── Quick form compact ── */
  .quick-form input,
  .quick-form select {
    padding: 10px 12px !important;
    font-size: .85rem !important;
  }
  .quick-form .btn-primary-gold {
    font-size: .85rem !important;
  }

  /* ── FAQ compact ── */
  .faq-item summary {
    font-size: .85rem !important;
    padding: 10px 12px !important;
  }

  /* ── Partners logos ── */
  .partners-premium .partners-logos img {
    max-width: 80px !important;
  }

  /* ── Banner search onglets : encore plus compacts ── */
  .banner-search .tab-title > a {
    font-size: .65rem !important;
    padding: 6px 4px !important;
  }

  /* ── Newsletter ── */
  .newsletter-enhanced input[type="email"] {
    font-size: .82rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TRÈS PETITS SMARTPHONES (≤ 360px) — Ajustements finaux
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .hero-conversion h1 {
    font-size: 1.05rem !important;
  }
  .hero-conversion .sub {
    font-size: .78rem !important;
  }
  .hero-conversion .cta-group .btn-primary-gold,
  .hero-conversion .cta-group .btn-outline-light {
    font-size: .8rem !important;
    padding: 10px 14px !important;
  }

  /* ── Segment card compact ── */
  .segment-card {
    padding: 16px 12px !important;
  }
  .segment-card .card-icon {
    font-size: 1.6rem !important;
  }
  .segment-card h3 {
    font-size: .95rem !important;
  }
  .segment-card p {
    font-size: .78rem !important;
  }

  /* ── Testimonial ── */
  .testimonial-premium blockquote {
    font-size: .8rem !important;
    line-height: 1.5 !important;
  }

  /* ── Proof stat ── */
  .metric-number {
    font-size: 1.3rem !important;
  }
  .metric-label {
    font-size: .7rem !important;
  }

  /* ── Pricing ── */
  .pricing-card .price-amount {
    font-size: 1.3rem !important;
  }
  .pricing-card h4 {
    font-size: .9rem !important;
  }
}