/* === A. Po. G. RH — corrections.css ====================================
   Retours client V2 → V3 (doc 2026_06_04).
   Chargé EN DERNIER : surcharge volontairement editorial/components/pages.
   Règles charte : 3 tailles de titres max, pas d'italique, pas de rose
   dans les titres, footer non noir (rose clair), etc.
======================================================================== */

/* --- 1. Titres : pas d'italique, pas de rose ------------------------- */
/* Tous les <em> dans les titres reviennent à la couleur/au style du titre */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.section-head-split__title em,
.headline-with-pills em,
.page-hero__title em,
.footer-cta__title em,
.wheel__detail-title em,
.diag h1 em, .diag h2 em {
	font-style: normal !important;
	color: inherit !important;
	font-weight: inherit !important;
}
/* Le titre du hero accueil : le <em> reste sur sa ligne mais en blanc */
.hero-inset__title em {
	font-style: normal !important;
	color: #fff !important;
	font-weight: 400 !important;
}
.page-hero__title em { color: #fff !important; }

/* --- 1b. Sur-titres : version SEO discrète (plus de pastille « pill ») ---
   Le client veut conserver des sur-titres pour le SEO mais SANS l'apparence
   de pastille : un petit kicker sobre, peu visible, au-dessus du titre.
   La pastille d'accroche du hero (--on-dark) garde son style pill. */
.eyebrow-pill:not(.eyebrow-pill--on-dark) {
	display: block !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 0 var(--s-2) !important;
	color: var(--c-accent) !important;
	font-family: var(--font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
	opacity: 0.9;
}
.eyebrow-pill:not(.eyebrow-pill--on-dark)::before,
.eyebrow-pill:not(.eyebrow-pill--on-dark)::after { display: none !important; }

/* --- 2. Header : logo plus gros + bandeau bien figé ------------------ */
.site-header--floating .site-logo { max-height: 56px; }
@media (max-width: 880px) {
	.site-header--floating .site-logo { max-height: 46px; }
}
/* Bandeau toujours visible et lisible (fond opaque dès le départ) */
.site-header--floating .site-header__shell {
	background: rgba(255, 255, 255, 0.96);
}

/* --- 3. Logos clients : même taille, tous plus gros ----------------- */
.marquee__item--logo {
	height: clamp(54px, 5vw, 76px);
	max-width: 200px;
	filter: none;          /* lisibilité : on garde les logos en couleur */
	opacity: 0.95;
}
.marquee__item--logo:hover { opacity: 1; transform: scale(1.05); }
.marquee__track { gap: clamp(48px, 6vw, 88px); }

/* --- 4. Footer : fond rose clair de la charte (plus de noir) -------- */
.footer-main {
	background: var(--c-rose-fond);          /* #FFF9FE */
	color: var(--c-text);
	border-top: 1px solid var(--c-gris-bord);
}
.footer-main .footer__blob { display: none; }
.site-footer { color: var(--c-text); }
.site-footer a { color: var(--c-accent); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--c-accent-hover); }
.site-footer h4 { color: var(--c-text); }
.site-footer h4::after { background: var(--c-accent); }
.footer-tagline { color: var(--c-text-muted); }
.footer-tagline em { color: var(--c-accent); }
.footer-list li { color: var(--c-text); }
.footer-list li svg { color: var(--c-accent); }
.footer-logo {
	max-width: 200px;            /* logo détouré plus grand et lisible */
	filter: none;
}
/* LinkedIn : sous l'adresse mail, en accent lisible sur fond clair */
.footer-social {
	background: #fff;
	border: 1px solid var(--c-gris-bord);
	color: var(--c-accent) !important;
	margin-top: var(--s-3);
}
.footer-social:hover { background: var(--c-accent); color: #fff !important; }
.footer-social:hover svg { color: #fff; }
.footer-social svg { color: var(--c-accent); }
/* Mini-card diag : version claire */
.footer-mini-card {
	background: #fff;
	border: 1px solid var(--c-gris-bord);
	box-shadow: var(--shadow-sm);
}
.footer-mini-card h4 { color: var(--c-text); }
.footer-mini-card p { color: var(--c-text-muted); }
.footer-mini-card .eyebrow { color: var(--c-accent) !important; }
.footer-mini-card .btn-outline {
	color: var(--c-accent) !important;
	border-color: var(--c-accent) !important;
}
.footer-mini-card .btn-outline:hover { background: var(--c-accent); color: #fff !important; }
.footer-bottom {
	border-top: 1px solid var(--c-gris-bord);
	color: var(--c-text-muted);
}
.footer-bottom__links span { color: var(--c-gris-bord); }

/* --- 5. Bandeaux violets au-dessus du footer ------------------------ */
/* On les supprime PARTOUT sauf sur la page Conseil (id 446). */
body:not(.page-id-446) .footer-cta { display: none; }
body:not(.page-id-446) .section--has-overlap-bottom { display: none; }

/* --- 6. Bandeau global Accessibilité / Handicap + Qualiopi ----------
   Bandeau ROSE fullwidth (même esprit que l'ancien « Parlons de votre
   situation »), affiché sur TOUTES les pages, juste avant le footer. */
.global-band {
	background: linear-gradient(135deg, #6E32A0 0%, #AA0082 100%);
	color: #fff;
	padding: clamp(var(--s-6), 5vw, var(--s-7)) 0;
	position: relative;
	overflow: hidden;
}
.global-band::before {
	content: '';
	position: absolute;
	top: -100px; left: -80px;
	width: 280px; height: 280px;
	background: radial-gradient(circle, rgba(250,150,200,0.45) 0%, transparent 70%);
	border-radius: 50%; pointer-events: none;
}
.global-band::after {
	content: '';
	position: absolute;
	bottom: -120px; right: -100px;
	width: 320px; height: 320px;
	background: radial-gradient(circle, rgba(90,200,220,0.35) 0%, transparent 70%);
	border-radius: 50%; pointer-events: none;
}
.global-band__inner {
	position: relative; z-index: 2;
	display: grid;
	gap: var(--s-5);
	grid-template-columns: 1fr;
	align-items: center;
}
@media (min-width: 860px) {
	.global-band__inner { grid-template-columns: 1fr auto; }
}
.global-band__main {
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
}
.global-band__icon svg { width: 48px; height: 48px; color: #fff; flex-shrink: 0; }
.global-band__txt .eyebrow-pill { margin-bottom: var(--s-2); }
.global-band__title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 400;
	color: #fff;
	line-height: 1.15;
	margin: 0 0 var(--s-2);
}
.global-band__txt p { color: rgba(255,255,255,0.92); margin: 0; max-width: 64ch; font-size: var(--fs-sm); }
.global-band a { color: #fff; text-decoration: underline; }
.global-band__cert {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 16px;
	padding: var(--s-4);
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.global-band__qualiopi {
	display: block;
	width: auto;
	height: auto;
	max-width: 220px;
	max-height: 150px;
}
@media (max-width: 860px) {
	.global-band__cert { align-self: flex-start; }
}

/* --- 7. Roue : carte détail (titre = libellé, sans phrase redondante) */
.wheel__detail-card .wheel__detail-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 500;
}
/* Le centre de la roue redevient cliquable pour revenir à l'écran d'accueil */
.wheel__center-reset { cursor: pointer; }

/* --- 8. Pavés méthode (Qui sommes-nous) : centrés ------------------- */
.grid--four-steps .card { text-align: center; }
.grid--four-steps .card__step {
	margin-left: auto;
	margin-right: auto;
}

/* --- 9. Pavés "Cinq enjeux" (Conseil) : centrés + couleur de la roue */
.lever-card { text-align: center; }
.lever-card__top { align-items: center; }
.lever-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	color: #fff;
	font-size: 1.05rem;
	margin: 0 auto var(--s-2);
}
.lever-card--seg-recrutement  { background: rgba(110,50,160,0.07); border-color: rgba(110,50,160,0.25); }
.lever-card--seg-recrutement  .lever-card__num { background: #6E32A0; }
.lever-card--seg-integration  { background: rgba(180,120,220,0.10); border-color: rgba(180,120,220,0.30); }
.lever-card--seg-integration  .lever-card__num { background: #B478DC; }
.lever-card--seg-developpement{ background: rgba(170,0,130,0.06); border-color: rgba(170,0,130,0.22); }
.lever-card--seg-developpement .lever-card__num { background: #AA0082; }
.lever-card--seg-fidelisation { background: rgba(90,200,220,0.10); border-color: rgba(90,200,220,0.30); }
.lever-card--seg-fidelisation .lever-card__num { background: #5AC8DC; }
.lever-card--seg-transmission { background: rgba(20,120,160,0.07); border-color: rgba(20,120,160,0.25); }
.lever-card--seg-transmission .lever-card__num { background: #1478A0; }

/* --- 10. Témoignages : textes justifiés + logo entreprise ----------- */
.review-card__text { text-align: justify; }
.review-card__logo {
	max-height: 34px;
	width: auto;
	margin-top: var(--s-3);
	object-fit: contain;
	opacity: 0.9;
}
.review-card__logo-ph {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	margin-top: var(--s-3);
	border: 1px dashed var(--c-gris-bord);
	border-radius: 6px;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* --- 11. Équipe (Qui sommes-nous) ----------------------------------- */
.team-grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: 1fr;
	margin-top: var(--s-6);
}
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
	background: #fff;
	border: 1px solid var(--c-gris-bord);
	border-radius: 20px;
	overflow: hidden;
	text-align: center;
}
.team-card__photo {
	aspect-ratio: 4/3;
	background: var(--c-rose-fond) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}
.team-card__body { padding: var(--s-5); }
.team-card__body h3 { margin: 0 0 4px; font-size: var(--fs-xl); }
.team-card__role { color: var(--c-accent); font-weight: 500; font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.team-card__body p { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; text-align: left; }
.team-photo-group {
	margin-top: var(--s-6);
	aspect-ratio: 21/9;
	border-radius: 20px;
	background: var(--c-rose-fond);
	border: 1px dashed var(--c-gris-bord);
	display: flex; align-items: center; justify-content: center;
	color: var(--c-text-muted);
	text-align: center;
	padding: var(--s-5);
}

/* --- 12. Nos valeurs (Qui sommes-nous) ------------------------------ */
.values-grid {
	display: grid;
	gap: var(--s-4);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .values-grid { grid-template-columns: repeat(4, 1fr); } }
.value-card {
	background: #fff;
	border: 1px solid var(--c-gris-bord);
	border-radius: 18px;
	padding: var(--s-5);
}
.value-card h3 { font-size: var(--fs-xl); margin: 0 0 var(--s-2); }
.value-card p { color: var(--c-text-muted); font-size: var(--fs-sm); margin: 0; }
.value-card__bar { width: 36px; height: 3px; border-radius: 3px; margin-bottom: var(--s-3); }

/* --- 13. Placeholder photo générique (assets à fournir) ------------- */
.photo-todo {
	position: relative;
}
.photo-todo::after {
	content: 'Photo à fournir';
	position: absolute;
	top: 8px; left: 8px;
	background: rgba(170,0,130,0.85);
	color: #fff;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
	letter-spacing: 0.02em;
}
/* Variante badge « logo » pour les cartes témoignages */
.logo-todo { position: relative; }
.logo-todo::after {
	content: 'Logo à fournir';
	position: absolute;
	top: 8px; left: 8px;
	background: rgba(170,0,130,0.85);
	color: #fff;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
	letter-spacing: 0.02em;
}

/* --- 14. Témoignages : logo client à la place du visage ------------- */
.review-card__logobox {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-5);
	background: var(--c-rose-fond) !important;
	background-image: none !important;
	border: 1px solid var(--c-gris-bord);
}
.review-card__logobox img {
	max-height: 72px;
	max-width: 80%;
	width: auto;
	object-fit: contain;
}
.review-card__logobox-name {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--c-text-muted);
	font-size: 1.05rem;
	text-align: center;
}

/* --- 15. Les 4 éléments (sur mesure / co-construit / …) mis en valeur */
.mini-features {
	gap: var(--s-6) !important;
	margin-top: var(--s-7) !important;
}
.mini-feature {
	background: #fff;
	border: 1px solid var(--c-gris-bord);
	border-radius: 20px;
	padding: var(--s-6) var(--s-5);
	box-shadow: var(--shadow-sm);
	text-align: center;
}
.mini-feature__icon {
	margin: 0 auto var(--s-4) !important;
	width: 64px !important;
	height: 64px !important;
}
.mini-feature__icon svg { width: 30px !important; height: 30px !important; }
.mini-feature h3 { font-size: 1.4rem !important; margin: 0 0 var(--s-2) !important; }
.mini-feature p { font-size: 1rem !important; line-height: 1.6 !important; }

/* --- 16. Header STICKY — fix --------------------------------------------
   base.css met `overflow-x: hidden` sur html ET body. Un ancêtre en
   overflow != visible transforme le document en conteneur de défilement
   et DÉSACTIVE `position: sticky` du header. `overflow-x: clip` empêche
   le scroll horizontal SANS créer ce conteneur → le header recolle. */
html, body { overflow-x: clip !important; }
/* Ceinture + bretelles : on réaffirme le sticky (offset top d'origine conservé). */
.site-header--floating {
	position: sticky !important;
	z-index: 1000 !important;
}

/* --- 17. Titres trop gros — réduction d'échelle (2026-06-09, v1.2.4) ------
   Demande Thomas : heros (accueil + pages) trop gros + baisse globale.
   Ciblage par CLASSE (les titres n'utilisent pas le bare h1/h2) + repli
   sur h1/h2/h3 pour les titres sans classe. corrections.css chargé en
   dernier ; aucune des règles d'origine n'a !important → on prime sûrement.
   Réduction ~-30 %, hiérarchie conservée. */

/* Titres « display » (classe dédiée) */
.hero-inset__title        { font-size: clamp(2rem, 4.5vw, 3.5rem) !important; }   /* 96 → 56px */
.page-hero__title         { font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important; } /* 64 → 44px */
.section-head-split__title{ font-size: clamp(1.6rem, 2.6vw, 2.25rem) !important; }  /* 48 → 36px */
.headline-with-pills      { font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important; }   /* 44 → 33px */

/* Repli global pour les titres sans classe spécifique */
h1 { font-size: clamp(1.9rem, 3vw + 0.6rem, 2.75rem) !important; } /* 56 → 44px */
h2 { font-size: clamp(1.4rem, 1.6vw + 0.7rem, 1.9rem) !important; } /* 36 → 30px */
h3 { font-size: 1.5rem !important; }                                /* 28 → 24px */

/* --- 18. Hiérarchie des titres — niveaux corrigés sans changer le visuel (2026-06-09, v1.2.5)
   Footer h4->h3, mini-feature h4->h3, catalogue h4->h3, options contact h3->h2,
   + h2 résultat diag non vide. On ré-applique le style d'origine sur le nouveau tag. */
/* Footer : colonnes h4 -> h3 (reprend .site-footer h4) */
.site-footer h3 { color:#fff !important; font-family:var(--font-body) !important; font-size:var(--fs-sm) !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:var(--s-4); position:relative; padding-bottom:var(--s-3); }
.site-footer h3::after { content:''; position:absolute; left:0; bottom:0; width:30px; height:2px; background:var(--c-accent); border-radius:2px; }
/* Formation : items catalogue h4 -> h3 (reprend .formation-item h4) */
.formation-item h3 { font-size:var(--fs-sm) !important; font-weight:500 !important; margin:0 !important; }
/* Contact : options h3 -> h2 (reprend .contact-option h3) */
.contact-option h2 { margin:0 !important; font-size:var(--fs-xl) !important; }

/* --- 19. Hauteur du hero d'accueil réduite (2026-06-09, v1.2.6) ----------
   Demande Thomas : bannière trop haute. min-height 560/75vh/760 -> 400/55vh/560.
   On réduit aussi un peu le padding interne pour garder les proportions. */
.hero-inset { min-height: clamp(400px, 55vh, 560px) !important; }
.hero-inset__inner { padding: clamp(24px, 3vw, 44px) !important; }