/* =========================================================
   GY CODING — optimisation téléphone / tablette / ordinateur
   Chargé après style.css sur toutes les pages. Ne change pas le design :
   il évite les débordements, agrandit les zones tactiles et allège l'affichage.
   ========================================================= */

/* ---- Base : rien ne dépasse de l'écran ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
.grid > *, .flex > *, .card { min-width: 0; }
h1, h2, h3, h4, h5, p, li, a, span, label { overflow-wrap: break-word; }
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
table { max-width: 100%; }
.overflow-x-auto { -webkit-overflow-scrolling: touch; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ---- Tout petits écrans (≤ 380 px) ---- */
@media (max-width: 380px) {
  :root { --container-pad: 1rem; }
  .container-x { padding-left: 1rem; padding-right: 1rem; }
  .text-4xl, .sm\:text-5xl { font-size: 1.95rem; line-height: 1.12; }
  .text-3xl { font-size: 1.6rem; line-height: 1.18; }
  .btn { padding-left: 1.2rem; padding-right: 1.2rem; font-size: .88rem; }
  .card.p-7, .card.p-6 { padding: 1.15rem; }
  .section-pad { padding-block: 2.75rem; }
}

/* ---- Téléphone ---- */
@media (max-width: 767px) {
  /* champs de formulaire : 16 px minimum pour éviter le zoom automatique d'iOS */
  input, select, textarea, .field-input, .field-select, .field-textarea { font-size: 16px !important; }
  /* boutons principaux pleine largeur dans les blocs d'appel à l'action */
  .page-hero .btn, .hero .btn-primary { flex: 1 1 100%; }
  .page-hero .flex.flex-wrap.gap-4 > .btn, .hero .flex.flex-wrap.gap-4 > .btn { width: 100%; }
  .hero-film .flex.flex-wrap.gap-4 > .hf-play { margin-top: .25rem; }
  /* images de service : jamais plus hautes que l'écran */
  .feature-photo-img, .feature-photo-sm img { max-height: 70vh; object-fit: cover; width: 100%; }
  /* tableaux comparatifs : défilement horizontal plutôt que débordement */
  table { display: block; overflow-x: auto; }
  /* le pied de page respire */
  footer .container-x { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* boutons flottants : ne cachent pas le texte et respectent l'encoche */
  /* boutons flottants : deux pastilles identiques, bien empilées (chat en bas, WhatsApp juste au-dessus) */
  .gyc-chat-toggle, #float-whatsapp { width: 50px; height: 50px; right: .9rem; }
  .gyc-chat-toggle { bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  #float-whatsapp { bottom: calc(.9rem + 50px + .7rem + env(safe-area-inset-bottom, 0px)); }
  .gyc-chat-toggle svg { width: 24px; height: 24px; }
  #float-whatsapp svg { width: 26px; height: 26px; }
  .gyc-chat-toggle, #float-whatsapp { box-shadow: 0 8px 20px -6px rgba(0,0,0,.35); }
  .gyc-chat-panel { right: .75rem; left: .75rem; width: auto; z-index: 96; bottom: calc(.9rem + 50px + .6rem + env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 9rem); }
  /* bandeau cookies pleine largeur, collé en bas */
  .gyc-cookie-banner { left: .75rem; right: .75rem; width: auto; max-width: none; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
  /* fenêtre d'annonce */
  .gyc-closure-modal { width: calc(100vw - 1.5rem); max-height: 90dvh; overflow-y: auto; }
}

/* ---- Écrans tactiles : cibles de 44 px minimum ---- */
@media (pointer: coarse) {
  .nav-link, .mobile-accordion summary, .lang-option, .acc-trigger, .btn, .badge, #menu-toggle, .theme-toggle,
  footer ul a, .zx-row, .zx-tabs button, .zx-tools button, .svc-idx-r, .mega-i { min-height: 44px; }
  footer ul li { margin-bottom: .1rem; }
  footer ul a { display: inline-flex; align-items: center; }
  .lang-option { padding-top: .6rem; padding-bottom: .6rem; }
  /* pas d'effet « survol » collant sur tactile */
  .card:hover, .btn-primary:hover { transform: none; }
}

/* ---- Tablette (768 – 1023 px) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .container-x { padding-left: 1.75rem; padding-right: 1.75rem; }
  .section-pad { padding-block: 4rem; }
  /* les grilles à 4 colonnes passent à 2 pour rester lisibles */
  .lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Petit ordinateur / tablette paysage (1024 – 1180 px) ---- */
@media (min-width: 1024px) and (max-width: 1180px) {
  #site-header nav.lg\:flex { gap: 1.1rem; }
  .btn-call .call-label { display: none; }
}

/* ---- Grands écrans (≥ 1700 px) : on garde les proportions, on agrandit la lecture ---- */
@media (min-width: 1700px) {
  html { font-size: 17px; }
}

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Impression (devis, page contact) ---- */
@media print {
  #site-header, .topbar, #float-whatsapp, .gyc-chat-toggle, .gyc-chat-panel, .gyc-cookie-banner, .gyc-closure-overlay, video { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ---- Grilles sans colonnes définies : une colonne qui ne dépasse jamais l'écran ---- */
:where(.grid) { grid-template-columns: minmax(0, 1fr); }

/* ---- Barre du haut sur tablette : une seule ligne propre ---- */
@media (min-width: 768px) and (max-width: 1100px) {
  .topbar .container-x { gap: 1rem; }
  .topbar a[href^="mailto"], .topbar .flex.items-center.gap-5 > span:nth-child(2) { display: none; }
  .topbar span, .topbar .lang-toggle { white-space: nowrap; }
}