/* =============================================
   KIZA — mobile.css
   Version mobile — breakpoint ≤ 768px
   Ne touche PAS la version desktop
   ============================================= */

@media (max-width: 768px) {

  /* ── VARIABLES MOBILE ── */
  :root {
    --mobile-pad: 20px;
    --mobile-section-pad: 52px var(--mobile-pad);
    --mobile-font-hero: clamp(2.6rem, 11vw, 3.6rem);
    --mobile-font-title: clamp(1.6rem, 7vw, 2.2rem);
  }

  /* ══════════════════════════════════════════
     GLOBAL
  ══════════════════════════════════════════ */

  /* Curseur custom : désactivé mobile (pas de souris) */
  .cursor, .cursor-follower { display: none !important; }

  /* ── FIX OVERFLOW HORIZONTAL ── */
  html { overflow-x: clip; }
  body { overflow-x: hidden; width: 100%; max-width: 100vw; }
  /* Désactiver translateX sur mobile — cause du décalage */
  .reveal-left {
    transform: translateY(18px) !important;
  }
  .reveal-left.visible {
    transform: translateY(0) !important;
  }
  /* Fix hub-bg-word */
  .hub-bg-word { display: none !important; }
  /* Fix nowrap trail */
  .hub-title-trail { white-space: normal !important; }

  /* ── NAV ── */
  .nav { padding: 16px var(--mobile-pad); }
  .nav.scrolled { padding: 12px var(--mobile-pad); }
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
  .mobile-menu { padding-top: 80px; }

  /* ── FOOTER ── */
  .footer { padding: 28px var(--mobile-pad) 20px; }
  .footer-inner {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  /* Logo KIZA + copyright : gauche */
  .footer-logo {
    display: block;
    margin-bottom: 2px;
  }
  .footer-copy {
    display: block;
    font-size: 0.62rem;
    color: var(--muted);
  }

  /* CGV / Confidentialité / Cookies : centrés */
  .footer-center {
    width: 100%;
    align-items: center !important;
    text-align: center;
    gap: 6px;
  }
  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
  }

  /* Liens pages + crédit : centrés, même ligne si possible */
  .footer-right {
    width: 100%;
    align-items: center !important;
    text-align: center;
    gap: 8px;
  }
  .footer-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
  }
  .footer-credit {
    text-align: center;
    width: 100%;
  }

  /* ── CONTENT BLOCKS ── */
  .content-block { padding: var(--mobile-section-pad); }
  .two-col, .two-col.wide-left, .two-col.wide-right {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }
  .section-title { font-size: var(--mobile-font-title); }

  /* ── PAGE HERO ── */
  .page-hero { padding: 100px var(--mobile-pad) 52px; }
  .page-hero-title { font-size: var(--mobile-font-hero); }
  .page-hero-sub { font-size: 0.93rem; }

  /* ══════════════════════════════════════════
     INDEX — PAGE D'ACCUEIL
  ══════════════════════════════════════════ */

  /* Hero */
  .hero { padding: 96px var(--mobile-pad) 56px; }
  .hero-title {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
    line-height: 1.0;
  }
  .hero-sub { font-size: 0.93rem; max-width: 100%; }

  /* ── INFIRMIER HERO mobile : photo masquée ── */
  .hero-infirmier-wrap {
    grid-template-columns: 1fr !important;
  }
  .hero-photo-col { display: none !important; }

  /* ── TIANDAO HERO mobile : logo haut-droite, tout le texte en dessous ── */
  .hero-tiandao-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
    position: relative;
  }
  .hero-logo-col {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 1;
  }
  .tiandao-logo-hero {
    width: 110px !important;
    display: block;
  }
  .hero-tiandao-text {
    padding-right: 0;
    width: 100%;
  }
  .tiandao-hero .page-hero-eyebrow {
    padding-right: 120px;
  }
  .hero-scroll { display: none; }

  /* Ticker */
  .ticker { font-size: 0.6rem; }

  /* Hub cards — empilées verticalement, 1 par ligne */
  .sections-hub {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px;
  }
  .hub-card {
    min-height: auto !important;
    padding: 32px var(--mobile-pad) !important;
  }
  .hub-card-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 0 !important;
    min-height: auto !important;
    grid-template-columns: unset !important;
  }
  .hub-num { font-size: 1.4rem; }
  .hub-icon { width: 36px; height: 36px; }
  .hub-title { font-size: 1.8rem; }
  .hub-desc { font-size: 0.9rem; }
  .hub-bg-word { display: none; }
  .hub-arrow { position: static !important; margin-top: 8px; }
  .hub-soon { font-size: 0.5rem; }

  /* Hub icon wrap (apps/livres) */
  .hub-icon-wrap { gap: 8px; }

  /* Trail card mobile */
  .hub-trail.hub-full.hub-trail-split { flex-direction: column; }
  .hub-trail-content {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 32px var(--mobile-pad) !important;
    align-items: flex-start !important;
  }
  .hub-trail-left { display: flex !important; align-items: center; gap: 12px; }
  .hub-trail-icon-row { flex-direction: row; align-items: center; gap: 12px; }
  .hub-trail-title-block { flex-direction: row; align-items: center; gap: 10px; }
  .hub-title-trail { font-size: 1.8rem !important; white-space: normal !important; }
  .hub-trail-instagram { padding: 14px var(--mobile-pad); font-size: 0.6rem; }

  /* Vision / Citation */
  .vision-section { padding: var(--mobile-section-pad); }
  .vision-inner { flex-direction: column; gap: 28px; }
  .vision-quote {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    padding: 0;
    border-left-width: 3px;
    padding-left: 20px;
  }

  /* Contact blocs */
  .index-contact { padding: var(--mobile-section-pad); }
  .index-contact-inner { grid-template-columns: 1fr !important; gap: 32px; }
  .contact-blocs { grid-template-columns: 1fr !important; max-width: 100% !important; }
  .contact-bloc { padding: 20px; }

  /* ══════════════════════════════════════════
     INFIRMIER
  ══════════════════════════════════════════ */

  /* Hero : photo passe sous le texte */


  /* Stats */
  .hero-stats-row {
    flex-wrap: wrap;
    gap: 16px;
  }
  .hero-stat-item { min-width: 90px; }
  .hero-stat-divider { display: none; }

  /* Accordéons parcours */
  .exp-header { padding: 14px 0; }
  .exp-header-right { flex-direction: column; align-items: flex-end; gap: 4px; }
  .exp-header-left { gap: 12px; }

  /* Diplômes */
  .diplomes-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .diplome-card { padding: 28px 20px; }

  /* Section projets */
  .pic-grid { grid-template-columns: 1fr !important; }

  /* ══════════════════════════════════════════
     TIANDAO
  ══════════════════════════════════════════ */

  /* Hero */


  /* Stats band */
  .stats-band {
    flex-direction: column;
    gap: 0;
  }
  .stats-band-item {
    padding: 18px var(--mobile-pad);
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .stats-band-item:last-child { border-bottom: none; }
  .stats-band-num { font-size: 1.5rem; }

  /* Grille offres */
  .offre-grid {
    grid-template-columns: 1fr !important;
  }
  .offre-card { padding: 28px var(--mobile-pad); }
  .pack-two-col {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .pack-tarif-box { min-width: unset; }
  .pack-tarif-price { font-size: 1.6rem; }

  /* Prix table */
  .prix-table tbody tr {
    grid-template-columns: 1fr auto auto;
  }
  .prix-table td { font-size: 0.82rem; }

  /* Contact QR */
  .tiandao-contact-section { padding: var(--mobile-section-pad); }
  .tiandao-contact-inner {
    grid-template-columns: 1fr !important;
    gap: 36px;
  }
  .tiandao-qr-img { width: 120px !important; height: 120px !important; }
  .tiandao-contact-actions { flex-direction: column; }
  .btn-tiandao-ghost { text-align: center; justify-content: center; }

  /* ══════════════════════════════════════════
     KIZA TRAIL
  ══════════════════════════════════════════ */

  .trail-hero { padding: 96px var(--mobile-pad) 52px !important; }
  .trail-hero-title { font-size: clamp(2.8rem, 12vw, 4rem) !important; }
  .trail-stats { flex-direction: column; gap: 0; }
  .trail-stat { padding: 16px var(--mobile-pad); border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .trail-section { padding: var(--mobile-section-pad); }
  .trail-objectif-card { padding: 28px var(--mobile-pad); }

  /* ══════════════════════════════════════════
     MAKORYA PAGES
  ══════════════════════════════════════════ */

  .page-hero-infirmier { padding: 96px var(--mobile-pad) 48px !important; }
  .theme-apps .page-hero-title,
  .theme-livres .page-hero-title {
    white-space: normal !important;
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
  }

  /* ══════════════════════════════════════════
     CGV / CONFIDENTIALITE / COOKIES
  ══════════════════════════════════════════ */

  .legal-inner { padding: 36px var(--mobile-pad) 64px; }
  .legal-title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .legal-header { flex-direction: column; gap: 10px; }
  .cookie-table { overflow-x: auto; }
  .cookie-row { grid-template-columns: 1fr 1fr; font-size: 0.8rem; }
  .cookie-row span:nth-child(3) { grid-column: 1 / -1; border-right: none; }
  .cookie-choice-actions { flex-direction: column; }
  .cookie-btn-accept,
  .cookie-btn-refuse { width: 100%; text-align: center; }

  /* ══════════════════════════════════════════
     COOKIE BANNER
  ══════════════════════════════════════════ */

  .cookie-banner-inner {
    padding: 16px var(--mobile-pad) !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  .cookie-banner-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cookie-banner-accept,
  .cookie-banner-refuse { text-align: center; justify-content: center; }

  /* ══════════════════════════════════════════
     REVEALS — plus discrets sur mobile
  ══════════════════════════════════════════ */

  /* Réduire le translateY pour mobile (moins de mouvement = plus fluide) */
  .reveal-up { transform: translateY(18px) !important; }
  .reveal-card { transform: translateY(14px) !important; }
  .reveal-left { transform: translateX(-20px) !important; }

  /* Raccourcir les durées */
  .reveal-up, .reveal-card, .reveal-left {
    transition-duration: 0.55s !important;
  }

  /* Respecter prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-card, .reveal-left {
      transition: opacity 0.3s ease !important;
      transform: none !important;
    }
  }

} /* end @media 768px */