/* ======================================================================
   PAEEJ TECHNOPOLE — responsive-detail-programme.css
   ----------------------------------------------------------------------
   Complète le responsive INLINE de detail-programme.css, qui gère déjà le
   passage de la grille 2 colonnes (contenu + sidebar) à 1 colonne à ≤1024
   (.detail-body, .localites-grid, .files-list, .apply-card position:static,
   hero h1 28px). Ce fichier ajoute la finition fine, organisée par bloc.
   Breakpoints : 768 / 576 / 380   (ce fichier se charge en dernier)
   ====================================================================== */


/* ======================================================================
   0 · CORRECTIF DÉBORDEMENT HORIZONTAL
   ----------------------------------------------------------------------
   .detail-hero .container a max-width:1280px qui écrase le max-width:100%
   de .container → le conteneur reste à 1200px et déborde dès que l'écran
   fait moins de 1200px. On rétablit max-width:100%.
   ====================================================================== */
@media only screen and (max-width: 1024px) {
    .detail-hero .container { max-width: 100%; }
}


/* ======================================================================
   1 · HERO  (.detail-hero)
   ====================================================================== */
@media only screen and (max-width: 768px) {
    .detail-hero { padding: 22px 0 36px; }
    .detail-hero .container { padding: 0 16px; }
    .detail-hero h1 { font-size: 22px; }
    .detail-hero-tags { gap: 14px; margin-top: 12px; }
    .detail-hero-tag { font-size: 12px; }
    .detail-breadcrumb { flex-wrap: wrap; font-size: 11px; }
}
@media only screen and (max-width: 576px) {
    .detail-hero h1 { font-size: 20px; }
    .detail-cat-tag { font-size: 11px; padding: 4px 12px; }
}
@media only screen and (max-width: 380px) {
    .detail-hero h1 { font-size: 18px; }
}


/* ======================================================================
   2 · CORPS / SECTIONS  (.detail-body, .detail-section)
   ====================================================================== */
@media only screen and (max-width: 768px) {
    .detail-body { padding: 0 16px 48px; gap: 20px; }
    .detail-section { padding: 22px 18px; }
    .detail-section h2.section-title { font-size: 17px; }
    .detail-section h2.section-title i { font-size: 16px; }
    .detail-section .section-content { font-size: 14px; }
}
@media only screen and (max-width: 576px) {
    .detail-section { padding: 18px 15px; border-radius: 14px; }
    .detail-section h2.section-title { font-size: 16px; }
}


/* ======================================================================
   3 · LOCALITÉS  (.localites-grid, .localite-card)
   ----------------------------------------------------------------------
   La grille passe déjà en 1 colonne à ≤1024 ; ici on ajuste la carte.
   ====================================================================== */
@media only screen and (max-width: 768px) {
    .localite-stats { min-width: 110px; }
    .localite-stats .nb { font-size: 19px; }
    .localite-info strong { font-size: 14px; }
}
@media only screen and (max-width: 380px) {
    /* carte trop étroite : on empile info / stats */
    .localite-card { flex-direction: column; align-items: stretch; gap: 10px; }
    .localite-stats { text-align: left; min-width: 0; }
}


/* ======================================================================
   4 · SIDEBAR  (.apply-card, .timeline-card)
   ====================================================================== */
@media only screen and (max-width: 768px) {
    .apply-card,
    .timeline-card { padding: 20px; }
    .apply-card h3,
    .timeline-card h3 { font-size: 16px; }
    .deadline-card-side .val { font-size: 18px; }
    .apply-stat .num { font-size: 17px; }
}


/* ======================================================================
   5 · FICHIERS  (.files-list, .file-item)
   ----------------------------------------------------------------------
   La liste passe déjà en 1 colonne à ≤1024.
   ====================================================================== */
@media only screen and (max-width: 576px) {
    .file-item { padding: 12px 14px; }
    .file-name { font-size: 14px; }
}


/* ======================================================================
   6 · BARRE CTA FIXE  (.sticky-cta)
   ====================================================================== */
@media only screen and (max-width: 576px) {
    .sticky-cta { padding: 10px 14px; gap: 10px; }
    .sticky-info { font-size: 11.5px; }
    .sticky-btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
}


/* ======================================================================
   7 · TABLEAUX dans le contenu  (ex. section « Thématique »)
   ----------------------------------------------------------------------
   Le contenu vient de la BD et peut contenir un tableau plus large que
   l'écran (COMMUNE / MÉTIER / EFFECTIF…). Sans traitement, il déborde et
   fait scroller toute la page horizontalement. On autorise le défilement
   horizontal DU TABLEAU à l'intérieur de la section.
   ====================================================================== */
.detail-section .section-content table { border-collapse: collapse; max-width: 100%; }

@media only screen and (max-width: 768px) {
    /* min-width:0 indispensable : sans ça la colonne de grille refuse de
       rétrécir sous la largeur du tableau et toute la page déborde */
    .detail-main, .detail-section { min-width: 0; }
    .detail-section .section-content { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .detail-section .section-content table { font-size: 13px; }
    .detail-section .section-content table th,
    .detail-section .section-content table td { padding: 8px 10px; white-space: normal; }
}