/* ═══════════════════════════════════════════════════════════════
   MOBILE : confort d'usage

   Le site n'avait aucun debordement horizontal : la base responsive
   etait saine. Ce qui manquait tenait a l'usage au doigt, mesure sur
   un ecran de 375 px :

   · une quarantaine de cibles sous 44 px par page, a commencer par
     les quatre liens de la barre du haut (72 x 18) et le bouton du
     menu (40 x 42) ;
   · des libelles a 10, 11 et 12 px : lisibles a la souris, penibles
     sur un telephone tenu a bout de bras ;
   · aucun retour visuel au toucher : sans :hover, rien ne confirme
     l'appui.
   ═══════════════════════════════════════════════════════════════ */

/* ── Pied de page ──────────────────────────────────────────────
   Les quatre colonnes de liens s'empilaient sous 500 px. Avec des
   cibles portees a 44 px, le pied de page atteignait 2 300 px : trois
   ecrans pour atteindre les mentions legales. Elles restent donc sur
   deux colonnes, ce qui divise la hauteur par deux sans rien retirer. */
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; }
  .footer-brand { grid-column: 1 / -1; }
  /* la hauteur minimale des liens suffit a les espacer */
  .footer-col ul { gap: 0; }
  /* sur deux colonnes, une adresse e-mail depasse la colonne : elle
     etait coupee par l'overflow du pied de page. */
  .footer-col a { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .footer-social a { width: 44px; height: 44px; display: grid; place-content: center; }

  /* Le logo (35 px) et la rangee de liens legaux (20 px) restaient
     sous la cible. Les liens au fil d'une phrase, eux, suivent la
     ligne de texte : les agrandir casserait le paragraphe. */
  .logo { min-height: 44px; }
  .footer-legal { gap: .25rem 1.5rem; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── Champs de saisie ────────────────────────────────────────
     Sous 16 px, iOS zoome automatiquement a la prise de focus et ne
     dezoome jamais : la page reste de travers pour le reste de la
     visite. 16 px est donc un minimum fonctionnel, pas esthetique. */
  input, select, textarea,
  .footer-newsletter-input {
    font-size: 16px;
    min-height: 48px;
  }
  textarea { min-height: 120px; }
  .footer-newsletter-form { flex-direction: column; align-items: stretch; gap: .6rem; }
  .footer-newsletter-btn { min-height: 48px; }
}

/* Les liens secondaires ne servent que dans le menu replie */
.nav-secondaire { display: none; }

@media (max-width: 1200px) {
  .nav.is-open .nav-secondaire { display: block; }
  .nav.is-open .nav-secondaire .nav-link { font-size: 15px; color: var(--ink-700); }
}

@media (max-width: 760px) {
  /* ── Barre du haut ───────────────────────────────────────────
     Sa phrase d'accroche etait deja masquee sous 700 px ; ne restaient
     que quatre liens de 18 px de haut, occupant la bande la plus
     precieuse de l'ecran. Ils vivent maintenant dans le menu. */
  .topbar { display: none; }

  /* ── Cibles tactiles ─────────────────────────────────────────
     44 px est le minimum recommande. On agrandit la zone d'appui
     sans grossir le texte : padding et min-height, pas font-size. */
  .nav-toggle {
    width: 48px; height: 48px;
    display: grid; place-content: center;
    padding: 0;
    margin-right: -8px;          /* la zone deborde, le picto reste aligne */
  }

  .btn {
    min-height: 48px;
    padding: 0.85rem 1.4rem;
    font-size: 14px;             /* 12 px : trop petit pour un bouton */
  }

  .lien-discret,
  .pole-cta,
  .exp-carte-lien,
  .real-mini-lien,
  .menu-lien,
  .footer-col a,
  .topbar-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ── Echelle typographique ───────────────────────────────────
     Rien sous 12 px sur un telephone. */
  .eyebrow,
  .exp-exemples-titre { font-size: 12px; }
  .probl-theme { font-size: 11.5px; }
  .client-tags li,
  .real-mini .realisation-tag,
  .realisation-tag { font-size: 12px; }
  .hero-shots-tag { font-size: 12.5px; }

  /* ── Rythme vertical ─────────────────────────────────────────
     L'accueil fait seize ecrans de haut : on resserre les respirations
     entre sections sans toucher au contenu. */
  :root { --section-pad-y: 3rem; }

  /* ── Encoches et bords arrondis ──────────────────────────────
     En paysage sur un telephone a encoche, le texte passait sous
     l'arrondi de l'ecran. */
  .container,
  .topbar-inner,
  .nav-inner {
    padding-left: max(var(--container-pad), env(safe-area-inset-left));
    padding-right: max(var(--container-pad), env(safe-area-inset-right));
  }
  .footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* ── Retour au toucher ─────────────────────────────────────────
   Sans :hover, rien ne confirme l'appui. On remplace le halo gris
   par defaut de WebKit par un retour explicite. */
@media (hover: none) {
  a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

  .btn:active,
  .client-tuile:active,
  .real-carte:active,
  .real-mini:active,
  .probl-carte:active,
  .pole-card:active,
  .verbatim-card:active {
    transform: scale(.985);
    transition: transform .08s ease-out;
  }
  .nav-link:active,
  .footer-col a:active,
  .lien-discret:active { opacity: .6; }

  /* Les effets de survol n'ont pas de sens au doigt : ils restent
     colles apres l'appui. */
  .real-carte:hover,
  .verbatim-card:hover,
  .pole-card:hover { transform: none; }
}

/* Telephone : fiche horizontale */
@media (max-width: 620px) {
  .clients-grille { grid-template-columns: 1fr; gap: 1rem; }

  .client-tuile {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
    padding: 1rem;
  }
  .client-face {
    aspect-ratio: 1;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .client-badge { display: none; }   /* le nom est juste a cote, en titre */

  /* Le voile sombre etait fait pour passer PAR-DESSUS le logo. En fiche,
     le texte est a cote : il reprend les couleurs ordinaires du site. */
  .client-info {
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    padding: 0;
    gap: .3rem;
    justify-content: flex-start;
    color: var(--ink-700);
  }
  .client-info h2 { color: var(--ink-900); font-size: 1.05rem; }
  .client-lieu { color: var(--ink-500); }
  .client-info p { font-size: 14px; margin: .15rem 0 .25rem; }
  .client-tags li { background: var(--ink-100); color: var(--ink-700); }
  .client-lien { color: var(--bleu-700); }

  /* La tuile « votre projet ici » suit le meme gabarit */
  .client-tuile--vous { border: 1px solid var(--ink-200); background: var(--white); }
  .client-tuile--vous .client-info { background: none; }
  .client-face--vous { border-width: 1px; gap: 0; }
  .client-plus { width: 40px; height: 40px; font-size: 1.5rem; }
  .client-vous-texte { display: none; }   /* repris par le titre de la fiche */
}