/* =====================================================================
   N4CC — « L'Heure Juste » : compositions des guides de destination
   (Perpignan, Côte Vermeille, étape avant l'Espagne, Pyrénées-Orientales).
   Chargée seulement sur ces 4 pages (n4h/guides.php), après hj-kit.css dont elle reprend les jetons.
   ===================================================================== */

/* ---------- Guides de destination ----------
   Le texte reste celui de l'article ; la mise en scène reprend la grammaire de la route :
   panneaux (couleurs de la signalisation française), bornes, lignes, tableau des départs. */
.hj-h3 { margin: 0 0 var(--sp-2); font: 700 var(--t-m)/1.22 var(--f-display); letter-spacing: -.005em; color: var(--ink); }
.hj-h2 em { font-style: italic; background: linear-gradient(transparent 62%, var(--sun) 62%, var(--sun) 92%, transparent 92%); padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hj-sec p.hj-sec__lead, .hj-sec--lead p:first-of-type { font-size: var(--t-lede); line-height: 1.55; color: var(--ink); }
.hj-sec .hj-eyebrow { margin-bottom: var(--sp-3); }
.hj-prose > * { max-width: 66ch; }
.hj-credit { display: block; margin-top: 2px; font: 400 12px/1.35 var(--f-data); color: var(--ink-3); }
/* photos : rangée de 3, planche de 8 ; l'indication « faites défiler » ne sert qu'au téléphone */
.hj-gallery__hint { display: none; }
@media (max-width: 767.98px) { .hj-gallery .hj-gallery__hint { display: block; margin: var(--sp-2) 0 0; text-align: center; font: 500 13px/1.2 var(--f-data); color: var(--ink-3); } }
@media (min-width: 768px) {
  .hj-gallery--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hj-gallery--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hj-gallery--row figure:first-child, .hj-gallery--grid figure:first-child { grid-row: auto; }
  .hj-gallery--row figure:first-child img, .hj-gallery--grid figure:first-child img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .hj-gallery--row figure:nth-child(4), .hj-gallery--grid figure:nth-child(4) { grid-column: auto; }
  .hj-gallery--row figure:nth-child(4) img, .hj-gallery--grid figure:nth-child(4) img { aspect-ratio: 4 / 3; }
}
/* réponse directe en tête de page */
.hj-answer { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: start; padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-panel); background: #FFF6D6; box-shadow: inset 0 0 0 1px #F0DB94; }
.hj-answer > .hj-i { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--sun); color: var(--ink); }
.hj-answer p { margin: 0; max-width: 66ch; color: var(--ink-2); }
.hj-answer p b { color: var(--ink); }
/* liens « en savoir plus » */
.hj-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration-color: var(--sun-2); text-decoration-thickness: 2px; }
.hj-more .hj-i { width: 18px; height: 18px; transition: transform var(--d-fast) var(--ease-respire); }
.hj-more:hover .hj-i { transform: translateX(3px); }

/* Perpignan · le panneau « stationnement interdit » et son panonceau camping-car */
.hj-nopark { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--sp-4); align-items: start; }
.hj-nopark__t { display: contents; }
.hj-nopark .hj-nosign { grid-row: 1; grid-column: 1; }
.hj-nopark .hj-h2 { grid-row: 1; grid-column: 2; align-self: center; margin-top: 2px; }
.hj-nopark p { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .hj-nopark { grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--sp-5); }
  .hj-nopark .hj-nosign { grid-row: 1 / span 4; }
  .hj-nopark .hj-h2 { align-self: start; }
  .hj-nopark p { grid-column: 2; }
}
/* boutons des encadrés : le libellé passe à la ligne plutôt que de déborder */
.hj-guide .hj-main .hj-actions .hj-btn { max-width: 100%; white-space: normal; text-align: left; line-height: 1.25; padding-block: 10px; }
.hj-nosign { display: grid; justify-items: center; gap: 7px; padding-top: 6px; }
.hj-nosign__disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #1F4E9E; box-shadow: inset 0 0 0 7px #D6202A, 0 0 0 2px #fff, 0 8px 18px -10px rgba(10, 37, 64, .6); overflow: hidden; }
.hj-nosign__disc::after { content: ""; position: absolute; left: 50%; top: 5px; bottom: 5px; width: 13%; transform: translateX(-50%) rotate(-45deg); background: #D6202A; }
.hj-nosign__sub { display: grid; place-items: center; width: 86%; aspect-ratio: 1.55; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.hj-nosign__sub .hj-i { width: 66%; height: 66%; stroke-width: 1.8; }
/* trois façons d'y aller : panneaux ronds bleus (obligation) */
.hj-modes { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-5); }
.hj-mode { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.hj-mode__sign { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1F4E9E; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(10, 37, 64, .22); }
.hj-mode__sign .hj-i { width: 30px; height: 30px; }
.hj-mode .hj-h3 { padding-top: 12px; }
.hj-sec .hj-mode p { margin-bottom: 0; }
/* l'arrêt de bus : plaque de ligne sur son poteau */
.hj-busstop { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); scroll-margin-top: calc(var(--header-h) + 16px); }
.hj-busstop::before { content: ""; position: absolute; left: 23px; top: 64px; bottom: 12px; width: 6px; border-radius: 3px; background: linear-gradient(90deg, #9AA5B4, #6B7788); }
@media (min-width: 600px) { .hj-busstop { grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-4); } .hj-busstop::before { left: 29px; } }
.hj-busstop__plate { position: relative; z-index: 1; align-self: start; display: grid; justify-items: center; gap: 5px; padding: 10px 6px 8px; border-radius: 10px; background: var(--sun); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.hj-busstop__plate .hj-i { width: 30px; height: 30px; }
.hj-busstop__plate b { display: grid; place-items: center; min-width: 36px; height: 30px; padding: 0 6px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 19px/1 var(--f-data); }
.hj-busstop__body { min-width: 0; padding: var(--sp-4); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--sh-paper); }
.hj-sec p.hj-busstop__k { margin: 0 0 var(--sp-2); font: 500 var(--t-meta)/1.35 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.hj-busstop .hj-actions { margin-top: var(--sp-4); }
@media (min-width: 600px) { .hj-busstop__body { padding: var(--sp-5); } }
/* tableau des départs (durées à volets) */
.hj-board { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-4) var(--sp-2); border-radius: var(--r-panel); background: var(--night); color: #F4EFE3; box-shadow: var(--sh-float); }
.hj-board__t { width: 100%; border-collapse: collapse; }
.hj-board__t caption { caption-side: top; text-align: left; padding: 2px 6px var(--sp-3); font: 500 var(--t-meta)/1.4 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: #A9BBD0; }
.hj-board__t thead th { padding: 0 8px 10px; text-align: left; font: 500 12px/1.2 var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: #A9BBD0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hj-board__t tbody th, .hj-board__t tbody td { padding: 14px 8px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, .1); font-weight: 400; }
.hj-board__t tbody tr:last-child > * { border-bottom: 0; }
.hj-board__m { display: inline-flex; align-items: center; gap: 10px; font: 650 16.5px/1.25 var(--f-body); color: #fff; }
.hj-board__m .hj-i { width: 24px; height: 24px; color: var(--sun); }
.hj-board__d .hj-flapbox { font-size: 18px; }
.hj-board__t td:last-child { font-size: var(--t-small); line-height: 1.45; color: #C9D6E5; }
@media (max-width: 719.98px) {
  .hj-board__t, .hj-board__t caption, .hj-board__t tbody, .hj-board__t tr, .hj-board__t th, .hj-board__t td { display: block; }
  .hj-board__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hj-board__t tbody tr { display: grid; gap: 6px; padding: 12px 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .hj-board__t tbody tr:last-child { border-bottom: 0; }
  .hj-board__t tbody th, .hj-board__t tbody td { padding: 0; border: 0; }
}
/* le top 10 : une ligne et ses arrêts */
.hj-line { position: relative; list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.hj-line::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 24px; width: 4px; border-radius: 2px; background: var(--coral); }
.hj-line__stop { position: relative; padding: 0 0 var(--sp-5) 64px; }
.hj-line__stop:last-child { padding-bottom: 0; }
.hj-line__stop .hj-h3 { padding-top: 7px; }
.hj-line__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); font: 700 19px/1 var(--f-display); color: var(--ink); }
.hj-line__stop:first-child .hj-line__n, .hj-line__stop:last-child .hj-line__n { background: var(--sun); }
.hj-sec .hj-line__stop p { margin-bottom: 0; }
/* où manger : la carte */
.hj-menu { margin: var(--sp-5) 0; padding: var(--sp-5); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--sh-paper); }
.hj-sec p.hj-menu__k { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-2); font: 700 var(--t-m)/1.25 var(--f-display); color: var(--ink); }
.hj-menu__k .hj-i { width: 26px; height: 26px; color: var(--coral-ink); }
.hj-menu__l { list-style: none; margin: 0; padding: 0; }
.hj-menu__l li { padding: 12px 0; border-top: 1px dashed var(--paper-3); color: var(--ink-2); }
.hj-menu__l li:first-child { border-top: 0; }
.hj-menu__l li strong { font: 700 1.12rem/1.3 var(--f-display); color: var(--ink); }
/* combien de jours */
.hj-days { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .hj-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hj-days li { padding: var(--sp-4) var(--sp-4) var(--sp-5); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.hj-days__n { display: block; margin-bottom: var(--sp-2); font: 700 58px/.9 var(--f-display); font-variation-settings: 'opsz' 144; color: var(--sun); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.hj-sec .hj-days li p { margin: 0; color: var(--ink-2); }
.hj-days li p strong { font: 700 1.12rem/1.3 var(--f-display); color: var(--ink); }
/* la conclusion, sur fond de nuit */
.hj-combo { padding: var(--sp-6) var(--sp-5); border-radius: var(--r-panel); background: var(--night); color: #fff; box-shadow: var(--sh-float); }
@media (min-width: 768px) { .hj-combo { padding: var(--sp-7) var(--sp-6); } }
.hj-combo .hj-h2 { color: #fff; }
.hj-sec.hj-combo p { color: #E4ECF5; }
.hj-sec.hj-combo p strong { color: #fff; }
.hj-btn--wrap { white-space: normal; text-align: left; height: auto; padding-block: 12px; line-height: 1.3; }

/* Côte Vermeille · la route côtière (la mer à l'est), les villages à leur borne */
.hj-coast { position: relative; list-style: none; margin: var(--sp-5) 0 0; padding: 0 30px 0 0; }
.hj-coast::before { content: ""; position: absolute; left: 31px; top: 22px; bottom: 22px; width: 4px; background: repeating-linear-gradient(180deg, rgba(10, 37, 64, .32) 0 10px, transparent 10px 18px); }
.hj-coast::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 16px; border-radius: 10px; background: linear-gradient(180deg, var(--sea2), var(--sea1)); box-shadow: inset 4px 0 0 rgba(255, 255, 255, .35); }
.hj-coast__end { position: relative; display: flex; align-items: center; gap: 12px; padding: 4px 0 4px 15px; font: 500 13px/1.25 var(--f-data); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.hj-coast__end .hj-i { width: 36px; height: 36px; padding: 7px; border-radius: 50%; background: var(--ink); color: #fff; }
.hj-coast__end.is-end .hj-i { background: #003399; color: #FFCC00; }
.hj-coast__stop { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding: var(--sp-4) 0; }
.hj-coast__stop .hj-borne b { font-size: 16px; }
.hj-coast__card { min-width: 0; }
.hj-coast__card .hj-h3 { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.hj-coast__ic { width: 26px; height: 26px; color: var(--coral-ink); }
.hj-sec .hj-coast__card p { margin-bottom: 0; }
/* cartes (expériences, raisons, conseils) */
.hj-cards { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .hj-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }
.hj-card { min-width: 0; padding: var(--sp-5); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.hj-card__ic { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--sp-3); border-radius: 50%; background: #FFF3C4; color: var(--ink); }
.hj-card__ic .hj-i { width: 26px; height: 26px; stroke-width: 1.9; }
.hj-sec .hj-card p { margin-bottom: var(--sp-2); }
.hj-sec p.hj-card__t { margin: 0 0 var(--sp-2); font: 700 var(--t-m)/1.22 var(--f-display); color: var(--ink); }
/* encadrés « l'aire » : de nuit (panneau d'information) ou sur papier (appel de fin) */
.hj-panel { padding: var(--sp-5); border-radius: var(--r-panel); }
@media (min-width: 768px) { .hj-panel { padding: var(--sp-6); } }
.hj-panel .hj-h3 { display: flex; align-items: center; gap: 10px; }
.hj-panel .hj-h3 .hj-i { width: 28px; height: 28px; flex: none; }
.hj-panel p, .hj-sec .hj-panel p { margin: 0 0 var(--sp-2); }
.hj-panel .hj-actions { margin-top: var(--sp-4); }
.hj-panel--night { margin-top: var(--sp-5); background: var(--night); color: #fff; box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 5px #fff, var(--sh-float); }
.hj-panel--night .hj-h3 { color: #fff; }
.hj-panel--night .hj-h3 .hj-i { color: var(--sun); }
.hj-sec .hj-panel--night p { color: #E4ECF5; }
.hj-panel--paper { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.hj-panel--paper p { color: var(--ink-2); }
/* lien vers un autre guide : panneau directionnel */
.hj-signlink { display: block; max-width: 600px; margin-top: var(--sp-6); text-decoration: none; border-radius: 6px; }
.hj-signlink .hj-sign { min-height: 60px; padding-block: 12px; }
.hj-signlink .hj-sign__name { font: 700 17px/1.3 var(--f-body); }
.hj-signlink .hj-sign .hj-i { width: 22px; height: 22px; }
.hj-signlink:hover .hj-sign { background: var(--coral-ink); }

/* Pyrénées-Orientales · l'année et ses saisons (la saison du moment, à l'heure de l'aire) */
.hj-year { margin: var(--sp-5) 0 var(--sp-4); padding-top: 30px; }
.hj-year__bar { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: 34px; }
.hj-year__seg { grid-row: 1; grid-column: var(--a) / var(--b); display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; color: var(--ink); }
.hj-year__seg i { padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px/1.6 var(--f-data); font-style: normal; letter-spacing: .03em; text-transform: uppercase; }
.hj-year__seg.is-wi { background: #CFDDEE; }
.hj-year__seg.is-sp { background: #CDEBD6; }
.hj-year__seg.is-su { background: var(--sun); }
.hj-year__seg.is-au { background: #F7C9AE; }
.hj-year__bar > .hj-year__seg:first-child { border-radius: 8px 0 0 8px; }
.hj-year__bar > .hj-year__seg:nth-child(5) { border-radius: 0 8px 8px 0; }
.hj-year__now { position: absolute; top: -30px; bottom: -6px; left: var(--x); width: 0; }
.hj-year__now::before { content: ""; position: absolute; top: 22px; bottom: 0; left: -1.5px; width: 3px; border-radius: 2px; background: var(--ink); }
.hj-year__now b { position: absolute; top: 0; left: 0; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; background: var(--ink); color: #fff; font: 500 11.5px/1.2 var(--f-data); white-space: nowrap; }
.hj-year__now.is-start b { transform: translateX(-8px); }
.hj-year__now.is-end b { transform: translateX(calc(-100% + 8px)); }
.hj-seasons { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
@media (min-width: 720px) { .hj-seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hj-season { min-width: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); border-top: 6px solid var(--c, var(--line)); }
.hj-season.is-sp { --c: #6DBE8C; }
.hj-season.is-su { --c: var(--sun-2); }
.hj-season.is-au { --c: #E58D5E; }
.hj-season.is-wi { --c: #7EA2C9; }
.hj-season.is-now { box-shadow: inset 0 0 0 2px var(--ink), var(--sh-paper); }
.hj-season__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: var(--sp-2); }
.hj-season__ic .hj-i { width: 26px; height: 26px; }
.hj-season__h strong { font: 700 var(--t-m)/1.2 var(--f-display); }
.hj-season__m { font: 500 14px/1.2 var(--f-data); color: var(--ink-3); }
.hj-season__now { margin-left: auto; padding: 5px 9px; border-radius: 4px; background: var(--ink); color: #fff; font: 700 12px/1 var(--f-body); letter-spacing: .04em; text-transform: uppercase; }
.hj-sec .hj-season p { margin: 0; }
/* le camp de base et ses services */
.hj-basecamp { margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--sh-paper); }
@media (min-width: 768px) { .hj-basecamp { padding: var(--sp-6); } }
.hj-basecamp > .hj-h3 { display: flex; align-items: center; gap: 10px; }
.hj-basecamp > .hj-h3 .hj-i { width: 28px; height: 28px; flex: none; color: var(--coral-ink); }
.hj-svc { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); column-gap: var(--sp-6); }
.hj-svc li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hj-svc__ic .hj-i { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #FFF3C4; color: var(--ink); stroke-width: 1.9; }
.hj-svc__b { font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }
.hj-svc__b strong { display: block; margin-bottom: 2px; font: 700 16.5px/1.3 var(--f-body); color: var(--ink); }
/* les itinéraires : six panneaux sur un même mât */
.hj-post { position: relative; list-style: none; margin: var(--sp-5) 0 0; padding: 0 0 0 30px; display: grid; gap: var(--sp-6); }
.hj-post::before { content: ""; position: absolute; left: 8px; top: -8px; bottom: 8px; width: 8px; border-radius: 4px; background: linear-gradient(90deg, #8B96A6, #5E6A7B); }
.hj-post__item { position: relative; min-width: 0; }
.hj-post__sign { justify-content: flex-start; gap: 12px; min-height: 58px; max-width: 560px; margin-left: -14px; }
.hj-post__sign .hj-sign__name { margin: 0; font: 700 18px/1.25 var(--f-body); color: var(--ink); }
.hj-post__ic { width: 24px; height: 24px; flex: none; }
.hj-post__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-3) 0; padding: 0; }
.hj-post__meta li { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); font: 600 14.5px/1.25 var(--f-body); color: var(--ink-2); }
.hj-post__meta .hj-i { width: 16px; height: 16px; }
.hj-sec .hj-post__item > p { margin-bottom: var(--sp-1); }

/* Espagne · le trajet en panneaux : A9, sortie, l'aire, la frontière */
.hj-opening > * + * { margin-top: var(--sp-5); }
.hj-intro p { margin: 0; max-width: 64ch; font-size: var(--t-lede); line-height: 1.55; color: var(--ink); }
.hj-intro--2 p { color: var(--ink-2); }
.hj-route { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 16px 10px; border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.hj-route::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, rgba(10, 37, 64, .3) 0 10px, transparent 10px 18px); }
.hj-route > * { position: relative; z-index: 1; }
.hj-route__a9 b { display: grid; place-items: center; min-width: 40px; height: 30px; padding: 0 7px; border-radius: 5px; background: #C8102E; color: #fff; font: 700 16px/1 var(--f-body); box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px #C8102E; }
.hj-route__exit { display: grid; justify-items: center; gap: 2px; padding: 6px 7px; border-radius: 6px; background: #1F4E9E; color: #fff; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px #1F4E9E; }
.hj-route__exit small { font: 600 10px/1 var(--f-body); letter-spacing: .03em; text-transform: uppercase; }
.hj-route__exit b { font: 700 17px/1 var(--f-body); }
.hj-route__exit span { display: none; font: 500 11px/1.1 var(--f-body); }
.hj-route__leg { display: grid; justify-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; background: var(--paper); }
.hj-route__leg b { font: 500 14px/1 var(--f-data); color: var(--ink); white-space: nowrap; }
.hj-route__leg small { font: 500 11.5px/1 var(--f-data); color: var(--ink-3); white-space: nowrap; }
.hj-route__aire { display: grid; justify-items: center; gap: 4px; }
.hj-route__aire .hj-i { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--ink); color: var(--sun); }
.hj-route__aire b { display: none; max-width: 9em; font: 700 12.5px/1.15 var(--f-body); text-align: center; }
.hj-route__eu { display: grid; justify-items: center; align-content: center; width: 56px; height: 46px; border-radius: 5px; background: #003399; color: #fff; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px #003399; }
.hj-eu__stars { width: 28px; height: 28px; }
.hj-route__eu b { margin-top: -1px; font: 700 9px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 600px) {
  .hj-route { padding: 22px 24px; gap: 8px; }
  .hj-route::before { left: 34px; right: 34px; }
  .hj-route__exit span, .hj-route__aire b { display: block; }
  .hj-route__a9 b { min-width: 46px; height: 34px; font-size: 18px; }
  .hj-route__exit b { font-size: 20px; }
  .hj-route__leg b { font-size: 16px; }
  .hj-route__eu { width: 84px; height: 62px; }
  .hj-eu__stars { width: 38px; height: 38px; }
  .hj-route__eu b { font-size: 11px; }
}
.hj-banner { margin: 0; }
.hj-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-panel); background: var(--paper-3); }
.hj-banner figcaption { margin-top: 8px; font-size: var(--t-small); color: var(--ink-2); }
.hj-pills--ic .hj-i { width: 16px; height: 16px; color: var(--ink-2); }
/* quatre raisons, chacune avec sa photo */
.hj-steps { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-7); }
.hj-step { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .hj-step { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: start; }
  .hj-step.is-rev .hj-step__media { order: 2; }
}
.hj-step__media { margin: 0; }
.hj-step__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-panel); background: var(--paper-3); }
.hj-step__body { min-width: 0; }
.hj-step__n { display: block; margin-bottom: var(--sp-2); font: 700 54px/.9 var(--f-display); font-variation-settings: 'opsz' 144; color: var(--sun); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.hj-eyebrow--ic::before { display: none; }
.hj-eyebrow--ic .hj-i { width: 18px; height: 18px; color: var(--ink-2); }
.hj-checks { list-style: none; margin: var(--sp-2) 0 var(--sp-4); padding: 0; display: grid; gap: 2px; }
.hj-checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; color: var(--ink-2); }
.hj-checks .hj-i { width: 22px; height: 22px; margin-top: 2px; color: var(--mint-ink); }
.hj-checks li strong { color: var(--ink); }
/* les tarifs, en tableau de péage ; l'avertissement en panneau de danger */
.hj-tolls { margin: var(--sp-5) 0 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-panel); background: var(--night); color: #fff; box-shadow: var(--sh-float); }
.hj-toll { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hj-toll:last-child { border-bottom: 0; }
.hj-toll dt { display: grid; gap: 3px; min-width: 0; }
.hj-toll dt b { font: 650 16.5px/1.3 var(--f-body); color: #fff; }
.hj-toll__d { font-size: var(--t-small); line-height: 1.4; color: #C9D6E5; }
.hj-toll__tag { justify-self: start; margin-top: 4px; padding: 4px 8px; border-radius: 4px; background: var(--sun); color: var(--ink); font: 700 12px/1.2 var(--f-body); }
.hj-toll dd { margin: 0; font: 500 25px/1 var(--f-data); color: var(--sun); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hj-toll.is-feat dd { font-size: 30px; }
.hj-warn { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.hj-warn__sign { position: relative; display: grid; place-items: end center; width: 52px; height: 46px; padding-bottom: 6px; background: #D6202A; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hj-warn__sign::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(50% 18%, 88% 90%, 12% 90%); }
.hj-warn__sign b { position: relative; font: 800 21px/1 var(--f-body); color: var(--ink); }
.hj-sec .hj-warn p { margin: 0; }
/* venir : coordonnées et plan ; le mot de la fin */
.hj-arrive2 { display: grid; gap: var(--sp-5); margin-top: var(--sp-4); }
@media (min-width: 720px) { .hj-arrive2 { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; } }
.hj-arrive2__info { min-width: 0; padding: var(--sp-5); border-radius: var(--r-panel); background: var(--white); box-shadow: inset 0 0 0 1px var(--line), var(--sh-paper); }
.hj-sec .hj-arrive2__info p { margin-bottom: var(--sp-3); }
.hj-sec p.hj-gpsline { line-height: 1.9; }
.hj-gpsline .hj-gps__v { font: 500 clamp(18px, 4.8vw, 22px)/1.1 var(--f-data); color: var(--ink); white-space: nowrap; }
.hj-gpsline .hj-btn { margin-left: 6px; vertical-align: middle; }
.hj-arrive2__map { margin: 0; }
.hj-arrive2__map img { width: 100%; height: auto; border-radius: var(--r-panel); background: var(--paper-3); }
.hj-endroute { margin-top: var(--sp-6); }
.hj-sec p.hj-bye { display: flex; align-items: center; gap: 12px; margin: var(--sp-4) 0 0; font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem)/1.1 var(--f-display); color: var(--ink); }
.hj-bye .hj-i { width: 40px; height: 40px; color: var(--coral-ink); }