/* Houndlist — adaptations responsive (tablette / mobile) par-dessus la maquette.
   Les styles de la maquette sont en ligne : d'où les !important. Repères [data-r] posés par build.py. */

html, body { overflow-x: clip; }   /* filet de sécurité : jamais de défilement horizontal */
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Étiquettes en ligne (placeholders, "À CONFIRMER") : bordure propre quand elles passent à la ligne */
span[style*="dashed"], span[style*="padding:1px 6px"] { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Carte "sample lead" : l'étiquette JOB POST ne se coupe jamais, le lien flouté se tronque */
[data-r~=cells] span[style*="padding:1px 6px"] { white-space: nowrap; }
[data-r~=cells] span[style*="blur"] { min-width: 0; overflow: hidden; white-space: nowrap; }

/* Carte "sample lead" : grille 2 x 2 (les filets de la maquette sont prévus pour 2 colonnes ; en 3 colonnes EMAIL restait seul) */
@media (min-width: 641px) {
  [data-r~=cells] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Nav : une seule ligne (logo + CTA) quand les liens ne tiennent plus ---------- */
@media (max-width: 880px) {
  [data-r~=navlinks] > a:not([href="#get-sample"]) { display: none !important; }
  [data-r~=navlinks] { flex-wrap: nowrap !important; }
}
/* Page légale : liens sur une ligne qui défile */
@media (max-width: 880px) {
  [data-r~=navlinks-legal] {
    flex-wrap: nowrap !important; overflow-x: auto; width: 100%; white-space: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  [data-r~=navlinks-legal]::-webkit-scrollbar { display: none; }
  nav > div { gap: 12px 24px !important; }
}

/* ---------- FAQ : "span 2" crée une colonne fantôme quand la grille n'a qu'une colonne ---------- */
@media (max-width: 815px) {
  [data-r~=faqlist] { grid-column: auto !important; }
}

/* ---------- Page légale : lignes "étiquette | texte" ("span 3" débordait) ---------- */
@media (max-width: 943px) {
  [data-r~=row4] { grid-template-columns: 1fr !important; gap: 8px !important; }
  [data-r~=row4] > * { grid-column: auto !important; }
}

/* ---------- Tablette : pas d'élément orphelin quand une grille de 3 passe à 2 colonnes ---------- */
@media (max-width: 900px) {
  /* Colonnes ERR_01-03 / web3 : empilées, alignées à gauche, séparées par un filet */
  [data-r~=cols] { grid-template-columns: 1fr !important; }
  [data-r~=cols] > * { padding: 24px 0 !important; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid #1A1A1A; }
  [data-r~=cols-light] > * { border-bottom-color: #B5B5B0; }
  [data-r~=cols] > :last-child { border-bottom: 0; }
}
@media (max-width: 979px) {
  [data-r~=pricing] > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  [data-r~=formgrid] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  /* Fonds ASCII : caractères plus petits = même densité de motif que sur ordinateur */
  pre[data-fit] { font-size: 7px !important; line-height: 7px !important; }

  /* Cartes "lead" : étiquette au-dessus de la valeur au lieu d'une colonne étroite */
  [data-r~=kv] { grid-template-columns: 1fr !important; }
  [data-r~=kv] > :nth-child(odd) { padding-bottom: 2px !important; border-bottom: 0 !important; }
  [data-r~=kv] > :nth-child(even) { padding-top: 4px !important; }
  [data-r~=clamp] { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }


  /* Carte "sample lead" : pas de filet vertical quand les cases sont empilées */
  [data-r~=cells] > * { border-right: 0 !important; padding: 18px 18px !important; }

  /* Journal de vérification : police un peu plus petite, lignes compactes (cf. main.js) */
  [data-r~=scanbox] { padding: 14px 14px !important; height: 260px !important; }
  [data-r~=scanbox] pre { font-size: 11px !important; line-height: 13px !important; }

  /* Tableau comparatif : 2 colonnes (exports / Houndlist), le critère passe en intertitre */
  [data-r~=cmp] { min-width: 0 !important; grid-template-columns: 1fr 1fr !important; font-size: 14px !important; }
  [data-r~=cmp] > :first-child { display: none !important; }
  [data-r~=cmp] > :nth-child(2), [data-r~=cmp] > :nth-child(3) { padding: 12px !important; font-size: 11px !important; }
  [data-r~=cmp] > :nth-child(3n+4) { grid-column: 1 / -1; padding: 18px 0 6px !important; border-bottom: 0 !important; }
  [data-r~=cmp] > :nth-child(3n+5), [data-r~=cmp] > :nth-child(3n+6) { padding: 6px 12px 14px !important; }

  /* FAQ : moins de marge à droite des réponses */
  [data-r~=faqlist] p { padding-right: 8px !important; }
  [data-r~=faqlist] button { font-size: 17px !important; }
}

/* Carte "sample lead" (mobile) : badge, lien flouté, ligne ANGLE */
@media (max-width: 640px) {
  [data-r~=badge] { font-size: 12px !important; padding: 5px 10px !important; white-space: nowrap; }
  [data-r~=anglerow] { grid-template-columns: 1fr !important; gap: 10px !important; padding: 22px 18px !important; }
  [data-r~=anglerow] > span { padding-top: 0 !important; }
}

/* Formulaire (mobile) : un peu plus de largeur utile */
@media (max-width: 640px) {
  div:has(> #hl-form) { padding: 22px 18px !important; }
  #hl-icp { font-size: 14px !important; }
}

/* Petits téléphones (≤ 400 px) : logo + CTA tiennent sur une ligne */
@media (max-width: 400px) {
  nav > div { padding: 12px 16px !important; gap: 10px !important; }
  [data-r~=navlinks] > a[href="#get-sample"] { padding: 8px 11px !important; font-size: 12px !important; }
}