/* ------------------------------------------------------------------
   Widget « Mission & Vision AXEK » — 6LEX (https://6lex.co)

   Une carte qui ne montre qu'un volet à la fois. Les intitulés sont
   EN HAUT et forment un interrupteur : un seul bloc arrondi, un
   curseur qui se cale sur le libellé actif. C'est le curseur qui fait
   la différence entre « deux liens » et « un bouton à bascule ».

   HAUTEUR FIGÉE : les volets sont empilés au même endroit, donc la
   carte se cale sur le plus long et ne saute pas d'un volet à l'autre.

   AUCUNE ANIMATION — ni ici ni dans le JS. Le curseur et le contenu
   changent d'un coup. Ne pas ajouter de `transition`.

   L'ambiance est une CLASSE posée sur le wrapper par Elementor
   (`prefix_class`), comme pour la bande CTA — une seule mécanique,
   et le changement se voit dans l'éditeur sans nouveau rendu.

   Les ambiances sombres reprennent AU CARACTÈRE PRÈS le fond de la
   bande CTA (dégradé radial depuis le haut + halo + grain). Si ce
   widget change, c'est ici qu'il faut reporter.
   ------------------------------------------------------------------ */

.axek-mv, .axek-mv *, .axek-mv *::before, .axek-mv *::after{ box-sizing: border-box; }

.axek-mv{
	--mv-radius: 24px;
	--mv-pad: 56px;
	--mv-switch-gap: 40px;
	--mv-para-gap: 20px;
	--mv-mesure: 52ch;

	--mv-curseur-force: 1.5;

	--mv-cite-w: 132px;
	--mv-cite-top: 34px;
	--mv-cite-right: 36px;
	--mv-cite-op: .16;

	position: relative; isolation: isolate; overflow: hidden;
	border-radius: var(--mv-radius);
	padding: var(--mv-pad);
	display: flex; flex-direction: column;
}
.axek-mv > *{ position: relative; z-index: 2; }

/* Halo et grain : sur les ambiances SOMBRES seulement. Sur un fond
   clair ils saliraient au lieu de creuser. */
.axek-mvamb-terra .axek-mv::before, .axek-mvamb-terra .axek-mv::after,
.axek-mvamb-nuit  .axek-mv::before, .axek-mvamb-nuit  .axek-mv::after{
	content: ""; position: absolute; inset: 0; pointer-events: none;
}
.axek-mvamb-terra .axek-mv::before,
.axek-mvamb-nuit  .axek-mv::before{ z-index: 0; }
.axek-mvamb-terra .axek-mv::after,
.axek-mvamb-nuit  .axek-mv::after{
	z-index: 1; opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- ambiance TERRACOTTA (recette cta--terra) ---------- */
.axek-mvamb-terra .axek-mv{
	color: #fff;
	background: radial-gradient(120% 130% at 50% 0%, var(--ax-terra-halo), var(--ax-terra) 45%, var(--ax-terra-fond) 100%);
}
.axek-mvamb-terra .axek-mv::before{ background: radial-gradient(60% 60% at 50% 0%, rgba(255,158,92,.30), transparent 62%); }
.axek-mvamb-terra .axek-mv-switch{ background: rgba(0,0,0,.26); }
.axek-mvamb-terra .axek-mv-opt{ color: rgba(255,255,255,.64); }
.axek-mvamb-terra .axek-mv-opt[aria-selected="true"]{ color: #fff; font-weight: 600; }

/* ---------- ambiance BLEU NUIT (recette cta--bleu) ---------- */
.axek-mvamb-nuit .axek-mv{
	color: #fff;
	background: radial-gradient(120% 130% at 50% 0%, var(--ax-nuit-halo), var(--ax-nuit) 45%, var(--ax-nuit-fond) 100%);
}
.axek-mvamb-nuit .axek-mv::before{ background: radial-gradient(60% 60% at 50% 0%, rgba(126,96,255,.32), transparent 62%); }
.axek-mvamb-nuit .axek-mv-switch{ background: rgba(0,0,0,.26); }
.axek-mvamb-nuit .axek-mv-opt{ color: rgba(255,255,255,.62); }
.axek-mvamb-nuit .axek-mv-opt[aria-selected="true"]{ color: #fff; font-weight: 600; }

/* ---------- ambiance CLAIRE ---------- */
/* Ni halo ni grain : les deux règles plus haut ne visent que les deux
   ambiances sombres, celle-ci n'est donc jamais concernée. */
.axek-mvamb-gris .axek-mv{
	color: var(--ax-encre);
	background: var(--ax-surface);
	/* Même modèle qu'en sombre : la piste est un voile NOIR sur la carte,
	   pas une couleur à part — le curseur peut donc l'annuler de la même
	   façon. Un fond clair supporte moins de voile : 7 % suffisent. */
	--mv-curseur-force: 1.1;
}
.axek-mvamb-gris .axek-mv-switch{ background: rgba(0,0,0,.07); }
/* 5C646F sur la piste = 5,1:1 ; le gris clair de la DA (var(--ax-texte-tenu))
   tombait à 2,4:1, trop faible même pour un texte en retrait. */
.axek-mvamb-gris .axek-mv-opt{ color: var(--ax-texte-doux); }
.axek-mvamb-gris .axek-mv-opt[aria-selected="true"]{ color: var(--ax-encre); font-weight: 600; }
.axek-mvamb-gris .axek-mv-cite{ color: rgba(24,30,21,.10); }
.axek-mvamb-gris .axek-mv-volet p + p{ color: var(--ax-texte-doux); }

/* ---------- l'interrupteur ---------- */
.axek-mv-switch{
	position: relative; display: inline-flex; align-self: flex-start;
	padding: 5px; border-radius: 100px;
	margin: 0 0 var(--mv-switch-gap);
	max-width: 100%;
}
/* Le curseur est posé DERRIÈRE les libellés : c'est lui qui donne la
   sensation d'un bouton à bascule. Sa position est calculée en JS
   (les libellés n'ont pas la même largeur) ; sans JS, il reste calé
   sur le premier, qui est justement celui affiché.

   IL N'A AUCUNE COULEUR — et c'est tout l'intérêt. La piste assombrit
   la carte ; le curseur annule cet assombrissement, donc c'est la
   CARTE qu'on voit à travers, dégradé compris. Un aplat, lui, ne peut
   pas suivre un dégradé : il serait juste à l'endroit où on l'a réglé
   et faux partout ailleurs.

   La piste laisse passer 74 % de la carte (noir à 26 %) : ×1,35 la
   restitue exactement, ×1,5 la fait légèrement remonter. */
/* SUR FOND CLAIR, ÉCLAIRCIR NE FAIT RIEN.
   Le curseur repose sur un `backdrop-filter: brightness()` : il éclaircit
   ce qui passe derrière lui. Le geste marche sur une carte sombre, mais sur
   un fond clair il n'y a plus rien à éclaircir, et l'onglet actif devient
   invisible. On pose donc un aplat sous le filtre : sur clair il porte
   seul, sur sombre le filtre le recouvre. */
.axek-mv-curseur{
	position: absolute; top: 5px; bottom: 5px; left: 5px;
	border-radius: 100px; z-index: 0;
	background: var(--ax-surface);
	-webkit-backdrop-filter: brightness(var(--mv-curseur-force));
	        backdrop-filter: brightness(var(--mv-curseur-force));
}
/* Ambiances sombres : le filtre fait le travail, l'aplat clair le gênerait. */
.axek-mvamb-terra .axek-mv-curseur,
.axek-mvamb-nuit  .axek-mv-curseur{ background: transparent; }
.axek-mv-opt{
	position: relative; z-index: 1;
	appearance: none; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: var(--ax-second); font-weight: 500; line-height: 1;
	padding: 11px 22px; border-radius: 100px; white-space: nowrap;
	color: inherit;
}
.axek-mv-opt:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }

/* Navigateur sans backdrop-filter : on retombe sur un aplat proche de
   la carte. Moins juste sur le dégradé, mais jamais du blanc. */
@supports not ((backdrop-filter: brightness(1.5)) or (-webkit-backdrop-filter: brightness(1.5))){
	/* Le curseur reprend le halo de la marque, pas une teinte voisine
	   inventée : #B4491A et #2314B4 tombaient entre la couleur pleine et
	   son halo, sans raison. */
	.axek-mvamb-terra .axek-mv-curseur{ background: var(--ax-terra-halo); }
	.axek-mvamb-nuit  .axek-mv-curseur{ background: var(--ax-nuit-halo); }
	.axek-mvamb-gris  .axek-mv-curseur{ background: var(--ax-surface); }
}

/* ---------- volets ---------- */
.axek-mv-volets{ display: grid; }
.axek-mv-volet{ grid-area: 1 / 1; margin: 0; visibility: hidden; }
.axek-mv-volet[data-actif="1"]{ visibility: visible; }

.axek-mv-volet p{
	margin: 0 0 var(--mv-para-gap);
	/* Fluide : le contrôle Typographie passe devant s'il est réglé. */
	font-size: clamp(var(--ax-chapo), 1.85vw, var(--ax-bloc));
	font-weight: 500; line-height: 1.5;
	max-width: var(--mv-mesure); text-wrap: pretty;
}
.axek-mv-volet p:last-child{ margin-bottom: 0; }
.axek-mvamb-terra .axek-mv-volet p + p,
.axek-mvamb-nuit  .axek-mv-volet p + p{ color: rgba(255,255,255,.80); }

/* ---------- guillemet en filigrane ---------- */
/* Tracé propre à AXEK, embarqué dans le rendu : il ne dépend d'aucune
   police, donc il aura la même forme quelle que soit la fonte du site. */
.axek-mv-cite{
	position: absolute; z-index: 1;
	top: var(--mv-cite-top); right: var(--mv-cite-right);
	width: var(--mv-cite-w);
	pointer-events: none; user-select: none;
	color: rgba(255,255,255,var(--mv-cite-op));
}
.axek-mv-cite svg{ display: block; width: 100%; height: auto; fill: currentColor; }

/* ---------- responsive ----------
   Les TAILLES passent par les contrôles « par appareil ». Le bloc
   ci-dessous ne touche que la disposition, qu'aucun contrôle n'écrit. */
@media (max-width: 600px){
	/* Deux intitulés de plus de vingt caractères ne tiennent pas côte à
	   côte sur un téléphone : l'interrupteur défile plutôt que de se
	   casser en deux lignes. */
	.axek-mv-switch{ overflow-x: auto; scrollbar-width: none; }
	.axek-mv-switch::-webkit-scrollbar{ display: none; }
}