/* ============================================================
   RUN-IT SYSTEM — Responsive v3.1
   Breakpoints : 1024px | 768px | 480px
   ============================================================ */

/* ============================================================
   TABLET ≤ 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* Grilles */
  .services__grid   { grid-template-columns: repeat(2, 1fr); }
  .expertise__grid  { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact__wrapper { grid-template-columns: 1fr; gap: 40px; }

  /* Process : passage en colonne */
  .process__steps   { flex-direction: column; align-items: center; }
  .process__step    { width: 100%; max-width: 440px; }
  .process__connector { width: 2px; height: 32px; margin: 0 auto; }

  /* Footer */
  .footer__grid     { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__brand    { grid-column: span 2; }
}


/* ============================================================
   MOBILE ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Sections */
  .section { padding: 64px 0; }

  /* Section header : réduire la marge basse */
  .section__header  { margin: 0 auto 40px; }

  /* Topbar masquée sur mobile */
  .topbar { display: none; }

  /* ---- Navbar mobile ---- */
  .navbar { padding: 12px 0; }
  .navbar__nav {
    position: fixed;
    top: 0; right: -100%;
    height: 100vh;
    width: min(300px, 80vw);
    background: var(--dark-2);
    border-left: 1px solid rgba(255,255,255,.08);
    padding: 72px 20px 32px;
    transition: right var(--transition);
    z-index: 998;
    overflow-y: auto;
  }
  .navbar__nav.open  { right: 0; }
  .nav__list         { flex-direction: column; gap: 2px; }
  .nav__link         { padding: 14px 16px; font-size: .95rem; }
  .navbar__burger    { display: flex; z-index: 999; }
  .navbar__cta       { display: none; }
  .nav-overlay       { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 997; }
  .nav-overlay.open  { display: block; }

  /* ---- Hero ---- */
  .hero             { min-height: auto; padding: 0; }
  .hero__inner      { padding: 80px 0 80px; width: 100%; } /* width:100% évite tout débordement */
  .hero__content    { max-width: 100%; }
  .hero__eyebrow    { letter-spacing: .08em; font-size: .74rem; margin-top: 24px; }
  .hero__title      { font-size: clamp(1.9rem, 7vw, 2.5rem); margin-bottom: 16px; }
  .hero__subtitle   { font-size: .95rem; margin-bottom: 28px; max-width: 100%; }
  .hero__actions    { flex-direction: column; gap: 12px; margin-bottom: 24px; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Section desc légèrement réduit sur mobile */
  .section__desc    { font-size: .93rem; }

  /* ---- Services ---- */
  .services__grid   { grid-template-columns: 1fr; gap: 16px; }

  /* Bouton de la carte "Et aussi" : pleine largeur sur mobile */
  .service__card--more .btn,
  .service__card-cta { width: 100%; justify-content: center; align-self: stretch; }

  /* ---- Expertise ---- */
  .expertise__grid  { grid-template-columns: 1fr; gap: 14px; }
  .expertise__item  { padding: 22px; }
  .expertise__item h3 { font-size: .92rem; }

  /* ---- Process ---- */
  .process__step    { max-width: 100%; padding: 0 8px; }
  .process__connector { height: 24px; }

  /* ---- Contact ---- */
  .contact__info h3   { font-size: 1.1rem; margin-bottom: 16px; }
  .contact__details   { gap: 12px; }
  .contact__form-wrap { padding: 28px 20px; }
  .form__row          { grid-template-columns: 1fr; gap: 0; }

  /* Turnstile : centré et borné sur mobile */
  .cf-turnstile       { display: flex; justify-content: flex-start; max-width: 100%; overflow: hidden; }

  /* ---- Footer ---- */
  .footer__top        { padding: 48px 0; }
  .footer__grid       { grid-template-columns: 1fr; gap: 28px; }
  .footer__brand      { grid-column: auto; }
  .footer__bottom-inner { flex-direction: column; text-align: center; gap: 6px; }

  /* ---- Cookie banner ---- */
  .cookie-banner      { padding: 16px; }
  .cookie-banner__inner { flex-direction: column; gap: 14px; }
  .cookie-banner__text  { min-width: unset; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; }

  /* ---- Back to top ---- */
  .back-to-top { bottom: 16px; right: 16px; }
}


/* ============================================================
   SMALL MOBILE ≤ 480px
   ============================================================ */
@media (max-width: 480px) {

  /* Conteneur */
  .container          { padding: 0 16px; }

  /* Section */
  .section            { padding: 52px 0; }
  .section__header    { margin: 0 auto 32px; }
  .section__title     { font-size: 1.5rem; line-height: 1.25; }
  .section__desc      { font-size: .88rem; }

  /* Hero */
  .hero__eyebrow      { font-size: .7rem; letter-spacing: .06em; }
  .hero__subtitle     { font-size: .91rem; margin-bottom: 24px; }

  /* ---- Services ---- */
  .services__grid     { gap: 12px; }
  .service__img       { height: 150px; }
  .service__body      { padding: 18px; }

  /* ---- Expertise ---- */
  .expertise__grid    { gap: 10px; }
  .expertise__item    { padding: 18px; }
  .expertise__item h3 { font-size: .88rem; }
  .expertise__item p  { font-size: .82rem; }
  .expertise__icon    { width: 38px; height: 38px; font-size: .9rem; margin-bottom: 12px; }

  /* ---- Process ---- */
  .process__step      { padding: 0; }
  .process__connector { height: 20px; }
  .step__number       { font-size: 2rem; margin-bottom: 10px; }

  /* ---- Contact ---- */
  .contact__form-wrap { padding: 20px 14px; border-radius: var(--radius-lg); }
  .form__group        { margin-bottom: 14px; }
  .contact__detail-icon { width: 36px; height: 36px; font-size: .85rem; }

  /* Turnstile : scale si écran trop étroit (widget ~300px natif) */
  .cf-turnstile {
    transform-origin: left center;
    transform: scale(0.92);
    margin-bottom: -8px; /* compenser le blanc laissé par le scale */
  }

  /* ---- Footer ---- */
  .footer__top        { padding: 36px 0; }
  .footer__grid       { gap: 22px; }
  .footer__nav h4     { font-size: .74rem; margin-bottom: 12px; }
  .footer__nav a      { font-size: .8rem; }
  .footer__brand p    { font-size: .8rem; max-width: none; }
  .footer__contact address p { font-size: .8rem; }

  /* ---- Cookie banner ---- */
  .cookie-banner      { padding: 14px 12px; }
  .cookie-banner__text p { font-size: .8rem; }

  /* ---- Back to top ---- */
  .back-to-top        { bottom: 12px; right: 12px; width: 38px; height: 38px; font-size: .8rem; }
}


/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .topbar, .navbar, .cookie-banner, .back-to-top, .navbar__burger { display: none !important; }
  .hero          { color: black; background: #eee; min-height: auto; }
  .hero__overlay { display: none; }
  .hero__bg-img  { display: none; }
  .section--dark { background: #f0f0f0; color: black; }
  .expertise__item { border-color: #ccc; background: #f8f8f8; }
  .expertise__item h3, .expertise__item p { color: black; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}