/* ============================================================
   UNIVRS WEB — Responsive overrides
   Breakpoints: 1200 / 1024 / 880 / 768 / 600 / 480 / 380

   Division des responsabilités :
   · site.css gère les @media intégrés aux composants (960px,
     880px, 720px, 600px, 520px) pour hero, svc-bento, diff-grid,
     process-steps, featured-quote, cta-banner, footer-grid,
     form-grid, stats, reassure, about-vision, service-feature,
     support-services, maint-grid, devis-after, pricing-grid.
   · Ce fichier gère : layout transverse, section padding
     inline (!important), et ajustements que site.css ne couvre pas.
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1200px — Large tablettes / petits laptops
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .container { padding-inline: 28px; }
  .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); gap: 32px; }
  .pricing-grid { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   1024px — Tablettes paysage
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .hero .container { gap: 44px; }

  /* Diff grid : 3 col → 2 col avec bordures corrigées.
     6 cellules : rangs (1-2), (3-4), (5-6) */
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .diff-cell:nth-child(3n)         { border-right: 1px solid var(--color-divider); } /* rétablit col 3 (base) */
  .diff-cell:nth-child(2n)         { border-right: none; }                            /* retire col droite 2-col */
  .diff-cell:nth-last-child(-n+3)  { border-bottom: 1px solid var(--color-divider); } /* rétablit pour cellules 4-5-6 */
  .diff-cell:nth-last-child(-n+2)  { border-bottom: none; }                            /* dernier rang (5-6) sans border */

  /* Testimonials : 3 col → 2 col intermédiaire.
     site.css force 1 col à 960px via une règle précédente ;
     ce bloc s'applique à [961-1024px] par source order. */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   880px — Tablettes portrait
   Note : site.css gère déjà hero, svc-bento, diff-grid,
   process-steps, cta-banner, footer-grid, form-grid, stats,
   reassure, about-vision, service-feature, support-services.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* Process preview : grille externe + cartes internes */
  .process-preview {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .process-preview > div:last-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Hero actions : empilement vertical */
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }

  /* Contact/devis nudge : empilement vertical */
  .contact-devis-nudge {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .contact-devis-nudge a.btn { align-self: flex-start; }

  /* Section padding inline-style overrides.
     Sélecteurs sans "section" pour couvrir aussi les <div>
     qui portent ces styles (lignes 400, 814, 899 du HTML).
     [style*="padding: 120px 0"] couvre les variantes avec et
     sans point-virgule final (substring match). */
  [style*="padding: 120px 0"]    { padding: 64px 0 !important; }
  [style*="padding: 80px 0 120px"] { padding: 48px 0 64px !important; }
  [style*="padding: 80px 0;"]    { padding: 48px 0 !important; }
  [style*="padding: 40px 0 120px"] { padding: 40px 0 64px !important; }
  [style*="padding: 0 0 120px"]  { padding: 0 0 64px !important; }

  /* Section head */
  .section-head { margin-bottom: 40px; }

  /* Cards */
  .svc-card-lg    { padding: 28px 24px; min-height: 240px; }
  .featured-quote { padding: 32px 28px; }
  .stat           { padding: 28px 24px; }

  /* Trust bar : réduire l'écart entre logos */
  .trust-logos { gap: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   768px — iPad portrait
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding-inline: 20px; }

  section.page           { padding: 56px 0; }
  section.page.hero-page { padding-top: 100px; }

  .hero-meta         { gap: 20px; }
  .hero-actions .btn { max-width: 100%; }

  /* FAQ sidebar : nav horizontale en chips */
  .faq-layout > aside            { margin-bottom: 28px; }
  .faq-layout > aside nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .faq-layout > aside nav a {
    font-size: 13px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    line-height: 1 !important;
  }
  .faq-layout > aside nav a:hover {
    background: var(--color-bg) !important;
    border-color: var(--chrome-500) !important;
  }

  .devis-form { padding: 28px 24px !important; }

  /* Values grid : 3 col → 2 col intermédiaire (site.css force 1 col à 880px,
     mais ce bloc est déclaré après → il s'applique en [769-880px]).
     Pour les viewports < 769px, site.css 880px reprend le dessus
     par spécificité de source : non, il faudrait un override à 600px.
     Annulé ici en attendant une refonte CSS. */
}

/* ═══════════════════════════════════════════════════════════
   600px — Téléphones + tablettes compactes
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .container { padding-inline: 16px; }

  section.page           { padding: 48px 0; }
  section.page.hero-page { padding-top: 90px; }

  [style*="padding: 120px 0"]     { padding: 48px 0 !important; }
  [style*="padding: 80px 0 120px"] { padding: 40px 0 48px !important; }
  [style*="padding: 0 0 120px"]   { padding: 0 0 48px !important; }

  /* Hero visuel */
  .hero-video, .chrome-orb {
    width: clamp(220px, 70vw, 340px) !important;
    margin-inline: auto !important;
  }
  .hero-meta { gap: 12px 20px; }

  /* Portfolio : 1 colonne */
  .portfolio-grid { grid-template-columns: 1fr !important; }

  /* Process preview inner : 1 col */
  .process-preview > div:last-child { grid-template-columns: 1fr !important; }

  /* Diff cells */
  .diff-cell { min-height: auto; padding: 22px 18px; }
  .diff-cell .num { font-size: 30px; }

  /* Pricing : 1 col — renforce la règle site.css */
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* Devis nav : wrap sur petits écrans */
  .devis-nav { flex-wrap: wrap; justify-content: space-between; }
  .devis-progress { flex-basis: 100%; order: -1; text-align: center; padding-bottom: 4px; }
  .devis-after { grid-template-columns: 1fr 1fr; }

  /* Reassure bar */
  .reassure { grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }

  /* CTA banner */
  .cta-banner              { padding: 32px 20px !important; }
  .cta-banner .actions     { flex-direction: column; }
  .cta-banner .actions .btn { width: 100%; justify-content: center; text-align: center; }

  /* Stats : 2 col */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat  { padding: 24px 18px; }
  .stat:nth-child(2)      { border-right: none; }
  .stat:nth-child(-n+2)   { border-bottom: 1px solid var(--color-divider); }

  .section-head { margin-bottom: 28px; }

  /* Process step */
  .process-step { grid-template-columns: 56px 1fr; gap: 12px; }
  .step-num     { font-size: 38px; }

  /* Compare table : masqué au profit du carrousel mobile */
  .ct-wrap     { display: none; }
  .ct-carousel { display: block; }

  /* Footer : brand pleine largeur + 3 cols nav en dessous */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .footer-brand { grid-column: 1 / -1; padding-bottom: 4px; }
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
  .footer-bottom .legals { justify-content: center; flex-wrap: wrap; gap: 12px; }

  .mobile-menu nav a { font-size: 24px; }
  .price-card        { padding: 24px 18px; }
  .radio-chip span   { padding: 10px 12px; font-size: 13px; }

  .compare-table thead th,
  .compare-table tbody td { padding: 12px 10px; font-size: 12px; }

  .faq-question { font-size: 17px; }

  /* Trust bar */
  .trust-logos { gap: 16px; }
  .trust-bar .container { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   480px — Téléphones portrait
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding-inline: 16px; }

  /* Hero */
  .hero-video, .chrome-orb { width: min(260px, 72vw) !important; }
  .hero h1               { max-width: none; }
  .hero .lede            { font-size: 16px; }
  .hero-meta             { gap: 10px 18px; }
  .hero-meta > div       { min-width: 0; }

  .section-head h2       { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
  section.page           { padding: 40px 0; }
  section.page.hero-page { padding-top: 84px; }
  [style*="padding: 120px 0"]     { padding: 40px 0 !important; }
  [style*="padding: 80px 0 120px"] { padding: 32px 0 40px !important; }
  [style*="padding: 0 0 120px"]   { padding: 0 0 40px !important; }

  /* Hero actions : pleine largeur */
  .hero-actions        { align-items: stretch; }
  .hero-actions .btn   { max-width: none; }

  /* Footer : brand pleine largeur + 3 cols nav */
  .footer-grid               { grid-template-columns: 1fr 1fr 1fr !important; gap: 16px !important; }
  .footer-brand              { grid-column: 1 / -1 !important; padding-bottom: 4px; }
  .footer-brand .baseline    { font-size: 20px; }
  .footer-bottom .legals     { flex-wrap: wrap; gap: 8px; justify-content: center; }

  /* Devis wizard : boutons empilés.
     NE PAS toucher visibility de #devis-prev : contrôlé par JS
     (step 1 → hidden, steps 2-5 → visible). */
  .devis-form  { padding: 20px 16px !important; }
  .devis-nav   { flex-direction: column; align-items: stretch; gap: 10px; }
  .devis-nav > div { display: flex !important; flex-direction: column; gap: 8px; }
  .devis-nav .btn,
  .devis-nav #devis-next,
  .devis-nav #devis-submit { width: 100% !important; justify-content: center; }
  .devis-after { grid-template-columns: 1fr !important; }

  /* Reassure : 1 col */
  .reassure { grid-template-columns: 1fr !important; gap: 12px !important; }

  .badge           { font-size: 10px; letter-spacing: .1em; }
  .process-preview { gap: 28px !important; }

  /* Steps */
  .process-step          { grid-template-columns: 44px 1fr; gap: 12px; }
  .step-num              { font-size: 32px; }
  .process-steps::before { left: 22px; }

  .faq-layout > aside nav a { font-size: 12px !important; padding: 6px 10px !important; }

  .compare-table thead th,
  .compare-table tbody td { padding: 10px 7px; font-size: 11px; }

  /* Cards */
  .card          { padding: 20px 18px; }
  .price-card    { padding: 22px 16px; }
  .diff-cell     { padding: 18px 16px; gap: 10px; }
  .value-cell    { padding: 24px 20px; }
  .stat          { padding: 20px 16px; }

  .featured-quote     { padding: 24px 20px !important; }
  .featured-quote .big { font-size: clamp(1.2rem, 5vw, 1.6rem); }

  .testimonial .quote  { font-size: 16px; }

  .mobile-menu        { padding: 70px 20px 32px; }
  .mobile-menu nav a  { font-size: 22px; }

  .btn-lg { padding: 15px 22px; font-size: 14px; }

  .svc-card-lg { padding: 24px 20px; min-height: auto; }
  .svc-card-sm { padding: 20px; }

  .faq-question   { font-size: 16px; gap: 14px; padding: 20px 0; }
  .faq-clean-q    { padding: 22px 0; }
}

/* ═══════════════════════════════════════════════════════════
   380px — Petits téléphones (iPhone SE…)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .container { padding-inline: 14px; }

  .hero-video, .chrome-orb { width: min(220px, 76vw) !important; }
  .hero h1                  { font-size: clamp(1.85rem, 7.5vw, 2.8rem); }
  .hero .lede               { font-size: 15px; }
  .hero-actions .btn        { font-size: 13px; padding: 13px 16px; }

  .btn-lg { padding: 13px 16px; font-size: 13px; }
  .btn-sm { padding: 8px 12px; font-size: 12px; }

  .price-card .price-row .amount { font-size: 30px; }
  .price-card                    { padding: 20px 14px; }

  .stat .n { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }

  .diff-cell     { padding: 16px 14px; }
  .diff-cell .num { font-size: 26px; }
  .diff-cell h4  { font-size: 16px; }

  .footer-brand .baseline { font-size: 18px; }
  .footer-col h5          { font-size: 10px; }
  .footer-col a           { font-size: 12px; }

  section.page           { padding: 36px 0; }
  section.page.hero-page { padding-top: 78px; }
  [style*="padding: 120px 0"]     { padding: 32px 0 !important; }
  [style*="padding: 80px 0 120px"] { padding: 28px 0 32px !important; }
  [style*="padding: 0 0 120px"]   { padding: 0 0 32px !important; }

  .devis-form       { padding: 18px 14px !important; }
  .step-head .ttl   { font-size: 18px; }

  .mobile-menu nav a { font-size: 20px; padding: 10px 0; }

  .process-step          { grid-template-columns: 38px 1fr; gap: 10px; }
  .step-num              { font-size: 28px; }
  .step-body h3          { font-size: 20px; }

  .compare-table thead th,
  .compare-table tbody td { padding: 9px 5px; font-size: 10px; }

  .about-vision .visual { aspect-ratio: 4/3; }
}

/* ═══════════════════════════════════════════════════════════
   Dark mode — header scrollé
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] .site-header.scrolled {
  background: rgba(15, 17, 21, 0.88);
  border-bottom-color: var(--color-border);
}
[data-theme="dark"] .mobile-menu {
  background: rgba(15, 17, 21, 0.96);
}