/* ===================================================
   D/CREATORS — RESPONSIVE GLOBAL v2
   Couvre tous les breakpoints pour toutes les pages
   Vient APRÈS main.css / contact.css / portfolio.css
   =================================================== */

/* ══════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}

/* Le site est traduit en 8 langues (dont l'allemand et le néerlandais,
   qui produisent des mots composés bien plus longs que le français).
   Ces règles évitent tout débordement horizontal quel que soit le
   texte affiché, sur tous les écrans. */
h1, h2, h3, h4, p, li, a, button, .btn, .pill, .nav-links a, .nav-mobile a,
.client-tile-name, .footer a, .label {
  overflow-wrap: break-word;
  word-break: break-word;
}

body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════
   PORTFOLIO — IMAGES DANS LES MODALS (tous écrans)
   Corrige les images déformées / trop grandes sur PC et mobile
   ══════════════════════════════════════════════════════ */

/* Galerie 2 colonnes : images avec ratio fixe */
.modal-gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  display: block;
}

/* Galerie colonne unique : image plus haute mais contenue */
.modal-gallery.single img {
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: var(--bg-card-alt);
}

/* Image portrait très haute (ex: rfootball-salons.png) */
.modal-gallery.single img[src*="salons"],
.modal-gallery.single img[src*="portrait"] {
  max-height: 560px;
  object-fit: contain;
  object-position: top;
}

/* Image sportify-pronos inline dans le modal-block */
.modal-block img {
  max-width: 380px;
  width: 100%;
  border-radius: 10px;
  display: block;
  height: auto;
}

/* Header modal : logo client carré, propre */
.modal-header img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

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

  /* Index / Contact — grid-2 avec grand gap */
  .grid-2[style*="gap:72px"],
  .grid-2[style*="gap: 72px"],
  .grid-2[style*="gap:64px"],
  .grid-2[style*="gap: 64px"],
  .about-grid {
    gap: 40px !important;
  }

  /* Services — cards grid-2 interne */
  .card .grid-2 {
    gap: 32px !important;
  }

  /* Footer 4 col → 2 col */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ══════════════════════════════════════════════════════
   TABLETTE — ≤ 900px
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Services : cards en colonne ── */
  .card .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Index / Contact : grilles principales en colonne ── */
  .grid-2[style*="gap:72px"],
  .grid-2[style*="gap: 72px"],
  .grid-2[style*="gap:64px"],
  .grid-2[style*="gap: 64px"],
  .about-compact .grid-2,
  .about-grid,
  .stagger.grid-2 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }


  /* ── Services : "comment ça marche" grid-3 → 2 col ── */
  .stagger.grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px;
  }

  /* ══ MENTIONS LÉGALES — sidebar → dessus ══ */
  .legal-content {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .legal-toc {
    position: static !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 16px 20px;
  }
  .legal-toc-title {
    width: 100%;
    margin-bottom: 2px;
  }
  .legal-toc a {
    padding: 3px 0;
    font-size: 0.82rem;
  }
  .legal-article {
    padding: 28px 24px;
    max-width: none !important;
  }

  /* ══ CONTACT — contact-grid → colonne ══ */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
  .contact-aside {
    position: static !important;
  }

  /* ── Portfolio modal header ── */
  .modal-header {
    gap: 14px;
  }

  /* ── Portfolio images modal en tablette ── */
  .modal-gallery img {
    height: 220px;
  }

  /* ── Footer ── */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

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

  /* ── Texte justifié aussi sur mobile (rendu plus soigné) ── */
  /* La césure (hyphens) évite les grands "trous" blancs que le texte
     justifié crée avec les mots longs (allemand, néerlandais...) sur
     une colonne étroite. */
  p, li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Ce paragraphe centre volontairement sa dernière ligne (et celle avant
     le <br/>) en desktop ; sur mobile, ce centrage isolé de la dernière
     ligne d'un texte justifié rendait l'affichage incohérent. */
  .fs-098-tal { text-align-last: left; }

  /* Le retour à la ligne forcé entre les deux phrases est pensé pour un
     rendu desktop équilibré : sur mobile il casse le flux naturel du
     texte, on le désactive pour laisser le paragraphe s'enchaîner. */
  .br-desktop { display: none; }

  /* ── Respiration générale : containers, sections, cartes ── */
  .container { padding: 0 20px; }
  section { padding: 64px 0; }
  .card { padding: 26px 20px; }

  /* ── Titres de section : un peu plus d'air avant/après ── */
  .section-header { margin-bottom: 40px; }
  .section-header .label { margin-bottom: 16px; }
  .section-header h2 { margin-bottom: 18px; }

  /* ── Services : "comment ça marche" → 1 col ── */
  .stagger.grid-3 {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }

  /* ── Contact : hero ── */
  .contact-hero {
    padding-top: calc(64px + 48px) !important;
    padding-bottom: 48px !important;
  }

  /* ── Contact : form ── */
  .contact-form-wrap {
    padding: 28px 20px;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* ── Contact : aside email ── */
  .aside-discord {
    flex-wrap: wrap;
  }
  .aside-discord .aside-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-left: 0;
  }
  .aside-email {
    flex-wrap: wrap;
    gap: 12px;
  }
  .aside-email-actions {
    margin-left: 0 !important;
    width: 100%;
    flex-direction: row;
    gap: 8px;
  }
  .aside-email-actions .aside-btn {
    flex: 1;
    justify-content: center;
    text-align: center;
    margin-left: 0;
  }

  /* ── Mentions légales : article ── */
  .legal-article {
    padding: 24px 20px !important;
  }
  .legal-article h2 {
    font-size: 1.2rem;
    margin-top: 32px;
  }
  .legal-h3 {
    font-size: 0.95rem;
  }

  /* ── Portfolio : client tiles 2 col ── */
  .client-tile {
    flex: 1 1 calc(50% - 1px);
    min-width: 140px;
    padding: 32px 16px;
  }
  .client-tile-logo {
    width: 64px;
    height: 64px;
  }

  /* ── Portfolio : modal ── */
  .modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .modal-box {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
  }
  .modal-header {
    padding: 24px 20px 0;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  .modal-header img {
    width: 48px;
    height: 48px;
  }
  .modal-body {
    padding: 20px 20px 32px;
  }
  .modal-gallery {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .modal-gallery img {
    height: auto;
    max-height: 320px;
    object-fit: cover;
  }
  .modal-gallery.single img {
    max-height: 280px;
  }
  .modal-stats {
    gap: 18px;
    flex-wrap: wrap;
  }
  .sportify-cmds {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* ── Hero ── */
  .hero-logo { margin-bottom: 28px; }
  .badge { margin-bottom: 20px; }
  .hero p { margin-top: 20px; }

  /* ── Hero CTA ── */
  .hero-cta {
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Stats ── */
  .stat-sep { display: none; }
  .stat-num { font-size: 1.8rem; }
  .stat-strip {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 44px;
    padding-top: 28px;
  }

  /* ── Nav ── */
  .nav-logo img { height: 42px; }

  /* ── Footer ── */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 8px;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 20px;
  }

  /* ── RGPD ── */
  .rgpd-banner {
    bottom: 12px;
    border-radius: 12px;
    padding: 14px 16px;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }
  .rgpd-banner-btn {
    align-self: stretch;
    text-align: center;
  }
}

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

  h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); }

  .hero {
    padding-top: calc(68px + 36px);
    padding-bottom: 40px;
  }

  .btn {
    padding: 12px 18px;
    font-size: 0.85rem;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Portfolio tiles → 1 col */
  .client-tile { flex: 1 1 100%; }

  /* Contact pills */
  .subject-pills { gap: 6px; }
  .pill { font-size: 0.75rem; padding: 6px 10px; }

  /* Badge */
  .badge { font-size: 0.65rem; padding: 5px 10px; }

  /* Modal */
  .modal-stat-num { font-size: 1.5rem; }

  /* Nav */
  .nav-inner { padding: 0 14px; height: 60px; }
  .nav-logo img { height: 36px; }

  /* Sections */
  section { padding: 48px 0; }
  .card { padding: 20px 16px; border-radius: 14px; }
  .container { padding: 0 16px; }

  /* Footer */
  .footer-inner { padding: 0 16px; gap: 24px; }
}

/* ══════════════════════════════════════════════════════
   PAYSAGE MOBILE — hauteur réduite
   ══════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero,
  .contact-hero {
    min-height: auto;
    padding-top: calc(60px + 28px) !important;
    padding-bottom: 36px !important;
  }
  .hero-logo {
    width: 60px;
    height: 60px;
    margin-bottom: 14px;
  }
  .stat-strip {
    margin-top: 20px;
    padding-top: 16px;
  }
}

/* ══════════════════════════════════════════════════════
   ACCESSIBILITÉ — réduction de mouvement
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .client-tile-logo { transform: none; }
  .logo-track { animation: none; }
  .modal-box { transition: none; }
  .modal-close:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════
   GRANDS ÉCRANS — ≥ 1400px
   ══════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .container,
  .nav-inner,
  .footer-inner,
  .footer-bottom {
    max-width: 1260px;
  }
}