/*
 * Sections migrees de la page Conseils carriere IT (59) vers la cible
 * "structure dans le theme" (ARCHITECTURE.md, chantier C3). Declarations
 * reprises telles quelles depuis les <style> inline de post_content, pas
 * reinventees. Hero/Intro/en-tetes de topic etaient deja en blocs natifs
 * avant migration (seuls les icones/photos vivaient en wp:html opaque) —
 * seule la CSS a ete deplacee pour ces parties, aucune restructuration de
 * bloc necessaire.
 *
 * `.ss-faq-conseils`/`__header`/`__inner` : PAS partages avec
 * `.ss-faq-section`/`.ss-faq-header`/`.ss-faq-inner` de
 * section-accordion.css (valeurs Contact-specifiques, 680px/64px — Conseils
 * a besoin de 760px/96px). Seule `.ss-accordion` (structure des
 * core/details) est reellement generique et reutilisee telle quelle.
 */

/* Hero */
/* Photo de fond (retour utilisateur 2026-08-11, meme methode que
   .ss-hero-accueil dans section-accueil.css). */
.ss-hero-conseils{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:613px;box-sizing:border-box;position:relative;overflow:hidden;padding:80px 24px 112px!important;background-color:#091A2A;background-image:linear-gradient(rgba(9,26,42,0.65),rgba(9,26,42,0.65)),url("../images/hero-neige.webp");background-size:cover;background-position:center}
/* Hauteur uniforme entre tous les Hero du site, cf. .ss-hero-accueil dans
   section-accueil.css pour le detail du retour utilisateur. */
/* background-position adapte en mobile (retour utilisateur 2026-08-11) :
   meme piege que .ss-hero-offres (voir commentaire dans section-offres.css)
   -- ici la composition est symetrique (branches enneigees des 2 cotes),
   center reste correct, seul le fleuron bas-droit beneficie d'un leger
   decalage. */
@media (max-width:767px){.ss-hero-conseils{padding:60px 16px 80px!important;min-height:716px;background-position:65% center}}
/* Vague de transition (memes reglages que .ss-hero-accueil::after, sans
   image de fond : ce Hero garde son aplat marine uni, seule la vague est
   repliquee, retour utilisateur 2026-08-11). */
.ss-hero-conseils::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:150px;z-index:1;pointer-events:none;background-color:var(--surface-paper);background-image:url("../assets/textures/paper-texture.webp");background-repeat:repeat;background-size:627px 627px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000000' d='M0,20 C240,20 480,100 720,100 C960,100 1200,20 1440,20 L1440,150 L0,150 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath fill='%23000000' d='M0,20 C240,20 480,100 720,100 C960,100 1200,20 1440,20 L1440,150 L0,150 Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:bottom center;mask-position:bottom center}
@media (max-width:1023px) and (min-width:768px){.ss-hero-conseils::after{height:115px}}
@media (max-width:767px){.ss-hero-conseils::after{height:75px}}
.ss-hero-conseils__inner{position:relative;z-index:2;max-width:840px;margin:0 auto;text-align:center}
.ss-hero-conseils__inner h1{color:#fff;font-size:32px;font-weight:700;line-height:1.25;letter-spacing:-0.01em;margin:0 0 16px}
.ss-hero-conseils__inner h2{color:#fff;font-size:20px;font-weight:500;line-height:1.4;margin:0 0 16px}
.ss-hero-conseils__inner h3{color:#778899;font-size:15px;font-weight:400;line-height:1.6;margin:0}

/* Intro */
/* max-width 840px : aligne exactement sur .ss-hero-conseils__inner
   ci-dessus — 600px (session 32) puis 720px (session 33) jugés encore
   trop etroits par rapport au bandeau au retour utilisateur, 840px
   retenu en dernier (raccord exact avec le Hero). !important requis :
   meme piege de specificite que le reste du fichier (CLAUDE.md §F). */
.ss-intro{max-width:840px!important;margin:0 auto;padding:64px 24px;text-align:center}
.ss-intro p{color:#667788;font-size:16px;line-height:1.7;margin:0 0 20px}
.ss-intro p:last-child{margin-bottom:0}

/* Topics */
/* Alternance papier/gris (retour utilisateur 2026-08-11) : le 1er topic
   ("Comprendre le marche") doit se fondre avec le bas de la vague, donc
   rester couleur site malgre sa classe --tint d'origine ; le 2e topic
   ("Construire son dossier") doit lui etre gris avec le trait separatif.
   Plutot que de multiplier les exceptions par position, on inverse
   directement les deux couleurs de base : --tint devient la couleur SITE
   (topics 1/3/5, "impairs") et le non-tint devient GRIS (topics 2/4 +
   FAQ, "pairs" + question frequente). */
.ss-topic{padding:64px 24px!important;position:relative;width:100vw!important;max-width:100vw!important;margin-left:calc(-50vw + 50%)!important;margin-right:calc(-50vw + 50%)!important;box-sizing:border-box!important;background-color:#F8FAFC!important;border-top:1px solid #E2E8F0}
@media (max-width:767px){.ss-topic{padding:48px 24px!important}}
.ss-topic--tint{background-color:var(--surface-paper)!important}
/* Premier topic sous le Hero : doit se fondre avec le bas de la vague,
   donc pas de trait separatif malgre le border-top de la regle de base.
   Espace top egalement reduit (retour utilisateur 2026-08-11, "espace un
   peu important entre le Hero et Comprendre le marche"). */
.ss-hero-conseils + .ss-topic{border-top:none!important;padding-top:32px!important}
@media (max-width:767px){.ss-hero-conseils + .ss-topic{padding-top:24px!important}}
/* scroll-margin-top (retour utilisateur 2026-08-11) : voir commentaire
   equivalent sur .ss-offer-header dans section-offres.css. */
.ss-topic__header{max-width:1080px;margin:0 auto 40px;text-align:left;scroll-margin-top:104px}
.ss-topic__icon{width:52px;height:52px;border-radius:50%;background:#F8FAFC;display:flex;align-items:center;justify-content:center;margin:0 0 16px}
.ss-topic__icon::before{content:"";width:22px;height:22px;background:no-repeat center/contain}
.ss-topic__icon--search::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")}
.ss-topic__icon--checklist::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E")}
.ss-topic__icon--chat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E")}
.ss-topic__icon--target::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E")}
.ss-topic__icon--user::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E")}
.ss-topic__icon--grid::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23091A2A' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' ry='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cline x1='9' y1='1' x2='9' y2='4'/%3E%3Cline x1='15' y1='1' x2='15' y2='4'/%3E%3Cline x1='9' y1='20' x2='9' y2='23'/%3E%3Cline x1='15' y1='20' x2='15' y2='23'/%3E%3Cline x1='20' y1='9' x2='23' y2='9'/%3E%3Cline x1='20' y1='14' x2='23' y2='14'/%3E%3Cline x1='1' y1='9' x2='4' y2='9'/%3E%3Cline x1='1' y1='14' x2='4' y2='14'/%3E%3C/svg%3E")}
.ss-topic__grid{max-width:1080px;margin:0 auto;display:flex;gap:48px;align-items:center}
/* "Soigner son profil..." (retour utilisateur 2026-08-11) : texte court (2
   paragraphes) centre sur la photo 400px cree un vide symetrique haut/bas
   disproportionne par rapport aux sections a texte plus long -- aligne en
   haut comme l'image plutot que centre, pour ce topic precis uniquement. */
.ss-topic__grid:has(.wp-image-3348){align-items:flex-start}
.ss-topic__photo{flex:0 0 400px;width:400px;height:267px;border-radius:12px;overflow:hidden;margin:0}
.ss-topic__photo img{width:100%;height:100%;object-fit:cover;display:block}
.ss-topic__text{flex:1 1 0;min-width:0;margin-top:0}
.ss-topic__text-solo{max-width:1080px;margin:0 auto}
.ss-topic__text p,.ss-topic__text-solo p{color:#667788;font-size:15px;line-height:1.7;margin:0 0 16px;max-width:680px;text-align:justify}
.ss-topic__text p:last-child,.ss-topic__text-solo p:last-child{margin-bottom:0}
/* Retour utilisateur 2026-08-06 : soulignement juge trop appuye, casse la
   lecture fluide sur une page qui compte desormais beaucoup plus de liens
   qu'a l'origine (hub reecrit). Aligne sur le reste du site : couleur
   hypertexte seule, pas de soulignement. */
.ss-topic__text a,.ss-topic__text-solo a{color:#0F6B8F;text-decoration:none}
.ss-topic__text a:hover,.ss-topic__text-solo a:hover{text-decoration:underline}
@media (max-width:1023px){.ss-topic__grid{flex-direction:column}.ss-topic__photo{flex:0 0 auto;width:100%;max-width:400px;height:260px}}

/* FAQ (wrapper page-specifique, pas partage avec Contact — cf. commentaire
   d'en-tete) */
.ss-faq-conseils{padding:96px 24px!important;background-color:#F8FAFC!important;border-top:1px solid #E2E8F0}
@media (max-width:767px){.ss-faq-conseils{padding:64px 16px!important}}
.ss-faq-conseils__header{max-width:760px;margin:0 auto 40px;text-align:left}
.ss-faq-conseils__inner{max-width:760px;margin:0 auto}

/* CTA final */
/* Bug preexistant corrige a l'occasion de la bascule (session 33), meme
   cause que sur Qui suis-je : le style="padding:96px 24px" en dur du bloc
   uagb/cta d'origine primait deja sur les media queries de reduction,
   jamais actives. Reduction desormais reellement active, conforme a
   RESPONSIVE_GUIDELINES.md §4.9 (96px → 64px → 48px vertical) ; horizontal
   24px inchange a tous les paliers. */
.ss-cta-conseils{background-color:#091A2A;padding:96px 24px!important;text-align:center}
@media (max-width:1023px) and (min-width:768px){.ss-cta-conseils{padding:64px 24px!important}}
@media (max-width:767px){.ss-cta-conseils{padding:48px 24px!important}}
.ss-cta-conseils h2{color:#fff;font-size:24px;font-weight:500;margin:0 0 16px}
.ss-cta-conseils__desc{color:#778899;margin-top:0!important;margin-bottom:8px!important;max-width:600px;margin-left:auto;margin-right:auto}
.ss-cta-conseils__desc--last{margin-bottom:32px!important}
.ss-cta-conseils .wp-block-buttons{justify-content:center;margin-top:32px!important}
.ss-cta-conseils .wp-block-button__link{line-height:1.857}