/*
 * Sections migrees de la page Qui suis-je (60) vers la cible "structure
 * dans le theme" (ARCHITECTURE.md, chantier C3). Declarations reprises
 * telles quelles depuis les <style> inline de post_content (avant
 * migration), pas reinventees. Layout des wrappers Hero/Bio verifie contre
 * la capture live (capture-live-layout.js) avant conversion : flex column
 * centre, contenu contraint via un wrapper "__inner" separe du fond teinte
 * plein-largeur (meme methode que .ss-hero-contact/.ss-hero-contact__inner,
 * chantier C2 D1) — pas le hack ::before de CLAUDE.md §F, reserve aux
 * retrofits d'un bloc non-alignfull, pas a une section alignfull neuve.
 */

/* Hero */
/* !important requis : .entry-content > .wp-block-group (Astra, 2 classes)
   bat une classe seule en specificite, cf. CLAUDE.md §F. */
/* Photo de fond (retour utilisateur 2026-08-11, meme methode que
   .ss-hero-accueil dans section-accueil.css). */
.ss-hero-quisuisje{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:613px;box-sizing:border-box;position:relative;overflow:hidden;background-color:#091A2A;background-image:linear-gradient(rgba(9,26,42,0.65),rgba(9,26,42,0.65)),url("../images/hero-grenouille.jpg");background-size:cover;background-position:center;padding:80px 24px 112px!important}
/* Hauteur uniforme entre tous les Hero du site, cf. .ss-hero-accueil dans
   section-accueil.css pour le detail du retour utilisateur. */
/* background-position decale a droite en mobile (retour utilisateur
   2026-08-11) : meme piege que .ss-hero-offres (voir commentaire dans
   section-offres.css) -- la grenouille/le lotus sont au bord droit de
   l'image source, invisibles en cover centre sur un Hero mobile etroit. */
@media (max-width:767px){.ss-hero-quisuisje{padding:60px 16px 80px!important;min-height:716px;background-position:80% 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-quisuisje::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-quisuisje::after{height:115px}}
@media (max-width:767px){.ss-hero-quisuisje::after{height:75px}}
.ss-hero-inner{position:relative;z-index:2;max-width:840px;margin:0 auto;text-align:center}
.ss-hero-inner h1{color:#fff;font-size:32px;font-weight:700;line-height:1.25;letter-spacing:-0.01em;margin:0 0 16px}
.ss-hero-inner p{color:#fff;font-size:18px;line-height:1.5;margin:0 0 24px}
.ss-hero-inner .wp-block-buttons{justify-content:center}

/* Intro */
/* !important requis sur le padding aussi : meme piege que le Hero
   ci-dessus (CLAUDE.md §F) — bug preexistant confirme sur la page reelle
   avant migration (retombait a 45px, defaut de bloc Gutenberg), corrige a
   l'occasion de la bascule (session 33, validation utilisateur).
   max-width 720px (pas 600) : le resserrement a 600px fait en session 32
   a ete retire en session 33 (validation utilisateur) — trop etroit,
   plus alignee avec le texte du Hero au-dessus (840px). Mots orphelins
   possibles sur la 2e ligne, accepte comme compromis. */
.ss-intro{max-width:720px!important;margin:0 auto;padding:64px 24px!important;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}

/* Bio */
/* Padding horizontal porte par .ss-bio-inner (pas le wrapper alignfull) :
   reproduit exactement le comportement mesure sur la page live avant
   migration — 24/32/16px desktop/tablette/mobile, valeurs de la regle
   sitewide Spectra (functions.php, scope .uagb-is-root-container.alignfull)
   qui s'appliquait a l'ancien wrapper interne, jamais au conteneur racine. */
/* Premiere section sous le Hero (retour utilisateur 2026-08-11) : doit
   demarrer dans la meme couleur que le fond du site (pas de teinte F8FAFC,
   pas de trait de separation) pour se fondre avec le bas de la vague.
   L'alternance de teinte ne s'applique qu'a partir du bloc SUIVANT. */
.ss-bio-quisuisje{display:flex;flex-direction:column;align-items:center;background-color:var(--surface-paper);padding:96px 0!important}
@media (max-width:767px){.ss-bio-quisuisje{padding:64px 0!important}}
/* Espace top sous le Hero aligne sur la reference Accueil (retour
   utilisateur 2026-08-11 : ".ss-approche-section" sur Accueil sert de
   reference d'alignement hero->1ere section pour tout le site, gap mesure
   a 0px la-bas). Premier essai a 64px encore juge trop bas ("il faut
   remonter d'une ligne, espace central entre le hero et Parcours") ;
   ramene a 0 pour matcher exactement Accueil. */
.ss-hero-quisuisje + .ss-bio-quisuisje{padding-top:0!important}
@media (max-width:767px){.ss-hero-quisuisje + .ss-bio-quisuisje{padding-top:0!important}}
.ss-bio-inner{max-width:1140px;margin:0 auto;width:100%;box-sizing:border-box;padding-left:24px;padding-right:24px}
@media (max-width:1023px) and (min-width:768px){.ss-bio-inner{padding-left:32px;padding-right:32px}}
@media (max-width:767px){.ss-bio-inner{padding-left:16px;padding-right:16px}}
.ss-bio-header{text-align:left;margin-bottom:48px}
.ss-bio-header h2{color:#091A2A;font-size:24px;font-weight:500}
.ss-bio-header__subtitle{color:#667788;font-size:15px;font-weight:400;margin-top:12px}
/* margin-top:0 explicite sur chaque enfant non-premier d'un wp:group
   parent : Gutenberg pose par defaut un margin-top (block spacing,
   is-layout-flow) sur tout wp:group qui n'est pas le 1er enfant, y compris
   dans un parent flex row — deja rencontre 3x (CLAUDE.md §F), meme fix ici
   sur .ss-bio-grid (2e enfant de .ss-bio-inner), .ss-bio__text (2e enfant
   flex de .ss-bio-grid), .ss-bio-rail__item (2e/3e enfants), .ss-bio-rail__body
   (2e enfant flex de chaque item). */
.ss-bio-grid{display:flex;gap:48px;align-items:flex-start;margin-top:0}
/* Carte blanche retiree (retour utilisateur 2026-08-11) : le fond de la
   section est deja couleur papier (.ss-bio-quisuisje), l'image aquarelle
   s'y integre directement sans cadre. Colonne et image agrandies (~3-4x
   l'affichage precedent, qui ne montrait l'image qu'a 42% d'une carte de
   320px). */
.ss-bio__photo-col{flex:0 0 460px;width:460px}
.ss-bio__photo-card{width:100%;margin:0;display:block}
.ss-bio__photo-card img{width:100%;height:auto;display:block}
/* Taille +25% et alignement vertical sur le repere "changement de cap
   professionnel" / rond numero 2 du rail texte (retour utilisateur
   2026-08-12) : le MILIEU (pas le haut, pas le bas -- deux essais
   precedents invalides) de l'image doit tomber au niveau du centre du
   rond "2" (mesure Playwright, desktop uniquement, cf. media query
   1023px pour le mobile ou les colonnes s'empilent et cet alignement
   n'a plus de sens). */
.ss-bio__photo-card img.wp-image-3401{width:87.5%;margin:112px auto 0}
.ss-bio__caption{font-size:13px;font-style:italic;color:#2F4F4F;text-align:center;margin-top:16px;line-height:1.5}
.ss-bio__text{flex:1 1 0;min-width:0;margin-top:0}
.ss-bio-rail__item{display:flex;gap:16px;margin-bottom:20px;margin-top:0}
.ss-bio-rail__item--last{margin-bottom:0}
.ss-bio-rail__body{margin-top:0}
.ss-bio-rail__marker{flex:none;display:flex;flex-direction:column;align-items:center}
.ss-bio-rail__dot{width:30px;height:30px;border-radius:50%;border:2px solid #091A2A;color:#091A2A;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0}
.ss-bio-rail__marker::after{content:"";width:2px;flex:1;background:#E2E8F0;margin:4px 0}
.ss-bio-rail__item--last .ss-bio-rail__marker::after{content:none}
.ss-bio-rail__label{color:#2F4F4F;font-size:13px;font-weight:700;margin:0 0 4px}
.ss-bio-rail__desc{color:#2F4F4F;font-size:15px;line-height:1.6;margin:0;text-align:justify}
.ss-bio-rail__desc--final{color:#091A2A;font-weight:700}
@media (max-width:1023px){.ss-bio-grid{flex-direction:column;align-items:center}.ss-bio__photo-col{flex:0 0 auto;width:100%;max-width:420px}.ss-bio__photo-card img.wp-image-3401{width:77%;margin-top:0}}

/* Approche */
/* Mis en gris + trait separatif (retour utilisateur 2026-08-11), comme les
   sections teintees des autres pages. Passe en plein-largeur via la meme
   astuce 100vw que .ss-topic (Conseils) : le parent .entry-content etant
   limite a 1140px, un simple background-color resterait "encadre" au lieu
   de couvrir toute la largeur du viewport. Centrage du contenu repris via
   padding calc() plutot que margin auto (incompatible avec width:100vw). */
.ss-approche-header{text-align:left;background-color:#F8FAFC!important;width:100vw!important;max-width:100vw!important;margin-left:calc(-50vw + 50%)!important;margin-right:calc(-50vw + 50%)!important;box-sizing:border-box!important;border-top:1px solid #E2E8F0;padding-top:48px!important;padding-bottom:12px!important}
@media (min-width:1024px){.ss-approche-header{padding-left:max(24px, calc((100vw - 1140px)/2 + 24px))!important;padding-right:max(24px, calc((100vw - 1140px)/2 + 24px))!important}}
@media (max-width:1023px) and (min-width:768px){.ss-approche-header{padding-left:32px!important;padding-right:32px!important}}
@media (max-width:767px){.ss-approche-header{padding-left:16px!important;padding-right:16px!important}}
.ss-approche-body{padding-top:24px;padding-bottom:96px;background-color:#F8FAFC!important;width:100vw!important;max-width:100vw!important;margin-left:calc(-50vw + 50%)!important;margin-right:calc(-50vw + 50%)!important;box-sizing:border-box!important}
/* 2e instance de .ss-approche-body (apres la carte ss-quote-insert) :
   garde l'espacement top d'origine, plus genereux, pour se detacher de la
   carte plutot que du titre "Mon approche". */
.ss-quote-insert + .ss-approche-body{padding-top:96px}
.ss-approche-body p{max-width:680px}
@media (min-width:1024px){.ss-approche-body{padding-left:max(24px, calc((100vw - 1140px)/2 + 24px))!important;padding-right:max(24px, calc((100vw - 1140px)/2 + 24px))!important}}
@media (max-width:1023px) and (min-width:768px){.ss-approche-body{padding-left:32px!important;padding-right:32px!important}}
@media (max-width:767px){.ss-approche-body{padding-bottom:64px;padding-left:16px!important;padding-right:16px!important}}
.ss-approche-body p{color:#667788;font-size:15px;line-height:1.6;margin:0 0 20px;text-align:justify}
.ss-approche-body p:last-child{margin-bottom:0}
.ss-approche-body p.ss-approche-body__subtitle{color:#091A2A;font-size:15px;font-weight:500;line-height:1.5}

/* Grille "Mon accompagnement" (texte + carte illustration), retour
   utilisateur 2026-08-11 : le bloc .ss-quote-insert (fond blanc encadre sur
   le fond teinte F8FAFC) cassait la dynamique visuelle -- retire du
   contenu, texte condense en 3 paragraphes autonomes (ne reference plus la
   citation supprimee), et carte dediee ajoutee a droite pour l'image
   "flaque et elements - estampe" (place qui se degageait deja a droite du
   bloc de texte). Meme astuce 100vw que .ss-approche-header/.ss-approche-body
   pour le fond plein-largeur, contenu recentre via padding calc(). */
.ss-approche-grid{background-color:#F8FAFC!important;width:100vw!important;max-width:100vw!important;margin-left:calc(-50vw + 50%)!important;margin-right:calc(-50vw + 50%)!important;box-sizing:border-box!important;display:flex;gap:48px;align-items:flex-start;padding-top:24px!important;padding-bottom:64px!important}
@media (min-width:1024px){.ss-approche-grid{padding-left:max(24px, calc((100vw - 1140px)/2 + 24px))!important;padding-right:max(24px, calc((100vw - 1140px)/2 + 24px))!important}}
@media (max-width:1023px) and (min-width:768px){.ss-approche-grid{padding-left:32px!important;padding-right:32px!important}}
@media (max-width:767px){.ss-approche-grid{flex-direction:column;padding-bottom:44px!important;padding-left:16px!important;padding-right:16px!important}}
.ss-approche-body--col{flex:1 1 0;min-width:0;margin-top:0}
.ss-approche-media{flex:0 0 260px;width:260px;margin-top:-115px}
@media (max-width:1023px){.ss-approche-media{flex:0 0 auto;width:100%;max-width:360px;margin:0 auto}}
/* Carte plus verticale, fond papier au lieu du blanc, marge autour de
   l'image (retour utilisateur 2026-08-11 : image "lotus detoure_ok",
   deja portrait, ne doit pas etre collee aux bords de la carte). */
.ss-approche-media__img{margin:0;padding:24px;border-radius:12px;border:1px solid #E2E8F0;background-color:var(--surface-paper);background-image:url("../assets/textures/paper-texture.webp");background-repeat:repeat;background-size:627px 627px;box-sizing:border-box}
.ss-approche-media__img img{width:100%;height:auto;display:block;margin:0;border-radius:8px}

/* CTA final */
/* Bug preexistant corrige a l'occasion de la bascule (session 33) : sur la
   page live d'origine, le style="padding:96px 24px" en dur sur le bloc
   uagb/cta primait deja sur les media queries de reduction du <style>
   (specificite inline > classe), qui n'ont donc jamais ete actives — le
   padding restait a 96px a tous les paliers. Reduction desormais reellement
   active, conforme a RESPONSIVE_GUIDELINES.md §4.9 (96px → 64px → 48px
   vertical) ; horizontal 24px inchange a tous les paliers (non specifie par
   le Design System, jamais compresse sous ce seuil ailleurs sur le site). */
.ss-cta-quisuisje{background-color:#091A2A;padding:96px 24px!important;text-align:center}
@media (max-width:1023px) and (min-width:768px){.ss-cta-quisuisje{padding:64px 24px!important}}
@media (max-width:767px){.ss-cta-quisuisje{padding:48px 24px!important}}
.ss-cta-quisuisje h2{color:#fff;font-size:24px;font-weight:500;margin:0 0 16px}
/* !important : .entry-content p (Astra, classe+element) bat une classe
   seule en specificite, meme piege que le padding ci-dessus (CLAUDE.md §F). */
.ss-cta-quisuisje__desc{color:#778899;margin-top:0!important;margin-bottom:8px!important;max-width:600px;margin-left:auto;margin-right:auto}
.ss-cta-quisuisje__desc--last{margin-bottom:32px!important}
.ss-cta-quisuisje .wp-block-buttons{justify-content:center;margin-top:32px!important}
/* line-height 1.857 (mesure sur la page live) : le bouton d'origine
   (widget uagb/cta, Spectra) heritait du line-height ambiant de la page au
   lieu du reset a 1 que porte nativement .wp-block-button__link (visible
   sur le bouton Hero, deja natif avant migration) — artefact du widget
   legacy, reproduit tel quel pour la hauteur exacte du bloc. */
.ss-cta-quisuisje .wp-block-button__link{line-height:1.857}