/* ==========================================================================
   0. BOX-SIZING GLOBAL
   ========================================================================== */
/* ✅ AJOUTÉ — sans box-sizing:border-box global, tout élément avec un padding
   fixe (inputs, cartes, badges, etc.) ajoute ce padding à sa largeur définie
   et peut dépasser son conteneur sur mobile, provoquant un scroll horizontal
   parasite sur toute la page. C'est la cause la plus fréquente des débordements
   "invisibles" sur petit écran. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   1. RESET GLOBAL : Libération du Body et des balises parentes
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh;
    background-color: #f5f5f7; /* Fond gris clair style iOS/Android */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ✅ AJOUTÉ — les classes "breakout" plus bas (calc(50% - 50vw)) peuvent
   provoquer un léger scroll horizontal si un navigateur calcule 100vw en
   incluant la largeur de la scrollbar verticale. On verrouille le débordement
   horizontal au niveau du html pour garantir zéro scroll latéral parasite,
   sans toucher au overflow-y (donc sans casser position:sticky). */
html {
    overflow-x: hidden;
}

/* ✅ AJOUTÉ — évite que toute image ou icône plus large que son conteneur
   ne fasse déborder la mise en page sur mobile (oubli fréquent dans le HTML
   existant, ex. avatars, photos de candidates, logos). */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* ✅ CORRIGÉ — le reset ci-dessus (padding:0 !important) écrasait
   body { padding-top: var(--nav-h); } défini dans header.css pour
   compenser le header fixe (#site-header, position:fixed, 72px).
   Sans cette compensation, le header recouvre le haut de CHAQUE page
   (le hero de candidate_detail se retrouvait collé/caché sous le
   header). On la restaure ici en !important pour regagner la
   priorité, en exception de ce reset — les cartes home (breakout
   horizontal) ne sont pas concernées, seul l'espacement vertical
   change. */
body {
    padding-top: var(--nav-h, 72px) !important;
}

/* ✅ CORRIGÉ — "full-mobile-width" ne pouvait pas annuler le padding
   de ses parents (main.php a max-w-7xl mx-auto px-4, home.php ajoute
   .container-xl.px-4 par-dessus). width:100% + margin/padding:0 ne
   sort JAMAIS un enfant du padding de son ancêtre — seule une marge
   négative calculée sur le viewport (100vw) le permet. Cette classe
   est maintenant un vrai "breakout" réutilisable sur mobile.
   Fonctionne même à travers plusieurs conteneurs imbriqués tant que
   ceux-ci restent centrés symétriquement (mx-auto + padding égal). */
@media (max-width: 767.98px) {
    .full-mobile-width {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   2. ADAPTATION MOBILE — cartes candidates (grille d'accueil)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* ✅ CORRIGÉ — #candidates-container est imbriqué dans
       <main class="max-w-7xl mx-auto px-4..."> (main.php) PUIS dans
       <div class="container-xl px-4"> (home.php). L'ancienne règle
       (margin/padding:0 + width:100%) ne faisait que remplir la boîte
       déjà rétrécie par ces deux padding — les cartes restaient
       inset d'environ 32px de chaque côté au lieu de toucher les
       bords de l'écran, contrairement au hero de candidate_detail.
       On applique ici le même breakout que .full-mobile-width pour
       que les deux pages soient visuellement identiques sur mobile. */
    #candidates-container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
    .candidate-card-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .candidate-card {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important; /* ✅ cohérent avec un rendu pleine largeur, bord à bord */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }
    .candidate-card .img-container,
    .candidate-card .img-container img {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .candidate-card .card-body {
        padding: 16px !important;
        box-sizing: border-box;
    }
    .candidate-card .candidate-name {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin: 0 0 6px 0 !important;
        letter-spacing: -0.3px;
        overflow-wrap: break-word; /* ✅ AJOUTÉ — évite qu'un nom très long force un scroll horizontal */
    }
    .candidate-card p.text-muted.small {
        margin-bottom: 10px !important;
    }
}

/* ✅ AJOUTÉ — très petits téléphones (≤380px, ex. iPhone SE) : on resserre
   encore un peu le texte des cartes pour éviter tout retour à la ligne
   disgracieux sur les libellés courts. */
@media (max-width: 380px) {
    .candidate-card .candidate-name { font-size: 18px !important; }
    .candidate-card .card-body { padding: 12px !important; }
}

/* ==========================================================================
   3. BOTTOM SHEET PWA (pwa_sheet.php) — utilisée sur mobile uniquement.
      Sur desktop, MissUnasmohUI utilise SweetAlert2 : ces règles ne
      s'appliquent jamais dans une fenêtre desktop (le sheet n'y est
      jamais créé — voir ui-adaptive.js).
   ========================================================================== */
.m-sheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    /* ✅ très au-dessus de #site-header (1050), #mobile-drawer (1040) et du
       footer (auto) — le sheet est toujours ajouté en dernier dans <body>,
       mais on fige quand même un z-index élevé au cas où un ancêtre créerait
       un contexte d'empilement local (transform/filter) qui piégerait l'ordre DOM. */
    z-index: 99999;
    background: rgba(0, 0, 0, 0);
    transition: background .28s ease;
}
.m-sheet-overlay.active {
    background: rgba(0, 0, 0, .45);
}

/* ✅ Référencée par ui-adaptive.js (SwalTop) pour que les alertes SweetAlert2
   passent toujours au-dessus du bottom-sheet mobile */
.unasmoh-top-swal-container {
    z-index: 100000 !important;
}

.m-sheet-bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.25, 1, .5, 1);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.m-sheet-bottom.active {
    transform: translateY(0);
}

.m-sheet-header {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 0 6px;
    border-bottom: 1px solid #f0f0f0;
    touch-action: none;
}
.m-sheet-handle-bar {
    width: 40px; height: 4px;
    border-radius: 4px;
    background: #d8d8d8;
    margin: 0 auto 6px;
}
.m-sheet-close-btn {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    font-size: 24px; line-height: 1;
    color: #888; cursor: pointer; padding: 4px 8px;
}

.m-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 0 0;
    -webkit-overflow-scrolling: touch;
}
.m-sheet-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    color: #111;
    margin: 0 0 12px;
    padding: 0 16px;
}

/* ==========================================================================
   4. PANNEAU "PROFIL + COMMENTAIRES" FAÇON FACEBOOK (comment_panel.php)
      Structure en colonne : header + résumé likes + actions (fixes),
      fil de commentaires (seule zone qui défile), composer fixé en bas.
   ========================================================================== */
.fb-post-panel {
    display: flex;
    flex-direction: column;
    height: 68vh;
    max-height: 68vh;
}
@media (min-width: 992px) {
    /* Desktop : le panneau vit dans le popup SweetAlert2, hauteur un peu réduite */
    .fb-post-panel { height: 60vh; max-height: 60vh; }
}

.fb-post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 12px;
    flex: 0 0 auto;
}
.fb-post-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
    flex-shrink: 0;
}
.fb-post-header-text { min-width: 0; }
.fb-post-name {
    font-weight: 700;
    font-size: 16px;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fb-post-sub {
    font-size: 12px;
    color: #8a8d91;
}

.fb-likes-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-size: 13px;
    color: #444;
    flex: 0 0 auto;
}
.fb-likes-icon { font-size: 14px; }

.fb-action-bar {
    display: flex;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}
.fb-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 0;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #65676b;
    cursor: pointer;
    transition: background .15s ease;
}
.fb-action-btn:hover { background: #f2f2f2; }
.fb-action-btn i { font-size: 16px; }
.fb-action-btn.is-active { color: #b8901c; }
.fb-action-btn.is-active i { color: #e0245e; }
.fb-action-btn:disabled { opacity: .5; cursor: not-allowed; }

.fb-divider { display: none; }

.fb-comments-feed {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
}
.fb-comments-loading {
    text-align: center;
    color: #8a8d91;
    font-size: 13px;
    padding: 20px 0;
}

.fb-comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.fb-comment-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #b8901c, #e8b84b);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}
.fb-comment-bubble {
    background: #f0f2f5;
    border-radius: 16px;
    padding: 8px 12px;
    max-width: 78%;
}
.fb-comment-username { font-size: 12.5px; font-weight: 700; color: #111; }
.fb-comment-text { font-size: 13.5px; color: #1c1e21; margin-top: 1px; word-break: break-word; }
.fb-comment-date { font-size: 10.5px; color: #8a8d91; margin-top: 3px; }

.fb-login-prompt {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #b8901c;
    padding: 12px 16px;
    flex: 0 0 auto;
}

/* Composer : champ de commentaire FIXE en bas du panneau (ne défile jamais) */
.fb-comment-composer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    background: #fff;
    flex: 0 0 auto;
}
.fb-comment-composer-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.fb-comment-input {
    flex: 1 1 auto;
    border: none;
    background: #f0f2f5;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13.5px;
    outline: none;
    min-width: 0; /* ✅ AJOUTÉ — un input flex sans min-width:0 peut forcer son conteneur à déborder sur mobile */
}
.fb-sticker-btn, .fb-send-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #b8901c;
    cursor: pointer;
    flex-shrink: 0;
    padding: 4px 6px;
}
.fb-sticker-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 16px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
    border: 1px solid #f0f0f0;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 180px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px) scale(.92);
    transition: opacity .16s ease, transform .16s ease;
    z-index: 20;
}
.fb-sticker-popover.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.fb-sticker-chip {
    border: none;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 18px;
    padding: 6px 0;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.fb-sticker-chip:hover { background: #f0e3c4; transform: scale(1.15); }

/* Sur mobile, le panneau doit occuper toute la largeur du sheet sans padding parasite */
@media (max-width: 767.98px) {
    .fb-post-panel { height: 72vh; max-height: 72vh; }
    .fb-comment-bubble { max-width: 84%; } /* ✅ CORRIGÉ — 78% laissait trop peu de place au texte sur petit écran, bulle inutilement étroite */
}