/* =====================================================================
   BLUME — Passe responsive complète
   ---------------------------------------------------------------------
   Chargé APRÈS style.css et pages.css pour affiner l'affichage sur
   tablette et mobile. Breakpoints : 1024 (tablette), 768 (petite
   tablette / grand mobile), 480 (mobile).
   ===================================================================== */

/* ---------- TABLETTE (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .container { padding-left: 1.4rem; padding-right: 1.4rem; }
  .section { padding-top: clamp(3rem, 8vw, 5rem); padding-bottom: clamp(3rem, 8vw, 5rem); }

  /* Réalisations : grille plus souple */
  .work__grid { grid-template-columns: repeat(2, 1fr); }

  /* Services : garder lisible */
  .svc-row { gap: 2rem; }
}

/* ---------- GRAND MOBILE / PETITE TABLETTE (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* Typographie : réduire les très gros titres */
  .hero h1, .page-hero h1 { font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.05; }
  .section h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  /* Hero : plus d'air en haut (header fixe) */
  .hero { padding-top: 120px; text-align: center; }
  .hero__cta { justify-content: center; }

  /* Grilles → une colonne */
  .work__grid { grid-template-columns: 1fr; }
  .svc-row,
  .svc-row--reverse { grid-template-columns: 1fr; gap: 1.4rem; }
  .svc-row__media { order: 0 !important; }
  .duo__grid { grid-template-columns: 1fr; }

  /* Études de cas : sections empilées */
  .proj-section { grid-template-columns: 1fr; gap: 1.4rem; }
  .proj-section--reverse .proj-section__media { order: 0; }
  .proj-meta { gap: 1.6rem; }
  .proj-gallery__grid { grid-template-columns: 1fr 1fr; }

  /* Écrans LED + offres : une colonne */
  .led__versions, .led__offers { grid-template-columns: 1fr; }
  .offers__grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .offer-card--featured { order: -1; }

  /* Footer : empilé et centré */
  .footer__top { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .footer__bottom { flex-direction: column; gap: .8rem; text-align: center; }

  /* Contact : formulaire pleine largeur */
  .contact__grid { grid-template-columns: 1fr; }

  /* Admin : sidebar repliée en haut (si consulté sur mobile) */
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; gap: .5rem; padding: 1rem; }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .sidebar__foot { margin-top: 0; }
  .admin-main { padding: 1.4rem; }
  .mailbox { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .seo-body { grid-template-columns: 1fr; }
  .data-grid { grid-template-columns: 1fr; }
}

/* ---------- MOBILE (≤ 480px) ---------- */
@media (max-width: 480px) {
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }

  .hero h1, .page-hero h1 { font-size: clamp(1.8rem, 10vw, 2.6rem); }
  .hero p, .page-hero p { font-size: 1rem; }

  /* Boutons pleine largeur pour le pouce */
  .btn { width: 100%; text-align: center; justify-content: center; }
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; }

  /* Galerie projet : une colonne sur très petit écran */
  .proj-gallery__grid { grid-template-columns: 1fr; }

  /* Cartes offres : padding réduit */
  .offer-card { padding: 1.5rem; }
  .offer-card__price { font-size: 1.6rem; }

  /* LED : padding réduit */
  .led-card__body { padding: 1.3rem; }

  /* Logos clients : wrap propre */
  .clients__row { flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: center; }
  .clients__row img { max-height: 44px; }

  /* Pages légales : moins de marge */
  .legal__content h2 { font-size: 1.25rem; }

  /* Bandeau cookies : boutons empilés déjà géré dans cookies.css */

  /* Bouton cookies flottant : un peu plus petit */
  .cookie-reopen { width: 40px; height: 40px; font-size: 1rem; left: 12px; bottom: 12px; }
}

/* ---------- Très petits écrans (≤ 360px) ---------- */
@media (max-width: 360px) {
  .hero h1, .page-hero h1 { font-size: 1.7rem; }
  .brand img { max-height: 32px; }
}

/* =========================================================
   SERVICES — scroll horizontal au doigt sur mobile/tablette
   (le scroll GSAP piloté n'est actif qu'à partir de 901px)
   ========================================================= */
@media (max-width: 900px) {
  .h-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* défilement fluide iOS */
    scroll-snap-type: x mandatory;        /* s'aligne sur chaque carte */
    scrollbar-width: none;                /* masque la barre (Firefox) */
    padding-bottom: .5rem;
    /* déborde volontairement du conteneur pour un swipe pleine largeur */
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .h-scroll::-webkit-scrollbar { display: none; }  /* masque la barre (Chrome/Safari) */

  .h-scroll__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    transform: none !important;  /* neutralise un éventuel transform GSAP résiduel */
  }

  .s-card {
    flex: 0 0 82vw;              /* une carte occupe ~82% de l'écran : on devine la suivante */
    max-width: 340px;
    min-height: auto;            /* la hauteur s'adapte au contenu sur mobile */
    scroll-snap-align: center;
    padding: 1.8rem;
  }

  /* L'indicateur devient un vrai repère de défilement */
  .h-scroll__hint { margin-top: 1.2rem; }
}

/* =========================================================
   MENU BURGER — contraste garanti en toutes circonstances
   (avant : barres blanches invisibles sur fond clair au scroll)
   ========================================================= */
@media (max-width: 900px) {
  .burger {
    /* pastille sombre translucide : les barres blanches restent lisibles
       quel que soit le contenu qui défile derrière le header */
    background: rgba(20, 20, 21, .75);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    width: 44px;                 /* zone de tap confortable (>= 44px recommandé) */
    height: 40px;
    padding: 10px 8px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .5);
    transition: background .3s ease;
  }
  .burger span {
    width: 22px;
    background: #fff;            /* barres blanches sur pastille sombre : contraste fort */
  }
  /* Quand le menu est ouvert, la pastille s'efface (le panneau est déjà sombre) */
  .burger.open {
    background: transparent;
    box-shadow: none;
  }

  /* Le header n'est plus totalement transparent en haut de page :
     un léger voile garantit la lisibilité du logo et du burger */
  .site-header:not(.scrolled) {
    background: linear-gradient(180deg, rgba(15,15,16,.55), rgba(15,15,16,0));
  }
}

/* =========================================================
   FOOTER — tout centrer proprement sur mobile
   (les blocs flex ne se centrent pas avec text-align seul)
   ========================================================= */
@media (max-width: 900px) {
  /* Logo + texte de marque */
  .footer__brand { display: flex; flex-direction: column; align-items: center; }
  .footer__brand img { margin-left: auto; margin-right: auto; }
  .footer__brand p { max-width: 100%; margin-left: auto; margin-right: auto; }

  /* Le trait décoratif sous les titres h4 : recentré */
  .footer h4 { text-align: center; }
  .footer h4::after { left: 50%; transform: translateX(-50%); }

  /* Liens de navigation : centrés */
  .footer ul { align-items: center; }
  .footer ul a:hover { transform: none; }   /* évite le décalage latéral au tap */

  /* Bloc "Nos agences" : chaque agence centrée (drapeau + texte) */
  .footer__agences { display: flex; flex-direction: column; align-items: center; }
  .footer-agence {
    justify-content: center;      /* centre drapeau + texte horizontalement */
    align-items: center;
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
  .footer-agence div { align-items: center; }   /* centre le nom + l'adresse */
  .footer-agence .flag { margin-top: 0; }

  /* Bas de footer (copyright + liens légaux) */
  .footer__bottom { align-items: center; }
}