/* ============================================================
   responsive-detail-conseil.css
   Page : detail-conseil.php — PAEEJ JOBS
   Breakpoints : ≤ 1380px | ≤ 1024px | ≤ 768px | ≤ 480px
   ============================================================ */


/* ------------------------------------------------------------
   ≤ 1380px — GRAND LAPTOP
   Le container 1320px déborde sur les écrans standard
   ------------------------------------------------------------ */
@media screen and (max-width: 1380px) {

    .container.detail_actu {
        width: 100%;
        padding: 0 25px;
        box-sizing: border-box;
    }
}


/* ------------------------------------------------------------
   ≤ 1024px — PETITS LAPTOPS / TABLETTE PAYSAGE
   ------------------------------------------------------------ */
@media screen and (max-width: 1024px) {

    section.wrapper_detail_actu {
        padding: 40px 0 30px;
    }

    .container.detail_actu {
        padding: 0 18px;
    }

    /* Colonne gauche se rétrécit, droite suit */
    aside.aside_left {
        width: calc(65% - 30px);
    }

    aside.aside_right {
        width: 35%;
    }

    /* Padding interne de l'article */
    .item-bloc-left {
        padding: 22px 25px;
    }

    /* Débordement image compensé */
    .entry-img {
        margin: 0 -25px 30px;
    }

    /* Titre article */
    .entry-title {
        font-size: 24px;
    }

    /* Widget aside */
    .widget-aside {
        padding: 30px 25px;
    }

    h2.widget-title {
        font-size: 22px;
    }

    /* Blockquote */
    .entry-content blockquote {
        font-size: 20px;
        padding: 25px 28px;
    }

    /* Icônes partage : réduire */
    aside.social-media {
        left: 0;
    }
}


/* ------------------------------------------------------------
   ≤ 768px — TABLETTE PORTRAIT
   Layout : colonne unique (aside_left au-dessus, aside_right en dessous)
   ------------------------------------------------------------ */
@media screen and (max-width: 768px) {

    section.wrapper_detail_actu {
        padding: 25px 0 20px;
    }

    .container.detail_actu {
        padding: 0 14px;
    }

    /* Layout en colonne */
    .content-detail.row-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* ── aside_left : pleine largeur ── */
    aside.aside_left {
        width: 100% !important;
        padding: 0;
    }

    /* ── aside_right : pleine largeur, après le contenu ── */
    aside.aside_right {
        width: 100% !important;
        padding-left: 0;
        margin-top: 30px;
    }

    /* Désactiver sticky sur mobile */
    #bloc_aside_page,
    .bloc_aside_page {
        position: relative !important;
        top: auto !important;
    }

    /* ── Icônes partage : passer en barre horizontale sous le titre ── */
    aside.social-media {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
        order: -1;
    }

    ul.social-icons {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px;
        width: max-content;
    }

    ul.social-icons a {
        width: 38px;
        height: 38px;
    }

    /* ── Bloc article ── */
    .item-bloc-left {
        padding: 18px 16px;
    }

    /* L'image débordante : annuler le margin négatif */
    .entry-img {
        margin: 0 0 24px !important;
    }

    /* ── Date en badge absolu : repositionner ── */
    ul.entry-date.ct-item-date {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        display: inline-flex !important;
        width: 58px;
        height: 66px;
        margin-bottom: 10px;
        font-size: 20px;
    }

    /* ── Titre ── */
    .entry-title {
        font-size: 21px;
        margin: 10px 0 12px;
    }

    /* ── Contenu ── */
    .entry-content h2 {
        font-size: 20px;
    }

    .entry-content blockquote {
        font-size: 17px;
        line-height: 1.6;
        padding: 20px 18px;
    }

    .entry-content blockquote p:first-child {
        font-size: 17px;
        line-height: 1.6;
    }

    .entry-content blockquote p:last-child {
        font-size: 15px;
    }

    /* ── Formulaire commentaire ── */
    .ligne-form {
        flex-direction: column !important;
    }

    .form-group.two-items {
        width: 100% !important;
        margin-bottom: 12px;
    }

    /* ── Widget aside ── */
    .widget-aside {
        padding: 25px 20px;
        margin-bottom: 20px;
    }

    h2.widget-title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    li.item-categorie {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* ── Auteur ── */
    .entry-author-info {
        padding: 22px 18px;
        flex-wrap: wrap !important;
        gap: 14px;
    }

    /* ── Tags ── */
    .entry-tags {
        padding: 18px 0;
    }

    .entry-tags label {
        font-size: 15px;
    }

    .entry-tags a {
        font-size: 13px;
        padding: 4px 14px;
    }
}


/* ------------------------------------------------------------
   ≤ 480px — MOBILE
   ------------------------------------------------------------ */
@media screen and (max-width: 480px) {

    section.wrapper_detail_actu {
        padding: 15px 0 15px;
    }

    .container.detail_actu {
        padding: 0 10px;
    }

    /* ── Bloc article très compact ── */
    .item-bloc-left {
        padding: 14px 12px;
        margin-bottom: 24px;
        font-size: 15px;
    }

    /* ── Date ── */
    ul.entry-date.ct-item-date {
        width: 50px;
        height: 58px;
        font-size: 16px;
    }

    li.item-date-m {
        font-size: 13px;
    }

    li.item-date-d {
        font-size: 11px;
    }

    /* ── Titre ── */
    .entry-title {
        font-size: 18px;
        line-height: 1.4;
        margin: 8px 0 10px;
    }

    /* ── Meta (vues / commentaires) ── */
    .ct-item-meta li {
        margin-right: 18px;
        font-size: 13px;
    }

    li.item-comment {
        font-size: 13px;
    }

    /* ── Contenu ── */
    .entry-content h2 {
        font-size: 17px;
    }

    .entry-content blockquote {
        font-size: 15px;
        line-height: 1.5;
        padding: 16px 14px;
        margin: 18px 0;
    }

    .entry-content blockquote p:first-child {
        font-size: 15px;
        line-height: 1.5;
    }

    .entry-content blockquote p:last-child {
        font-size: 13px;
        line-height: 1.5;
    }

    /* ── Icônes partage ── */
    ul.social-icons a {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    /* ── Section commentaires ── */
    h2.comments-title {
        font-size: 18px;
    }

    .comments-area {
        margin-bottom: 20px;
    }

    /* ── Formulaire commentaire ── */
    .form-control {
        font-size: 14px;
        padding: 10px 12px;
    }

    textarea.form-control.ht-80 {
        min-height: 90px;
    }

    /* Bouton envoyer */
    input.btn.btn-theme-light-2 {
        font-size: 14px;
        padding: 10px 24px;
        width: 100%;
    }

    /* ── Widget aside ── */
    .widget-aside {
        padding: 18px 14px;
        margin-bottom: 16px;
    }

    h2.widget-title {
        font-size: 18px;
        margin-bottom: 24px;
    }

    li.item-categorie {
        padding: 7px 14px;
        font-size: 13px;
        margin-bottom: 10px;
    }

    /* ── Auteur ── */
    .entry-author-info {
        padding: 16px 12px;
    }

    /* ── Tags ── */
    .entry-tags a {
        font-size: 12px;
        padding: 3px 12px;
    }

    /* ── Affaire (sections structurées) ── */
    h2.titre-main-affaire {
        font-size: 26px;
    }

    .body-affaire-title {
        font-size: 15px;
    }

    .body-affaire-title span,
    .body-affaire-title div {
        font-size: 18px;
    }

    .content-item-affaire {
        margin-left: 20px;
    }

    .desc-item-affaire {
        margin-left: 20px;
    }
}