/* START PAGES CONSEILS */

/* Hero */
.conseil-hero {padding: 60px 0; background: var(--color-bg);}
.conseil-hero-grid {display: flex; align-items: center; gap: 60px;}
.conseil-hero-texte {flex: 1; min-width: 0; max-width: 800px;}
.conseil-hero-image {flex-shrink: 0; width: 45%;}
.conseil-hero-img {display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;}
.conseil-hero .breadcrumb-metier > p {margin-bottom: 10px !important;}
.conseil-hero .breadcrumb-metier #breadcrumbs {background: white; opacity: .7; border: solid 1px var(--color-border);}
.conseil-hero .surtitre-blue {margin-bottom: 15px !important;}
.conseil-titre-bleu {color: var(--color-primary);}
.conseil-hero h1 {margin: 0; padding: 0; font-size: 40px; line-height: 1.2; text-align: left;}
.conseil-intro {margin: 15px 0 0 0; font-size: 18px;}
.conseil-hero-bouton {display: inline-flex; align-items: center; gap: 8px; margin-top: 25px;}
.conseil-hero-bouton svg {width: 10px; height: 10px; flex-shrink: 0;}
.conseil-meta {display: flex; flex-wrap: wrap; align-items: center; gap: 5px 20px; margin-top: 20px;}
.conseil-meta .mcv-meta {margin: 0;}
.conseil-lecture {display: block; font-size: 14px; color: var(--color-text-gray);}
.conseil-lecture i {margin-right: 3px;}

/* Colonnes */
.conseil-body {background: white;}
.conseil-layout {display: flex; align-items: flex-start; gap: 50px;}
.conseil-content {flex: 1; min-width: 0; overflow-wrap: anywhere;}
.conseil-sidebar {flex-shrink: 0; width: 320px; position: sticky; top: 90px;}
.conseil-sidebar .toc-sidebar {background: var(--color-bg);}
.conseil-sidebar .toc-sidebar:before {background: linear-gradient(180deg, transparent 0%, var(--color-bg) 80%);}
.conseil-sidebar .toc-sidebar #sommaire-article {min-height: 120px;}
.conseil-sidebar .toc-sidebar #sommaire-article {counter-reset: sommaire;}
.conseil-sidebar .toc-sidebar #sommaire-article a {counter-increment: sommaire; display: flex; gap: 10px; font-size: 14px; color: var(--color-text-gray);}
.conseil-sidebar .toc-sidebar #sommaire-article a:before {content: counter(sommaire, decimal-leading-zero); flex-shrink: 0; margin: 0; font-family: inherit; font-weight: 600; color: var(--color-primary); font-weight: 700;}
.conseil-cta {padding: 20px; background: var(--color-dark); border-radius: 10px;}
.conseil-cta img {display: block; width: 100%; max-height: 160px; object-fit: contain; margin-bottom: 15px;}
.conseil-cta .conseil-cta-titre {margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: white; text-align: center;}
.conseil-cta .conseil-cta-desc {margin: 8px 0 15px 0; color: #d9dbdf; text-align: center;}
.conseil-cta .btn1 {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px;}
.conseil-cta .btn1 i {font-size: 12px;}

/* Contenu */
.conseil-content > *:first-child {margin-top: 0;}
.conseil-content > *:last-child {margin-bottom: 0;}
.conseil-content h2 {margin: 50px 0 15px 0; padding: 0; font-size: 30px; line-height: 1.25; scroll-margin-top: 90px;}
.conseil-content .surtitre-blue {margin: 50px 0 0 0 !important;}
.conseil-content .surtitre-blue:first-child {margin-top: 0 !important;}
.conseil-content .surtitre-blue + h2 {margin-top: 8px;}
.conseil-content h3 {font-size: 20px !important; line-height: 1.3;}
.conseil-content p, .conseil-content li {font-size: 16px; line-height: 1.7; color: var(--color-text);}
.conseil-content p {margin: 0 0 15px 0;}
.conseil-content li {padding: 2px 0;}
.conseil-content img {border-radius: 10px;}
.conseil-content blockquote {position: relative; padding: 10px 25px; background: var(--color-blue-bg); border: solid 1px #C7D2FE; border-radius: 10px;}
.conseil-content blockquote:before {content: "\f10d"; position: absolute; left: -15px; top: -6px; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 35px; color: var(--color-primary);}
.conseil-content .bloc-em {position: relative; display: block; padding: 20px !important; background: var(--color-blue-bg); border: solid 1px #C7D2FE; border-radius: 10px;}
.conseil-content .bloc-em:before {content: "\f10d"; position: absolute; left: -15px; top: -6px; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 25px; color: #081F40;}

/* À retenir */
.conseil-retenir {margin-bottom: 40px; padding: 20px 25px; background: var(--color-bg); border: solid 1px var(--color-border); border-left: solid 3px var(--color-primary); border-radius: 10px;}
.conseil-content .conseil-retenir p {margin: 0;}

/* Cartes */
.conseil-cartes {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 25px 0;}
.conseil-card {padding: 20px; background: white; border: solid 1px var(--color-border); border-radius: 10px;}
.conseil-card > i {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 15px; background: var(--color-blue-bg); border-radius: 8px; color: var(--color-primary);}
.conseil-content .conseil-card h3 {margin: 0 0 5px 0; padding: 0; font-size: 18px !important;}
.conseil-content .conseil-card p {margin: 0;}

/* Étapes */
.conseil-content .conseil-etapes {counter-reset: etape; list-style: none; margin: 25px 0; padding: 0;}
.conseil-content .conseil-etapes > li {counter-increment: etape; position: relative; margin: 0; padding: 0 0 25px 55px;}
.conseil-etapes > li:before {content: counter(etape, decimal-leading-zero); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-primary); border-radius: 50%; font-size: 13px; font-weight: 700; color: white; z-index: 1;}
.conseil-etapes > li:not(:last-child):after {content: ""; position: absolute; left: 18px; top: 36px; bottom: 0; width: 1px; background: var(--color-border);}
.conseil-content .conseil-etapes > li:last-child {padding-bottom: 0;}
.conseil-content .conseil-etapes h3 {margin: 0 0 3px 0; padding: 5px 0 0 0; font-size: 18px !important;}
.conseil-content .conseil-etapes p {margin: 0;}

/* Avant / après */
.conseil-avant-apres {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 25px 0;}
.conseil-avant-apres > div {padding: 20px; background: var(--color-bg); border: solid 1px var(--color-border); border-radius: 10px;}
.conseil-avant-apres > .conseil-apres {background: var(--color-blue-bg); border-color: var(--color-primary);}
.conseil-content .conseil-avant-apres-label {margin: 0 0 10px 0; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-gray);}
.conseil-content .conseil-apres .conseil-avant-apres-label {color: var(--color-primary);}
.conseil-content .conseil-avant-apres p:last-child {margin: 0;}

/* Erreurs */
.conseil-content .conseil-erreurs {display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 25px 0; padding: 0;}
.conseil-content .conseil-erreurs li {position: relative; padding: 12px 20px 12px 45px; border: solid 1px var(--color-border); border-radius: 10px;}
.conseil-erreurs li:before {content: "\f00d"; position: absolute; left: 20px; top: 12px; font-family: "Font Awesome 6 Pro"; font-weight: 400; color: var(--color-error-title);}

/* Checklist */
.conseil-content .conseil-checklist {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 30px; list-style: none; margin: 25px 0; padding: 25px; background: var(--color-dark); border-radius: 10px;}
.conseil-content .conseil-checklist li {position: relative; padding: 0 0 0 28px; color: white;}
.conseil-checklist li:before {content: "\f058"; position: absolute; left: 0; top: 0; font-family: "Font Awesome 6 Pro"; font-weight: 400; color: #8ea2ff;}

/* Autres conseils et auteur */
.conseil-suite {background: var(--color-bg);}
.conseil-autres-header {display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 25px;}
.conseil-autres-header h2 {margin-top: 8px; padding-top: 0;}
.conseil-autres-tous {flex-shrink: 0; font-weight: 600; text-decoration: none !important;}
.conseil-autres-tous i, .conseil-carte-lien i {margin-left: 5px; font-size: 12px;}
.conseil-autres-liste {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.conseil-carte {display: flex; flex-direction: column; overflow: hidden; background: white; border: solid 1px var(--color-border); border-radius: 10px; text-decoration: none !important; transition: .3s;}
.conseil-carte:hover {border-color: var(--color-primary); transform: translateY(-3px);}
.conseil-carte-haut {position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-block);}
.conseil-carte-img {display: block; width: 100%; height: 100%; object-fit: cover;}
.conseil-carte-corps {display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px;}
.conseil-carte-categorie {position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); padding: 4px 10px; background: white; border-radius: 5px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary);}
.conseil-carte-titre {font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-title);}
.conseil-carte-desc {font-size: 15px; line-height: 1.5; color: var(--color-text);}
.conseil-carte-lien {margin-top: auto; padding-top: 5px; font-weight: 600; color: var(--color-primary);}
.conseil-suite .mcv-author-box {margin-top: 40px;}
.conseil-suite .mcv-author-box .mcv-author-content {align-items: center; margin-bottom: 0; background: white; border: solid 1px var(--color-border);}
.conseil-suite .mcv-author-box .mcv-author-img {flex-shrink: 0;}
.conseil-suite .mcv-author-box .mcv-author-img img {display: block; max-height: 120px;}
.conseil-suite .mcv-author-box p {margin: 0 0 8px 0;}
.conseil-suite .mcv-author-box p:last-child {margin: 0;}


.faq-creer-cv {padding-top: 0;}

/* Liste des conseils */
.page-conseils {background: var(--color-bg);}
.page-conseils .conseil-hero {background: linear-gradient(120deg, var(--color-bg) 40%, var(--color-block) 100%); border-bottom: solid 1px #ECEAE4;}
.conseils-recherche {flex-shrink: 0; width: 380px; margin: 0; padding: 20px; background: white; border: solid 1px var(--color-border); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / 6%);}
.conseils-recherche label {display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--color-text-gray);}
.conseils-recherche-champ {position: relative;}
.conseils-recherche-champ svg {position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--color-text-gray); pointer-events: none;}
.conseils-recherche input[type="search"] {width: 100%; height: 44px; margin: 0; padding: 0 14px 0 38px; background: var(--color-bg); border: solid 1px var(--color-border); border-radius: 8px; font-size: 15px; box-shadow: none;}
.conseils-recherche input[type="search"]:focus {border-color: var(--color-primary); outline: none;}
.conseils-recherche p {margin: 12px 0 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-gray);}
.conseils-une {padding-bottom: 0;}
.conseils-une-carte {display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; background: white; border: solid 1px var(--color-border); border-radius: 16px; text-decoration: none !important; transition: .3s;}
.conseils-une-carte:hover {border-color: var(--color-primary);}
.conseils-une-texte {display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 50px;}
.conseils-une-meta {display: flex; align-items: center; gap: 12px;}
.conseils-une-label {padding: 4px 10px; background: var(--color-blue-bg); border-radius: 5px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary);}
.conseils-une-titre {font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--color-title);}
.conseils-une-desc {font-size: 16px; line-height: 1.6; color: var(--color-text);}
.conseils-une .conseil-carte-lien {margin-top: 5px;}
.conseils-une-image {position: relative; min-height: 300px; background: var(--color-dark);}
.conseils-une-img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.conseils-liste-header {display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 25px;}
.conseils-liste-header h2 {margin: 8px 0 5px 0; padding: 0;}
.conseils-compteur {margin: 0; font-size: 14px; color: var(--color-text-gray);}
.conseils-filtres {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;}
.conseils-filtre {padding: 8px 15px; background: white; border: solid 1px var(--color-border); border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--color-title); cursor: pointer; transition: .2s;}
.conseils-filtre:hover {border-color: var(--color-primary); color: var(--color-primary);}
.conseils-filtre[aria-pressed="true"] {background: var(--color-primary); border-color: var(--color-primary); color: white;}
.conseil-carte[hidden] {display: none;}
.conseils-vide {margin: 30px 0 0 0; text-align: center; color: var(--color-text-gray);}
.conseils-plus {display: flex; align-items: center; gap: 8px; margin: 35px auto 0 auto; padding: 12px 22px; background: white; border: solid 1px var(--color-border); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--color-title); cursor: pointer; transition: .2s;}
.conseils-plus[hidden] {display: none;}
.conseils-plus:hover {border-color: var(--color-primary); color: var(--color-primary);}
.conseils-plus svg {width: 10px; height: 10px;}
.conseils-cta {padding: 60px 0; background: var(--color-dark);}
.conseils-cta-grid {display: flex; align-items: center; justify-content: space-between; gap: 30px 60px;}
.conseils-cta .surtitre-blue {color: #8ea2ff !important;}
.conseils-cta .surtitre-blue:before {background: #8ea2ff;}
.conseils-cta h2 {margin: 8px 0 10px 0; padding: 0; font-size: 32px; color: white;}
.conseils-cta-texte {max-width: 620px; margin: 0; color: #d9dbdf;}
.conseils-cta .conseil-hero-bouton {flex-shrink: 0; margin: 0;}

@media (max-width: 1022px) {
    .conseils-recherche {width: 100%;}
    .page-conseils .conseil-hero-grid {flex-direction: column; align-items: stretch; gap: 30px;}
    .conseils-une-carte {grid-template-columns: 1fr;}
    .conseils-une-image {order: -1; min-height: 0; aspect-ratio: 16 / 9;}
    .conseils-liste-header {flex-direction: column; align-items: flex-start;}
    .conseils-filtres {justify-content: flex-start;}
    .conseils-cta-grid {flex-direction: column; align-items: flex-start;}
    .conseils-liste .conseil-autres-liste {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 1022px) {
    .conseil-layout {flex-direction: column; align-items: stretch; gap: 30px;}
    .conseil-sidebar, .conseil-sidebar-sticky {display: contents;}
    .conseil-sidebar .toc-sidebar {order: -1; margin-bottom: 0;}
    .conseil-sidebar .toc-sidebar:before {display: none;}
    .conseil-sidebar .toc-sidebar #sommaire-article {max-height: none; padding-bottom: 0;}
    .conseil-autres-liste {grid-template-columns: 1fr;}
}

@media (max-width: 767px) {
    .conseil-hero {padding: 20px 0 40px 0;}
    .conseil-hero-grid {flex-direction: column; align-items: stretch; gap: 25px;}
    .conseil-hero-image {width: 100%;}
    .conseil-hero h1 {font-size: 28px;}
    .conseil-intro {font-size: 16px;}
    .conseil-content .bloc-em:before {left: -5px; top: -15px;}
    .conseil-content h2 {margin-top: 40px; font-size: 24px;}
    .conseil-content .surtitre-blue {margin-top: 40px !important;}
    .conseil-cartes, .conseil-avant-apres, .conseil-content .conseil-checklist {grid-template-columns: 1fr;}
    .conseil-autres-header {flex-direction: column; align-items: flex-start;}
    .conseil-suite .mcv-author-box .mcv-author-content {align-items: flex-start; gap: 15px;}
    .conseils-une-texte {padding: 25px;}
    .conseils-une-titre {font-size: 22px;}
    .conseils-cta h2 {font-size: 26px;}
    .conseils-liste .conseil-autres-liste {grid-template-columns: 1fr;}
}
/* END PAGES CONSEILS */