/* ==========================================================================
   Commpagnie — pages Expertise (Blocs expertise) — d'après Figma
   Sections pilotées par les champs back-office ; clients/logos/cinétique
   réutilisent les blocs de l'accueil (home.css).
   ========================================================================== */

.exp { overflow-x: clip; }

/* --------------------------------------------------------------- HERO bleu */
.exp-hero {
	background: var(--cmp-primary);
	color: var(--cmp-blanc);
	/* padding-bottom élargi : l'image suivante remonte dessus (chevauchement) */
	padding: clamp(128px, 16vh, 200px) 0 clamp(140px, 18vw, 240px);
	position: relative;
}
.exp-hero__eyebrow {
	display: flex; align-items: center; gap: 16px;
	font-family: var(--cmp-font-body); font-weight: 800; font-size: 1.125rem; line-height: 1.1;
	color: var(--cmp-blanc); margin: 0 0 26px;
}
.exp-hero__bar { width: 143px; height: 2px; background: var(--cmp-blanc); flex: none; }
.exp-hero__title {
	font-family: var(--cmp-font-display); font-weight: 500;
	font-size: clamp(2.2rem, 4.6vw, 3.44rem); line-height: 1.2;
	color: var(--cmp-blanc); margin: 0 0 36px; max-width: 1175px;
}
.exp-hero__title strong { font-weight: 800; }
.exp-hero__scroll {
	/* flex (et non inline-flex) → l'indicateur passe SOUS le texte/bouton, sur sa propre ligne */
	display: flex; justify-content: center; align-items: flex-start;
	width: 29px; height: 65px; border: 1px solid var(--cmp-blanc); border-radius: 30px; padding-top: 10px;
	margin-top: clamp(36px, 4vw, 56px);
}
.exp-hero__scroll span { width: 5px; height: 12px; border-radius: 3px; background: var(--cmp-blanc); animation: expScroll 1.8s ease-in-out infinite; }
@keyframes expScroll { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(14px); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .exp-hero__scroll span { animation: none; } }

/* ----------------------------------------------------- IMAGE pleine largeur */
/* L'image remonte sur le hero bleu (chevauchement) via margin-top négatif. */
.exp-feature { background: transparent; padding: 0 0 clamp(40px, 6vw, 80px); position: relative; z-index: 2; margin-top: clamp(-220px, -16vw, -120px); }
.exp-feature__img { display: block; width: 100%; height: clamp(280px, 42vw, 600px); object-fit: cover; border-radius: clamp(32px, 6vw, 85px); }

/* --------------------------------------------------- 2 cartes détail presta. */
.exp-dp { background: var(--cmp-blanc); padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 8vw, 100px); }
.exp-dp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.5vw, 22px); align-items: stretch; }
.exp-dp__card {
	border-radius: 15px; padding: clamp(32px, 3.4vw, 50px);
	display: flex; flex-direction: column; min-height: 460px;
	box-shadow: 0 4px 30px rgba(232, 232, 232, .25);
	position: relative; overflow: hidden;
}
/* Image plein-carte révélée au survol de la carte OPPOSÉE (= prod : fondu + dé-floutage,
   desktop uniquement ; pilotée par initDpHover, home.js, classe .is-show). */
.exp-dp__img {
	position: absolute; inset: 0; margin: 0; z-index: 2; pointer-events: none;
	opacity: 0; filter: blur(28px);
	transition: opacity .45s ease, filter .45s ease;
}
.exp-dp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-dp__img.is-show { opacity: 1; filter: blur(0); }
@media (max-width: 1024px) { .exp-dp__img { display: none; } }
@media (prefers-reduced-motion: reduce) { .exp-dp__img { transition: none; filter: none; } }
.exp-dp__card--primary { background: var(--cmp-primary); color: #fff; }
.exp-dp__card--light { background: #fff; }
.exp-dp__ico {
	width: 80px; height: 80px; border-radius: 999px; display: inline-flex;
	align-items: center; justify-content: center; margin-bottom: clamp(22px, 3vw, 40px);
}
/* Les pictos (PNG/SVG médiathèque) embarquent leur propre pastille ronde → rendu tel quel, comme la prod (pas de cercle CSS, pas de filtre). */
.exp-dp__ico img { width: 100%; height: 100%; object-fit: contain; }
.exp-dp__title { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.3; margin: 0 0 22px; }
.exp-dp__card--primary .exp-dp__title { color: var(--cmp-blanc); }
.exp-dp__card--light .exp-dp__title { color: var(--cmp-anthracite); }
.exp-dp__text { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; }
.exp-dp__card--primary .exp-dp__text { color: #fff; }
.exp-dp__card--light .exp-dp__text { color: var(--cmp-grey); }
.exp-dp__text p { margin: 0 0 1em; }
.exp-dp__text p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- INTRO */
.exp-intro { background: var(--cmp-blanc); padding: clamp(40px, 6vw, 90px) 0 clamp(20px, 3vw, 40px); }
.exp-intro__txt {
	font-family: var(--cmp-font-display); font-weight: 500;
	font-size: clamp(1.4rem, 2.4vw, 1.875rem); line-height: 1.3;
	color: var(--cmp-anthracite); max-width: 760px; margin: 0;
}
.exp-intro__txt strong { font-weight: 800; }

/* --------------------------------------------------- ACCORDÉON compétences
   Réutilise le système d'onglets de l'accueil (.home-tabs/.home-tab :
   empilement bords fusionnés, pleine largeur, transitions d'ouverture).
   Ici SANS pastille « Voir » → on rétablit un curseur pointer (l'accueil met
   cursor:none en attendant la pastille). */
.exp-acc { background: var(--cmp-blanc); padding: clamp(30px, 4vw, 56px) 0; position: relative; }

/* Badge "Nouveau" à côté du titre d'un onglet compétence. */
.exp-acc .home-tab__badge { display: inline-flex; align-items: center; align-self: center; font-family: var(--cmp-font-text); font-weight: 700; font-size: .72rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--cmp-blanc); background: var(--cmp-primary); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }

/* TEXTE SOUS LE TITRE (pages expertise uniquement — expertise.css ne charge
   que sur is_page). Layout vertical à TOUTES les largeurs : en-tête (titre) puis
   description dessous. Panneau fermé REPLIÉ (display:none → pas de blanc résiduel),
   ouvert en colonne pleine largeur. */
.exp-acc .home-tabs--exp .home-tab__inner { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); }
.exp-acc .home-tabs--exp .home-tab__panel { display: none; opacity: 1; visibility: visible; flex-direction: column; align-items: flex-start; }
.exp-acc .home-tabs--exp .home-tab.is-open .home-tab__panel { display: flex; }
.exp-acc .home-tabs--exp .home-tab__text { max-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.exp-acc .home-tab__dl { margin-top: 4px; }
/* Toggle visible sur les fermés (affordance), masqué à l'ouverture. */
.exp-acc .home-tabs--exp .home-tab__toggle { display: inline-flex; opacity: 1; pointer-events: none; }
.exp-acc .home-tabs--exp .home-tab.is-open .home-tab__toggle { opacity: 0; }

/* MOBILE : conserver l'empilement « intercalaires » (comme desktop). La media
   query mobile de home.css (max-width:900px) aplatit TOUS les .home-tab
   (margin-top:-1px, min-height:0) → l'effet disparaît. On le restaure pour
   l'accordéon expertise (spécificité .exp-acc .home-tabs--exp .home-tab plus forte). */
@media (max-width: 900px) {
	.exp-acc .home-tabs--exp .home-tab { min-height: 120px; margin-top: -22px; border-radius: 22px 22px 0 0; box-shadow: 0 -8px 20px rgba(36, 36, 36, .05); }
	.exp-acc .home-tabs--exp .home-tab:first-child { margin-top: 0; box-shadow: none; }
	.exp-acc .home-tabs--exp .home-tab:last-child { border-radius: 22px; }
	.exp-acc .home-tabs--exp .home-tab.is-open { min-height: 0; }
	/* Réserve la place du toggle (rond flèche, absolute à droite ~50px + gouttière)
	   pour que les titres longs sur 2 lignes ne passent pas SOUS la flèche. */
	.exp-acc .home-tabs--exp .home-tab__inner { padding-right: 84px; }
	/* Titres longs (« SEO : Optimisation du référencement », « Campagnes Meta & réseaux
	   sociaux ») : autoriser le retour à la ligne + réduire la taille → plus de
	   chevauchement avec le bouton rond ni de débordement horizontal. */
	.exp-acc .home-tabs--exp .home-tab__label { white-space: normal; font-size: clamp(1.15rem, 4.4vw, 1.55rem); line-height: 1.25; }
}

/* PASTILLE « VOIR » qui suit le curseur au survol (réactivée). Le cursor:none de
   home.css (.home-tabs:hover) s'applique → la pastille remplace le curseur.
   Spécificité renforcée (.exp-acc) car la pastille est enfant de .exp-acc (pas
   de .home-expertises ici). */
.exp-acc .home-tabs__cursor { position: fixed; top: 0; left: 0; z-index: 120; pointer-events: none; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.exp-acc .home-tabs__cursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.exp-acc .home-tabs__cursor img { display: block; width: 83px; height: 83px; }

/* ------------------------------------------------- BANDEAU bleu "bonnes mains" */
.exp-hands { background: var(--cmp-primary); color: var(--cmp-blanc); text-align: center; padding: clamp(72px, 9vw, 120px) 0; }
.exp-hands__title { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.44rem); line-height: 1.2; color: var(--cmp-blanc); margin: 0 auto 18px; max-width: 960px; }
.exp-hands__title strong { font-weight: 800; }
.exp-hands__sub { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.875rem); line-height: 1.3; color: var(--cmp-blanc); margin: 0 auto 34px; max-width: 980px; }

/* ----------------------------------------------------------------- PROJETS
   Réutilise le carrousel de l'accueil (.home-projets/.home-slider). */
.exp-projets { background: #fff; }

/* --------------------------------------------------- TYPES (titre_services) */
.exp-types { background: var(--cmp-blanc); padding: clamp(60px, 8vw, 100px) 0; }
.exp-types__title { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 1.875rem); line-height: 1.3; color: var(--cmp-anthracite); max-width: 760px; margin: 0 0 clamp(32px, 4vw, 48px); }
.exp-types__title strong { font-weight: 800; }
.exp-types__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.6vw, 20px); }
.exp-type { background: #fff; border-radius: 15px; padding: clamp(28px, 2.6vw, 38px); box-shadow: 0 4px 30px rgba(232, 232, 232, .25); transition: background-color .6s ease, box-shadow .6s ease; }
.exp-type--primary { background: var(--cmp-primary); box-shadow: 0 14px 34px rgba(58, 49, 255, .28); }
.exp-type__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
/* Icône bi-état : 2 pastilles empilées (idle = bleue / active = blanche), crossfade
   au rythme de la rotation du fond bleu (cf. initTypesCycle, home.js). */
.exp-type__ico { flex: none; width: 50px; height: 50px; position: relative; }
.exp-type__ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s ease; }
.exp-type__ico-active { opacity: 0; }
.exp-type--primary .exp-type__ico-idle { opacity: 0; }
.exp-type--primary .exp-type__ico-active { opacity: 1; }
.exp-type__name { font-family: var(--cmp-font-display); font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; color: var(--cmp-anthracite); margin: 0; transition: color .6s ease; }
.exp-type--primary .exp-type__name { color: var(--cmp-blanc); }
.exp-type__txt { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; color: var(--cmp-grey); margin: 0; transition: color .6s ease; }
.exp-type--primary .exp-type__txt { color: var(--cmp-blanc); }

/* ----------------------------------------------------- EXPERTS / ÉQUIPE bleu */
.exp-team { background: var(--cmp-primary); color: var(--cmp-blanc); text-align: center; padding: clamp(72px, 9vw, 120px) 0; }
.exp-team__inner { display: flex; flex-direction: column; align-items: center; }
.exp-team__title { font-family: var(--cmp-font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 1.875rem); line-height: 1.3; color: var(--cmp-blanc); max-width: 640px; margin: 0 0 24px; }
.exp-team__title strong { font-weight: 800; }
.exp-team__txt { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; color: var(--cmp-blanc); max-width: 888px; margin: 0 0 30px; }
.exp-team__txt p { margin: 0 0 1em; }
.exp-team__txt p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------- SEO */
.exp-seo { background: #fff; padding: clamp(60px, 8vw, 100px) 0; }
/* Bloc SEO à hauteur fixe avec ascenseur (scroll interne). */
.exp-seo__box {
	max-width: 1063px;
	margin: 0 auto;
	max-height: clamp(360px, 52vh, 560px);
	overflow-y: auto;
	padding-right: clamp(14px, 2vw, 26px);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--cmp-primary) rgba(36, 36, 36, .08);
}
.exp-seo__box:focus-visible { outline: 2px solid var(--cmp-primary); outline-offset: 4px; }
.exp-seo__box::-webkit-scrollbar { width: 8px; }
.exp-seo__box::-webkit-scrollbar-track { background: rgba(36, 36, 36, .08); border-radius: 999px; }
.exp-seo__box::-webkit-scrollbar-thumb { background: var(--cmp-primary); border-radius: 999px; }
.exp-seo__box::-webkit-scrollbar-thumb:hover { background: var(--cmp-primary-dark); }
.exp-seo__rte { max-width: 1000px; margin: 0 auto; }
.exp-seo__rte h2 { font-family: var(--cmp-font-display); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.3; color: var(--cmp-anthracite); margin: clamp(28px, 4vw, 48px) 0 18px; }
.exp-seo__rte h2:first-child { margin-top: 0; }
.exp-seo__rte p { font-family: var(--cmp-font-body); font-weight: 600; font-size: 1.125rem; line-height: 1.6; color: var(--cmp-grey); margin: 0 0 1em; }
.exp-seo__rte a { color: var(--cmp-primary); text-decoration: underline; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 980px) {
	.exp-dp__grid, .exp-types__grid { grid-template-columns: 1fr; }
	.exp-dp__card { min-height: 0; }
}
@media (max-width: 700px) {
	.exp-hero__bar { width: 60px; }
}