/*
 * FICHIER   : assets/css/responsive.css
 * RÔLE      : Toutes les adaptations responsive du site.
 *             Un seul fichier = un seul endroit pour tout le mobile.
 *             Chargé EN DERNIER pour surcharger les autres CSS.
 *
 * STRUCTURE (du plus large au plus petit)
 *   ══ ≤ 1100px  → tablette paysage / petit desktop
 *   ══ ≤ 768px   → tablette portrait / mobile large
 *   ══ ≤ 480px   → mobile standard
 *
 * OÙ MODIFIER QUOI
 *   Un élément cassé sur mobile     → chercher la classe ici, modifier
 *   Ajouter un breakpoint           → ajouter un bloc @media ici
 *   Responsive d'une section précise → chercher le commentaire de section
 *   Responsive des modals           → bloc /* ══ MODALS ══ *\/
 *
 * DÉPENDANCES
 *   Tous les autres CSS → ce fichier les surcharge via cascade
 *   Doit être chargé EN DERNIER dans layout.php
 *
 * CONVENTION
 *   Mobile-last (desktop first) : on part du desktop et on adapte vers le bas.
 *   Si tu préfères mobile-first, inverser la logique des breakpoints.
 */


/* ══════════════════════════════════════════════════════════════
   ≤ 1100px — TABLETTE PAYSAGE / PETIT DESKTOP
══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {

  /* About — passage en 1 colonne */
  .about {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .about-img-sec  { right: -1rem; bottom: -1.5rem; }

  /* Équipe — 2 colonnes */
  .equipe-grid { grid-template-columns: repeat(2, 1fr); }

  /* Témoignages partenaires — 1 colonne */
  .partner-testimonials { grid-template-columns: 1fr; }

  /* Réalisations — 2 colonnes */
  .real-grid { grid-template-columns: 1fr 1fr; }
  .real-item:first-child { grid-column: span 2; aspect-ratio: 16/9; }
}


/* ══════════════════════════════════════════════════════════════
   ≤ 768px — TABLETTE PORTRAIT / MOBILE LARGE
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAVIGATION ───────────────────────────────────────────── */
  nav ul         { display: none; }   /* masquer liens desktop */
  .hamburger     { display: flex; }   /* afficher hamburger */
  .theme-toggle  { display: none; }   /* masquer toggle thème desktop */

  /* ── HÉRO ─────────────────────────────────────────────────── */
  .hero          { min-height: 100dvh; }
  .hero-right-panel {
    position: absolute;
    inset:    0;
    width:    100%;
    opacity:  .35;
  }
  .hero-photo-mask {
    background: linear-gradient(
      to bottom,
      var(--g1) 0%,
      rgba(6,13,10,0) 40%,
      var(--g1) 100%
    );
  }
  .hero-content  { max-width: 100%; padding: 8rem 5vw 5rem; }
  .hero h1       { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-p        { font-size: .9rem; }

  /* ── TRUST BAR ────────────────────────────────────────────── */
  .trust-div  { display: none; }
  .trust-bar  { flex-direction: column; align-items: flex-start; }

  /* ── ABOUT ────────────────────────────────────────────────── */
  /* Façade vidéo : garder le ratio portrait mais légèrement réduit */
  .about-video-facade { aspect-ratio: 4 / 3; }
  .about-play-btn     { width: 56px; height: 56px; font-size: 1.4rem; }
  .about-img-sec      { display: none; } /* trop encombrant sur mobile */
  .about-badge        { width: 88px; height: 88px; top: -1rem; left: -1rem; }
  .badge-n            { font-size: 1.8rem; }
  .about-pillars      { grid-template-columns: 1fr; }

  /* ── SERVICES ─────────────────────────────────────────────── */
  .services-hd  { flex-direction: column; align-items: flex-start; }
  .srv-grid     { grid-template-columns: 1fr; }

  /* ── PROCESS ──────────────────────────────────────────────── */
  .steps { grid-template-columns: 1fr; }

  /* ── GALLERY STRIP ────────────────────────────────────────── */
  .gal-strip { grid-template-columns: 1fr; }

  /* ── RÉALISATIONS ─────────────────────────────────────────── */
  .realisations-hd { flex-direction: column; align-items: flex-start; }

  /* ── FOOTER ───────────────────────────────────────────────── */
  .footer-grid  { grid-template-columns: 1fr; }
  .foot-bottom  { flex-direction: column; text-align: center; }

  /* ── CTA FINAL ────────────────────────────────────────────── */
  .cta-final    { flex-direction: column; padding: 3.5rem 5vw; }
  .cta-right    { align-items: flex-start; }
  .cta-phones   { text-align: left; }
  .cta-phone-a  { justify-content: flex-start; }

  /* ── MODALS ───────────────────────────────────────────────── */
  .modal-body,
  .modal-hd     { padding: 1.4rem 1.2rem; }
  .modal-box    { max-height: 95dvh; }
  .f-row        { grid-template-columns: 1fr; }
  .srv-checks   { grid-template-columns: 1fr; }

  /* ── SERVICE PAGE ─────────────────────────────────────────── */
  .sp-hero         { height: 45vh; min-height: 260px; }
  .sp-body         { padding: 2rem 4vw 5rem; }
  .sp-section-title { font-size: 1.25rem; }
  .sp-list         { grid-template-columns: 1fr; }
  .sp-gallery      { grid-template-columns: 1fr 1fr; }
  .sp-gallery-item:first-child.featured { grid-column: span 2; }
  .sp-stats        { grid-template-columns: 1fr 1fr; }
  .sp-swipe-hint   { display: block; } /* visible uniquement mobile */

  /* ── PADDING GLOBAL DES SECTIONS ─────────────────────────── */
  /* Réduit le padding horizontal sur mobile pour gagner de l'espace */
  .about,
  .services,
  .process,
  .realisations,
  .partners,
  .equipe,
  .info-sec {
    padding-left:  4vw !important;
    padding-right: 4vw !important;
  }

  /* ── CTA FLOTTANT ─────────────────────────────────────────── */
  /* Visible uniquement sur mobile */
  /* (desktop → display:none dans sections.css via @media min-width) */
}


/* ══════════════════════════════════════════════════════════════
   ≤ 480px — MOBILE STANDARD
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── NAVIGATION ───────────────────────────────────────────── */
  .nav-logo-svg { height: 24px; }

  /* ── HÉRO ─────────────────────────────────────────────────── */
  /* Boutons empilés verticalement */
  .hero-btns           { flex-direction: column; align-items: flex-start; }
  .hero-btns .btn-gold,
  .hero-btns .btn-ghost { width: 100%; text-align: center; justify-content: center; }

  /* ── ÉQUIPE ───────────────────────────────────────────────── */
  .equipe-grid { grid-template-columns: 1fr; }

  /* ── RÉALISATIONS ─────────────────────────────────────────── */
  .real-grid { grid-template-columns: 1fr; }
  .real-item:first-child { grid-column: span 1; aspect-ratio: 1; }

  /* ── SERVICE PAGE ─────────────────────────────────────────── */
  .sp-gallery { grid-template-columns: 1fr; }
  .sp-gallery-item:first-child.featured { grid-column: span 1; aspect-ratio: 4/3; }
  .sp-stats   { grid-template-columns: 1fr; }

  /* ── MODALS ───────────────────────────────────────────────── */
  .modal-hd   { padding: 1.2rem 1rem; }
  .modal-body { padding: 1.2rem 1rem; }

  /* ── ABOUT ────────────────────────────────────────────────── */
  .about-video-facade { aspect-ratio: 3 / 2; }
  .about-badge        { display: none; } /* trop serré sur très petit écran */
}


/* ══════════════════════════════════════════════════════════════
   CTA FLOTTANT — masqué sur desktop
   Visible uniquement sur mobile (≤ 768px)
   Sur desktop → géré ici avec min-width
══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #floatCta { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   MODE CLAIR — ajustements responsive spécifiques
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.light-mode .hero-photo-mask {
    background: linear-gradient(
      to bottom,
      var(--g1) 0%,
      rgba(247,250,248,0) 40%,
      var(--g1) 100%
    );
  }
}