/*
 * UCH — Pages institutionnelles
 * Sen Solution Tech
 *
 * À placer dans : wp-content/themes/hello-uch-child/assets/institutionnel.css
 * (chargé par le mu-plugin uch-core-institutionnel.php)
 *
 * Contient : le gabarit de page (page.php) + les sections de la page « Le Cabinet ».
 * S'appuie sur les variables de palette de style.css.
 * Règle de charte : orange (--uch-accent) = boutons ; bleu (--uch-brand) = structure ;
 * vert (--uch-green) = thématiques / accents.
 */

/* =========================================================================
   1. GABARIT DE PAGE  (page.php)
   ========================================================================= */

/* --- Fil d'Ariane --- */
.uch-page-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--uch-muted, #6B7280);
	margin-bottom: 12px;
}
.uch-page-fil a { color: var(--uch-muted, #6B7280); text-decoration: none; }
.uch-page-fil a:hover { color: var(--uch-brand, #1E3977); }
.uch-page-fil-sep { color: var(--uch-line, #E4E6EB); }
.uch-page-fil-actuel { color: var(--uch-ink, #232A36); font-weight: 600; }

/* --- En-tête (sans image à la une) --- */
.uch-page-entete {
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 20px 0;
}
.uch-page-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 34px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--uch-brand, #1E3977);
	margin: 0;
}

/* --- Bannière (image à la une) --- */
.uch-page-banniere {
	position: relative;
	background-size: cover;
	background-position: center;
}
.uch-page-banniere-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 57, 119, .55), rgba(30, 57, 119, .80));
}
.uch-page-entete--sur-image {
	position: relative;   /* passe au-dessus du voile */
	padding-top: 72px;
	padding-bottom: 72px;
}
.uch-page-entete--sur-image .uch-page-fil,
.uch-page-entete--sur-image .uch-page-fil a,
.uch-page-entete--sur-image .uch-page-fil-actuel { color: rgba(255, 255, 255, .88); }
.uch-page-entete--sur-image .uch-page-fil-sep { color: rgba(255, 255, 255, .45); }
.uch-page-entete--sur-image .uch-page-titre { color: #fff; }

/* --- Conteneur de lecture --- */
.uch-page-contenu {
	max-width: 820px;
	margin: 0 auto;
	padding: 34px 20px 64px;
}
.uch-page--large .uch-page-contenu { max-width: 1200px; }

/* Prose */
.uch-page-contenu > h2 {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 26px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--uch-brand, #1E3977);
	margin: 44px 0 14px;
}
.uch-page-contenu > h2:first-child { margin-top: 0; }
.uch-page-contenu > h3 {
	font-size: 20px;
	color: var(--uch-ink, #232A36);
	margin: 28px 0 10px;
}
.uch-page-contenu > p,
.uch-page-contenu > ul,
.uch-page-contenu > ol {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--uch-ink, #232A36);
	margin: 0 0 18px;
}
.uch-page-contenu a { color: var(--uch-accent, #C1521D); }

/* Chapô / accroche (paragraphe avec la classe uch-page-lead) */
.uch-page-contenu > .uch-page-lead {
	font-size: 19px;
	line-height: 1.7;
	color: var(--uch-ink, #232A36);
	border-left: 3px solid var(--uch-green, #1F6C4B);
	padding-left: 18px;
	margin-bottom: 30px;
}

.uch-page-pagination { margin-top: 24px; font-size: 14px; }

/* =========================================================================
   2. DOUBLE APPROCHE  ([uch_double_approche])
   ========================================================================= */
.uch-double-approche {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 30px 0;
}
.uch-approche-carte {
	border: 1px solid var(--uch-line, #E4E6EB);
	border-top: 3px solid var(--uch-green, #1F6C4B);   /* accent thématique = vert */
	border-radius: 14px;
	padding: 24px;
	background: #fff;
	box-shadow: var(--uch-shadow-sm, 0 2px 8px rgba(22, 41, 79, .06));
}
.uch-approche-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 18px;
	line-height: 1.35;
	color: var(--uch-brand, #1E3977);
	margin: 0 0 10px;
}
.uch-approche-texte {
	font-size: 15px;
	line-height: 1.65;
	color: var(--uch-muted, #6B7280);
	margin: 0;
}

@media (max-width: 640px) {
	.uch-double-approche { grid-template-columns: 1fr; }
}

/* =========================================================================
   3. CHIFFRES CLÉS  ([uch_chiffres_cles])
   Bandeau bleu = structure.
   ========================================================================= */
.uch-chiffres {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin: 34px 0;
	padding: 30px 24px;
	background: var(--uch-brand, #1E3977);
	border-radius: 16px;
}
.uch-chiffre { text-align: center; }
.uch-chiffre-valeur {
	display: block;
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
}
.uch-chiffre-label {
	display: block;
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .82);
	margin-top: 8px;
}

@media (max-width: 640px) {
	.uch-chiffres { grid-template-columns: 1fr; gap: 22px; }
}

/* =========================================================================
   4. APPEL À L'ACTION  ([uch_cta])
   Reprend le bandeau CTA de l'accueil (classes identiques, valeurs identiques).
   ========================================================================= */
.uch-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin: 40px 0 8px;
	padding: 32px;
	background: var(--uch-brand, #1E3977);
	border-radius: 16px;
	color: #fff;
}
.uch-cta-texte { flex: 1; min-width: 260px; }
.uch-cta-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 6px;
	color: #fff;
}
.uch-cta-sous { font-size: 15px; color: rgba(255, 255, 255, .9); margin: 0; }
.uch-cta .uch-btn {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 10px;
	background: var(--uch-accent, #C1521D);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s ease;
}
.uch-cta .uch-btn:hover { background: var(--uch-accent-hover, #A8471A); }

/* =========================================================================
   5. EXPERTS  ([uch_experts])
   ========================================================================= */
.uch-experts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 30px 0;
}
.uch-expert-carte {
	border: 1px solid var(--uch-line, #E4E6EB);
	border-radius: 14px;
	padding: 24px;
	background: #fff;
	box-shadow: var(--uch-shadow-sm, 0 2px 8px rgba(22, 41, 79, .06));
}
.uch-expert-tete {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
.uch-expert-avatar {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--uch-brand-light, #EAEEF6);
	color: var(--uch-brand, #1E3977);
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .5px;
}
.uch-expert-id { min-width: 0; }
.uch-expert-nom {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 18px;
	line-height: 1.25;
	color: var(--uch-ink, #232A36);
	margin: 0 0 3px;
}
.uch-expert-role {
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--uch-muted, #6B7280);
	margin: 0;
}
.uch-expert-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}
.uch-expert-chip {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--uch-green, #1F6C4B);
	background: var(--uch-green-light, #E8F2EC);
	padding: 4px 10px;
	border-radius: 999px;
}
.uch-expert-bio {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--uch-ink, #232A36);
	margin: 0 0 12px;
}
.uch-expert-refs {
	font-size: 13px;
	line-height: 1.5;
	color: var(--uch-muted, #6B7280);
	margin: 0;
}
.uch-expert-refs span { font-weight: 600; color: var(--uch-ink, #232A36); }

@media (max-width: 720px) {
	.uch-experts { grid-template-columns: 1fr; }
}

/* =========================================================================
   6. CARTES EXPERTISES  ([uch_expertises])
   Copie des styles d'accueil.css pour qu'ils s'appliquent AUSSI hors home
   (page « Nos expertises »). Valeurs identiques à accueil.css : aucun conflit.
   Sans ce bloc, les SVG des cartes ne sont pas bornés (icônes géantes).
   ========================================================================= */
.uch-expertises {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 20px;
	margin: 30px 0;
}
.uch-expertise {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 26px 16px;
	border: 1px solid var(--uch-line, #E4E6EB);
	border-radius: 10px;
	background: #fff;
	text-decoration: none !important;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
a.uch-expertise:hover {
	border-color: var(--uch-accent, #C1521D);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}
.uch-expertise-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--uch-accent-light, #F7EDE7);
	color: var(--uch-accent, #C1521D);
	flex: 0 0 auto;
	transition: background 0.2s ease, color 0.2s ease;
}
.uch-expertise-icone svg {
	width: 24px;
	height: 24px;
	display: block;
}
a.uch-expertise:hover .uch-expertise-icone {
	background: var(--uch-accent, #C1521D);
	color: #fff;
}
.uch-expertise-nom {
	font-size: 14px;
	font-weight: 600;
	color: var(--uch-ink, #232A36);
}
.uch-expertise--inactive {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 900px) {
	.uch-expertises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.uch-expertises { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.uch-expertise { padding: 20px 12px; }
}

/* =========================================================================
   7. SOUS-PAGE D'EXPERTISE  (gabarit 4 : 2 colonnes + sommaire ancré)
   ========================================================================= */
.uch-page-contenu--expertise { max-width: 1200px; }

.uch-expertise-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 44px;
	align-items: start;
}

/* --- Colonne contenu (sections écrites par le client en H2) --- */
.uch-expertise-corps > h2 {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 24px;
	line-height: 1.25;
	font-weight: 800;
	color: var(--uch-brand, #1E3977);
	margin: 40px 0 14px;
	scroll-margin-top: 100px;   /* compense l'en-tête collant lors de l'ancrage */
}
.uch-expertise-corps > h2:first-child { margin-top: 0; }
.uch-expertise-corps > h3 {
	font-size: 18px;
	color: var(--uch-ink, #232A36);
	margin: 24px 0 8px;
}
.uch-expertise-corps > p,
.uch-expertise-corps > ul,
.uch-expertise-corps > ol {
	font-size: 16px;
	line-height: 1.75;
	color: var(--uch-ink, #232A36);
	margin: 0 0 16px;
}
.uch-expertise-corps a { color: var(--uch-accent, #C1521D); }

/* --- Colonne latérale collante --- */
.uch-expertise-aside {
	position: sticky;
	top: 100px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Sommaire « Sur cette page » */
.uch-expertise-toc {
	border: 1px solid var(--uch-line, #E4E6EB);
	border-radius: 14px;
	padding: 18px 16px;
	background: #fff;
}
.uch-expertise-toc-titre {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: var(--uch-muted, #6B7280);
	margin: 0 0 10px;
	padding-left: 12px;
}
.uch-expertise-toc-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.uch-expertise-toc-lien {
	display: block;
	padding: 6px 12px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.4;
	color: var(--uch-muted, #6B7280);
	text-decoration: none;
	transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.uch-expertise-toc-lien:hover {
	color: var(--uch-ink, #232A36);
	background: var(--uch-brand-light, #EAEEF6);
}
.uch-expertise-toc-lien.is-active {
	color: var(--uch-brand, #1E3977);
	border-left-color: var(--uch-accent, #C1521D);
	background: var(--uch-brand-light, #EAEEF6);
	font-weight: 600;
}

/* Encart devis */
.uch-expertise-devis {
	border: 1px solid var(--uch-line, #E4E6EB);
	border-radius: 14px;
	padding: 20px;
	background: var(--uch-bg-soft, #F7F8FA);
}
.uch-expertise-devis-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--uch-brand, #1E3977);
	margin: 0 0 4px;
}
.uch-expertise-devis-sous {
	font-size: 14px;
	color: var(--uch-muted, #6B7280);
	margin: 0 0 14px;
}
.uch-expertise-devis .uch-btn { display: block; text-align: center; }

/* Bouton d'action de base (rendu identique à accueil.css, dispo hors home) */
.uch-btn {
	display: inline-block;
	padding: 11px 18px;
	border-radius: 8px;
	background: var(--uch-accent, #C1521D);
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .15s ease;
}
.uch-btn:hover { background: var(--uch-accent-hover, #A8471A); }

/* --- Bande « Notre équipe » --- */
.uch-equipe-band { margin-top: 8px; }
.uch-equipe-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 22px;
	font-weight: 800;
	color: var(--uch-brand, #1E3977);
	margin: 44px 0 20px;
}

/* Experts en mode compact (avatar + nom + rôle, centrés) */
.uch-experts--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.uch-experts--compact .uch-expert-carte { text-align: center; padding: 22px 16px; }
.uch-experts--compact .uch-expert-tete { flex-direction: column; gap: 12px; margin: 0; }
.uch-experts--compact .uch-expert-nom { font-size: 15px; }
.uch-experts--compact .uch-expert-role { font-size: 12.5px; }

/* CTA slim (bas de sous-page) */
.uch-cta--slim { padding: 22px 28px; margin: 36px 0 0; }
.uch-cta--slim .uch-cta-titre { font-size: 20px; margin: 0; }

/* --- Responsive --- */
@media (max-width: 980px) {
	.uch-expertise-layout { grid-template-columns: 1fr; gap: 28px; }
	.uch-expertise-aside { position: static; top: auto; }
	.uch-experts--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.uch-experts--compact { grid-template-columns: 1fr; }
}

/* =========================================================================
   8. ESPACE ENTREPRISES  (gabarit 5)
   ========================================================================= */

/* Accroche : bouton devis mis en avant sous le chapô */
.uch-entreprises-actions { margin: 6px 0 8px; }

/* --- 4 bénéfices --- */
.uch-benefices {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 30px 0;
}
.uch-benefice {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 26px 18px;
	border: 1px solid var(--uch-line, #E4E6EB);
	border-radius: 12px;
	background: #fff;
}
.uch-benefice-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--uch-accent-light, #F7EDE7);
	color: var(--uch-accent, #C1521D);
	flex: 0 0 auto;
}
.uch-benefice-icone svg { width: 24px; height: 24px; display: block; }
.uch-benefice-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--uch-brand, #1E3977);
	margin: 4px 0 0;
}
.uch-benefice-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--uch-muted, #6B7280);
	margin: 0;
}

/* --- 3 étapes « Comment ça marche » --- */
.uch-etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 24px 0 30px;
}
.uch-etape {
	position: relative;
	padding: 24px 22px;
	border: 1px solid var(--uch-line, #E4E6EB);
	border-top: 3px solid var(--uch-green, #1F6C4B);
	border-radius: 12px;
	background: #fff;
}
.uch-etape-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--uch-brand, #1E3977);
	color: #fff;
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 12px;
}
.uch-etape-titre {
	font-family: var(--uch-font-title, "Poppins", sans-serif);
	font-size: 17px;
	font-weight: 700;
	color: var(--uch-ink, #232A36);
	margin: 0 0 6px;
}
.uch-etape-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--uch-muted, #6B7280);
	margin: 0;
}

@media (max-width: 900px) {
	.uch-benefices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uch-etapes    { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.uch-benefices { grid-template-columns: 1fr; }
}

/* =========================================================================
   CORRECTIF — collision .uch-btn-devis (header-footer.css vs fiche.css)
   Sur la fiche formation, le bouton devis affichait un texte blanc sur fond
   blanc (invisible). On réaffirme : header = orange ; devis fiche = texte bleu.
   ========================================================================= */
.uch-header-actions .uch-btn-devis{background:var(--uch-accent,#C1521D)!important;color:#fff!important}
.uch-carte-inscription .uch-btn-devis,
.uch-barre-mobile .uch-btn-devis{color:var(--uch-brand,#1E3977)!important}

/* Avatar photo (portraits réels des experts) */
.uch-expert-avatar--photo{padding:0;overflow:hidden;background:transparent}
.uch-expert-photo{width:100%;height:100%;object-fit:cover;display:block}