/* ==========================================================================
   Composants partagés : en-tête de section, cartes, slider, onglets,
   barre et panneau de recherche, indicateurs, logos clients.
   Référence : spécifications Adobe XD (Accueil).
   ========================================================================== */

/* ---------- En-tête de section ---------- */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: clamp(32px, 4.1vw, 78px);
}
.section-head__titles { max-width: 900px; }
.section-head__actions { display: flex; align-items: center; gap: clamp(24px, 2.4vw, 46px); }

.see-all { position: relative; display: block; width: clamp(28px, 1.84vw, 35px); color: var(--c-text-strong); transition: color .2s; }
/* État survol XD : libellé « Tout voir » (Medium 16px) sous le pictogramme */
.see-all__label {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	font-size: var(--fs-16);
	font-weight: 500;
	letter-spacing: .046em;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--c-text);
	opacity: 0;
	transform: translate(-50%, -4px);
	transition: opacity .3s ease-out, transform .3s ease-out;
	pointer-events: none;
}
.see-all:hover .see-all__label,
.see-all:focus-visible .see-all__label { opacity: 1; transform: translate(-50%, 0); }
.see-all:hover { color: var(--c-green); }
.see-all svg { width: 100%; height: auto; }

/* ---------- Lien « En savoir + » (Regular 22px #5F5F5F à 80 % + rond vert 34px, texte vert au survol) ---------- */
.more-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--fs-22);
	line-height: 1.23;
	color: color-mix(in srgb, var(--c-text-strong) 80%, transparent);
	transition: color .2s;
}
.more-link:hover { color: var(--c-green); }
.more-link__icon {
	position: relative;
	flex: none;
	width: clamp(28px, 1.77vw, 34px);
	aspect-ratio: 1;
	border: 1px solid var(--c-green);
	border-radius: 50%;
	color: var(--c-text);
}
/* « + » dessiné en CSS : le glyphe de la police n'est jamais centré pile dans le rond */
.more-link__icon::before,
.more-link__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36%;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
}
.more-link__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ---------- Onglets de filtre (Bold 20px : actif #333, inactif #989595) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px clamp(20px, 2.3vw, 44px); }
.tabs__item {
	padding-block: 4px;
	font-size: var(--fs-20);
	font-weight: 700;
	color: var(--c-tab);
	transition: color .2s;
}
.tabs__item:hover { color: var(--c-green); }
.tabs__item.is-active { color: var(--c-heading); }

/* ---------- Cartes (452 x 429 : bloc texte #F4F4F4 + image 250px N&B, couleur au survol) ---------- */
/* Largeur : un nombre entier de cartes remplit le conteneur (--cards-per-view, voir le slider), aucune ne dépasse à droite */
.card { flex: none; width: calc((100% - (var(--cards-per-view) - 1) * var(--slider-gap)) / var(--cards-per-view)); }
.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	color: var(--c-text);
}
a.card__link:hover { color: var(--c-text); }
.card__body {
	flex: 1;
	min-height: clamp(150px, 9.3vw, 179px);
	padding: 16px clamp(18px, 1.56vw, 30px) 20px;
	background: var(--c-card, var(--c-bg-alt));
}
.card__title { margin-bottom: 2px; font-size: var(--fs-18); font-weight: 700; line-height: 1.28; color: var(--c-text); }
.card__text { font-size: var(--fs-16); line-height: 1.25; }
/* Cartes actualité : type d'événement en vert au-dessus du titre, à la taille du texte de la carte (pas les 22px des sur-titres de section) */
.card__eyebrow { margin-bottom: 4px; font-size: var(--fs-16); line-height: 1.25; }
.card__media {
	position: relative;
	aspect-ratio: 452 / 250;
	overflow: hidden;
	background: linear-gradient(135deg, #d9d9d9, #bdbdbd);
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter .3s ease-out, transform .5s var(--ease);
}
.card:hover .card__media img,
.card:focus-within .card__media img { filter: none; transform: scale(1.03); }

.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 6px; font-size: var(--fs-15); }
/* XD : seule l'icône de date est verte, les suivantes (horaire, lieu, prix) sont gris foncé. */
.card__meta svg { width: 16px; height: 16px; flex: none; color: var(--c-text-strong); }
.card__meta--dates svg { width: 15px; height: 12px; color: var(--c-green); }
.card__meta--dates { gap: 4px 14px; font-weight: 700; }
/* Retour client : dates sans soulignement vert */
.card__meta-item { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Carte témoignage (452 x 450 : logo N&B sur 250px, couleur au survol, textes 18/16px) ---------- */
.temoignage__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--c-bg);
	color: var(--c-text);
}
.temoignage__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 230px; /* retour client du 03/11/2026 (avant : ratio 452 / 250) */
	padding: 6% 11%;
}
.temoignage__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	transition: filter .3s ease-out, transform .5s var(--ease);
}
.temoignage:hover .temoignage__media img { filter: none; transform: scale(1.04); }
.temoignage__body { flex: 1; padding: clamp(14px, 1.25vw, 24px) clamp(18px, 1.56vw, 30px) clamp(18px, 1.2vw, 23px); }
.temoignage__org { font-size: var(--fs-18); font-weight: 700; line-height: 1.17; color: var(--c-text); }
/* Retour client du 03/11/2026 : 2 lignes au plus, puis « … » (le nom complet reste dans le HTML et en infobulle) */
.temoignage__org { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Retour client du 03/11/2026 : témoignages 4 > 1440px, 3 jusqu'à 1025px, 2 dès 1024px, puis 1 (règle commune ≤ 568px) */
@media (max-width: 1440px) and (min-width: 1025px) {
	.temoignages .slider { --cards-per-view: 3; }
}
@media (max-width: 1024px) and (min-width: 569px) {
	.temoignages .slider { --cards-per-view: 2; }
}
.temoignage__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: clamp(6px, .5vw, 10px) 16px; /* espace vertical entre la formation et la date (retour client du 03/11/2026) */
	margin-top: clamp(4px, .4vw, 7px);
	font-size: var(--fs-16);
	line-height: 1.44;
}
.temoignage__formation { font-weight: 700; color: var(--c-green); }
/* Retour client du 03/11/2026 : la date passe toujours à la ligne, calée à droite */
.temoignage__date { flex-basis: 100%; text-align: right; }
.temoignage__quote { margin: clamp(6px, .6vw, 12px) 0 0; font-size: var(--fs-16); font-style: italic; line-height: 1.44; }
/* Retour client du 03/11/2026 : citation limitée à 5 lignes, puis « … » (texte complet conservé dans le HTML) */
.temoignage__quote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; margin: 0; text-align: justify; hyphens: auto; } /* justifié (retour client du 05/11/2026) ; césure pour éviter les grands blancs */
/* Mode sombre : les logos sombres restent lisibles sur une zone claire */
[data-theme="dark"] .temoignage__media { background: rgb(255 255 255 / .92); }

/* ---------- Carte formation (452 x 450 : image 250px + niveau, titre et résumé 18/16px, méta sur 2 lignes) ---------- */
.card--formation .card__link { background: var(--c-card, var(--c-bg-alt)); }
.card--formation .card__body {
	display: flex;
	flex-direction: column;
	min-height: clamp(170px, 10.4vw, 200px);
	padding: clamp(14px, 1.2vw, 23px) clamp(18px, 1.56vw, 30px) clamp(8px, .5vw, 9px);
	background: none;
}
.card--formation .card__title { margin-bottom: 5px; }
/* Résumé coupé à 3 lignes (« … » de la maquette) */
.card--formation .card__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	line-height: 1.44;
	text-align: justify; /* retour client du 10/11/2026 : résumé justifié */
}
/* Bas de carte, une information par ligne (retour client du 28/10/2026, maquette du client) :
   techno calée à droite (passe sur plusieurs lignes si elle est longue), thématique en gras à gauche,
   puis lieu à gauche et durée à droite sur la même ligne (la durée descend en dessous si la place manque).
   Évite le chevauchement des libellés longs (« SIG Web / Server », « Techno Open Source ») de l'ancienne grille à 2 colonnes. */
.card__foot {
	display: grid;
	margin-top: auto;
	padding-top: 16px;
	font-size: var(--fs-16);
	line-height: 1.44;
}
.card__foot > :empty,
.card__foot-row > :empty { display: none; }
.card__foot-techno { text-align: right; }
/* Lieu | durée sur une ligne ; si la place manque, la durée passe en dessous, calée à droite */
.card__foot-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.card__foot-duree { margin-left: auto; text-align: right; }

/* Niveau : étiquette verte 36px en bas à droite de l'image, barres blanches */
.level {
	position: absolute;
	right: clamp(6px, .52vw, 10px);
	bottom: clamp(6px, .52vw, 10px);
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: clamp(28px, 1.88vw, 36px);
	padding: 0 9px;
	background: color-mix(in srgb, var(--c-green) 90%, transparent); /* XD : vert à 90 % */
	color: #fff;
	font-size: var(--fs-16);
	font-weight: 700;
}
.level__icon { flex: none; width: clamp(16px, 1.07vw, 20.6px); height: auto; overflow: visible; }
/* EN STAND-BY (retour client du 10/11/2026) : encadré vert du niveau masqué sur les cartes formation. Pour le réafficher, supprimer cette ligne. */
.card--formation .level { display: none; }

/* ---------- Accordéon (FAQ, programme) : lignes de 61px séparées par un filet #DBDBDB de 2px,
              Bold 22px, triangle vert 27px ; survol XD : fond vert à 21 % ; réponse Regular 18px ---------- */
.accordion { --accordion-line: #dbdbdb; border-top: 2px solid var(--accordion-line); }
[data-theme="dark"] .accordion { --accordion-line: var(--c-border); }
.accordion__item { border-bottom: 2px solid var(--accordion-line); }
.accordion__summary {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 23px);
	min-height: clamp(48px, 3.2vw, 61px);
	padding: 10px clamp(6px, .63vw, 12px);
	font-size: var(--fs-22);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text);
	list-style: none;
	transition: background-color .3s ease-out;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::before {
	content: "";
	flex: none;
	width: clamp(18px, 1.41vw, 27px);
	aspect-ratio: 27 / 15;
	background: var(--c-green);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transition: transform .3s var(--ease);
}
.accordion__title { font: inherit; color: inherit; } /* intitulé en Hn (FAQ) : même rendu que le texte simple */
summary.accordion__summary { cursor: pointer; }
summary.accordion__summary:hover { background: color-mix(in srgb, var(--c-green) 21%, transparent); }
.accordion__item[open] > .accordion__summary::before { transform: rotate(180deg); }
.accordion__content {
	padding: 0 clamp(6px, .63vw, 12px) clamp(18px, 1.3vw, 25px) calc(clamp(6px, .63vw, 12px) + clamp(18px, 1.41vw, 27px) + clamp(12px, 1.2vw, 23px));
	font-size: var(--fs-18);
	line-height: 1.22;
}

/* ---------- Slider (défilement natif + flèches + glisser à la souris) ----------
   Retour client : comme les sliders d'arxit.com (Swiper), les cartes restent dans le conteneur
   (4 / 3 / 2 / 1 visibles selon la largeur, jamais de carte coupée qui « dégouline » à droite)
   et la rangée se déplace en la saisissant à la souris (main.js). */
.slider {
	--cards-per-view: 4;
	--slider-gap: clamp(16px, 2.1vw, 41px);
	position: relative;
}
.slider__track {
	display: flex;
	gap: var(--slider-gap);
	margin: 0;
	padding: 0 0 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	cursor: grab;
}
/* Pendant le glisser : pas d'aimantation (la rangée suit la souris), pas de sélection de texte */
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.slider__track.is-dragging * { pointer-events: none; }
.slider__track img { -webkit-user-drag: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
/* Le dernier élément ne peut pas s'aligner à gauche : on l'aligne à droite, sinon le snap bloque la fin du défilement */
.slider__track > :last-child { scroll-snap-align: end; }
.slider__track > [hidden] { display: none; }

/* Ronds blancs 86px avec ombre #00000029 */
.slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(44px, 4.5vw, 86px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff;
	color: var(--c-text);
	box-shadow: var(--shadow);
	transform: translateY(-50%);
	transition: opacity .2s, color .2s;
}
.slider__arrow:hover { color: var(--c-green); }
.slider__arrow svg { width: 38%; height: auto; }
.slider__arrow--prev { left: calc(var(--gutter) * -1 + clamp(8px, 1.4vw, 27px)); }
.slider__arrow--prev svg { transform: scaleX(-1); }
.slider__arrow--next { right: calc(var(--gutter) * -1 + clamp(8px, 1.5vw, 30px)); }
.slider__arrow[disabled] { opacity: 0; pointer-events: none; }

/* ---------- Carrousel automatique en boucle (main.js [data-carousel]) ---------- */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; touch-action: pan-y; }
.carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	transition: transform .8s var(--ease);
	will-change: transform;
}
.carousel__slide { flex: 0 0 100%; overflow: hidden; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* Léger zoom arrière sur l'image active : le visuel « respire » pendant qu'il est affiché */
.js .carousel__slide img { transform: scale(1.08); transition: transform 5s ease-out; }
.js .carousel__slide.is-active img { transform: none; }

/* ---------- Barre de recherche (575 x 66, texte Bold 24px #5F5F5F, vert au survol) ---------- */
.search-pill {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 575px;
	height: clamp(50px, 3.44vw, 66px);
	padding: 5px;
	border-radius: var(--radius-pill);
	background: #fff;
	box-shadow: var(--shadow);
	transition: background-color .3s ease-out;
}
.search-pill__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 16px 0 clamp(16px, 1.46vw, 28px);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--fs-24);
	font-weight: 700;
	color: var(--c-text-strong);
	outline: none;
	transition: color .3s ease-out;
}
.search-pill__input::placeholder { color: rgb(95 95 95 / .91); opacity: 1; transition: color .3s ease-out; }
.search-pill__input::-webkit-search-cancel-button { display: none; }
.search-pill__submit {
	display: grid;
	place-items: center;
	flex: none;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-green);
	color: #fff;
	transition: background-color .3s ease-out, color .3s ease-out;
}
.search-pill__submit svg { width: 50%; height: auto; }

/* État survol XD : pilule verte, texte blanc */
.search-pill:hover { background: var(--c-green); }
.search-pill:hover .search-pill__input,
.search-pill:hover .search-pill__input::placeholder { color: #fff; }
.search-pill:hover .search-pill__submit { background: #fff; color: var(--c-green); }
/* État ouvert (bascule) : on revient au blanc pour la saisie */
.is-open .search-pill { background: #fff; }
.is-open .search-pill .search-pill__input { color: var(--c-text-strong); }
.is-open .search-pill .search-pill__input::placeholder { color: rgb(95 95 95 / .91); }
.is-open .search-pill .search-pill__submit { background: var(--c-green); color: #fff; }

/* ---------- Panneau de recherche (1748 x 633, colonnes de liens) ---------- */
.search-panel {
	padding: clamp(24px, 1.6vw, 30px) clamp(20px, 1.6vw, 30px) clamp(24px, 1.6vw, 30px);
	border-radius: clamp(16px, 1.6vw, 30px);
	background: #fff;
	box-shadow: 0 10px 40px rgb(0 0 0 / .12);
	animation: panel-in .3s ease-out;
}
.search-panel[hidden] { display: none; }
@keyframes panel-in {
	from { opacity: 0; transform: translateY(-10px); }
	to   { opacity: 1; transform: none; }
}
.search-panel__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px clamp(16px, 1.6vw, 30px);
}
.search-panel__title {
	margin-bottom: 6px;
	font-size: clamp(12px, .78vw, 15px);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--c-green);
}
.search-panel__list { margin: 0; padding: 0; list-style: none; }
.search-panel__list li { border-bottom: 1px solid #e6e6e6; }
.search-panel__list li:last-child { border-bottom: 0; }
.search-panel__list a {
	display: block;
	padding: clamp(6px, .55vw, 10px) 0;
	font-size: var(--fs-16);
	line-height: 1.2;
	color: var(--c-text);
	transition: color .2s, padding-left .2s var(--ease);
}
.search-panel__list a:hover,
.search-panel__list a:focus-visible { color: var(--c-green); padding-left: 4px; }

/* ---------- Indicateurs (photo ronde 280px + secteur vert 406px) ---------- */
.indicateurs__list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 24px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.indicateur {
	position: relative;
	flex: 0 1 406px;
	aspect-ratio: 1;
	min-width: 0;
}
.indicateur__visual { width: 100%; height: 100%; overflow: visible; }
.indicateur__photo-bg { fill: #6f6f6f; }
.indicateur__sector-in { fill: var(--c-green-soft); opacity: .78; }
.indicateur__sector-out { fill: var(--c-green-soft); }
.indicateur__content {
	position: absolute;
	top: 60%;   /* XD : le bloc blanc est sous le centre de la photo */
	left: 50%;
	display: grid;
	justify-items: start;
	color: #fff;
	text-shadow: 0 1px 8px rgb(0 0 0 / .15);
}
.indicateur__value { font-size: clamp(26px, 2.8vw, 53px); font-weight: 700; line-height: 1; }
.indicateur__label { max-width: 7.5em; margin-top: 4px; font-size: var(--fs-15); font-weight: 700; line-height: 1.2; }

/* Animation : le secteur se déploie depuis le centre */
.js .indicateur__sector { transform: scale(.6) rotate(-40deg); opacity: 0; transition: transform 1s var(--ease), opacity .6s; }
.js .indicateurs.is-visible .indicateur__sector { transform: none; opacity: 1; }
.js .indicateurs.is-visible .indicateur:nth-child(2) .indicateur__sector { transition-delay: .12s; }
.js .indicateurs.is-visible .indicateur:nth-child(3) .indicateur__sector { transition-delay: .24s; }
.js .indicateurs.is-visible .indicateur:nth-child(4) .indicateur__sector { transition-delay: .36s; }
.js .indicateurs.is-visible .indicateur:nth-child(5) .indicateur__sector { transition-delay: .48s; }
/* Retour client : les chiffres blancs apparaissent une fois le secteur vert déployé (1s + décalage de chaque cercle) */
.js .indicateur__content { opacity: 0; translate: 0 10px; transition: opacity .5s ease-out, translate .5s ease-out; }
.js .indicateurs.is-visible .indicateur__content { opacity: 1; translate: none; transition-delay: .9s; }
.js .indicateurs.is-visible .indicateur:nth-child(2) .indicateur__content { transition-delay: 1.02s; }
.js .indicateurs.is-visible .indicateur:nth-child(3) .indicateur__content { transition-delay: 1.14s; }
.js .indicateurs.is-visible .indicateur:nth-child(4) .indicateur__content { transition-delay: 1.26s; }
.js .indicateurs.is-visible .indicateur:nth-child(5) .indicateur__content { transition-delay: 1.38s; }

/* ---------- Logos clients (N&B, sans cadre) ---------- */
/* 5 logos visibles dans le conteneur, les suivants via les flèches */
.clients-logos { --logos-per-view: 5; --logos-gap: clamp(24px, 3vw, 60px); }
.clients-logos .slider__track {
	align-items: center;
	gap: var(--logos-gap);
	margin: 0;
	padding: 0;
	scroll-padding-inline: 0;
}
.clients-logos__item {
	flex: 0 0 calc((100% - (var(--logos-per-view) - 1) * var(--logos-gap)) / var(--logos-per-view));
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(80px, 6.5vw, 125px);
}
.clients-logos__item a { display: flex; width: 100%; height: 100%; }
.clients-logos__item img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* logo entier, jamais rogné */
	filter: grayscale(1);
	opacity: .85;
	transition: filter .3s, opacity .3s;
}
.clients-logos__item:hover img { filter: none; opacity: 1; }
.clients-logos__name { font-size: var(--fs-20); font-weight: 700; color: var(--c-text-strong); text-align: center; }

/* ---------- Boutons flottants (fiche formation, Approche pédagogique) : pilules blanches 67px à filet #DBDBDB (texte Regular 24px #5F5F5F à 80 %),
              rond vert 58px, fermeture 66px ; ombres XD 0 6px 7.5px et 0 12px 7.5px à 16 % ; bascule en 0,3 s ease-out ---------- */
.fiche-actions {
	position: fixed;
	z-index: 40;
	right: clamp(12px, 2.86vw, 55px);
	bottom: clamp(16px, 3.1vw, 60px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(8px, .63vw, 12px);
	pointer-events: none;
}
.fiche-actions > * { pointer-events: auto; }
.fiche-actions__list { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(8px, .63vw, 12px); }
.fiche-action {
	display: inline-flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 23px);
	height: clamp(48px, 3.5vw, 67px);
	padding: 0 4px 0 clamp(18px, 1.56vw, 30px);
	border-radius: var(--radius-pill);
	border: 1px solid #dbdbdb;
	background: var(--c-bg);
	box-shadow: 0 6px 7.5px var(--c-shadow);
	font-size: var(--fs-24);
	color: color-mix(in srgb, var(--c-text-strong) 80%, transparent);
	transition: background-color .3s ease-out, color .3s ease-out, transform .3s var(--ease), opacity .25s;
}
.fiche-action__icon {
	display: grid;
	place-items: center;
	flex: none;
	height: calc(100% - 8px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c-green);
	color: #fff;
	transition: background-color .3s ease-out, color .3s ease-out;
}
.fiche-action__icon svg { width: 52%; height: auto; }
/* Survol : même bascule que la barre de recherche (pilule verte, rond blanc) */
.fiche-action:hover { border-color: var(--c-green); background: var(--c-green); color: #fff; }
.fiche-action:hover .fiche-action__icon { background: #fff; color: var(--c-green); }

.fiche-actions__toggle {
	position: relative;
	width: clamp(46px, 3.44vw, 66px);
	aspect-ratio: 1;
	border: 1px solid #dbdbdb;
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-text-muted);
	box-shadow: 0 12px 7.5px var(--c-shadow);
	transition: color .2s;
}
.fiche-actions__toggle:hover { color: var(--c-green); }
/* « + » (replié) qui pivote en « × » (ouvert) */
.fiche-actions__toggle::before,
.fiche-actions__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42%;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .3s ease-out;
}
.fiche-actions__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.fiche-actions.is-open .fiche-actions__toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.fiche-actions.is-open .fiche-actions__toggle::after { transform: translate(-50%, -50%) rotate(135deg); }
/* Replié : les pilules glissent vers le rond et ne sont plus atteignables */
.fiche-actions:not(.is-open) .fiche-action { opacity: 0; transform: translateY(12px) scale(.96); }
.fiche-actions:not(.is-open) .fiche-actions__list { visibility: hidden; transition: visibility 0s .3s; }
[data-theme="dark"] :is(.fiche-action, .fiche-actions__toggle) { border-color: var(--c-border); }
@media (max-width: 768px) {
	.fiche-action { font-size: 16px; height: 46px; }
}

@media (max-width: 1140px) {
	.slider { --cards-per-view: 3; }
	/* Libellé « Tout voir » calé sur le bord droit du pictogramme : centré, il dépasserait de l'écran et élargirait la page */
	.see-all__label { left: auto; right: 0; transform: translateY(-4px); }
	.see-all:hover .see-all__label,
	.see-all:focus-visible .see-all__label { transform: none; }
	.search-panel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.clients-logos { --logos-per-view: 4; }
	/* 4 indicateurs sur une ligne, réduits à la largeur disponible */
	.indicateurs__list { gap: 12px; }
	.indicateur { flex: 1 1 0; max-width: 240px; }
	.indicateur__value { font-size: clamp(20px, 2.7vw, 30px); }
	.indicateur__label { font-size: 12px; }
}

@media (max-width: 768px) {
	.section-head { align-items: flex-start; flex-direction: column; }
	/* Onglets sur deux lignes : le carré « voir tout » reste calé sur la première. */
	.section-head__actions { align-items: flex-start; }
	.see-all { margin-top: -2px; }
	/* Sans onglets (25 ans, clients), le carré « voir tout » se cale à droite
	   au lieu de rester sous le titre. */
	.section-head__actions:not(:has(.tabs)) { align-self: flex-end; }
	/* Flèches gardées en mobile : sans elles, on ne devine pas que la rangée défile */
	.slider__arrow { width: 40px; }
	.clients-logos { --logos-per-view: 2; }
	.slider { --cards-per-view: 2; }
	.search-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.indicateurs__list { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
	.indicateur { flex: 0 0 calc(50% - 8px); max-width: 220px; }
	.indicateur__value { font-size: clamp(22px, 6.5vw, 34px); }
	.indicateur__label { font-size: 12px; }
	/* Cercles plus petits mais libellé à taille fixe : on remonte le bloc pour qu'il reste dedans. */
	.indicateur__content { top: 52%; }
}

/* Petit mobile : une carte à la fois */
@media (max-width: 568px) {
	.slider { --cards-per-view: 1; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}