/* ============================================================
   responsive-fixes.css — Filet de sécurité responsive global ACTI
   Chargé EN DERNIER. Additif et non destructif : ne fait que
   rattraper les débordements et harmoniser les grilles aux
   breakpoints standards (1200 / 992 / 768 / 576 / 400).
   ============================================================ */

/* ---------- 1. Anti-débordement horizontal global ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; } /* évite que flex/grid enfants forcent un overflow */

/* Médias et contenus larges toujours fluides */
img, video, canvas, svg, iframe, embed, object {
    max-width: 100%;
    height: auto;
}
img[width], img[height] { height: auto; } /* neutralise attributs fixes */

/* Mots/URLs longs qui cassent la mise en page */
p, li, a, h1, h2, h3, h4, h5, span, td, th, dd, dt, blockquote, figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- 2. Tableaux : scroll horizontal propre ---------- */
@media (max-width: 768px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 3. Harmonisation des grilles multi-colonnes ---------- */
/* Tablette large / petit desktop : 6→4, 5→3, 4→3 */
@media (max-width: 1200px) {
    .hx-quick { grid-template-columns: repeat(4, 1fr) !important; }
    .hx-prow  { grid-template-columns: repeat(4, 1fr) !important; }
    .e404-cats { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Tablette (≤992px) : réduction générale à 2-3 colonnes */
@media (max-width: 992px) {
    .hx-host-grid, .hx-eng-grid, .hx-rev-grid,
    .ap-stats, .ap-grid, .ap-team, .ap-values,
    .rec-stats-grid, .rec-why, .rec-perks, .rec-jobs, .rec-process,
    .rec-team, .rec-similar-grid, .rec-perks-grid,
    .pr-codes, .pr-deals,
    .cartx-sugg,
    .ac-grid-3,
    .af-trust .wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .hx-prow  { grid-template-columns: repeat(3, 1fr) !important; }
    .hx-quick { grid-template-columns: repeat(4, 1fr) !important; }
    .e404-cats { grid-template-columns: repeat(3, 1fr) !important; }

    /* Conteneurs à colonnes fixes fréquents */
    [class*="container"] { max-width: 100% !important; }
}

/* Mobile large (≤768px) */
@media (max-width: 768px) {
    .hx-prow { grid-template-columns: repeat(2, 1fr) !important; }
    .hx-quick { grid-template-columns: repeat(3, 1fr) !important; }
    .e404-cats { grid-template-columns: repeat(2, 1fr) !important; }

    .rec-process, .rec-team, .rec-jobs, .rec-similar-grid,
    .pr-codes, .pr-deals, .cartx-sugg, .ac-grid-3,
    .ap-team, .ap-grid {
        grid-template-columns: 1fr !important;
    }

    /* Sections héro / bannières : padding réduit */
    .hx-hero-main { padding: 26px 20px !important; }
}

/* Mobile (≤576px) : tout en une colonne pour les grilles restantes */
@media (max-width: 576px) {
    .hx-host-grid, .hx-eng-grid, .hx-rev-grid,
    .ap-stats, .ap-values,
    .rec-stats-grid, .rec-why, .rec-perks, .rec-perks-grid,
    .af-trust .wrap {
        grid-template-columns: 1fr !important;
    }
    .hx-prow  { grid-template-columns: repeat(2, 1fr) !important; } /* 2 produits/ligne reste lisible */
    .hx-quick { grid-template-columns: repeat(2, 1fr) !important; }
    .e404-cats { grid-template-columns: repeat(2, 1fr) !important; }

    /* Titres héro : tailles fluides */
    .hx-hero-main h1 { font-size: clamp(22px, 6vw, 28px) !important; }
}

/* Très petit mobile (≤400px) */
@media (max-width: 400px) {
    .hx-prow, .hx-quick, .e404-cats { grid-template-columns: 1fr !important; }
}

/* ---------- 4. Flex-rows qui doivent wrapper sur mobile ---------- */
@media (max-width: 768px) {
    .hx-sec-h, .hx-rev-head, .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ---------- 5. Boutons pleine largeur sur petit mobile ---------- */
@media (max-width: 480px) {
    .btn-block-mobile,
    .hx-cta-final .btns { flex-direction: column; }
    .hx-cta-final .btns > a { width: 100%; text-align: center; }
}

/* ---------- 6. Espacements de section réduits sur mobile ---------- */
@media (max-width: 768px) {
    section { padding-left: 0; padding-right: 0; }
    .wrap, .container { padding-left: 16px; padding-right: 16px; }
}

/* ===== Chasse au trésor (cadeau caché cliquable) ===== */
.acti-treasure{position:absolute;top:8px;right:8px;z-index:6;width:44px;height:44px;border:none;background:linear-gradient(135deg,#ff6b35,#e85520);border-radius:12px;cursor:pointer;box-shadow:0 6px 18px -4px rgba(255,107,53,.6);display:grid;place-items:center;padding:0;animation:actiTreasureWob 1.4s ease-in-out infinite;transition:transform .15s;}
.acti-treasure img{width:26px;height:26px;object-fit:contain;filter:brightness(0) invert(1);}
.acti-treasure:hover{transform:scale(1.12) rotate(4deg);}
.acti-treasure.busy{opacity:.6;pointer-events:none;}
@keyframes actiTreasureWob{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg) scale(1.06);}}
.actt-pop{position:fixed;inset:0;background:rgba(15,42,32,.5);z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .22s;}
.actt-pop.on{opacity:1;}
.actt-card{background:#fff;border-radius:20px;padding:28px;width:330px;max-width:100%;text-align:center;box-shadow:0 30px 70px -25px rgba(0,0,0,.55);font-family:'Plus Jakarta Sans',system-ui,sans-serif;transform:scale(.94);transition:transform .22s;}
.actt-pop.on .actt-card{transform:scale(1);}
.actt-emoji{font-size:44px;line-height:1;}
.actt-card h3{font-size:1.3rem;font-weight:800;margin:12px 0 6px;color:#17181c;letter-spacing:-.02em;}
.actt-card p{font-size:.9rem;color:#6b7280;margin:0 0 16px;line-height:1.5;}
.actt-reward{background:#f6f7f9;border:1px dashed #3e9172;border-radius:12px;padding:14px;margin-bottom:16px;}
.actt-lbl{font-size:11px;color:#9aa1b1;text-transform:uppercase;letter-spacing:.05em;}
.actt-val{font-size:20px;font-weight:800;color:#2f7259;margin-top:2px;}
.actt-code{font-family:monospace;font-weight:700;color:#2f7259;margin-top:6px;font-size:15px;letter-spacing:1px;background:#fff;border-radius:7px;padding:5px 8px;display:inline-block;}
.actt-close{background:linear-gradient(135deg,#ff6b35,#e85520);color:#fff;border:none;font-family:inherit;font-weight:800;font-size:14px;padding:12px 26px;border-radius:11px;cursor:pointer;width:100%;}