/* ══════════════════════════════════════
   AJUSTEMENTS MOBILE ET TABLETTE
   Chargé en dernier : corrige la lisibilité et la mise en page sur petits écrans.
══════════════════════════════════════ */

/* Écrans tactiles : pas de survol, donc le contenu révélé au survol est affiché d'office */
@media (hover: none) {
  .serv-desc { max-height: none; opacity: 1; }
  .partner-card, .part-logo img { filter: none; }
}

/* Lisibilité générale : contrastes un peu plus forts sur fond sombre */
.stat-label { color: rgba(255, 255, 255, .82); }

@media (max-width: 1024px) {
  .services-grille { grid-template-columns: repeat(2, 1fr); }
  .real-grille { grid-template-columns: repeat(2, 1fr); }
  /* Carte Services : l'image passe en fond, la carte prend la hauteur de son texte (rien n'est coupé) */
  .serv-carte { aspect-ratio: auto; min-height: 250px; display: flex; }
  .serv-img { position: absolute; inset: 0; }
  .serv-overlay { position: relative; inset: auto; flex: 1; padding: 26px 22px; background: linear-gradient(to top, rgba(12,12,24,.95) 0%, rgba(12,12,24,.72) 60%, rgba(12,12,24,.35) 100%); }
  .serv-desc { font-size: 15px; color: rgba(255,255,255,.85); }
}

@media (max-width: 768px) {
  /* Grilles en une colonne */
  .services-grille, .real-grille { grid-template-columns: 1fr; gap: 18px; }
  .real-carte:hover { transform: none; }

  /* Apparitions verticales uniquement : un glissement latéral fait « bouger » la page sur téléphone */
  .fade-left, .fade-right { transform: translateY(24px); }
  .fade-left.vis, .fade-right.vis { transform: none; }

  /* Fondateur : photo moins haute, texte aligné à gauche (le justifié crée de grands trous) */
  .founder-portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; }
  .founder-name { font-size: 36px; }
  .founder-title { margin-bottom: 24px; letter-spacing: 1.5px; }
  .founder-text { text-align: left; }

  /* Contact : plus de place pour le formulaire, adresses longues coupées proprement */
  .bento-box { padding: 26px 20px; }
  .c-item-light p, .c-item-light a { overflow-wrap: anywhere; }

  /* Ruban des partenaires : bords fondus plus étroits */
  .partner-slider-container::before, .partner-slider-container::after { width: 48px; }
  .partner-card { flex-basis: 170px; height: 90px; padding: 16px; }
}

@media (max-width: 600px) {
  /* Marges latérales adaptées au téléphone */
  .container { padding: 0 18px; }

  /* Tailles de texte minimales lisibles */
  .s-label, .hero-badge { font-size: 12px; letter-spacing: 1.4px; }
  .tc-tag, .real-pays, .news-tag { font-size: 11.5px; }
  .w-title { font-size: 12px; }
  .real-t { font-size: 17px; }
  .real-d { font-size: 14.5px; }

  /* Accueil : boutons du hero sur toute la largeur, alignés */
  .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-btns > a { justify-content: center; width: 100%; }
  .hero-titre { letter-spacing: -1.5px; font-size: clamp(36px, 10.5vw, 44px); }
}

/* Menu mobile : liens plus grands, faciles à toucher */
@media (max-width: 900px) {
  .nav-menu { padding: 8px 0 20px; }
  .nav-menu > li { padding: 0 22px; border-bottom: 1px solid rgba(0,0,0,.05); }
  .nav-menu > li > a { display: block; font-size: 16px; font-weight: 600; color: var(--txt); padding: 14px 0; }
  .nav-menu > li > a::after { display: none; }
  .nav-menu > li > a.actif { color: var(--rouge); }
  .nav-menu .dropdown-menu { padding: 0 0 10px 12px; }
  .nav-menu .dropdown-menu a { font-size: 15px; padding: 10px 0; color: var(--txt2); }
  .nav-menu > li.nav-mobile-only { border-bottom: 0; padding-top: 16px; }
  .nav-menu > li.nav-mobile-only > a { background: var(--rouge); color: #fff; text-align: center; border-radius: 10px; padding: 14px; }
}