/* ============================================================
   REPTHOCI.NET — Responsive global
   À inclure EN DERNIER dans le <head> de chaque page :
   <link rel="stylesheet" href="css/responsive.css">

   Les pages définissaient des grilles à colonnes fixes
   (repeat(3, 1fr), 260px 1fr...) avec très peu de media
   queries : sur mobile, les colonnes se compressaient et le
   contenu débordait horizontalement.

   Cette feuille ne modifie AUCUNE structure : elle ne fait que
   replier les grilles et ajuster les tailles sous 3 seuils.
   ============================================================ */

/* ---------- 0. Garde-fous globaux ---------- */
html { -webkit-text-size-adjust: 100%; }

*, *::before, *::after { box-sizing: border-box; }

body { overflow-x: hidden; }

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

/* Les tableaux larges défilent au lieu d'élargir la page */
table { max-width: 100%; }
.table-wrap, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Empêche un mot long (URL, e-mail) de faire déborder la page */
p, li, h1, h2, h3, h4, td, th, a { overflow-wrap: break-word; }

/* ---------- 0 bis. Enfants de grille et de flexbox ----------
   Un element de grille ou de flexbox a par defaut « min-width: auto » :
   il refuse de devenir plus etroit que son contenu. Un seul bloc large
   a l'interieur — un calendrier de 12 mois, une barre de statistiques —
   elargit alors sa colonne, puis la grille, puis la page entiere.

   Mesure sur evenements.html en 390 px de large : la colonne de contenu
   faisait 761 px, et la page debordait de 385 px. Les plafonds poses sur
   les blocs eux-memes n'y changeaient rien, puisque c'est le CONTENEUR
   qui refusait de retrecir.
   ------------------------------------------------------------ */
.main-grid > *,
.annuaire-layout > *,
.fiche-layout > *,
.contact-grid > *,
.navbar-inner > *,
.header-inner > * {
  min-width: 0;
}


/* ============================================================
   1. TABLETTE  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding-left: 20px; padding-right: 20px; }

  /* Mise en page principale : contenu + colonne latérale */
  .main-grid,
  .contact-grid,
  .annuaire-layout,
  .listing-grid {
    grid-template-columns: 1fr !important;
  }

  /* La sidebar passe sous le contenu principal */
  .sidebar, aside.sidebar { position: static !important; width: 100% !important; }

  /* Grilles de cartes : 3-4 colonnes → 2 */
  .dest-grid,
  .articles-grid,
  .article-grid,
  .events-grid,
  .cat-grid,
  .premium-grid,
  .faq-grid,
  .social-grid,
  .org-grid,
  .gallery-grid,
  .hotels-grid,
  .members-grid,
  .bureau-grid,
  .pres-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Blocs à 2 colonnes texte/image */
  .featured-article,
  .featured-card,
  .featured-event,
  .hero-inner,
  .page-hero-inner,
  .newsletter-inner,
  .president-inner,
  .event-modal-details {
    grid-template-columns: 1fr !important;
  }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ============================================================
   2. MOBILE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  .container { padding-left: 16px; padding-right: 16px; }

  /* --- Navigation : 8 entrées ne tiennent pas sur une ligne.
     On la rend défilante horizontalement plutôt que de la casser. --- */
  header .container,
  .header-inner,
  .navbar .container,
  .navbar-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* MENU DÉROULANT, PAS BARRE DÉFILANTE
     Ce fichier forçait « display: flex !important » sur la liste, ce qui
     transformait le menu en bande défilante horizontalement — et comme le
     « !important » l'emportait sur le « display: none » des pages, le menu
     restait affiché EN MÊME TEMPS que le bouton ☰ censé l'ouvrir. Deux
     mécanismes concurrents, dont un visiblement inutile.

     On garde donc le bouton : la liste est repliée par défaut et ne
     s'ouvre qu'au clic, en colonne, sous la barre. Pas de « !important »
     ici, pour que la règle d'une page puisse encore faire exception.

     min-width: 0 reste nécessaire : un élément flex refuse par défaut de
     descendre sous la largeur de son contenu, et la barre débordait alors
     de la page (385 px de trop sur evenements.html en 390 px de large). */
  .nav-links {
    min-width: 0;
    max-width: 100%;
  }

  /* Menu replié — c'est l'état par défaut sur mobile. */
  .navbar .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    gap: 2px;
    width: auto;
    margin: 0;
    padding: 8px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(107, 48, 16, .15);
    /* Un menu plus haut que l'écran doit pouvoir défiler, sinon ses
       dernières entrées deviennent inatteignables sur un petit téléphone. */
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

  /* Menu ouvert par le bouton ☰ (classe posée par initNavMobile). */
  .navbar.nav-open .nav-links { display: flex; }

  .navbar { position: relative; }   /* repère du positionnement ci-dessus */

  .nav-links li { flex: 0 0 auto; width: 100%; }
  .nav-links li a {
    display: block;
    white-space: nowrap;
    font-size: 15px;
    padding: 12px 14px;
  }

  /* Le bouton ☰ doit rester visible : il est désormais le seul accès au
     menu. Les pages l'affichent sous 920 px, on le confirme ici. */
  .nav-toggle { display: flex !important; }

  /* Barre supérieure : masquer les mentions secondaires */
  .topbar .topbar-right span:not(:first-child) { display: none; }

  /* --- Toutes les grilles passent sur une colonne --- */
  .dest-grid,
  .articles-grid,
  .article-grid,
  .events-grid,
  .cat-grid,
  .premium-grid,
  .faq-grid,
  .social-grid,
  .org-grid,
  .gallery-grid,
  .hotels-grid,
  .members-grid,
  .bureau-grid,
  .pres-grid,
  .stats-grid,
  .form-row {
    grid-template-columns: 1fr !important;
  }

  .footer-top { grid-template-columns: 1fr !important; gap: 28px; }

  /* --- Typographie : titres fluides --- */
  h1 { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.2; }
  h2 { font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.25; }
  h3 { font-size: clamp(17px, 4.4vw, 21px) !important; }

  /* --- Boutons : pleine largeur, cible tactile confortable --- */
  .btn-primary,
  .btn-ghost,
  .btn-adhesion,
  .partners-cta {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .hero-cta,
  .hero-buttons,
  .cta-group {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  /* --- Formulaires : évite le zoom automatique iOS (< 16px) --- */
  input, select, textarea { font-size: 16px !important; }
  input, select, textarea, button { max-width: 100%; }

  /* --- Statistiques : 5 colonnes → 2 --- */
  .stats-bar,
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  /* --- Espaces publicitaires : ne jamais forcer une largeur fixe --- */
  .ad-space,
  .ad-leaderboard,
  .ad-inline,
  [data-pub-espace] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 90px;
  }
  .ad-space img { width: 100%; height: auto; object-fit: contain; }

  /* --- Blocs qui debordaient encore, releves un par un au navigateur
         a 390 px de large. Chacun est un conteneur dont la largeur
         minimale etait dictee par son contenu. --- */

  /* Accueil : la barre de statistiques (5 chiffres alignes) forcait
     445 px de large. */
  .stats-inner {
    flex-wrap: wrap !important;
    min-width: 0;
  }
  .stat-item { min-width: 0; flex: 1 1 40%; }
  .stat-num  { font-size: clamp(18px, 5vw, 26px) !important; word-break: break-word; }

  /* Actualites : la barre de recherche et ses puces de categorie
     poussaient la page a 692 px. */
  .search-input-wrap { min-width: 0; width: 100%; }
  .search-input-wrap input { min-width: 0; width: 100%; }
  .cat-chips {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-chips::-webkit-scrollbar { display: none; }
  .cat-chip { flex: 0 0 auto; }

  /* Evenements : le calendrier des mois, 12 entrees sur une ligne,
     atteignait 775 px. Il defile lateralement plutot que d'elargir
     la page. */
  .calendar-strip { min-width: 0; max-width: 100%; overflow: hidden; }
  .calendar-strip-header,
  .months-row {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .months-row::-webkit-scrollbar,
  .calendar-strip-header::-webkit-scrollbar { display: none; }
  .months-row > * { flex: 0 0 auto; }

  /* --- Sections : respiration réduite --- */
  section { padding-top: 40px; padding-bottom: 40px; }

  /* --- Tableaux larges : défilement horizontal --- */
  table { display: block; overflow-x: auto; white-space: nowrap; }
}


/* ============================================================
   3. PETIT MOBILE  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }

  .stats-bar,
  .hero-stats { grid-template-columns: 1fr !important; }

  .footer-top { gap: 22px; }

  /* Le logo ne doit pas écraser la barre d'en-tête */
  header img, .logo img { max-height: 38px; width: auto; }

  section { padding-top: 32px; padding-bottom: 32px; }

  /* Fil d'ariane : évite le retour à la ligne disgracieux */
  .breadcrumb { font-size: 11.5px; padding: 4px 10px; }
}


/* ============================================================
   4. ACCESSIBILITÉ TACTILE
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Cible tactile minimale recommandée : 44x44px */
  a, button, .cat-chip, .nav-links li a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* Les effets de survol n'ont pas de sens au doigt */
  .partner-logo:hover,
  .org-card:hover,
  .pres-card:hover,
  .member-card:hover { transform: none; }
}