/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — PONS 360
   Adaptation typographique mobile / tablette + protections anti-débordement.
   Ce fichier ne cible que les classes réellement présentes dans pons360.html.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   BASE GLOBALE — pas de scroll horizontal, texte qui casse proprement
   ──────────────────────────────────────────────────────────────────────────── */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

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

h1, h2, h3, h4, p, li, a, span, button {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Titres : les mots restent entiers.
   On retire overflow-wrap:break-word des titres — avec les bonnes
   tailles de police ci-dessous, aucun mot courant ne déborde.
   hyphens:none garantit l'absence de tout tiret de césure. */
h1, h2, h3, h4 {
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Mots entiers uniquement — pas de césure automatique.
   On garde overflow-wrap:break-word uniquement comme filet de sécurité
   pour les URLs ou chaînes sans espaces, mais tous les vrais mots
   restent entiers et passent à la ligne suivante si besoin. */
h1, h2, h3, h4, p, li, a, span, button,
.card-link, .team-bio, .testimonial-text,
.hero-body, .hero-sub, .label, .team-role {
  -webkit-hyphens: none;
  hyphens: none;
  word-break: normal;
}

/* Empêche un enfant de grille/flex (ex: bouton CTA en une seule ligne)
   d'imposer sa largeur de contenu minimale à toute la colonne — c'est
   ce qui provoquait le débordement horizontal sur les boutons à texte
   long (ex: "Réserver un appel de découverte gratuit") sur mobile. */
.form-grid > *,
.btn-group > *,
div[style*="grid-template-columns"] > * {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Évite le zoom automatique iOS sur les champs de formulaire */
@media (max-width: 1024px) {
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLETTE LARGE (≤ 1100px)
   Passage des grilles à 3 colonnes vers 2 colonnes.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  nav { padding: 0 32px; }

  .hero { padding: 110px 32px 70px; }

  section { padding: 80px 32px; }

  .card-grid { grid-template-columns: repeat(2, 1fr); }

  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLETTE / MOBILE (≤ 900px)
   Correspond au point de rupture déjà présent dans le CSS inline du HTML :
   passage en une colonne pour la plupart des grilles, menu burger.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Navigation — panneau déroulant animé sous la barre */
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(8,8,8,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .nav-links li a { display: flex; width: 100%; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }

  nav { padding: 0 24px; height: 64px; }
  .ticker-wrap { margin-top: 64px; }

  .nav-logo { font-size: 22px; letter-spacing: 2.5px; }

  /* Hero — annule les hauteurs plein écran inline : sur mobile le contenu
     démarre en haut au lieu de flotter au centre avec du vide au-dessus */
  .hero { padding: 90px 24px 60px !important; min-height: auto !important; }
  /* L'accueil a déjà le ticker sous la nav : moins de padding haut */
  #page-accueil .hero { padding-top: 40px !important; }
  .hero-content { max-width: 100%; text-align: center; }
  h1 { font-size: clamp(38px, 9vw, 64px); }
  .hero-body { font-size: 16px; max-width: 100%; margin-left: auto; margin-right: auto; }

  .btn-group { flex-direction: column; width: 100%; max-width: 380px; margin: 0 auto; }
  .btn-primary, .btn-secondary { width: 100%; text-align: center; }

  /* Sections génériques */
  section { padding: 64px 24px; }
  h2 { font-size: clamp(30px, 7vw, 44px); }
  .section-header { margin-bottom: 44px; }
  .section-header p { font-size: 15px; }

  /* Grilles cartes / équipe / stats */
  .card-grid { grid-template-columns: 1fr; }
  .card { padding: 36px 28px; text-align: center; }

  .team-grid { grid-template-columns: 1fr; gap: 24px; }
  .team-card { padding: 36px 28px; }
  .team-bio { text-align: left; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { padding: 36px 24px; }
  .stat-num { font-size: 52px; }

  /* Piliers programme : visuel masqué, contenu centré */
  .pillar-section {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 32px;
    padding: 64px 24px;
  }
  .pillar-section.reverse { direction: ltr; }
  .pillar-visual { display: none; }
  .pillar-content { text-align: left; }
  .pillar-content p { font-size: 15px; }

  /* Pour qui / Tarif */
  .who-grid { grid-template-columns: 1fr; }
  .who-col { padding: 40px 28px; }

  .tarif-block { padding: 44px 24px; }

  /* Choisis ton profil (Accueil) */
  .profile-grid { grid-template-columns: 1fr; }
  .profile-card { padding: 40px 28px; }

  /* Sélecteur de formule (Programme) */
  .track-tabs { flex-direction: column; max-width: 100%; }
  .track-tab { padding: 16px; font-size: 11px; }

  /* ── Carrousels — scroll horizontal natif + snap (fiable sur tous les
     téléphones : c'est le navigateur qui gère la physique du geste) ── */
  .card-carousel, .testimonials-wrap, .pillar-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .card-carousel::-webkit-scrollbar,
  .testimonials-wrap::-webkit-scrollbar,
  .pillar-carousel::-webkit-scrollbar { display: none; }

  /* Cartes méthode & équipe */
  .card-grid { display: flex; grid-template-columns: unset; gap: 0; background: none; }
  .card { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .team-grid { display: flex; grid-template-columns: unset; gap: 0; background: none; }
  .team-card { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  #card-dots, #team-dots { display: flex !important; }

  /* Témoignages */
  .testimonial-card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

  /* Piliers programme */
  .pillar-track { display: flex; }
  .pillar-track .pillar-section { flex: 0 0 100%; grid-template-columns: 1fr; direction: ltr; gap: 32px; border-bottom: none !important; scroll-snap-align: start; scroll-snap-stop: always; }
  .pillar-section.reverse { direction: ltr; }
  .pillar-visual { display: none; }
  .pillar-content { text-align: left; }
  .pillar-content p { font-size: 15px; }
  .pillar-dots { display: flex; justify-content: center; gap: 8px; padding: 28px 0 0; }
  .pillar-swipe-hint { display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray); padding: 12px 0 0; }

  /* ── Équipe — fiches détaillées page À propos ── */
  .team-member { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .team-bullets-grid { grid-template-columns: 1fr; }
  .team-member .team-bullets li { justify-content: flex-start; }

  /* Formulaire */
  .form-grid { grid-template-columns: 1fr; max-width: 100%; }
  .form-full { grid-column: 1; }

  /* Contact — bloc infos + carte (grille inline 1fr 1fr, gap:80px) */
  div[style*="grid-template-columns:1fr 1fr; gap:80px"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  footer { padding: 64px 24px 32px; }

  /* CTA final */
  .cta-final { padding: 80px 24px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE (≤ 600px)
   Typographie compacte, alignement à gauche pour les blocs de lecture longue,
   centré conservé pour les éléments d'accroche (hero, headers, citations).
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  nav { padding: 0 20px; height: 60px; }
  .nav-links { top: 60px; padding: 8px 20px 14px; }
  .ticker-wrap { margin-top: 60px; padding: 8px 0; }
  .ticker span { font-size: 11px; letter-spacing: 2.5px; padding: 0 18px; }

  /* Hero — reste centré, c'est l'accroche de la page */
  .hero { padding: 70px 20px 50px !important; }
  #page-accueil .hero { padding-top: 32px !important; }
  .label { font-size: 10px; letter-spacing: 2.5px; }
  h1 { font-size: clamp(26px, 8.5vw, 44px); line-height: 1.1; }
  .hero-body { font-size: 15px; line-height: 1.65; text-align: left; }

  /* Sections — header centré (accroche), corps de texte à gauche (lecture) */
  section { padding: 52px 20px; }
  h2 { font-size: clamp(26px, 8vw, 36px); }
  h3 { font-size: 21px; }
  .section-header p { font-size: 14px; }

  /* Cartes piliers (accueil) — lecture plus naturelle à gauche sur mobile */
  .card { padding: 32px 22px; text-align: left; }
  .card-icon { margin: 0 0 20px; }
  .card ul li { font-size: 12.5px; }

  /* Stats — 2 colonnes restent lisibles, légère réduction */
  .stat-item { padding: 28px 16px; }
  .stat-num { font-size: 42px; }
  .stat-label { font-size: 12px; }

  /* Équipe — bio et listes à gauche, plus lisibles que centré sur petit écran */
  .team-card { padding: 32px 24px; }
  .team-bio { font-size: 13.5px; }
  .team-bullets li { justify-content: flex-start; font-size: 12.5px; }

  /* Citations clients : on garde le centré, l'effet "carte témoignage" fonctionne mieux ainsi */
  .testimonial-card { padding: 36px 26px; }
  .testimonial-text { font-size: 14.5px; }

  /* Piliers programme */
  .pillar-section { padding: 52px 20px; }
  .pillar-content p { font-size: 14px; }
  .pillar-content ul li { font-size: 13px; }

  /* Témoignages — une carte visible à la fois (le slider JS gère la rotation) */
  .testimonial-track { flex-direction: row; }

  /* Pour qui */
  .who-col { padding: 32px 22px; }
  .who-col ul li { font-size: 13.5px; }

  /* Tarif — bloc centré, c'est un encart d'accroche */
  .tarif-block { padding: 36px 20px; }
  .tarif-block p { font-size: 14.5px; }

  /* CTA final — reste centré, c'est un bandeau d'accroche */
  .cta-final { padding: 64px 20px; }
  .cta-final p { font-size: 15px; }

  /* Formulaire contact */
  .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; }

  /* Contact info */
  .contact-line { font-size: 13.5px; }

  /* Footer — tout à gauche, c'est un bloc d'information */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  footer { padding: 56px 20px 28px; }
  .footer-tagline { font-size: 13.5px; max-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

  /* Équipe détaillée (À propos) */
  .team-avatar[style*="100px"] { width: 72px !important; height: 72px !important; font-size: 28px !important; margin: 0 auto 16px !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   TRÈS PETIT MOBILE (≤ 380px)
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 380px) {
  nav { padding: 0 16px; }
  .nav-logo { font-size: 18px; }

  .hero { padding: 56px 16px 40px; }
  h1 { font-size: clamp(22px, 8.5vw, 36px); }
  .hero-body { font-size: 14px; }

  section { padding: 44px 16px; }
  h2 { font-size: clamp(24px, 9vw, 30px); }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 36px; }

  .btn-primary, .btn-secondary { padding: 14px 20px; font-size: 11px; }

  footer { padding: 44px 16px 24px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   TOUCH & ACCESSIBILITÉ
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .btn-primary, .btn-secondary, .nav-cta {
    min-height: 48px;
  }
  .nav-links a, .card-link, .footer-col ul li a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  @media (hover: none) {
    .card:hover, .team-card:hover, .testimonial-card:hover {
      border-top-color: transparent;
    }
  }
}

/* Zone cliquable du burger agrandie sans déplacer son tracé visuel
   (padding + margin négatif égal = même empreinte dans le flex layout) */
.nav-hamburger {
  padding: 14px;
  margin: -14px;
}

/* ────────────────────────────────────────────────────────────────────────────
   TÉLÉPHONES EN MODE PAYSAGE
   Certains grands téléphones (ex: 926px en paysage) dépassent le seuil de
   900px utilisé pour basculer en menu burger. On détecte le doigt (pointer:
   coarse, hover: none) ET une hauteur d'écran courte (max-height: 500px) pour
   ne cibler que les téléphones couchés, sans toucher les iPad / tablettes en
   paysage (1024px+ de large mais nettement plus hauts), qui gardent le menu
   complet comme avant.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: rgba(8,8,8,0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 16px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .nav-links li a { display: flex; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-hamburger { display: flex; }
  .nav-cta { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   ENCOCHES / SAFE-AREA (iPhone Dynamic Island, gestes Android)
   Le viewport-fit=cover du HTML permet au contenu de couvrir tout l'écran ;
   on s'assure que la nav fixe et le footer respectent les zones sûres,
   surtout en orientation paysage où l'encoche mord sur les côtés.
   ──────────────────────────────────────────────────────────────────────────── */

nav {
  padding-left: max(5%, env(safe-area-inset-left));
  padding-right: max(5%, env(safe-area-inset-right));
}
footer {
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}
@media (max-width: 1100px) {
  nav {
    padding-left: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
  }
}
@media (max-width: 900px) {
  nav {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}
@media (max-width: 600px) {
  nav {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}
@media (max-width: 380px) {
  nav {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   FOCUS CLAVIER VISIBLE
   Nécessaire pour la navigation au clavier et les lecteurs d'écran, sur
   toutes les plateformes desktop où la souris n'est pas utilisée.
   ──────────────────────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[onclick]:focus-visible {
  outline: 2px solid var(--orange, #FF5F1F);
  outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────────────────────
   GRANDS ÉCRANS / ULTRA-WIDE (≥ 1600px)
   Les grilles n'ont pas de plafond de largeur dans le CSS de base : sur un
   moniteur 27"+, ultra-wide ou 4K, elles s'étirent sur toute la largeur et
   les colonnes deviennent disproportionnées. On recentre le contenu au-delà
   de 1600px tout en gardant le fond (nav, footer, bandes de fond) plein cadre.
   ──────────────────────────────────────────────────────────────────────────── */

@media (min-width: 1600px) {
  .card-grid,
  .team-grid,
  .stats-grid,
  .footer-grid,
  .who-grid,
  .pillar-section,
  .form-grid,
  .testimonial-track {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   IMPRESSION
   ──────────────────────────────────────────────────────────────────────────── */

@media print {
  nav, .nav-hamburger, .ticker-wrap, .btn-primary, .btn-secondary, .cta-final, footer {
    display: none;
  }
  .hero, section { page-break-inside: avoid; }
}