/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE-PLUS.CSS — Améliorations adaptatives complètes
   Charge APRÈS style.css pour surcharger ce qui doit l'être
   Smartsun · Smart-Sun.fr · Cabestany
   ═══════════════════════════════════════════════════════════════════ */


/* ─── 1. SCROLL FLUIDE + OFFSET POUR LA NAVBAR FIXE ──────────────────
   Sans ça, cliquer sur un lien #section scrolle MAIS le titre
   passe sous la navbar fixe — frustrant pour l'utilisateur. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

/* ─── 2. PAS DE SCROLL HORIZONTAL — JAMAIS ───────────────────────────
   Ceinture & bretelles : si un élément débord, on coupe. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images / SVG / iframes toujours fluides à l'intérieur des articles */
.article-content img,
.article-content svg,
.article-content iframe,
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}


/* ─── 3. NAVBAR — BURGER PLUS TÔT (≤ 1100px) ─────────────────────────
   Avec 8 liens dans la navbar, on a besoin du menu burger dès
   1100px et plus seulement à 768px, sinon la navbar explose. */
@media (max-width: 1100px) {
  .nav-links {
    display: none !important;
  }
  .nav-burger {
    display: flex !important;
  }
  .btn-nav {
    /* Le bouton "Devis gratuit" peut rester visible mais plus discret */
    padding: 10px 16px;
    font-size: .85rem;
  }
}

/* État actif visuel (pour la page courante dans la navbar) */
.nav-active,
.nav-links a.active {
  color: var(--green) !important;
  font-weight: 700 !important;
}


/* ─── 4. MENU MOBILE — TOUJOURS SCROLLABLE ───────────────────────────
   Avec 9 items + scénario paysage, le menu peut dépasser
   l'écran. On le rend scrollable verticalement. */
.mobile-menu.open {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}


/* ─── 5. TAP TARGETS 44×44px MINIMUM SUR MOBILE ──────────────────────
   Recommandation Apple HIG + Google Material : tout élément
   tactile doit faire au moins 44×44 pixels pour être confortable. */
@media (max-width: 768px) {
  .nav-links a,
  .mobile-link,
  .btn,
  .filter-btn,
  .filtre-btn,
  .article-link,
  .article-card a,
  .galerie-zoom,
  .nav-burger,
  button:not(.checkbox-custom):not(.faq-q) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Centrer le contenu des boutons */
  .btn,
  .btn-primary,
  .btn-secondary {
    justify-content: center;
  }

  /* Inputs : 44px minimum + font-size: 16px pour empêcher
     iOS Safari de zoomer automatiquement à la frappe. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    min-height: 44px;
    font-size: 16px !important;
  }
}


/* ─── 6. TRÈS PETITS ÉCRANS (≤ 360px) ────────────────────────────────
   iPhone SE 1ère génération, certains Android entrée de gamme,
   mode "split screen" sur Android. */
@media (max-width: 360px) {
  .container { padding: 0 12px; }

  .hero { padding: 90px 12px 40px; }
  .hero-title { font-size: 1.5rem !important; line-height: 1.2; }
  .hero-subtitle { font-size: .9rem; }

  .section-title { font-size: 1.3rem !important; }
  .section-desc { font-size: .88rem; }

  .stat-num,
  .info-val { font-size: 1.4rem !important; }

  .btn,
  .btn-primary,
  .btn-secondary {
    padding: 12px 16px;
    font-size: .82rem;
  }

  .btn-lg { padding: 14px 20px; font-size: .9rem; }

  .nav-logo .logo-img {
    width: 130px !important;
    height: auto !important;
  }

  /* Stats hero : 1 colonne au lieu de 2 */
  .hero-stats { grid-template-columns: 1fr; gap: 10px; }

  /* Grilles → 1 colonne forcée */
  .info-grid,
  .solutions-grid,
  .solutions-grid-4,
  .avantages-grid,
  .etapes-grid,
  .galerie-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* ─── 7. MODE PAYSAGE SUR MOBILE ─────────────────────────────────────
   Smartphone tourné horizontalement : très peu de hauteur
   disponible, on doit compacter. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: auto;
    padding: 80px 18px 40px;
  }
  .hero-title { font-size: 1.6rem; }
  .hero-subtitle { font-size: .85rem; margin-bottom: 16px; }
  .hero-stats { gap: 12px; }

  .section-pad { padding: 40px 0; }

  /* Mobile menu compact en paysage */
  .mobile-menu.open {
    padding: 12px 0;
  }
  .mobile-menu li a {
    padding: 10px 24px !important;
  }
}


/* ─── 8. TABLETTE PORTRAIT (601–900px) ───────────────────────────────
   Cas spécifique iPad portrait, Galaxy Tab. Grilles 2 colonnes
   restent pertinentes. */
@media (min-width: 601px) and (max-width: 900px) {
  .solutions-grid-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }
  .galerie-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ─── 9. TABLEAUX SCROLLABLES SUR MOBILE ─────────────────────────────
   Si un tableau dépasse, il devient scrollable horizontalement
   au lieu de casser la mise en page globale. */
@media (max-width: 768px) {
  .article-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}


/* ─── 10. ÉCRANS LARGES (≥ 1600px) ───────────────────────────────────
   Pour les écrans 4K, ultrawide : on évite que le contenu
   reste minuscule au milieu d'un océan de blanc. */
@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
}


/* ─── 11. ACCESSIBILITÉ : RESPECTER prefers-reduced-motion ───────────
   Si l'utilisateur a activé "réduire les animations" dans
   son OS, on désactive les transitions et animations lourdes. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─── 12. PRINT (impression) ─────────────────────────────────────────
   Petit bonus : si le visiteur imprime un article de blog,
   on cache navbar/footer/CTA et on garde juste le contenu lisible. */
@media print {
  .navbar,
  .footer,
  .article-cta,
  .blog-sidebar,
  .nav-burger,
  .mobile-menu {
    display: none !important;
  }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .article-content { max-width: 100%; padding: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   OPTIMISATIONS PERFORMANCES MOBILE (cible : LCP < 2.5s, TBT < 200ms)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Désactiver les particles décoratives sur mobile ─────────────
   Ces 18 divs animées en CSS consomment du CPU sans valeur visuelle. */
@media (max-width: 768px) {
  .hero-particles,
  .particle {
    display: none !important;
  }
}

/* ─── 2. Réduire les animations de glow sur mobile ───────────────────
   Les blur(60px) sont coûteux à calculer pendant le scroll. */
@media (max-width: 768px) {
  .hero-glow,
  .hero-glow-1,
  .hero-glow-2 {
    animation: none !important;
    filter: blur(40px) !important;
  }
}

/* ─── 3. Désactiver les transitions sur les très petits écrans pendant
   le scroll initial (premier rendu plus rapide). ─────────────────── */
@media (max-width: 480px) {
  .reveal,
  .reveal.visible {
    transition-duration: .2s !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   OPTIMISATIONS ACCESSIBILITÉ (cible : score 95+)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 4. Skip-to-content (lecteurs d'écran + navigation clavier) ─── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99999;
  padding: 12px 20px;
  background: var(--green, #1ab977);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.skip-to-content:focus {
  left: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ─── 5. Focus visible amélioré (navigation clavier visible) ─────── */
*:focus-visible {
  outline: 3px solid var(--green, #1ab977);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Empêcher l'outline par défaut moche au clic souris (mais le garder au clavier) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ─── 6. Améliorer le contraste des liens sur fond sombre ────────── */
.dark-section a:not(.btn),
.footer a:not(.btn),
.navbar a:not(.btn-nav) {
  text-decoration-color: rgba(26,185,119,.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dark-section a:not(.btn):hover,
.footer a:not(.btn):hover,
.navbar a:not(.btn-nav):hover {
  text-decoration-color: var(--green, #1ab977);
  text-decoration-thickness: 2px;
}

/* ─── 7. Ratio de contraste minimum pour les textes secondaires ─── */
/* Uniquement sur fonds CLAIRS — pas sur les sections sombres ! */
.contact-info .text-muted,
.section-desc:not(.dark-section .section-desc) {
  color: #4a5568; /* contraste 8.5:1 sur fond blanc */
}

/* ─── 8. Indicateur visuel pour les liens externes (a11y) ────────── */
a[target="_blank"]::after {
  content: " ↗";
  font-size: .85em;
  opacity: .6;
}


/* ═══════════════════════════════════════════════════════════════════
   STABILISATION DU LCP MOBILE (anti-CLS, anti-FOUC)
   Désactive complètement les animations qui retardent la mesure du LCP.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Pas d'animation reveal sur mobile : tout est immédiatement visible */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Pas d'animation des compteurs : afficher la valeur finale directement */
  .stat-number,
  .chiffre-num {
    animation: none !important;
  }

  /* Hero : hauteur réservée pour éviter tout reflow */
  .hero {
    min-height: 600px;
    contain: layout style;
  }

  /* Réserver l'espace pour le H1 (anti-CLS quand la police charge) */
  .hero-title {
    min-height: 6rem;
    contain: layout;
  }
}

/* Stack de fallback aligné sur Inter (size-adjust) */
body, html {
  font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ANTI-DÉBORDEMENT MOBILE — règles globales
   Force tout à rester dans le viewport, quel que soit l'écran.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Cassage absolu du débordement horizontal */
html, body {
  max-width: 100%;
  overflow-x: clip; /* clip > hidden : empêche le scroll horizontal sans casser sticky */
}

/* 2. Tous les éléments principaux : jamais plus larges que leur parent */
*, *::before, *::after {
  max-width: 100%;
}

/* 3. Images, iframes, vidéos : toujours fluides */
img, picture, video, iframe, svg, canvas, embed, object {
  max-width: 100%;
  height: auto;
  display: block; /* enlève l'espace fantôme sous les images */
}

/* 4. Container : padding réduit sur mobile, jamais plus large que viewport */
@media (max-width: 768px) {
  .container,
  .section-pad,
  section {
    max-width: 100vw;
    padding-left: 18px !important;
    padding-right: 18px !important;
    overflow-x: clip;
  }

  /* Section padding vertical réduit aussi */
  .section-pad {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Hero */
  .hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* 5. Hero stats : passer en wrap sur mobile (au lieu de nowrap qui débordait) */
@media (max-width: 768px) {
  .hero-stats {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center;
  }
  .stat-divider {
    display: none !important;
  }
  .stat-item {
    flex: 1 1 30%;
    min-width: 80px;
  }
  .stat-number {
    font-size: 1.8rem !important;
  }
}

/* 6. Grilles auto-fit qui débordent : forcer 1 colonne sur mobile */
@media (max-width: 600px) {
  .solutions-grid,
  .etapes-grid,
  .chiffres-grid,
  .galerie-grid,
  .realisations-grid,
  .articles-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* 7. Tableaux scrollables horizontalement (au lieu de déborder) */
@media (max-width: 768px) {
  .table-wrap,
  .pricing-table,
  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  table { min-width: auto !important; }
}

/* 8. Boutons & CTA : ne dépassent jamais leur conteneur */
@media (max-width: 480px) {
  .btn,
  .btn-lg {
    max-width: 100%;
    white-space: normal !important; /* permet le retour à la ligne du texte */
    text-align: center;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn {
    width: 100%;
  }
}

/* 9. Réduction des paddings de cards trop larges sur petit mobile */
@media (max-width: 480px) {
  .solution-card,
  .etape-card,
  .chiffre-card,
  .article-card,
  .galerie-card,
  .realisation-card,
  .temoignage-card,
  .faq-item {
    padding: 18px !important;
  }
}

/* 10. Texte trop large : ne jamais déborder même avec mots longs */
h1, h2, h3, h4, p, span, a, li {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHTBOX UNIFIÉE (pour index, blog, realisations)
   Reproduit la lightbox de realisations.html pour toutes les pages
   ═══════════════════════════════════════════════════════════════════ */

.lightbox-global {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 20, 30, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding: 24px;
}

.lightbox-global.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-global-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all .2s;
}

.lightbox-global-close:hover {
  background: rgba(255, 255, 255, .25);
  transform: scale(1.05);
}

.lightbox-global-img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  animation: lb-pop .3s cubic-bezier(.4, 0, .2, 1) both;
}

.lightbox-global-caption {
  margin-top: 14px;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-align: center;
  max-width: 92vw;
}

@keyframes lb-pop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Curseur loupe sur les images zoomables */
[data-lightbox="open"] {
  cursor: zoom-in;
}

/* Empêcher le scroll body quand lightbox ouverte */
body.lb-locked {
  overflow: hidden;
}


/* Bouton zoom sur la card hero (avant <div>, maintenant <button> avec data-lightbox) */
.realisation-overlay {
  cursor: pointer;
  border: none;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Le reste des styles existants dans style.css s'applique */
}

.realisation-overlay:focus-visible {
  outline: 3px solid var(--green, #1ab977);
  outline-offset: -3px;
}

/* Garde le texte du lien "Voir réalisations" stylé comme avant */
.realisation-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--green, #1ab977);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: -0.01em;
  transition: gap .25s ease;
}
.realisation-link:hover {
  gap: 14px;
}


/* ═══════════════════════════════════════════════════════════════════
   STABILISATION FINALE LCP & CLS (cible : LCP < 3s, CLS < 0.1)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Réserver explicitement la hauteur du LCP element (.hero-subtitle) */
.hero-subtitle {
  min-height: 5rem; /* permet 3-4 lignes texte sans shift */
  contain: layout style;
}

@media (max-width: 600px) {
  .hero-subtitle {
    min-height: 6.5rem; /* mobile : plus de lignes nécessaires */
  }
}

/* 2. Hero badge : réserver l'espace */
.hero-badge {
  min-height: 2rem;
}

/* 3. Liens : retirer text-decoration-color qui crée des animations non-composités */
a {
  text-decoration-color: currentColor !important;
  transition: color .2s ease;
}

/* 4. Préchargement amélioré : la police 600 est utilisée immédiatement dans hero-stats */
.stat-label {
  font-weight: 500; /* Au lieu de 600 qui peut shifter */
}