/* ===============================================================
   RESULTS  –  présentation alignée sur les blocs alternés
   =============================================================== */

/* ---------- wrapper général (inchangé) ------------------------ */
.results{
  padding-block-start: calc(var(--space-section) / 2);
  display:flex;
  justify-content:center;
}
.results-grid{
  max-width:1100px;
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;     /* 2 colonnes équivalentes   */
  align-items:center;                /* centrage vertical global  */
  gap:3rem;
}

/* ---------- COLONNE GAUCHE : titre + texte + graphe ---------- */
.graph-display{
  /* mêmes règles que .alt-col -------------------------------- */
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;            /* centrage vertical         */
  text-align:center;
  min-height:380px;                  /* hauteur mini identique    */
}

/* conteneur interne qui reçoit titre + texte + img */
.graph-layer{
  position:static;                   /* plus de position absolue  */
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.3rem;                        /* même espace que .alt-text */
}

/* bloc info : mêmes limites que .alt-text / .alt-reveal -------- */
.graph-info{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.3rem;
  padding-inline:1rem;               /* marge latérale mobile     */
}
.graph-title2,
.graph-title{
  margin:0;
  text-transform:uppercase;
  font-size:3rem;                    /* = .alt-text h3            */
  font-weight:700;
  line-height:1.25;
  color:var(--c-accent);
}
.graph-title2{
	font-size: clamp(1.5rem, 5vw, 3rem);
	text-align:center;
	width:100%;	
}
.graph-desc2{
	width:100%;
	text-align:center;
}
.graph-desc2,
.graph-desc{
  margin:0;
  font-size:1rem;
  color:#838383;
}

/* ---------- l’image ------------------------------------------ */
.graph-img{
  width:100%;                        /* pleine largeur col.       */
  height:auto;
  border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}

/* ---------- COLONNE DROITE (photo + hotspots) ---------------- */
.results-illu{position:relative;}
.results-illu img{
  width:100%;
  border-radius:var(--radius);
  object-fit:cover;
}

/* ---------- petite anim d’apparition (facultatif) ------------- */
@keyframes slide-in-down{
  from{transform:translateY(40px);opacity:0}
  to  {transform:translateY(0);   opacity:1}
}
.graph-layer.show-graph .graph-img{
  animation:slide-in-down .45s .05s forwards;
}

/* ---------- responsive < 800 px ------------------------------ */
@media (max-width:800px){
  .results-grid{grid-template-columns:1fr}
  .graph-info,
  .graph-display{align-items:flex-start;text-align:left}
}