/* =========================================================
           JobOffer Candidate Page (Standalone)
           Prefix: jo-
           Full width
           3 cases:
             - Normal: .jo-page
             - Branded: .jo-page.jo--branded
             - Questions: .jo-page.jo--questions
           ========================================================= */

#jobofferInfosData, #jobofferInfosData *{ box-sizing:border-box; }

#jobofferInfosData{
    --jo-bg:#f6f8fb;
    --jo-card:#ffffff;
    --jo-text:#1f2937;
    --jo-muted:#6b7280;
    --jo-line:#e5e7eb;

    --jo-pink:#e91e8a;
    --jo-pink2:#ff4aa3;

    --jo-teal:#10b981;  /* topbar green */
    --jo-green:#22c55e;

    --jo-shadow-soft: 0 6px 18px rgba(15,23,42,.08);
    --jo-shadow: 0 10px 30px rgba(15,23,42,.10);

    --jo-radius:10px;

    font-family:Arial, Helvetica, sans-serif;
    color:var(--jo-text);
    background:var(--jo-bg);
}

.jo-page{ width:100%; min-height:100vh; background:var(--jo-bg); position:relative; }

/* =========================================================
   Branded banner + rail (optional branded case)
   ========================================================= */
.jo-brandTop{
    display:none;
    position:relative;
    /*height:120px;
    background:
        radial-gradient(1200px 200px at 20% 50%, rgba(255,255,255,.18), transparent 55%),
        linear-gradient(135deg, #0b2a67, #154db3 45%, #3a8bd7);*/
    overflow:hidden;
}
.jo-brandTop::after{
    content:"";
    position:absolute; inset:0;
    background:
            linear-gradient(120deg, rgba(255,255,255,.12), transparent 55%),
            radial-gradient(900px 200px at 70% 35%, rgba(255,255,255,.12), transparent 60%);
    opacity:.9;
    pointer-events:none;
}
.jo-brandTopInner{
    width:100%;
    height:100%;
    padding:18px 16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    position:relative;
    z-index:1;
}
.jo-brandTitle{
    color:#fff;
    font-size:12px;
    line-height:1.15;
    font-weight:550;
    letter-spacing:.2px;
    margin:0;
    max-width:860px;
}
.jo-brandBadge{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);
    padding:10px 12px;
    border-radius:999px;
    backdrop-filter: blur(6px);
    white-space:nowrap;
    font-weight:800;
    font-size:12px;
}
.jo-brandBadge small{
    display:block;
    opacity:.85;
    font-weight:600;
    font-size:11px;
    margin-top:1px;
}

.jo-body{ display:flex; width:100%; }

.jo-rail{
    display:none;
    /*width:120px;
    background: linear-gradient(180deg, rgba(8,31,76,.92), rgba(35,126,198,.55));
    border-right:1px solid rgba(255,255,255,.15);
    color:#fff;
    /*padding:10px 10px 14px;*/
    flex:0 0 auto;
}
.jo-railTop{
    font-weight:900;
    font-size:12px;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:10px 6px 6px;
    opacity:.95;
}
.jo-railItem{
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.08);
    border-radius:999px;
    padding:10px 8px;
    margin:10px 0;
    text-align:center;
}
.jo-railBig{ font-size:12px; font-weight:550; line-height:1; }
.jo-railLabel{ font-size:11px; opacity:.9; margin-top:4px; line-height:1.2; }
.jo-railRank{ border-radius:18px; padding:12px 8px; }
.jo-railRank .jo-railBig{ font-size:12px; }

.jo--branded .jo-brandTop{ display:block; }
.jo--branded .jo-rail{ display:block; }
.jo--branded .jo-topBrand{ display:none; }

.jo--confidentiel .jo-topBrand{ display: none; }

/* =========================================================
   TOPBAR (like PJ)
   ========================================================= */
.jo-topbarWrap{
    background:#fff;
    position:sticky;
    top:0;
    z-index:30;
    border-bottom:1px solid rgba(229,231,235,.9);
    box-shadow:0 6px 18px rgba(15,23,42,.06);
    border-radius:var(--jo-radius);
    margin:8px 8px 0;
}
.jo-topbar > .jo-navBtn:not(.jo-navBtn--next){ grid-column: 1; }
.jo-topBrand{ grid-column: 2; }
.jo-topCenter{ grid-column: 3; }
.jo-actions{ grid-column: 4; }
.jo-topbar > .jo-navBtn--next{ grid-column: 5; }
.jo-topbar{
    width:100%;
    padding:10px 14px;
    display:grid;
    grid-template-columns: auto auto 1fr auto auto;
    align-items:center;
    gap:12px;
}

.jo-navBtn{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;

    border-radius: 50% !important;
    padding: 0 0 2px !important;   /* 2px en bas : recentre visuellement le chevron */

    background: #1ABC9C; /* turquoise */
    color: #fff;
    border: 0;

    /* Taille du chevron ‹ › (avant : taille de texte par défaut) */
    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 4px 10px rgba(26, 188, 156, 0.32);
    cursor: pointer;
    transition: transform 0.1s ease;
    text-decoration: none;
}
.jo-navBtn:hover,
.jo-navBtn:focus{
    background:#E0208E;
    color:#fff;
    text-decoration:none;
    outline:none;
}
.jo-navBtn:active{ transform:translateY(1px); }

.jo-topBrand{
    min-width:0;
    max-width:110px;
    overflow:hidden;
}
.jo-topBrand img{
    max-width:100%;
    max-height: 56px;
    width:auto;
}
.jo-topCenter{
    min-width:0;
}
.jo-topTitle{
    max-width:100%;
    margin:0;
    font-size:15px;
    font-weight:550;
    color:#111827;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.jo-topMeta{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.jo-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 8px;
    border-radius:5px;
    font-size:11px;
    font-weight:800;
    line-height:1;
    border:1px solid rgba(229,231,235,.9);
    background:#fff;
    color:#374151;
}
.jo-pill--publication{
    background:#fff;
    border:1.2px dashed #E0A83B;
    color:#E0A83B;
    border-radius:5px;
    padding:4px 12px;
    font-weight:550;
}
.jo-pill--cityRegion{
    background:#E6F7F4;
    border:1px solid transparent;
    color:#2AA290;
    border-radius:5px;
    padding:4px 12px;
    font-weight:550;
}
.jo-pill--cityRegion svg{
    width:14px;
    height:14px;
    flex-shrink:0;
}
.jo-pill--cityRegion li{
    list-style:none;
    display:inline;
}

.jo-pill svg{ width:12px; height:12px; }

.jo-actions{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-end;
    white-space:nowrap;
}

.jo-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:34px;
    padding:0 14px;
    border-radius:6px;
    border:1.2px solid #2AA290;
    background:#fff;
    color:#2AA290;
    font-size:12px;
    font-weight:550;
    cursor:pointer;
    white-space:nowrap;
}
.jo-btn:hover{
    border-color:#E0208E;
    color:#E0208E;
}
.blc-btn-connexion .jo-btn--primary{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:0 !important;
    background:#E0208E !important;
    color:#fff !important;
    height:auto !important;
    padding:10px 6px !important;
    font-size:12px !important;
    font-weight:550 !important;
    box-shadow:none !important;
}
.blc-btn-connexion .jo-btn--primary:hover{
    background:#c81c7e !important;
}
.jo-btn svg{ width:14px; height:14px; }

.jo-btnStyle{
    /*display:flex;*/
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}
.jo-btnStyle a{
    text-decoration:none;
}
.jo-btnStyle a:hover,
.jo-btnStyle a:focus,
.jo-btnStyle a:active{
    text-decoration:none;
}
.jo-followLink{
    flex-basis:100%;
    margin:4px 0 0;
}
.jo-followLink a{
    font-size:12px;
    color:#2AA290;
    font-weight:600;
    text-decoration:underline;
}
.jo-followLink a:hover{
    color:#E0208E;
}

/* =========================================================
   Layout
   ========================================================= */
.jo-main{
    flex:1 1 auto;
    max-width: 100%;
}
.jo-container{ width:100%; margin:0; padding:8px; }

.jo-grid{
    display:grid;
    grid-template-columns: 1fr 260px;
    gap:8px;
    align-items:start;
}

/* Cards */
.jo-card{
    background:var(--jo-card);
    border:1px solid rgba(229,231,235,.92);
    border-radius:var(--jo-radius);
    box-shadow:var(--jo-shadow-soft);
    overflow:hidden;
    margin-bottom: 8px;

}
.jo-cardPad{ padding:12px; }
.jo-cardTitle{
    margin:0 0 10px;
    font-size:11px;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--jo-pink);
    font-weight:550;
}

.labels-inline{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
}
.labels-inline a{
    display:flex;
    justify-content:center;
    flex:1 1 0;
    min-width:0;
    max-width:70px;
}
.jo-labelImg{
    width:100%;
    height:auto;
    display:block;
}

/* MATCHING 4K (PJ) */
.jo-matchList{ display:flex; flex-direction:column; gap:10px; }
.jo-matchItem{ padding:0 0 10px; border-bottom:1px solid rgba(229,231,235,.65); }
.jo-matchItem:last-child{ border-bottom:0; padding-bottom:0; }
.jo-matchTop{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:#374151;
    line-height:1.2;
}
.jo-matchLabel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jo-matchPct{ font-weight:900; font-size:11px; color:var(--jo-green); }
.jo-matchBar{
    margin-top:6px;
    height:3px;
    border-radius:999px;
    background:rgba(15,23,42,.08);
    overflow:hidden;
}
.jo-matchBar > i{ display:block; height:100%; width:var(--w,50%); background:var(--jo-green); }

/* EN UN COUP D'OEIL: values aligned right */
.jo-kv{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:8px 10px;
    font-size:12px;
    color:#374151;
    align-items:baseline;
}
.jo-kv > span{
    color:#4b5563;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-right:6px;
}
.jo-kv > b{
    font-weight:550;
    color:#111827;
    text-align:right;
    justify-self:end;
    white-space:nowrap;
}

.jo-traitsLabel{ margin-top:10px; font-size:11px; color:var(--jo-muted); font-weight:550; }
.jo-traits{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.jo-trait{
    display:inline-flex;
    align-items:center;
    gap:6px;

    font-size:11px;
    font-weight:550;
    line-height:1.2;
    padding:5px 10px;
    border-radius:6px;
    background:#eaf7f4;   /* fond très discret */
    color:#2aa290;        /* texte vert */
}
.jo-trait i{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto;
    height:auto;
    min-width:0;
    background:none;
    border-radius:0;
    color:#10b981;
    font-style:normal;
    font-size:12px;
    font-weight:900;
    line-height:1;
}
.jo-trait i::before{
    content:"✓";
}

/* CTA 4K (PJ) + tag gratuit */
.jo-cta4k{
    position:relative;
    border-radius:var(--jo-radius);
    padding:14px 12px 12px;
    background:linear-gradient(135deg, rgba(233,30,138,.98), rgba(255,74,163,.98));
    color:#fff;
    overflow:hidden;
    margin-top: 8px;
    margin-bottom: 8px;
}
.jo-cta4k::after{
    content:"";
    position:absolute;
    inset:-40px -60px auto auto;
    width:160px; height:160px;
    background:rgba(255,255,255,.14);
    border-radius:3px;
    transform:rotate(18deg);
    pointer-events:none;
}
.jo-cta4kTag{
    position:absolute;
    top:10px;
    right:10px;
    background:#fff;
    color:var(--jo-pink);
    font-weight:550;
    font-size:10px;
    padding:4px 7px;
    border-radius:5px;
    box-shadow:0 10px 18px rgba(15,23,42,.12);
    z-index:1;
}
.jo-cta4k h4{
    margin:0 0 4px;
    font-size:26px;
    font-weight:550;
    letter-spacing:.6px;
    text-align:center;
    position:relative;
    z-index:1;
}
.jo-cta4k p{
    margin:0 0 10px;
    font-size:12px;
    line-height:1.35;
    text-align:center;
    opacity:.95;
    position:relative;
    z-index:1;
}
.jo-cta4k .jo-btn{
    width:100%;
    height:34px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.16);
    color:#fff;
    font-weight:550;
    position:relative;
    z-index:1;
}

/* Adresse info */
.jo-addressText{
    font-size:12px;
    color:#374151;
    line-height:1.7;
    margin:10px 0 14px;
}
.jo-mapBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:36px;
    border-radius:6px;
    border:1.2px solid #2AA290;
    background:#fff;
    color:#2AA290;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    margin-bottom: 15px;
}
.jo-mapBtn svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}
.jo-mapBtn:hover{
    background:#E6F7F4;
}

#gmaps .modal-dialog{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0;
    width:90%;
    max-width:600px;
}
#gmaps .modal-content{
    max-height:90vh;
    overflow-y:auto;
}

/* =========================================================
   ✅ MAIN CONTENT like your PJ (inside jo-cardPad in colMain)
   ========================================================= */
.jo-mainPad{ padding:16px 16px 18px; }

.jo-secTitle{
    margin:0 0 10px;
    font-size:12px;
    font-weight:550;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:var(--jo-pink);
}

.jo-paras p{
    margin:0 0 10px;
    color:#374151;
    font-size:12px;
    line-height:1.8;
}
.jo-paras p:last-child{ margin-bottom:0; }

/* Le texte de la description entreprise doit continuer jusqu'au bout
   de la ligne une fois qu'il dépasse la hauteur du bloc mini-site RH,
   au lieu de rester bloqué dans une colonne étroite sur toute sa
   hauteur (cas d'une grille 2 colonnes classique). On utilise donc un
   flottant : l'image flotte à droite et le texte s'écoule autour,
   puis reprend toute la largeur disponible une fois sous l'image. */
.jo-splitEntreprise{
    display:block;
}
.jo-splitEntreprise::after{
    content:"";
    display:table;
    clear:both;
}
.jo-splitEntreprise--full{
    display:block;
}

.jo-brandBox{
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    box-shadow:var(--jo-shadow-soft);
    border:1px solid rgba(229,231,235,.9);
}
.jo-splitEntreprise > .jo-brandBox{
    float:right;
    width:270px;
    margin:0 0 18px 18px;
}

.jo-brandGrid2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1px;
    background:#fff;
}
.jo-brandGrid2 img{
    width:100%;
    height:100px;
    object-fit:cover;
    display:block;
}

.jo-brandOrange{
    padding:16px 14px 18px;
    /*background:#f6b100;*/
    color:#ffffff;
}
.jo-brandOrange b{
    display:block;
    font-weight:550;
    margin-bottom:6px;
    font-size:16px;
}
.jo-brandOrange p{
    margin:0 0 14px;
    font-size:12px;
    line-height:1.4;
    opacity:1;
}
.jo-brandOrange .jo-orangeBtn{
    float: none !important;
    display: inline-flex;
    font-size: 13px;
    padding: 0 16px;
    /*background: #e74c3c;*/
    border-radius: 6px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #ffffff;
    font-weight: 550;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    transition: background .15s ease, transform .1s ease;
}

.jo-blockSpacer{ height:8px; }

.jo-quoteBanner{
    margin:8px 0;
    border-radius:10px;
    overflow:hidden;
    box-shadow:var(--jo-shadow);
    border:1px solid rgba(229,231,235,.8);
    background:#fff;
}
.jo-quoteBanner img{
    width:100%;
    height:auto;
    display:block;
}

.jo-posteIntro{
    margin:0 0 10px;
    color:#374151;
    font-size:12px;
    line-height:1.8;
}
.jo-posteList{
    margin:8px 0 0 18px;
    padding:0;
    color:#374151;
    font-size:12px;
    line-height:1.8;
}
.jo-posteList li{ margin:4px 0; }

/* Questions */

.jo-applyWrap{ display:none; }
.jo--questions .jo-applyWrap{ display:block; }

.jo-apply{
    border:1px solid rgba(233,30,138,.55);
    box-shadow:var(--jo-shadow);
}
.jo-applyHead{ padding:12px 12px 0; }
.jo-applyTitle{
    margin:0 0 4px;
    color:var(--jo-pink);
    font-weight:550;
    font-size:12px;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.jo-applySub{ margin:0 0 10px; font-size:11px; color:var(--jo-muted); }
.jo-q{ padding:12px; border-top:1px solid rgba(229,231,235,.7); }
.jo-q label{ display:block; font-size:12px; font-weight:550; color:#111827; margin-bottom:8px; }
.jo-scale{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.jo-radio{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 10px;
    border:1px solid rgba(229,231,235,.9);
    border-radius:8px;
    background:#fff;
    font-size:12px;
    color:#374151;
    cursor:pointer;
}
.jo-radio input{ accent-color:#0ea5e9; }
.jo-textarea{
    width:100%;
    min-height:110px;
    padding:10px 10px;
    border-radius:8px;
    border:1px solid rgba(229,231,235,.9);
    font-size:12px;
    outline:none;
}
.jo-toggles{
    display:flex;
    flex-direction:column;   /* ✅ une question par ligne */
    align-items:flex-start;  /* ✅ alignement propre à gauche */

    gap:10px;                /* espace vertical entre les lignes */
    padding:10px 12px 0;

    font-size:11px;
    color:#374151;
}
.jo-switch{ display:inline-flex; align-items:center; gap:8px; user-select:none; }
.jo-switch input{
    width:34px; height:18px;
    appearance:none;
    border-radius:999px;
    background:rgba(15,23,42,.14);
    position:relative;
    outline:none;
    cursor:pointer;
    transition:.18s ease;
}
.jo-switch input::after{
    content:"";
    position:absolute;
    width:14px; height:14px;
    border-radius:999px;
    background:#fff;
    top:2px; left:2px;
    box-shadow:0 6px 10px rgba(15,23,42,.18);
    transition:.18s ease;
}
.jo-switch input:checked{ background:#0ea5e9; }
.jo-switch input:checked::after{ left:18px; }
.jo-applyFoot{ padding:12px; display:flex; justify-content:flex-start; gap:10px; align-items:center; }

/* Fab */
.jo-fab{
    position:fixed;
    right:16px;
    bottom:16px;
    width:44px;
    height:44px;
    border-radius:999px;
    border:0;
    background:#ffcc00;
    color:#111827;
    font-weight:550;
    box-shadow:var(--jo-shadow);
    cursor:pointer;
    display:none;
    z-index:50;
}
.jo--branded .jo-fab{ display:inline-flex; align-items:center; justify-content:center; }

.jo-kvList{
    grid-column: 1 / -1;
    padding:4px 0;
}
.jo-kvList > span{
    display:block;
    color:#4b5563;
    font-size:12px;
    margin-bottom:4px;
}
.jo-kvList ul{
    margin:0;
    padding-left:18px;
    list-style:disc;
}
.jo-kvList li{
    font-weight:550;
    color:#111827;
    font-size:12px;
    line-height:1.7;
}

/* Temoignage annonce  */
.jo-temoignage{
    display:flex;
    justify-content:center;
    margin:8px 0;
}
.jo-temoignage img{
    width:98%;
    max-width:600px;
    height:auto;
    display:block;
    border-radius:10px;
}

/************ Bloc love my job **************************************************/
.jo-feedback-section {
    display: flex;
    justify-content: center;
    margin: 0px 0px 8px 0px;
}

.jo-feedback-box {
    width: 80%;
    max-width: 950px;
    background: #f8f8f8;
    padding: 20px 20px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-align: center;

    transition: all 0.3s ease;
}

.jo-feedback-box:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.jo-feedback-text {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #222;
}

.jo-heart {
    color: #ff4d6d;
    font-size: 18px;
    margin: 0 6px;
}

.jo-feedback-link {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    margin-left: 6px;
    position: relative;
    white-space: nowrap;
}

.jo-feedback-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: #e0208e;
    transition: transform 0.3s ease;
    transform: scaleX(1);
    transform-origin: left;

}

.jo-feedback-link:hover {
    color: #e0208e;
}

.jo-feedback-link:hover::after {
    transform: scaleX(1.01);
}

/**************************   Bloc Votre Adéquation au poste *************************/
.jo-adequation{
    border:1px solid #BFE3DC;
    border-radius:var(--jo-radius);
    background:#fff;
    overflow:hidden;
    margin-bottom:8px;
}
.jo-adequationPad{
    padding:16px 18px;
}
.jo-adequationTitle{
    margin:0 0 14px;
    font-size:12px;
    font-weight:550;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:#2AA290;
}
.jo-adequationBody{
    display:flex;
    flex-direction:column;
    gap:0;
}

/* Chaque section (Synthèse / Matching Culturel / Matching Personnalité)
   empilée verticalement, plus de système d'onglets. */
.jo-adBlock{
    padding-top:16px;
    margin-top:16px;
    border-top:1px solid #E5E7EB;
}
.jo-adBlock:first-child{
    padding-top:0;
    margin-top:0;
    border-top:0;
}
.jo-adBlockTitle{
    margin:0 0 10px;
    font-size:12px;
    font-weight:550;
    letter-spacing:.3px;
    text-transform:uppercase;
    color:#111827;
}
.jo-adBlockContent{
    min-width:0;
}
/* .jo-adBlockContent ne portait que min-width:0 (utile pour le flex du
   bloc), donc quand on l'applique au texte affiché dans une popup
   Bootstrap ("modal fade"), le style de la modale (police/couleur/
   interligne par défaut) continue de s'appliquer car rien ici ne le
   concurrence. On y ajoute donc la même typographie que .jo-adText
   (déjà utilisée pour le texte de ce bloc ailleurs sur la page), en
   !important pour garantir qu'elle l'emporte sur les styles de la
   modale, comme cela est déjà fait ailleurs dans ce fichier pour
   neutraliser des styles externes (voir .blc-btn-connexion .jo-btn--primary). */
.jo-adBlockContent{
    font-family:Arial, Helvetica, sans-serif !important;
    font-size:12px !important;
    line-height:1.7 !important;
    color:#374151 !important;
}
.jo-adText{
    margin:0 0 0px;
    font-size:12px;
    line-height:1.7;
    color:#374151;
}

.jo-adScoreRow{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    font-size:12px;
    color:#374151;
    margin-bottom:4px;
}
.jo-adScoreRow em{
    font-style:italic;
    color:#6b7280;
    font-weight:400;
}
.jo-adScoreRow b{
    font-weight:550;
    color:#2AA290;
}

/* =========================================================
   Barres de score (Recommandation IA, Kapacity Revealer, Feel Good)
   ========================================================= */
.jo-adScoreBar{
    height:4px;
    border-radius:999px;
    background:#E6F7F4;
    overflow:hidden;
    margin-bottom:18px;
}
.jo-adScoreBar:last-child{ margin-bottom:0; }
.jo-adScoreBar > i{
    display:block;
    height:100%;
    width:var(--w,0%);
    background:#2AA290;
}

/* =========================================================
   Matching global (bloc "Votre adéquation au poste")
   ========================================================= */
.jo-adScoreGlobal{
    background:#E6F7F4;
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:16px;
}
.jo-adScoreGlobal-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:8px;
}
.jo-adScoreGlobal-label{
    font-size:14px;
    font-weight:700;
    color:#2AA290;
}
.jo-adScoreGlobal-value{
    font-size:20px;
    font-weight:700;
    color:#2AA290;
}
.jo-adScoreGlobal-bar{
    height:8px;
    border-radius:999px;
    background:#ffffff;
    overflow:hidden;
}
.jo-adScoreGlobal-bar > i{
    display:block;
    height:100%;
    width:var(--w,0%);
    background:#2AA290;
}

/* =========================================================
   Barre d'envoi : bouton rose à gauche + lien vert à droite
   (rôles gérés dans le PHP avec $followMain)
   - Score >= 40 : bouton rose = Envoyer mon CV | lien vert = Suivre l'entreprise / Se désabonner
   - Score < 40  : bouton rose = Suivre l'entreprise / Se désabonner | lien vert = Envoyer mon CV
   REMPLACE tout l'ancien bloc "Barre d'envoi" (jusqu'à son @media 640px inclus)
   ========================================================= */

/* Tailles de police : une seule valeur pour les boutons, une seule pour les liens */
.blc-btn-connexion{
    --jo-fs-btn:14px;
    --jo-fs-link:14px;
}

/* Pas de fond jaune : la barre est transparente, alignée à droite */
.blc-btn-connexion .jo-topInfoBar{
    justify-content:flex-end;
    background:transparent;
    padding:0;
    margin:12px 0 0;
}

/* Plus d'espace entre le bouton et le lien */
.blc-btn-connexion .jo-topInfoBar-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
}

/* Boutons roses : même police, même taille dans les deux cas
   (Envoyer mon CV = <input type="submit"> / Suivre l'entreprise = <a>) */
.blc-btn-connexion .jo-topInfoBar-actions .jo-btn--primary{
    font-family:inherit !important;
    font-size:var(--jo-fs-btn) !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    padding:10px 18px !important;
    text-decoration:none;
}

/* Liens verts : même police, même taille dans les deux cas
   (Suivre l'entreprise / Se désabonner = <a> | Envoyer mon CV = <input type="submit">) */
.blc-btn-connexion .jo-topInfoBar-actions .jo-applyFollow,
.blc-btn-connexion .jo-topInfoBar-actions .jo-submitLink{
    font-family:inherit !important;
    font-size:var(--jo-fs-link) !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    color:#2AA290 !important;
    text-decoration:underline;
    cursor:pointer;
}
.blc-btn-connexion .jo-topInfoBar-actions .jo-applyFollow:hover,
.blc-btn-connexion .jo-topInfoBar-actions .jo-applyFollow:focus,
.blc-btn-connexion .jo-topInfoBar-actions .jo-submitLink:hover,
.blc-btn-connexion .jo-topInfoBar-actions .jo-submitLink:focus{
    color:#E0208E !important;
    text-decoration:underline;
    outline:none;
}

/* Le vrai <input type="submit"> habillé en lien vert (score < 40) */
.blc-btn-connexion .jo-submitLink{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    height:auto !important;
}

/* Les liens "Suivre l'entreprise / Se désabonner" quand ils servent de bouton rose :
   pas de soulignement au survol (Bootstrap en ajoute sur les <a>) */
.blc-btn-connexion a.jo-btn--primary,
.blc-btn-connexion a.jo-btn--primary:hover,
.blc-btn-connexion a.jo-btn--primary:focus{
    text-decoration:none;
}

/* Petit écran, barre non collée : bouton pleine largeur, lien centré en dessous */
@media (max-width: 640px){
    .blc-btn-connexion .jo-topInfoBar-actions{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
    }
    .blc-btn-connexion .jo-topInfoBar-actions .jo-btn--primary{
        display:block;
        width:100%;
        text-align:center;
    }
    .blc-btn-connexion .jo-topInfoBar-actions .jo-applyFollow,
    .blc-btn-connexion .jo-topInfoBar-actions .jo-submitLink{
        display:block;
        width:100%;
        text-align:center;
    }
}

/* =========================================================
   Mobile / tablette : barre collée en bas de l'écran
   La classe .jo-stickyApply est ajoutée par le script de la page dès que
   le candidat arrive sur "Profil recherché" (≈ la moitié de l'annonce).
   ========================================================= */
@media (max-width: 980px){

    .blc-btn-connexion.jo-stickyApply{
        --jo-fs-btn:13px;
        --jo-fs-link:13px;
        position:fixed;
        left:0;
        right:0;
        bottom:var(--jo-sticky-bottom, 0px);   /* posée au-dessus du menu bas du site s'il existe */
        z-index:1000;                          /* sous les modales Bootstrap (1050) */
        background:#ffffff;
        border-top:1px solid #E5E7EB;
        padding:10px 12px;
    }
    .blc-btn-connexion.jo-stickyApply .jo-topInfoBar{
        margin:0;
        justify-content:center;
    }
    /* Une seule ligne : bouton rose (large) + lien vert à côté */
    .blc-btn-connexion.jo-stickyApply .jo-topInfoBar-actions{
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
        gap:8px 16px;
        width:100%;
    }
    .blc-btn-connexion.jo-stickyApply .jo-topInfoBar-actions .jo-btn--primary{
        flex:1 1 55%;
        width:auto;
        min-width:0;
        padding:10px 12px !important;
    }
    .blc-btn-connexion.jo-stickyApply .jo-topInfoBar-actions .jo-applyFollow,
    .blc-btn-connexion.jo-stickyApply .jo-topInfoBar-actions .jo-submitLink{
        flex:0 1 auto;
        width:auto;
        display:inline-block;
        text-align:center;
    }

    /* Évite que la barre collée masque la fin du formulaire */
    #jobofferInfosData.jo-stickyApply-on .jo-postuler-wrap{
        margin-bottom:170px;
    }
}

/* =========================================================
   Bloc "PROFIL RECHERCHÉ" : une ligne = libellé | valeur(s)
   Remplace .jo-kv / .jo-kvList (plus de <ul>/<li>)
   ========================================================= */
.jo-info{
    display:flex;
    flex-direction:column;
    font-size:12px;
}
.jo-infoRow{
    display:grid;
    grid-template-columns:minmax(84px, 36%) 1fr;   /* libellé | valeur */
    column-gap:10px;
    padding:8px 0;
    border-top:1px solid #F0F0F0;
}
.jo-infoRow:first-child{ border-top:0; padding-top:0; }
.jo-infoRow:last-child{ padding-bottom:0; }

.jo-infoLabel{
    color:#6b7280;
    line-height:1.5;
}
.jo-infoValue{
    min-width:0;                 /* autorise le retour à la ligne dans la grille */
    color:#111827;
    font-weight:550;
    line-height:1.5;
    overflow-wrap:anywhere;      /* un mot très long ne déborde jamais */
}

/* Séparateur " - " entre plusieurs valeurs, collé à l'élément précédent */
.jo-infoItem:not(:last-child)::after{
    content:"\00a0-";
    font-weight:400;
    color:#9ca3af;
}

/* =========================================================
   Texte de synthèse IA : 2 lignes + "…" cliquable juste après le dernier mot
   (le texte est coupé par le script de la page, pas par le CSS)
   ========================================================= */
.jo-clampDots{
    display:inline !important;      /* collé au dernier mot, jamais renvoyé en bout de ligne */
    float:none !important;
    position:static !important;
    width:auto !important;
    margin:0 !important;
    padding:0 0 0 2px !important;
    font:inherit;
    font-weight:700;
    line-height:inherit;
    color:#2AA290;
    cursor:pointer;
}
.jo-clampDots:hover,
.jo-clampDots:focus{
    color:#E0208E;
    outline:none;
}

/* "Réduire" : sous le texte déplié (inchangé) */
.jo-clampLess{
    display:block;
    margin-top:4px;
    padding:0;
    border:0;
    background:transparent;
    font:inherit;
    font-weight:700;
    color:#2AA290;
    cursor:pointer;
}
.jo-clampLess:hover,
.jo-clampLess:focus{
    color:#E0208E;
    outline:none;
}
.jo-clampLess[hidden]{
    display:none !important;
}


/********************** Bouton Envoyer Haut de Page ***********************************/
.jo-topInfoBar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    background:#FFF8E6;
    border-radius:5px;
    padding:5px 20px;
    margin:0px 0px 10px 0px;
}
.jo-topInfoBar-expire{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:550;
    color:#E0A83B;
}
.jo-topInfoBar-expire svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}
.jo-topInfoBar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.jo-topInfoBar--expired{
    background:#F5F5F5;
    justify-content:center;
}
.jo-topInfoBar-expiredText{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:550;
    color:#4A4A4A;
}
.jo-topInfoBar-expiredText svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}

/*********************** Bouton Envoyer Bas de Page ***********************************/
.jo-applyBar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:20px 0 4px;
    border-top:1px solid #E5E7EB;
    margin-top:20px;
}
.jo-applyBar-expire{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:550;
    color:#E0A83B;
}
.jo-applyBar-expire svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}
.jo-applyBar-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/************ bloc traits de personnalité Annonce ************/

.jo-traitsTitle{
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 550;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--jo-pink);
}
.jo-traitsRow{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.jo-traitTag{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    border-radius:6px;
    background:#FDF2F8;
    color:#E0208E;
    font-size:11px;
    font-weight:550;
    white-space:nowrap;
}

/*********************** bloc test de personnalité ***************************/
.jo-testCta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:#F8F9FB;
    border-radius:6px;
    padding:16px 20px;
    margin-bottom:8px;
}
.jo-testCta-text{
    flex:1 1 auto;
    min-width:0;
}
.jo-testCta-title{
    margin:0 0 6px;
    font-size:12px;
    font-weight:550;
    color:#111827;
}
.jo-testCta-desc{
    margin:0;
    font-size:12px;
    line-height:1.6;
    color:#4b5563;
}
.jo-testCta-desc a{
    color:#2AA290;
    font-weight:600;
    text-decoration:underline;
}
.jo-testCta-btn{
    flex:0 0 auto;
    align-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:auto;
    height:38px;
    line-height:1;
    padding:0 20px;
    margin:0;
    border-radius:6px;
    border:1.5px solid #E0208E;
    background:#fff;
    color:#E0208E;
    font-family:inherit;
    font-size:12px;
    font-weight:550;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}
.jo-testCta-btn:hover,
.jo-testCta-btn:focus{
    background:#FDF2F8;
    text-decoration:none;
    color:#E0208E;
    outline:none;
}

/****************** Bloc Questions *********************************************/
.jo-postuler-wrap{margin-top:16px;}
.jo-postuler-card{
    background:#ffffff;
    border:1.5px solid #E0208E;
    border-radius:12px;
    padding:24px;
    font-family:Arial, Helvetica, sans-serif;
}
.jo-postuler-section{margin-bottom:20px;}
.jo-postuler-section:last-child{margin-bottom:0;}
.jo-postuler-section-muted{
    background-color:#F6F6F6;
    border-radius:8px;
    padding:16px;
}
.jo-postuler-heading h2{
    font-size:14px;
    font-weight:bold;
    color:#333333;
    margin:0 0 16px;
}
.jo-postuler-form{width:100%;}
.jo-form-row{margin-bottom:16px;}
.jo-notice{font-size:13px;color:#888888;margin-bottom:8px;}
.jo-holder, .jo-holder-apply{width:100%;}

.jo-question{margin-bottom:24px;}
.jo-question:last-child{margin-bottom:0;}
.jo-question-label{
    display:block;
    font-size:14px;
    font-weight:bold;
    color:#333333;
    margin-bottom:10px;
}
.jo-question-holder{width:100%;}

.jo-textarea-wrap{width:100%;}
.jo-textarea{
    width:100%;
    min-height:120px;
    border:1px solid #DDDDDD;
    border-radius:6px;
    padding:12px 14px;
    font-size:14px;
    color:#333333;
    font-family:Arial, Helvetica, sans-serif;
    resize:vertical;
}
.jo-textarea::placeholder{color:#999999;}

.jo-choice-group{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}
.jo-choice-chip{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    background:#F5F5F5;
    border-radius:8px;
    padding:14px 16px;
    cursor:pointer;
    flex:1 1 180px;
    min-width:140px;
    font-size:14px;
    color:#333333;
}
.jo-choice-chip input[type="radio"]{
    position:absolute;
    opacity:0;
    width:0;
    height:0;
}
.jo-choice-radio{
    width:18px;
    height:18px;
    border-radius:50%;
    border:2px solid #BBBBBB;
    background:#ffffff;
    flex-shrink:0;
    position:relative;
}
.jo-choice-chip input[type="radio"]:checked + .jo-choice-radio{
    border-color:#2D9CDB;
}
.jo-choice-chip input[type="radio"]:checked + .jo-choice-radio:after{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#2D9CDB;
}

.jo-toggle-list{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:24px;
}
.jo-toggle-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:#333333;
    cursor:pointer;
    margin:0;
    font-weight:normal;
}
.jo-toggle-switch{
    position:relative;
    display:inline-block;
    width:38px;
    height:22px;
    flex-shrink:0;
}
.jo-toggle-switch input{
    opacity:0;
    width:0;
    height:0;
}
.jo-toggle-slider{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background-color:#CCCCCC;
    border-radius:22px;
    transition:0.2s;
}
.jo-toggle-slider:before{
    position:absolute;
    content:"";
    height:16px;
    width:16px;
    left:3px;
    bottom:3px;
    background-color:#ffffff;
    border-radius:50%;
    transition:0.2s;
}
.jo-toggle-switch input:checked + .jo-toggle-slider{
    background-color:#2D9CDB;
}
.jo-toggle-switch input:checked + .jo-toggle-slider:before{
    transform:translateX(16px);
}
.jo-toggle-label{max-width:420px;}

.jo-submit-btn{
    display:block;
    margin:24px auto 0;
    padding:14px 32px;
    border-radius:25px;
    font-size:16px;
    font-weight:bold;
    border:none;
    background:#E0208E;
    color:#ffffff;
}
.jo-submit-btn-disabled, .jo-submit-btn.disabled{
    background:#CCCCCC;
    color:#ffffff;
}

.jo-retry-wrap{margin-top:16px;}
.jo-retry-action{text-align:center;margin-top:16px;}


.apply-step2 label {
    text-align: bottom !important;
}
.jo-textarea-wrap {
    width: 100%;
    max-width: 100%;
}

.jo-textarea-wrap .jo-textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
}
/* =========================================================
   RESPONSIVE / MOBILE
   Tous les media queries regroupes ici par breakpoint
   ========================================================= */

@media (max-width: 980px){
    /* ---- Layout general (grid, rail, topbar, brand) ---- */
    .jo-grid{ grid-template-columns: 1fr; }

    /* Fix racine du débordement des blocs (labels, cards, etc.) :
       .jo-colLeft et .jo-colMain sont des items de la grille .jo-grid ;
       sans min-width:0, une grille n'autorise pas une colonne à devenir
       plus étroite que le contenu le plus large qu'elle contient (ici
       la colonne unique en dessous de 980px), donc tout bloc interne
       un peu large forçait la colonne — et donc la page — à dépasser
       l'écran au lieu de rétrécir/wrapper normalement. */
    .jo-colLeft,
    .jo-colMain{
        min-width:0;
    }

    .jo-rail{ display:none !important; }
    .jo-brandTitle{ font-size:20px; max-width: 560px; }
    /*.jo--branded .jo-brandTop{ height: 96px; }*/

    /* En dessous de 980px, l'image devient trop étroite en flottant
       à 270px : on l'étale en pleine largeur, au-dessus du texte qui
       reprend en dessous (comportement empilé, comme avant). */
    .jo-splitEntreprise > .jo-brandBox{ float:none; width:100%; margin:0 0 16px; }
    .jo-brandGrid2 img{ height:110px; }

    .jo-topbar{ grid-template-columns: auto auto minmax(0,1fr) auto auto; }
    .jo-navBtn--next{ display:inline-flex; }

    /* Filet de sécurité mobile/tablette : empêche tout débordement
       horizontal causé par un contenu injecté (renderPartial),
       un logo recruteur trop large ou une image sans dimension. */
    #jobofferInfosData{
        max-width:100%;
        overflow-x:hidden;
    }
    #jobofferInfosData img,
    #jobofferInfosData svg,
    #jobofferInfosData iframe{
        max-width:100%;
        height:auto;
    }
}

@media (max-width: 640px){
    /* ---- Topbar : boutons, pills, valeurs EN UN COUP D'OEIL ---- */
    .jo-container{ padding:12px 10px; }
    .jo-brandBadge{ display:none; }

    /* .jo-actions : au lieu d'être masqué, passe sur sa propre ligne
       sous le reste de la topbar (au lieu de rester coincé dans la
       même ligne que le titre, ce qui provoquait le débordement). */
    .jo-actions{
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content:center;
        flex-wrap:wrap;
        white-space:normal;
        margin-top:8px;
    }

    .jo-topbar{
        grid-template-columns:auto auto minmax(0,1fr) auto;
        gap:10px;
        padding:10px 10px;
    }
    /* .jo-topBrand garde min-width:0 / max-width:70px défini plus haut :
       l'ancien "min-width:auto" ici annulait ce fix et pouvait repousser
       le header hors de l'écran sur les petits mobiles. */

    /* .jo-topTitle : sur PC le titre reste tronqué avec "..." sur une
       seule ligne (inchangé). Sur mobile, s'il est trop grand, il
       retourne à la ligne et continue au lieu d'être coupé. */
    .jo-topTitle{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        overflow-wrap:break-word;
    }

    /* CTA 4K last in left column */
    .jo-colLeft{ display:flex; flex-direction:column; width:100%; max-width:100%; }
    .jo-cta4k{ order:999; }

    .jo-temoignage img{
        width:95%;
        max-width:95%;
    }

    /* Empêche les boutons à libellé long de forcer une largeur > écran */
    .jo-btn,
    .jo-testCta-btn{
        white-space:normal;
        text-align:center;
        word-break:break-word;
    }
    .blc-btn-connexion .jo-btn--primary{
        white-space:normal;
        text-align:center;
        word-break:break-word;
    }

    /* Autorise le retour à la ligne des valeurs "EN UN COUP D'ŒIL" si elles sont longues */
    .jo-kv > span,
    .jo-kv > b{
        white-space:normal;
        overflow-wrap:break-word;
    }

    .jo-pill,
    .jo-pill--publication,
    .jo-pill--cityRegion{
        max-width:100%;
        min-width:0;
        white-space:normal;
    }
    .jo-topMeta{
        min-width:0;
    }

    /* ---- Bloc Votre Adequation au poste ---- */
    /* Plus rien à faire ici : le bloc est empilé verticalement sur
       toutes les tailles d'écran (voir .jo-adBlock en base). */
    .jo-adequationPad{
        padding:14px 14px;
    }

    /* ---- Barre Postuler en haut de page ---- */
    .jo-topInfoBar{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
        margin:12px 10px 0;
    }
    .jo-topInfoBar .jo-btn--primary{
        width:100%;
    }

    /* ---- Barre Postuler en bas de page ---- */
    .jo-applyBar{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }
    .jo-applyBar .jo-btn--primary{
        width:100%;
    }

    /* ---- Traits de personnalite (tags) ---- */
    .jo-traitsRow{
        gap:8px;
    }
    .jo-traitTag{
        padding:7px 12px;
        font-size:12px;
    }

    /* ---- Bloc CTA test de personnalite ---- */
    .jo-testCta{
        flex-direction:column;
        align-items:stretch;
    }
    .jo-testCta-btn{
        align-self:stretch;
        width:100%;
        height:40px;
    }

    /* ---- Bloc love my job (lien) ---- */
    .jo-feedback-link{
        white-space:normal;
        overflow-wrap:break-word;
    }
}
.jo-btn.activelike{
    border-color:#E0208E;
    color:#E0208E;
}

@media (max-width:600px){
    /* ---- Bloc Questions (formulaire de candidature) ---- */
    .jo-postuler-card{padding:16px;}
    .jo-choice-chip{flex:1 1 100%;}
    .jo-toggle-list{flex-direction:column;gap:14px;}
}

@media (max-width: 980px){
    #jobofferInfosData .jo-postuler-wrap{
        margin-bottom: 80px;
        min-width:0;
    }
}
@media (max-width: 980px){
    #jobofferInfosData .jo-colLeft,
    #jobofferInfosData .jo-colMain{
        display:contents;
    }

    #jobofferInfosData #BlocLabels{ order:10; }
    #jobofferInfosData #BloccoupdoeilDetail{ order:20; }
    #jobofferInfosData #BlocAdresseSiege{ order:30; }
    #jobofferInfosData #BlocTraitsPersonnalite{ order:40; }
    #jobofferInfosData #BlocDetailAnnonce{ order:50; }
    #jobofferInfosData #BlocAdequationPoste{ order:60; }
    #jobofferInfosData #BlocMatchingCulturel{ order:70; }
    #jobofferInfosData #BlocMatchingPersonnalite{ order:80; }
    #jobofferInfosData .jo-postuler-wrap{ order:90; }
}

/*********************** Traak *****************************/
/* =========================================================
   Carte "La suite du processus" + Carte traak (col-md-6)
   + Bannière (col-md-12) – Page de confirmation – front candidat
   ========================================================= */

/* ---------- Style commun aux 2 cartes ---------- */
.panel2 .steps-card,
.panel2 .traak-cta{
    background:#FFFFFF;
    border:1px solid #E3E3E0;
    border-radius:16px;
    padding:24px;
    margin:16px 0;
}

/* ---------- Carte "La suite du processus" ---------- */
.panel2 .steps-card .steps-card-title{
    margin:0 0 12px;
}
.panel2 .steps-card ul{
    padding-left:20px;
    margin:0;
}

/* ---------- Carte traak ---------- */
.panel2 .traak-cta{
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.panel2 .traak-cta-head{
    display:flex;
    align-items:center;
}
.panel2 .traak-cta-logo{
    display:block;
    width:44px;
    height:44px;
    border-radius:10px;
    flex-shrink:0;
}
.panel2 .traak-cta .traak-cta-title{
    font-family:'Instrument Serif', Georgia, serif;
    font-size:24px;
    font-weight:400;
    line-height:1.2;
    color:#0B0F19;
    margin:0 0 0 14px;
}
.panel2 .traak-cta .traak-cta-title em{
    color:#1F8A70;
    font-style:italic;
}
.panel2 .traak-cta .traak-cta-sub{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:1.5;
    color:#4B5563;
    margin:14px 0 0;
}
.panel2 .traak-cta-btn{
    align-self:flex-start;
    display:inline-block;
    margin-top:16px;
    background:#0B0F19;
    color:#fff !important;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:14px;
    border-radius:30px;
    padding:10px 22px;
    text-decoration:none !important;
    white-space:nowrap;
}
.panel2 .traak-cta-btn span{
    color:#2DD4BF;
    margin-left:8px;
}
.panel2 .traak-cta-btn:hover,
.panel2 .traak-cta-btn:focus{
    background:#1A2030;
}

/* ---------- Desktop : 2 cartes côte à côte, même hauteur ---------- */
@media (min-width:992px){
    .panel2 .traak-row{
        display:flex;
        align-items:stretch;
    }
    .panel2 .traak-row:before,
    .panel2 .traak-row:after{
        display:none;          /* clearfix Bootstrap 3 incompatible avec flex */
    }
    .panel2 .traak-row > .traak-steps,
    .panel2 .traak-row > .traak-col{
        float:none;
    }
    .panel2 .steps-card,
    .panel2 .traak-cta{
        height:100%;
        margin:0 0 16px;
    }
}

/* ---------- Bannière traak ---------- */
.panel2 .traak-banner{
    margin:8px 0 24px;
    text-align:center;
}
.panel2 .traak-banner a{
    display:inline-block;
    max-width:100%;
}
.panel2 .traak-banner img{
    width:100%;
    height:auto;
    border-radius:12px;
}

/* ---------- Mobile ---------- */
@media (max-width:480px){
    .panel2 .steps-card,
    .panel2 .traak-cta{padding:20px;}
    .panel2 .traak-cta .traak-cta-title{font-size:20px;}
    .panel2 .traak-cta-btn{align-self:stretch;text-align:center;}
}

/* =========================================================
   TYPOGRAPHIE UNIFIÉE — À PLACER TOUT EN BAS DE LA FEUILLE
   Textes normaux : Arial (fallback Helvetica) · 13px · interligne 1.5
   Pour changer la typographie de toute la page : modifier les 3 variables.
   Volontairement exclus : titres, pills/tags, boutons, grands chiffres du
   Matching global et libellés des graphiques (ils gardent leur propre taille).
   ========================================================= */
#jobofferInfosData{
    --jo-font:Arial, Helvetica, sans-serif;
    --jo-fs:13px;
    --jo-lh:1.5;

    font-family:var(--jo-font);
    font-size:var(--jo-fs);
    line-height:var(--jo-lh);
}

/* 1) Textes courants de la page annonce */
#jobofferInfosData .jo-paras p,
#jobofferInfosData .jo-paras li,
#jobofferInfosData .jo-posteIntro,
#jobofferInfosData .jo-posteList,
#jobofferInfosData .jo-posteList li,
#jobofferInfosData .jo-adText,
#jobofferInfosData .jo-adScoreRow,
#jobofferInfosData .jo-addressText,
#jobofferInfosData .jo-info,
#jobofferInfosData .jo-infoLabel,
#jobofferInfosData .jo-infoValue,
#jobofferInfosData .jo-kv,
#jobofferInfosData .jo-kvList > span,
#jobofferInfosData .jo-kvList li,
#jobofferInfosData .jo-testCta-title,
#jobofferInfosData .jo-testCta-desc,
#jobofferInfosData .jo-feedback-text,
#jobofferInfosData .jo-followLink a,
#jobofferInfosData .jo-brandOrange p{
    font-family:var(--jo-font);
    font-size:var(--jo-fs);
    line-height:var(--jo-lh);
}

/* 2) Textes du formulaire de candidature */
#jobofferInfosData .jo-notice,
#jobofferInfosData .jo-question-label,
#jobofferInfosData .jo-textarea,
#jobofferInfosData .jo-choice-chip,
#jobofferInfosData .jo-toggle-item,
#jobofferInfosData .jo-toggle-label{
    font-family:var(--jo-font);
    font-size:var(--jo-fs);
    line-height:var(--jo-lh);
}

/* 3) Blocs d'adéquation (déjà en !important dans l'ancien CSS : même priorité + l'id) */
#jobofferInfosData .jo-adBlockContent{
    font-family:var(--jo-font) !important;
    font-size:var(--jo-fs) !important;
    line-height:var(--jo-lh) !important;
}

/* 4) Contenu libre de l'annonce (description, culture, poste, profil…) :
      !important pour passer devant d'éventuels styles en ligne ou des
      règles globales du type  li{font-size:13px !important} */
#jobofferInfosData #BlocDetailAnnonce p,
#jobofferInfosData #BlocDetailAnnonce li,
#jobofferInfosData #BlocDetailAnnonce td,
#jobofferInfosData #BlocDetailAnnonce th{
    font-family:var(--jo-font) !important;
    font-size:var(--jo-fs) !important;
    line-height:var(--jo-lh) !important;
}

/* Les pills de la topbar (11px) contiennent un <li> : ils gardent leur taille */
#jobofferInfosData .jo-pill li{
    font-size:inherit !important;
    line-height:inherit !important;
}

/* =========================================================
   Bloc "Behind The Brand" (mini-site RH) : version réduite
   À garder APRÈS le bloc "Typographie unifiée" (il surcharge ses !important)
   Valeurs d'origine entre parenthèses.
   ========================================================= */

/* Largeur et marges (PC uniquement : en dessous de 980px le bloc passe pleine largeur) */
@media (min-width: 981px){
    .jo-splitEntreprise > .jo-brandBox{
        width:210px;                 /* (270px) */
        margin:0 0 12px 14px;        /* (0 0 18px 18px) */
    }
    #jobofferInfosData .jo-brandGrid2 img{
        height:64px;                 /* (100px) */
    }
}
@media (max-width: 980px){
    .jo-splitEntreprise > .jo-brandBox{
        margin:0 0 12px;             /* (0 0 16px) */
    }
    #jobofferInfosData .jo-brandGrid2 img{
        height:80px;                 /* (110px, en réalité ignoré : height:auto du filet de sécurité mobile) */
    }
}

/* Cartouche coloré : paddings et textes réduits */
.jo-brandOrange{
    padding:10px 12px 12px;          /* (16px 14px 18px) */
}
.jo-brandOrange b{
    font-size:13px;                  /* (16px) */
    margin-bottom:4px;               /* (6px) */
}
/* Le paragraphe est aussi touché par  #BlocDetailAnnonce p{… !important}  du bloc typographie :
   on le surcharge avec un sélecteur plus précis */
#jobofferInfosData #BlocDetailAnnonce .jo-brandOrange p{
    margin:0 0 8px;                  /* (0 0 14px) */
    font-size:12px !important;       /* (13px) */
    line-height:1.4 !important;      /* (1.5) */
}
.jo-brandOrange .jo-orangeBtn{
    height:26px;                     /* (32px) */
    padding:0 12px;                  /* (0 16px) */
    font-size:12px;                  /* (13px) */
    text-decoration:none;
}

/* =========================================================
   Partage de l'annonce (Facebook · Email · LinkedIn) — en bas de la page
   L'id #BlocPartage passe devant d'éventuelles règles de .button-social-network
   ========================================================= */
#BlocPartage .jo-social{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px 16px;
}
#BlocPartage .jo-social-label{
    font-weight:600;
    color:#4b5563;
}
#BlocPartage .jo-social-list{
    display:flex;
    align-items:center;
    gap:10px;
}
#BlocPartage .jo-social-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    border-radius:50%;
    border:1.2px solid #2AA290;
    background:#fff;
    color:#2AA290;
    font-size:18px;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
}
#BlocPartage .jo-social-btn:hover,
#BlocPartage .jo-social-btn:focus{
    border-color:#E0208E;
    color:#E0208E;
    background:#FDF2F8;
    text-decoration:none;
    outline:none;
}

/* Mobile : le bloc passe en dernier (après le formulaire) et reste visible au-dessus de la barre collée */
@media (max-width: 980px){
    #jobofferInfosData #BlocPartage{ order:95; }

    #jobofferInfosData.jo-stickyApply-on .jo-postuler-wrap{ margin-bottom:8px; }
    #jobofferInfosData.jo-stickyApply-on #BlocPartage{ margin-bottom:170px; }
}

/* =========================================================
   PAGE NON LOGUÉE UNIQUEMENT (classe .jo--guest sur le wrapper .jo-page)
   Rien ici ne s'applique à la page loguée.
   ========================================================= */

/* Bouton de candidature du bas : centré (la date d'expiration n'est plus affichée) */
.jo--guest .jo-applyBar{
    justify-content:center;
}
.jo--guest .jo-applyBar-actions{
    justify-content:center;
}

/* Message "Offre expirée" (seul élément restant dans la barre du haut) */
.jo--guest .blc-btn-connexion .jo-topInfoBar.jo-topInfoBar--expired{
    justify-content:center;
    background:#F5F5F5;
    padding:8px 20px;
    border-radius:5px;
}

/* =========================================================
   Bloc "Les offres de … qui matchent mieux avec votre profil"
   (topScoreJob.php, card #BlocOffresMatchent de la page loguée)
   Liste compacte : le score est collé à gauche de l'offre (colonne fixe),
   le titre et la ville suivent sur la même ligne. Pas de cadre, pas de soulignement.
   ========================================================= */
.jo-topScore-list{
    list-style:none;
    margin:0;
    padding:0;
}
.jo-topScore-item{
    margin:0;
    border-bottom:1px solid #F0F0F0;
}
.jo-topScore-item:last-child{
    border-bottom:0;
}
.jo-topScore-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 0;
    text-decoration:none;
}
.jo-topScore-row:hover,
.jo-topScore-row:focus{
    text-decoration:none;
    outline:none;
}
/* Score : affiché AVANT le titre (order:-1), largeur fixe pour aligner tous les titres */
.jo-topScore-score{
    order:-1;
    flex:0 0 44px;
    text-align:center;
    padding:2px 0;
    border-radius:20px;
    background:#E6F7F4;
    color:#2AA290;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.jo-topScore-info{
    display:block;                  /* titre et ville sur la même ligne */
    min-width:0;                    /* autorise le retour à la ligne des titres longs */
    overflow-wrap:anywhere;
}
.jo-topScore-title{
    color:#222222;
    font-weight:400;                /* Arial n'a que 2 graisses : 400 (normal) ou 700 (gras) */
}
.jo-topScore-row:hover .jo-topScore-title,
.jo-topScore-row:focus .jo-topScore-title{
    color:#E0208E;
}
.jo-topScore-city{
    color:#888888;
}
.jo-topScore-all{
    display:inline-block;
    margin-top:10px;
    color:#2AA290;
    font-weight:600;
    text-decoration:none;
}
.jo-topScore-all:hover,
.jo-topScore-all:focus{
    color:#E0208E;
    text-decoration:none;
    outline:none;
}
.jo-topScore-all .fa{
    margin-left:4px;
}

/* Mobile : ce bloc passe après le bloc de partage (95) au lieu de remonter en haut de page */
@media (max-width: 980px){
    #jobofferInfosData #BlocOffresMatchent{ order:96; }
}