/* parcoursemploi-bassingrenoblois.org : les bulles du téléphérique (22 octobre 2026). Ciel clair, câble, cabines rondes. */
:root {
  --ciel: #eef6fc;
  --ciel-f: #d6e9f7;
  --blanc: #ffffff;
  --encre: #232b36;
  --gris: #5a6573;
  --cable: #38424f;
  --bulle: #f7fbff;
  --rouge: #d9483b;
  --neige: #dfe7ee;
  --titre: 'Kanit', system-ui, sans-serif;
  --texte: 'Sarabun', system-ui, sans-serif;
  --horaire: 'Chakra Petch', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ciel); color: var(--encre); font: 400 1.1rem/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.monter { position: absolute; left: -999px; }
.monter:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; }

/* la gare de départ */
.gare { position: relative; background: linear-gradient(var(--blanc), var(--ciel)); padding-top: 2.2rem; }
.gare__cable { position: absolute; left: 0; right: 0; top: 1.1rem; height: 2px; background: var(--cable); transform: rotate(-1.2deg); transform-origin: left; }
.gare__in { position: relative; max-width: 1100px; margin: 0 auto; padding: .6rem 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gare__nom { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; font: 600 1.6rem/1 var(--titre); }
.gare__bulle { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bulle); border: 3px solid var(--cable); box-shadow: inset 0 -6px 0 var(--ciel-f); position: relative; }
.gare__bulle::before { content: ''; position: absolute; left: 50%; top: -1.1rem; width: 3px; height: 1rem; background: var(--cable); }
.gare__lignes { display: flex; gap: .5rem; flex-wrap: wrap; }
.gare__lignes a { text-decoration: none; font: 500 .95rem/1 var(--titre); padding: .55rem 1rem; border-radius: 999px; background: var(--blanc); border: 2px solid var(--cable); }
.gare__lignes a[aria-current], .gare__lignes a:hover { background: var(--cable); color: #fff; }

main { max-width: 1100px; margin: 0 auto; padding: 1.8rem 1rem 3rem; }
.titre-gare { font: 600 1.4rem/1.2 var(--titre); margin: 0 0 .4rem; }

/* le départ */
.depart-gare { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.depart-gare > * { min-width: 0; }
.depart-gare__mention { margin: 0 0 .4rem; font: 500 .9rem/1.2 var(--horaire); color: var(--rouge); text-transform: uppercase; letter-spacing: .05em; }
.depart-gare h1 { font: 600 clamp(2rem, 5vw, 3.2rem)/1.05 var(--titre); margin: 0 0 .8rem; }
.depart-gare p { margin: 0; color: var(--gris); }
.grande-bulle { position: relative; display: flex; flex-direction: column; gap: .6rem; text-decoration: none; background: var(--bulle); border: 3px solid var(--cable); border-radius: 46% 46% 28px 28px / 32% 32% 28px 28px; padding: 1.6rem 1.4rem 1.4rem; margin-top: 2rem; box-shadow: 0 14px 30px rgba(35, 43, 54, .12); }
.cabine__pince { position: absolute; left: 50%; top: -2.2rem; width: 3px; height: 2.1rem; background: var(--cable); }
.cabine__pince::before { content: ''; position: absolute; top: -6px; left: -7px; width: 17px; height: 9px; border-radius: 4px; background: var(--cable); }
.grande-bulle__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 40% 40% 12px 12px / 22% 22% 12px 12px; background: var(--ciel-f); }
.grande-bulle__img img { width: 100%; height: 100%; object-fit: cover; }
.grande-bulle__t { font: 600 1.35rem/1.2 var(--titre); overflow-wrap: anywhere; }
.grande-bulle__m { font: 500 .85rem/1 var(--horaire); color: var(--gris); }
.grande-bulle:hover .grande-bulle__t { text-decoration: underline; }

/* la ligne de cabines */
.ligne { margin-top: 3rem; position: relative; }
.ligne__cable { height: 2px; background: var(--cable); margin: .4rem 0 2.4rem; }
.cabines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem 1.4rem; }
.cabines > * { min-width: 0; }
.cabine { position: relative; }
.cabine .cabine__pince { top: -2.4rem; height: 2.4rem; }
.cabine a { display: flex; flex-direction: column; gap: .5rem; height: 100%; text-decoration: none; background: var(--bulle); border: 2px solid var(--cable); border-radius: 38% 38% 18px 18px / 26% 26% 18px 18px; padding: 1rem .9rem 1rem; box-shadow: 0 8px 18px rgba(35, 43, 54, .08); }
.cabine__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 34% 34% 8px 8px / 22% 22% 8px 8px; background: var(--ciel-f); }
.cabine__img img { width: 100%; height: 100%; object-fit: cover; }
.cabine__t { font: 600 1.02rem/1.3 var(--titre); overflow-wrap: anywhere; }
.cabine a:hover .cabine__t { text-decoration: underline; }

/* l'horaire */
.horaire { margin-top: 3rem; }
.departs { list-style: none; margin: .8rem 0 0; padding: 0; background: var(--blanc); border-radius: 12px; border: 2px solid var(--cable); overflow: hidden; }
.depart { display: grid; grid-template-columns: 96px 150px 1fr auto; gap: 1rem; align-items: center; text-decoration: none; padding: .6rem 1rem; border-bottom: 1px solid var(--neige); }
.departs li:last-child .depart { border-bottom: 0; }
.depart > * { min-width: 0; }
.depart__img { width: 96px; height: 62px; overflow: hidden; border-radius: 8px; background: var(--ciel-f); }
.depart__img img { width: 100%; height: 100%; object-fit: cover; }
.depart__heure, .depart__duree { font: 500 .88rem/1.2 var(--horaire); color: var(--gris); }
.depart__duree { color: var(--rouge); }
.depart__t { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.depart:hover .depart__t { text-decoration: underline; }

/* article */
.trajet { max-width: 780px; margin: 0 auto; }
.trajet__tete { text-align: center; padding-top: .5rem; }
.trajet__tete--ligne { margin-bottom: 1.6rem; }
.trajet__ligne { display: inline-block; text-decoration: none; font: 500 .85rem/1 var(--horaire); text-transform: uppercase; letter-spacing: .06em; color: var(--rouge); margin: 0 0 .6rem; }
.trajet__tete h1 { font: 600 clamp(1.7rem, 3.8vw, 2.5rem)/1.12 var(--titre); margin: 0; }
.trajet__tete p { margin: .4rem 0 0; }
.trajet__m { font: 500 .85rem/1.4 var(--horaire); color: var(--gris); }
.trajet__img { margin: 1.5rem 0 0; }
.trajet__img img { width: 100%; border-radius: 18px; }
.trajet__texte { background: var(--blanc); margin-top: 1.5rem; border-radius: 18px; padding: 1.8rem clamp(1rem, 4vw, 2.4rem); overflow-wrap: anywhere; }
.trajet__texte h2 { font: 600 1.45rem/1.25 var(--titre); margin: 2rem 0 .6rem; }
.trajet__texte h2::before { content: ''; display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--cable); margin-right: .5rem; vertical-align: middle; }
.trajet__texte h3 { font: 600 1.18rem/1.3 var(--titre); margin: 1.5rem 0 .4rem; }
.trajet__texte a { color: #1e63a6; }
.trajet__texte table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 1.2rem 0; font-size: 1rem; }
.trajet__texte th, .trajet__texte td { border: 1px solid var(--neige); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.trajet__texte th { background: var(--ciel); font-family: var(--titre); }
.trajet__texte img { margin: 1rem auto; border-radius: 10px; }
.trajet__texte blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; border-left: 4px solid var(--rouge); background: var(--ciel); }
.trajet__texte iframe { max-width: 100%; }
.ligne--suite { max-width: 1100px; }

/* la gare d'arrivée */
.arrivee { margin-top: 2rem; background: var(--blanc); }
.arrivee__montagnes { height: 70px; background: var(--neige); clip-path: polygon(0 100%, 0 70%, 12% 30%, 22% 60%, 35% 10%, 48% 55%, 60% 25%, 72% 65%, 85% 20%, 100% 55%, 100% 100%); }
.arrivee__in { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1rem 2.2rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem; }
.arrivee__nom { margin: 0; font: 600 1.3rem/1 var(--titre); }
.arrivee__lieu { margin: 0; font: 500 .85rem/1 var(--horaire); color: var(--gris); text-transform: uppercase; }
.arrivee ul { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.arrivee a { text-decoration: none; }
.arrivee a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .depart-gare { grid-template-columns: 1fr; }
  .cabines { grid-template-columns: 1fr 1fr; }
  .depart { grid-template-columns: 80px 1fr; }
  .depart__img { width: 80px; height: 54px; grid-row: span 3; }
  .arrivee ul { margin-left: 0; }
}
@media (max-width: 560px) {
  .cabines { grid-template-columns: 1fr; }
}