/* Lot 2 de l'audit externe (25/10/2026) : structure des pages, d'après les maquettes validées (design/lot2/).
   Charte « Corde » : jetons existants (--ink, --red, --red-deep, --rule, --green…), Manrope 800 pour les chiffres, Inter pour le reste.
   Préfixes : fj- (fiche journée), ci- (fiche circuit), pa- (circuits par pays), or- (organisateurs), wk- (Mon week-end),
   au- (Autour de moi), ep- (Essence). Chargé après pages-v2.css et densite.css. */

.fj-h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 15px/1.25 var(--f-text); color: var(--ink); }
.fj-h3 .ico { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.fj-num { font: 800 26px/1 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ───────────── 1. Fiche journée ───────────── */
/* infos clés : l'en-tête et la rangée de 4 repères forment un seul bloc, l'action principale à droite */
.fj-bloc-cles { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; padding: 0; overflow: hidden; }
.p2 .fj-bloc-cles .fj-tete { margin: 0; border: 0; box-shadow: none; background: transparent; padding-bottom: 16px; grid-template-columns: 76px minmax(0, 1fr) 132px; }
.fj-bloc-cles .fj-trace { height: 96px; }
.fj-cles { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--rule); }
.fj-cles-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.fj-cles-l > div { padding: 14px 20px 16px; border-left: 1px solid var(--rule); min-width: 0; }
.fj-cles-l > div:first-child { border-left: 0; padding-left: 24px; }
.fj-cles-l dt { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.fj-cles-l dd { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.fj-cles-l dd small { display: block; margin-top: 4px; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.fj-cles-l .fj-cle-pl { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.fj-cles-l .fj-cle-pl small { margin-top: 0; }
.fj-cles-l .fj-cle-pl.st-ok .fj-num { color: var(--green); }
.fj-cles-l .fj-cle-pl.st-dernieres .fj-num { color: var(--yellow-ink); }
.fj-cles-act { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px 24px 16px 20px; border-left: 1px solid var(--rule); }
.fj-cles-act .btn { height: 48px; white-space: nowrap; }
.fj-cles-act small { font-size: 12px; color: var(--ink-3); max-width: 250px; }

/* format et contraintes : conditions en liste à puces, sur toute la largeur */
.p2 .fj-fc .card-b:empty { display: none; }
.p2 .fj-fc .spec .fj-cond { grid-column: 1 / -1; }
.p2 .fj-fc .spec .fj-cond dd { font-weight: 500; }
.fj-conds { margin: 2px 0 0; padding-left: 18px; }
.fj-conds li + li { margin-top: 3px; }

/* réservation et calendrier : jauge (cases jusqu'à 40 places, barre au-delà), tarifs, garder la date */
.p2 .place-card.fj-resa { padding: 0; }
.p2 .place-card.fj-resa > h2.card-h { font: 800 18px/1.25 var(--f-display); letter-spacing: -.015em; }
.fj-jauge { padding: 14px 20px 0; }
.fj-j-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.fj-j-txt { margin: 0; font: 800 17px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--pc-ink, var(--ink)); }
.fj-j-maj { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.fj-jauge .pc-jauge { margin: 14px 0 8px; }
.fj-barre { position: relative; height: 12px; margin: 14px 0 8px; border-radius: 99px; background: var(--pc-soft, var(--green-2)); box-shadow: inset 0 0 0 1px rgba(22, 26, 29, .12); overflow: hidden; }
.fj-barre-pris { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); border-radius: 99px 0 0 99px; }
.fj-j-leg { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 12.5px; color: var(--ink-3); }
.fj-j-leg span { display: inline-flex; align-items: center; gap: 6px; }
.fj-j-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--pc-soft, var(--green-2)); box-shadow: inset 0 0 0 1px rgba(22, 26, 29, .14); }
.fj-j-leg i.on { background: var(--ink); box-shadow: none; }
.fj-tarifs { margin: 14px 20px 0; padding-top: 4px; border-top: 1px solid var(--rule); }
.fj-tarifs .tarifs { width: 100%; }
.p2 .place-card.fj-resa .status-cta { padding: 16px 20px 18px; }
.p2 .place-card.fj-resa .potes-fiche, .p2 .place-card.fj-resa > :last-child:not(.status-cta) { margin-left: 20px; margin-right: 20px; }

/* météo et trajet : météo et « Ton week-end » côte à côte */
.fj-mt-g { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 12px; border-top: 1px solid var(--rule); }
.fj-mt-g > div { padding: 14px 20px 18px; min-width: 0; }
.fj-mt-w { border-left: 1px solid var(--rule); display: grid; align-content: start; gap: 10px; }
.fj-mt-w p { margin: 0; font-size: 14px; color: var(--ink-2); }
.fj-mt-w .btn { justify-self: start; }
.fj-mt-m .meteo-none { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); }
.fj-mt-m .climat { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .fj-cles { grid-template-columns: 1fr; }
  .fj-cles-act { border-left: 0; border-top: 1px solid var(--rule); flex-direction: row; align-items: center; flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .p2 .fj-bloc-cles .fj-tete { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px 16px 12px; }
  .fj-bloc-cles .fj-trace { display: none; }
  .p2 .fj-bloc-cles .fj-date b { font-size: 38px; }
  .fj-cles-l { grid-template-columns: 1fr 1fr; }
  .fj-cles-l > div { padding: 12px 16px 13px; }
  .fj-cles-l > div:first-child { padding-left: 16px; }
  .fj-cles-l > div:nth-child(3) { border-left: 0; }
  .fj-cles-l > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .fj-cles-act { padding: 14px 16px 16px; flex-direction: column; align-items: stretch; }
  .fj-cles-act .btn { width: 100%; white-space: normal; }
  .fj-num { font-size: 23px; }
  .fj-jauge { padding: 12px 16px 0; }
  .fj-tarifs { margin: 12px 16px 0; }
  .p2 .place-card.fj-resa .status-cta { padding: 14px 16px 16px; }
  .p2 .place-card.fj-resa .status-cta .btn { width: 100%; }
  .fj-mt-g { grid-template-columns: 1fr; }
  .fj-mt-g > div { padding: 12px 16px 16px; }
  .fj-mt-w { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ───────────── 2. Fiche circuit (variante A : sommaire en barre collante) ───────────── */
#circuit .ic-photo-img { aspect-ratio: 6 / 1; object-position: center 55%; }
.p2 .ci-tete { grid-template-columns: 110px minmax(0, 1fr) auto; }
.ci-tete-act { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.ci-tete-act .btn { height: 48px; white-space: nowrap; }
.p2 .ci-tete .ci-tete-act .map-cta { padding: 8px 16px; }
.ci-som { position: sticky; top: 77px; z-index: 20; display: flex; align-items: center; gap: 18px; margin: -6px 0 20px; padding: 0 20px;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.ci-som-t { margin: 0; font: 600 13px var(--f-text); color: var(--ink-3); white-space: nowrap; }
.ci-som ol { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.ci-som ol::-webkit-scrollbar { display: none; }
.ci-som a { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 12px; font: 500 15px var(--f-text); color: var(--ink); text-decoration: none; white-space: nowrap; }
.ci-som a small { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--green-2); color: var(--green); font: 700 12px var(--f-text); }
.ci-som a:hover::after, .ci-som a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--rule-strong); }
.ci-som a[aria-current] { font-weight: 700; }
.ci-som a[aria-current]::after { background: var(--red); }
.ci-som a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -3px; border-radius: 6px; }
#circuit .ci-col > .card, #circuit .ci-col > .cf-zone { scroll-margin-top: var(--ci-decal, 150px); }

/* Carburant : résumé (le détail station par station reste sur la page Essence) */
.es-court-t { margin: 14px 0 -4px; font: 700 12.5px var(--f-text); color: var(--ink-3); }
.es-court .es-resume { margin-top: 10px; }
.es-court .es-note { margin: 12px 0 0; }
.p2 .es-court .es-court-lien { margin-top: 14px; }

@media (max-width: 767px) {
  #circuit .ic-photo-img { aspect-ratio: 3 / 1; }
  .p2 .ci-tete { grid-template-columns: 64px minmax(0, 1fr); }
  .p2 .ci-tete .ci-tete-act { grid-column: 1 / -1; }
  .ci-tete-act .btn { width: 100%; white-space: normal; }
  .ci-som { margin: -6px -16px 16px; padding: 0 0 0 16px; border-radius: 0; border-left: 0; border-right: 0; }
  .ci-som-t { display: none; }
  .ci-som a { height: 46px; padding: 0 10px; font-size: 14.5px; }
  .ci-som a:hover::after, .ci-som a[aria-current]::after { left: 10px; right: 10px; }
}
.p2 .ci-grid.ci-grid-seule { grid-template-columns: minmax(0, 1fr); }

/* ───────────── 3. Circuits par pays ───────────── */
.pa-outils { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; margin: 0 0 16px; padding: 14px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.pa-champ { position: relative; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff; }
.pa-champ:focus-within { border-color: var(--red-deep); box-shadow: var(--focus); }
.pa-champ .ico { width: 20px; height: 20px; color: var(--ink); flex: none; }
.pa-champ input, .pa-champ select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 15px var(--f-text); color: var(--ink); outline: none; }
.pa-champ input::placeholder { color: var(--ink-3); }
.pa-champ-l { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.pa-switch { white-space: nowrap; min-height: 44px; }
.pa-bilan { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-2); }
.pa-bilan b { font: 800 16px var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.ctable td.pa-act { font-size: 13px; color: var(--ink-2); max-width: 240px; }
.country[hidden] { display: none; }

/* ───────────── 4. Organisateurs ───────────── */
.or-tri { width: auto !important; }
.or-sort { display: flex; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.or-sort button { min-height: 40px; padding: 0 14px; border: 0; border-left: 1px solid var(--rule); background: #fff; font: 500 14px var(--f-text); color: var(--ink); cursor: pointer; }
.or-sort button:first-child { border-left: 0; }
.or-sort button[aria-checked=true] { background: var(--ink); color: #fff; font-weight: 600; }
.or-sort button:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -4px; }
.p2 .dir li { grid-template-columns: 48px minmax(0, 1.2fr) minmax(0, 1.6fr) 170px 140px; }
.p2 .dir li.or-vide { grid-template-columns: 1fr; }
.or-logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px dashed var(--rule-strong);
  font: 800 16px var(--f-display); letter-spacing: -.02em; color: var(--ink-2); }
.or-spe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.or-spe span:not(.sr-only) { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid #e4e7ea; border-radius: 6px; background: #fff; font: 600 12px var(--f-text); color: var(--ink); }
.p2 .dir .n { text-align: left; }
.or-proch { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.p2 .dir .n .or-proch b { display: inline; font: 700 12.5px/1.35 var(--f-text); letter-spacing: 0; color: var(--ink); }

@media (max-width: 1100px) {
  .p2 .dir li { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .p2 .dir li .circs { grid-column: 2 / -1; }
}
@media (max-width: 767px) {
  .pa-outils { grid-template-columns: 1fr; padding: 12px; }
  .pa-champ { height: 48px; }
  .p2 .dir li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 12px; }
  .p2 .dir li > :not(.or-logo) { grid-column: 2; }
  .p2 .dir li .go { justify-self: start; }
  .or-logo { width: 40px; height: 40px; font-size: 14px; }
  .or-tri { width: 100% !important; }
  .or-sort button { flex: 1; padding: 0 8px; font-size: 13px; }
}

/* ───────────── 5. Mon week-end : fil d'étapes, étapes repliables ───────────── */
.wk-fil { margin: 0 0 18px; }
.wk-fil ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }
.wk-fil li { position: relative; min-width: 0; border-left: 1px solid var(--rule); }
.wk-fil li:first-child { border-left: 0; }
.wk-fil a { display: flex; align-items: center; gap: 12px; padding: 14px 18px; min-height: 64px; color: var(--ink); text-decoration: none; }
.wk-fil a:hover { background: var(--paper); }
.wk-fil a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: -3px; }
.wk-e-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--rule-strong); font: 800 13px var(--f-display); color: var(--ink-2); }
.wk-e-n .ico { width: 16px; height: 16px; }
.wk-e-fait .wk-e-n { background: var(--green-2); border-color: transparent; color: var(--green); }
.wk-e-cours .wk-e-n { background: var(--ink); border-color: var(--ink); color: #fff; }
.wk-e-cours::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: var(--red); }
.wk-e-t { display: flex; flex-direction: column; min-width: 0; }
.wk-e-t b { font-weight: 700; font-size: 15px; }
.wk-e-t small { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wk-tete { display: flex; align-items: center; gap: 10px; padding-right: 18px; }
.wk-tete .card-h { flex: 1; min-width: 0; }
.wk-fait { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; padding: 4px 10px; border-radius: 6px; background: var(--green-2); color: var(--green); font: 600 12.5px var(--f-text); }
.wk-fait .ico { width: 14px; height: 14px; }
.p2 .wk-tete .wk-plier { margin-top: 14px; }
.wk-resume { margin: 0; padding: 10px 20px 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.wk-resume b { color: var(--ink); }
.wk-resume .we-pl { margin-left: 2px; }
.wk-etape { scroll-margin-top: 90px; }
.wk-etape .card-h { scroll-margin-top: 90px; }

@media (max-width: 767px) {
  .wk-fil ol { grid-template-columns: 1fr 1fr; }
  .wk-fil li:nth-child(3) { border-left: 0; }
  .wk-fil li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .wk-fil a { padding: 10px 12px; gap: 10px; min-height: 56px; }
  .wk-tete { flex-wrap: wrap; padding-right: 16px; }
  .wk-fait { margin-top: 16px; }
  .wk-resume { padding: 8px 16px 14px; }
}

/* ───────────── 6. Autour de moi : fiches compactes (≈ 65 px au lieu de 110 sur ordinateur) ───────────── */
@media (min-width: 768px) { .au-compacte .ce { grid-template-columns: 44px 60px minmax(0, 1fr) 156px 12px; gap: 12px; padding: 8px 12px; } }
.au-compacte .ce .ev-date b { font-size: 26px; }
.au-compacte .ce .ev-date span { font-size: 11.5px; margin-top: 3px; }
.au-compacte .ce .ev-date small { display: none; }
.au-compacte .ce .ev-trace { height: 46px; }
.au-compacte .ce .ev-trace .trace-mini { width: 54px; height: 40px; }
.au-compacte .ce .ev-trace .trace-none { width: 34px; height: 30px; }
.au-compacte .ce .ev-trace .trace-none span { display: none; }
.au-compacte .ce .ev-t { font-size: 16px; }
.au-compacte .ce .ev-s { font-size: 12.5px; margin: 1px 0 5px; }
.au-compacte .ce .ev-chips .tg { height: 22px; font-size: 11.5px; padding: 0 7px; }
.au-compacte .ce-side { gap: 4px; padding-left: 12px; }
.au-compacte .ce .ev-prix b { font-size: 19px; }
.au-compacte .ce .ev-prix b.nc { font: 600 12.5px/1.25 var(--f-text); color: var(--ink-2); }
.au-compacte .ce .ev-prix small { font-size: 11.5px; }
.au-compacte .ce .ev-st { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.au-compacte .ce .ev-st .bdg { padding: 3px 8px; font-size: 12px; gap: 4px; }
.au-compacte .ce .ev-st .bdg .ico { width: 14px; height: 14px; }
.au-compacte .ce .ev-st small { margin: 0; font-size: 11px; }
.au-compacte .ce-list .month { margin-top: 10px; }
@media (min-width: 768px) { .au-compacte #rayon-out span { white-space: nowrap; } }
.au-note { margin: -6px 0 0; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 767px) { .au-compacte .ce { padding: 10px 12px; } }
@media (max-width: 767px) { .au-compacte #rayon-out { min-width: 0; } .au-compacte #rayon-out span { white-space: normal; } }

/* ───────────── 7. Essence : « Quel circuit ? » au premier plan ───────────── */
.ep-choix.ep-choix-q { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 22px; }
.ep-lab { display: block; font: 800 18px/1.2 var(--f-display); letter-spacing: -.015em; color: var(--ink); }
.ep-ligne { display: flex; gap: 12px; align-items: center; }
.ep-choix-q .ep-cherche { flex: 1 1 auto; max-width: none; }
.ep-choix-q .ep-cherche input { height: 56px; font-size: 16px; border-color: var(--rule-strong); }
.ep-choix-q .ep-cherche input:focus { border-color: var(--red-deep); box-shadow: var(--focus); }
.ep-choix-q .ep-geo { height: 56px; white-space: nowrap; }
.ep-recents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ep-recents[hidden] { display: none; }
.ep-recents > span { font-size: 13px; color: var(--ink-3); margin-right: 4px; }
.ep-recents ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ep-recents a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: 99px; background: #fff; font: 500 14px var(--f-text); color: var(--ink); text-decoration: none; }
.ep-recents a:hover { border-color: var(--ink); }
.ep-recents a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ep-recents a:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 2px; }
.es-rayon { margin-left: 10px; font: 500 13px var(--f-text); letter-spacing: 0; color: var(--ink-3); }
@media (max-width: 767px) {
  .ep-ligne { flex-direction: column; align-items: stretch; }
  .ep-choix.ep-choix-q { padding: 16px; }
  .es-rayon { display: block; margin: 4px 0 0; }
}