/* Accueil : responsive mobile d'abord, sans bordures.
   Charge en fin de page (apres les CSS des sections) : ces regles passent en dernier. */

/* Securite : aucun debordement horizontal de la page */
html, body { overflow-x: clip; }

/* ===== Sans bordures : surfaces douces (toutes tailles) ===== */
body .fsc { border: 0; box-shadow: 0 1px 2px rgba(28, 43, 36, .06), 0 4px 14px rgba(28, 43, 36, .06); }
body .fsc-foot { border-top: 0; background: #FAF8F3; }
body .fh-spot { border: 0; border-radius: 16px; box-shadow: 0 4px 18px rgba(28, 43, 36, .08); }
body .hc-card { border: 0; box-shadow: 0 1px 2px rgba(28, 43, 36, .05), 0 4px 12px rgba(28, 43, 36, .05); }
body .hc-more summary span { border: 0; background: #fff; box-shadow: 0 1px 3px rgba(28, 43, 36, .10); }
body .fh-filters button { border: 0; background: #EFE9DC; }
body .fh-filters button.is-active { background: var(--fy-ink); color: #fff; }
body .fh-popular a { border: 0; background: #fff; box-shadow: 0 1px 3px rgba(28, 43, 36, .08); }
body .fh-pay, body .sf-band { border-top: 0; border-bottom: 0; }
body .fy-service-tags .fy-service-tag { border: 0; background: #fff; box-shadow: 0 1px 3px rgba(28, 43, 36, .06); }

/* ===== Carrousel des freelances : marges alignees sur la gouttiere du site ===== */
@media (max-width: 575px) {
    body .fh-tf-row.fh-tf-scroll {
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
        scroll-padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
    }
}

/* ===== Zones tactiles : 44 px minimum ===== */
@media (max-width: 991px) {
    body .fh-more, body .fh-tf-all { display: inline-flex; align-items: center; min-height: 44px; }
    body .fh-popular a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ===== Textes : 12 px minimum ===== */
body .fsc .fsc-cat, body .fsc .fsc-from, body .fsc .fsc-badge { font-size: .75rem; }
body .hc-card .hc-txt small { font-size: .8rem; }
body .fh-tf small, body .fh-tf .fh-tf-newtag, body .fh-tf .fh-tf-btn { font-size: .75rem; }

/* ===== Mobile : page plus compacte ===== */
@media (max-width: 575px) {
    /* Espacements generaux */
    body .fh-sec { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    body .fh-sec-head { margin-bottom: 1rem; gap: .5rem; }

    /* En-tete : texte */
    body .fh-hero { padding: 1.25rem 0 1.75rem; }
    body .fh-hero-grid { gap: 1.5rem; }
    body .fh-pill { font-size: .75rem; }
    body .fh-h1 { font-size: clamp(1.75rem, 8vw, 2.2rem); line-height: 1.12; margin-bottom: .6rem; }
    body .fh-lead { font-size: .95rem; margin-bottom: 1rem; }
    body .fh-search { padding: .3rem .3rem .3rem .8rem; }
    body .fh-search input { min-width: 0; font-size: 16px; }
    body .fh-search .fy-btn { padding: .65rem .9rem; }
    body .fh-popular { display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem; margin: .9rem calc(var(--bs-gutter-x, 1.5rem) * -.5) 0; padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); overflow-x: auto; scrollbar-width: none; }
    body .fh-popular::-webkit-scrollbar { display: none; }
    body .fh-popular > span { flex-shrink: 0; font-size: .8rem; }
    body .fh-popular a { flex-shrink: 0; padding: 0 .9rem; border-radius: 999px; white-space: nowrap; }
    body .fh-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
    body .fh-hero-actions .fy-btn { width: 100%; justify-content: center; text-align: center; padding-left: .5rem; padding-right: .5rem; font-size: .92rem; }
    body .fh-checks { display: flex; flex-wrap: nowrap; gap: .5rem 1rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: none; font-size: .82rem; }
    body .fh-checks::-webkit-scrollbar { display: none; }
    body .fh-checks li { flex-shrink: 0; white-space: nowrap; }


    /* Moyens de paiement : une ligne qui defile */
    body .fh-pay { padding: .8rem 0; }
    body .fh-pay-inner { flex-wrap: nowrap; justify-content: flex-start; gap: .75rem; overflow-x: auto; scrollbar-width: none; }
    body .fh-pay-inner::-webkit-scrollbar { display: none; }
    body .fh-pay-logos { flex-wrap: nowrap; gap: 1rem; }
    body .fh-pay-label, body .fh-pay-item { flex-shrink: 0; white-space: nowrap; }

    /* Service a la une : description limitee a 3 lignes */
    body .fh-spot-body { padding: 1rem; gap: .45rem; }
    body .fh-spot h3 { font-size: 1.2rem; }
    body .fh-spot p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

    /* Categories */
    body .hc-card .hc-txt small { font-size: .76rem; }

    /* Comment ca marche : trajet du paiement en 2 x 2 */
    body .hw2-steps { gap: .9rem; }
    body .hw2-steps p { font-size: .86rem; }
    body .hw2-flow { grid-template-columns: 1fr 1fr; }
    body .hw2-flow li { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .7rem; font-size: .82rem; }

    /* Devenir freelance : image au-dessus, plus basse */
    body .fh-cta { padding: 2.25rem 0; }
    body .fh-cta-grid { gap: 1.5rem; }
    body .fh-cta h2 { font-size: 1.6rem; }
    body .fh-cta p { font-size: .95rem; }
    body .fh-cta-list { gap: .45rem; margin: 1rem 0 1.25rem; font-size: .9rem; }
    body .fh-cta .fy-btn { width: 100%; justify-content: center; }
    body .fh-cta-img { order: -1; aspect-ratio: 16 / 9; border-radius: 1rem; }

    /* Ce que nos freelances savent faire : pastilles compactes */
    body .fy-services-bottom { padding: 2.25rem 0; }
    body .fy-services-bottom .fy-service-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
    body .fy-services-bottom .fy-service-tag { width: auto; padding: .45rem .75rem; border-radius: 999px; font-size: .8rem; }
    body .sf-band { padding: 1.2rem 0; }
}

/* ===== En-tete : les colonnes ne s'elargissent jamais au-dela de l'ecran ===== */
@media (max-width: 991px) {
    body .fh-hero-grid { grid-template-columns: minmax(0, 1fr); }
    body .fh-hero-grid > *, body .fh-hero-text, body .fh-hero-media { min-width: 0; max-width: 100%; }
    body .fh-search { max-width: 100%; }
}
@media (max-width: 575px) {
}