main > section.graphs
{
	margin-top: 0.5em;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	flex: 1 1 auto;
    max-height: var(--max-height-graphs, 50%) !important;
	position : relative;
	overflow: hidden;
   transition: max-height 0.3s ease-in-out;
}
main > section.graphs > * {
  overflow: hidden;
}

main > section.graphs > *
{
	flex: 0 0 auto;
}

/* parent */
main > section.graphs {
  position: relative;
  isolation: isolate;        /* crée un plan : le ::before peut passer derrière */
}

/* cadre "derrière" le contenu, avec marge visuelle sans rétrécir le carousel */
main > section.graphs::before{
  content: "";
  position: absolute;
  inset: 15px;              /* cadre déplacé vers l'extérieur (= souffle visuel) */
  border-radius: 10px;       /* un peu plus grand pour suivre l'inset */
  background-color: #d9d4d4; /* fond sous le contenu, pas dessus */
  box-shadow: 0 0 0 1px #e2e8f0, 0 2px 10px rgba(0,0,0,.04);
  pointer-events: none;
  z-index: -1;               /* <<< derrière l’iframe et les flèches */
}


main > section.graphs > menu
{
	flex: 1 1 auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-self: stretch;
	align-items: center;
	overflow: hidden;
	padding: 0 1em;
	animation : scrollGraphs 10s linear infinite;
}

main> section.graphs.paused > menu 
{
	animation : none;
}




main > section.graphs > menu > li.graph
{
	margin: 0 0.2em;
	border-radius: 0.5em;
	padding: 0 0.2em 0.2em;
	color: lightgray;
	display: none;
	flex-flow: column nowrap;
	align-items: center;
	flex: 0 0 auto;
	order: var(--offset);
	box-sizing: border-box;
	background-color: black;
	border: 1px solid gray;
	box-shadow: 0px 0px 0.5em gray;
}

main > section.graphs > menu > li.graph > label
{
	margin: 0.2em;
}

main > section.graphs > menu > li.graph .iframe-container
{
	flex: 1 1 auto;
	align-self: stretch;
	position: relative;
}

main > section.graphs > menu > li.graph iframe
{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}


main > section.graphs > menu > li.graph:not(.expanded) iframe
{
	pointer-events: none;
	width: 200%;
	height: 200%;
	transform: scale(0.5);
	transform-origin: top left;
}


main > section.graphs > menu > li.graph[data-offset="0"]
{
	display: flex;
	width: 40%;
	height: 90%;
}

main > section.graphs > menu > li.graph[data-offset="1"],
main > section.graphs > menu > li.graph[data-offset="-1"]
{
	display: flex;
	width: 27%;
	height: 75%;
}

main > section.graphs.paused > menu > li.graph[data-offset="0"]
{
	display: flex;
	width: 40%;
	height: 90%;
}
main > section.graphs.paused > menu > li.graph[data-offset="1"], 
main > section.graphs.paused > menu > li.graph[data-offset="-1"] {
    display: flex;
    width: 27%;
    height: 75%;
}


main > section.graphs > menu > li.graph.expanded
{
	width: 100% !important;
    height: 100% !important;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: auto;
	height: auto;
	margin: 0;
	border: 0.1em solid gray;
	border-radius: 0;
	z-index: 100;
}


main > section.graphs button.scroll.previous::after
{
	content : "❬❬❬";
}

main > section.graphs button.scroll.next::after
{
	content : "❭❭❭";
}


main > section.graphs menu > li > button.expand
{
	position: absolute;
	right: 0;
	top: 0;
}

main > section.graphs menu > li > button.expand::after
{
	content: "⤢";
}


main > section.graphs menu > li.graph.expanded button.expand.overlay
{
	display: none;
}
main > section.graphs menu > li button.expand.overlay
{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: auto;
	height: auto;
	opacity: 0;
}
main > section.graphs menu:has(li.graph.expanded) {
  transform: none !important;
}

main > section.graphs menu > li.graph {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

main > section.graphs > menu > li.graph.expanded {
  opacity: 1;
  transform: scale(1);
}

main > section.graphs > menu > li.graph:not(.expanded) {
  opacity: 1;
  transform: scale(1);
}

/* On simule le zoom depuis l’état normal */
main > section.graphs > menu > li.graph.anim-expand {
  transform: scale(1.05);
  opacity: 0.9;
}

main > section.graphs menu > li > button.expand {
  touch-action: manipulation;
}

main > section.graphs menu > li.graph.expanded > button.expand {
  position: fixed;
  z-index: 200; /* au-dessus du graphe */
  top: 1em;
  right: 1em;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  font-size: 2em;
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  touch-action: manipulation;
 pointer-events: auto;
}

/* --- Boutons du carrousel : petits, en bas, cliquables --- */

/* s'assure que la zone graphs est la référence de positionnement */
main > section.graphs {
  position: relative;         /* tu l'as déjà, on le redit ici si besoin */
  isolation: isolate;         /* évite que l'iframe passe au-dessus */
}

/* style commun des flèches */
main > section.graphs button.scroll {
  position: absolute;
  bottom: 10px;               /* en bas de la zone graphs */
  z-index: 10;                /* au-dessus de l'iframe et des décors */
  pointer-events: auto;
  color : black;
  /* taille réduite */
  padding: 1px 5px;           /* padding réduit autour des chevrons */
  line-height: 1;
  font-size: 16px;            /* plus petit */
  height: 24px;               /* compact */
  min-width: 0;               /* pas de largeur minimale imposée */
  border-radius: 8px;         /* coins doux */
}

/* positions gauche/droite */
main > section.graphs button.scroll.previous { left: 12px; }
main > section.graphs button.scroll.next     { right: 12px; }

/* si un style précédent ajoutait une icône via ::before, on le neutralise */
main > section.graphs button.scroll::before { content: none; }

/* tes chevrons via ::after : on garde, on serre un peu l'espacement */
main > section.graphs button.scroll.previous::after,
main > section.graphs button.scroll.next::after {
  font-size: inherit;
  letter-spacing: -1px;
}

/* au cas où le décor de fond recouvrirait encore les boutons */
main > section.graphs::before {
  z-index: -1 !important;     /* derrière le contenu */
  pointer-events: none !important;
}

/* Quand un graphe est élargi, neutralise toute translation du carrousel */
html.graphs-expanded main > section.graphs menu {
  transform: none !important;
  transition: none !important;
}

/* Plein écran robuste pour l'item .graph.expanded */
html.graphs-expanded main > section.graphs .graph.expanded {
  position: fixed;          /* sort du flux et ignore la zone graphs */
  inset: 0;                 /* occupe tout le viewport */
  z-index: 1000;            /* au-dessus du header et du reste */
  margin: 0; padding: 0;
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  background: #fff;         /* fond propre, optionnel */
}

/* L'iframe prend tout l'écran */
html.graphs-expanded main > section.graphs .graph.expanded .iframe-container {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
}
html.graphs-expanded main > section.graphs .graph.expanded iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* (confort) on masque les flèches du carrousel pendant l'expand */
html.graphs-expanded main > section.graphs button.scroll {
  display: none !important;
}

/* (déjà conseillé) la zone graphs sert de plan d'empilement propre */
main > section.graphs { position: relative; isolation: isolate; }



/* ===== Mode "graph à gauche / tickets empilés" : occup. verticale ===== */

/* La grille du main prend tout le viewport pour donner de la hauteur */
html.layout-graph-left-stack-tickets main {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 16px;
  /* si ton header n'est pas fixed, 100svh est OK ; si fixed, tu peux passer à calc(100svh - 64px) */
  min-height: calc(100svh - 64px);
}

/* Colonne gauche : la zone graphs occupe toute la hauteur disponible */
html.layout-graph-left-stack-tickets main > section.graphs {
  grid-column: 1;
  align-self: stretch;  /* s'étire verticalement */
  min-height: 100%;     /* garantit la pleine hauteur de la cellule */
}

/* (optionnel) si tu veux forcer encore plus la hauteur de l'iframe */
/* html.layout-graph-left-stack-tickets main > section.graphs .iframe-container { min-height: 100%; } */