/* =========================================================
   Ergonomie mobile et tactile – commune à toutes les pages
   (chargée en dernier : elle complète style.css / style-v2.css / pages.css)
   ========================================================= */

/* ---------- Tactile : pas de surbrillance système, retour au toucher ---------- */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active, .carousel-btn:active, .faq-question:active, .nav-link:active { transform: scale(.98); }

/* Sur un écran tactile, un effet de survol resterait collé après le toucher :
   on le neutralise, seul le toucher sur le lien compte. */
@media (hover: none) {
  .service-card:hover, .pole-card:hover, .feature-card:hover, .card:hover,
  .service-card:focus-within, .pole-card:focus-within, .feature-card:focus-within, .card:focus-within,
  .stat-card:hover, .eco-stat:hover, .step:hover, .acc-card:hover, .team-card:hover {
    transform: none;
    border-color: inherit;
  }
  .service-card:hover, .pole-card:hover, .feature-card:hover,
  .service-card:focus-within, .pole-card:focus-within, .feature-card:focus-within { border-color: rgba(199,197,207,.4); }
  .card:hover, .card:focus-within { border-color: #e3e5ee; }
  .service-card:hover .card-media img, .pole-card:hover .card-media img, .card:hover .card-media img { transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- Carrousels : points de pagination sur mobile ---------- */
.carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(28,31,64,.22);
  transition: width .25s ease, background-color .25s ease;
}
.carousel-dots button[aria-current="true"] { width: 24px; background: #1e318f; }
.section--dark .carousel-dots button,
.ecosystem .carousel-dots button { background: rgba(255,255,255,.35); }
.section--dark .carousel-dots button[aria-current="true"],
.ecosystem .carousel-dots button[aria-current="true"] { background: #bbf6fa; }
/* Zone de toucher confortable autour de chaque point */
.carousel-dots button { position: relative; }
.carousel-dots button::before { content: ""; position: absolute; inset: -14px -6px; }

@media (max-width: 767px) {
  .carousel { padding-bottom: 0 !important; }
  .carousel-btn, .carousel-nav { display: none !important; }
  .carousel[data-carousel-static] .carousel-dots { display: none; }
  .carousel-dots { display: flex; }
  /* La piste déborde jusqu'aux bords de l'écran : la carte active est alignée sur
     le contenu, la suivante dépasse juste assez pour inviter à faire défiler. */
  .carousel-track {
    gap: 16px;
    overscroll-behavior-x: contain;      /* le geste ne déclenche pas le « retour » du navigateur */
    padding-left: var(--wrap-pad);
    padding-right: var(--wrap-pad);
    margin-left: calc(-1 * var(--wrap-pad));
    margin-right: calc(-1 * var(--wrap-pad));
    scroll-padding-inline: var(--wrap-pad);
  }
  .carousel-track > li,
  .cards-3 > li { flex: 0 0 calc(100% - 24px); }
  .carousel-track > li:last-child { margin-right: 0; }
}

/* ---------- En-tête plus compact, menu sous le voile ---------- */
@media (max-width: 767px) {
  .header-inner { height: 64px; }
  .logo img { width: 110px; height: 38.44px; }
  .main-nav { width: min(320px, 88%); padding-top: 88px; }
  .main-nav::before { top: 64px; }
  .burger { margin-right: -8px; }
}
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(28,31,64,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
@media (min-width: 1024px) { .nav-backdrop { display: none; } }

/* ---------- Lecture et touches ---------- */
@media (max-width: 767px) {
  /* iOS zoome sur les champs de moins de 16 px : on garde 16 px */
  .form-field input, .form-field select, .form-field textarea { font-size: 16px; }
  /* Les actions principales prennent toute la largeur, faciles à toucher */
  .hero-btn, .btn-gradient, .btn-light, .page-cta .btn, .cta .btn, .cta-band-inner .btn, .cta-final .btn, .form-actions .btn {
    width: 100%;
    max-width: 420px;
  }
  .hero-actions { width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-note { text-align: center; }
  /* Texte un peu plus aéré sur petit écran */
  .body-16, .lead, .lead-18, .section-text, .hero-text, .page-hero-text { line-height: 1.65; }
  /* Liens de carte : zone de toucher d'au moins 44 px */
  .card-link, .text-link { min-height: 44px; align-items: center; }
  /* Pied de page : colonnes compactes, liens espacés */
  .footer-list { gap: 14px; }
  .footer-list a, .footer-legal a { display: inline-block; padding: 4px 0; }
}

/* ---------- Tiroir mobile : indépendant de la hauteur de l'en-tête ----------
   Le tiroir couvre toute la hauteur de l'écran ; le logo et la croix de fermeture
   sont relevés au-dessus de lui, ils restent donc toujours visibles et cliquables. */
@media (max-width: 1023px) {
  .site-header .logo,
  .site-header .header-actions { position: relative; z-index: 2; }
  .main-nav { top: 0; z-index: 1; padding-top: 104px; }
  .main-nav::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(199,197,207,.4);
  }
}

/* ---------- Chiffres clés : deux colonnes compactes ---------- */
@media (max-width: 767px) {
  .stats, .stats--donnees, .stats--eco, .eco-stats, .inline-stats, .inline-stats--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 36px;
  }
  /* Un nombre impair de chiffres : le dernier prend toute la largeur */
  .stats > li:last-child:nth-child(odd),
  .eco-stats > li:last-child:nth-child(odd),
  .inline-stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-card, .eco-stat { min-height: 0; padding: 18px 16px; gap: 0; justify-content: flex-start; border-radius: 12px; }
  .stat-num, .inline-stats .stat-num, .inline-stats--4 .stat-num { font-size: 26px; }
  .stat-label { margin-top: 6px; font-size: 13px; line-height: 1.4; }
  .inline-stats li { padding-top: 14px; }
}
@media (max-width: 479px) {
  .stat-card, .eco-stat { padding: 16px 14px; }
  .stat-num, .inline-stats .stat-num, .inline-stats--4 .stat-num { font-size: 22px; }
}

/* ---------- Visuels décoratifs retirés sur téléphone ----------
   (illustration conformité, photo d'écran des pages, visuel des droits) */
@media (max-width: 767px) {
  .conformite-visual, .intro-visual, .rights-visual { display: none; }
  .intro-grid { gap: 0; }
}