/* Vue Terrain : le plan collé sous la barre, les sept consignes, puis « Venir » (la seule fin de page). */
#terrain .v-tete { order: -3; }
.t-intro { order: -2; padding: 0 max(var(--marge), env(safe-area-inset-left)) 16px; font: 500 16px/1.4 var(--f-texte); color: var(--olive); max-width: 34em; }
.bandeau-terrain { display: none; }
.terrain {
  order: -1; position: sticky; top: calc(var(--demobar-offset, 0px) + var(--barre-h)); z-index: 3;
  height: 34svh; min-height: 220px; background: var(--acide); border-block: 2px solid var(--noir);
}
.t-plan { width: 100%; height: 100%; }
.t-riv-bord { fill: none; stroke: var(--noir); stroke-width: 56; }
.t-riv { fill: none; stroke: url(#t-eau); stroke-width: 50; }
.t-butte ellipse { fill: var(--acide); stroke: var(--noir); stroke-width: 2.5; }
.t-butte ellipse:last-child { fill: var(--noir); }
.t-pin-bord { fill: none; stroke: var(--noir); stroke-width: 7; }
.t-pin { fill: var(--acide-enfonce); }
.t-piste { fill: none; stroke: var(--noir); stroke-width: 36; stroke-linejoin: round; stroke-linecap: round; }
.t-piste-bord { fill: none; stroke: var(--noir); stroke-width: 54; stroke-linecap: round; stroke-linejoin: round; opacity: .3; }
.t-bras { fill: none; stroke: var(--noir); stroke-width: 26; stroke-linecap: round; }
.t-box rect { fill: var(--noir); }
.t-box .t-porte { stroke: var(--acide); stroke-width: 7; }
.t-box use { color: var(--acide); }
.t-noms text, .t-nord text { font: 700 38px var(--f-titre); fill: var(--noir); paint-order: stroke; stroke: var(--acide); stroke-width: 10px; stroke-linejoin: round; }
.t-nord path { fill: var(--noir); }
.t-nord text { font-size: 30px; }
.t-ssv .t-caisse { fill: var(--blanc); stroke: var(--noir); stroke-width: 3.5; }
.t-ssv .t-roue { fill: var(--noir); }
.t-ssv .t-arceau { fill: none; stroke: var(--noir); stroke-width: 3.5; }
.t-chrono {
  position: absolute; top: 8px; right: max(10px, env(safe-area-inset-right)); display: grid; justify-items: end;
  padding: 6px 10px 5px; background: var(--noir); color: var(--acide);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}
.tc-mot { font: 500 11.5px/1 var(--f-texte); color: var(--gris); }
.tc-temps { font: 700 30px/1 var(--f-titre); margin-top: 3px; }

.consignes { padding: 8px 0 0; }
.consignes li { border-bottom: 2px solid var(--noir); }
.consigne {
  display: grid; align-content: center; gap: 6px; width: 100%; min-height: 26svh; text-align: left;
  padding: 20px max(var(--marge), env(safe-area-inset-right)) 20px max(var(--marge), env(safe-area-inset-left));
}
.c-lieu { justify-self: start; font: 700 26px/1 var(--f-titre); text-transform: uppercase; padding: 4px 0; transition: background-color .2s, color .2s, padding .2s; }
.c-texte { font: 400 16.5px/1.45 var(--f-texte); max-width: 30em; }
.consigne.actif .c-lieu { background: var(--noir); color: var(--acide); padding: 4px 10px; }

.venir { padding: 40px max(var(--marge), env(safe-area-inset-left)) 32px; display: grid; gap: 14px; }
.venir h2 { font: 700 40px/1 var(--f-titre); text-transform: uppercase; }
.v-adresse { font: 700 24px/1.15 var(--f-titre); text-transform: uppercase; }
.v-plan { display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1 var(--f-texte); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.v-heures { display: grid; gap: 10px; }
.v-heures dt { font: 500 16px/1.3 var(--f-texte); color: var(--olive); }
.v-heures dd { margin: 2px 0 0; font: 700 28px/1 var(--f-titre); white-space: nowrap; }
.v-tel a { display: inline-flex; align-items: center; min-height: 48px; font: 700 22px/1 var(--f-texte); text-decoration: none; border-bottom: 3px solid var(--noir); }
.mentions { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--noir); display: grid; gap: 4px; font: 400 14px/1.45 var(--f-texte); color: var(--olive); }

/* Téléphone et tablette : le plan ne colle que le temps des consignes (sa zone de grille s'arrête avec elles),
   puis « Venir » défile en plein écran */
@media (max-width: 1099px) {
  #terrain { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto var(--plan-h) auto auto; --plan-h: max(220px, 34svh); }
  #terrain > .volet > * { grid-column: 1; }
  #terrain .v-tete { grid-row: 1; }
  .t-intro { grid-row: 2; }
  .terrain { grid-row: 3 / 5; align-self: start; height: var(--plan-h); min-height: 0; }
  .consignes { grid-row: 4; }
  /* « Venir » passe par-dessus le plan et occupe tout l'écran à la fin : le plan ne reste pas figé sous l'adresse */
  .venir { grid-row: 5; position: relative; z-index: 4; background: var(--acide); border-top: 2px solid var(--noir); align-content: start;
    min-height: calc(100svh - var(--demobar-offset, 0px) - var(--barre-h) - var(--onglets-h) - env(safe-area-inset-bottom)); }
}
@media (max-width: 1099px) and (min-width: 768px) { #terrain { --plan-h: 44svh; } .venir { min-height: calc(100svh - var(--demobar-offset, 0px)); } }
/* Téléphone couché : le plan passe à côté des consignes au lieu de manger la hauteur */
@media (max-width: 1099px) and (max-height: 480px) and (orientation: landscape) {
  #terrain { grid-template-columns: minmax(0, 1fr) 45%; grid-template-rows: auto auto auto auto; column-gap: 0; }
  #terrain > .volet > .terrain { grid-column: 2; }
  .terrain { grid-row: 1 / 5; height: calc(100svh - var(--demobar-offset, 0px)); border-block: 0; border-left: 2px solid var(--noir); }
  .consigne { min-height: 60svh; }
}
@media (min-width: 768px) {
  .terrain { top: var(--demobar-offset, 0px); }
  .t-chrono { top: 14px; right: 18px; }
  .tc-temps { font-size: 40px; }
}

@media (min-width: 1100px) {
  .volet-terrain { display: flex; flex-direction: column; overflow: hidden; }
  .bandeau-terrain { display: block; flex: none; height: clamp(220px, 30vh, 360px); }
  .bandeau-terrain img { object-position: 50% 45%; }
  .terrain { position: relative; top: auto; flex: 1; min-height: 0; height: auto; border: 0; padding: 28px var(--marge) 32px; }
  .t-chrono { top: 24px; right: var(--marge); padding: 10px 16px 8px; }
  .tc-mot { font-size: 13px; }
  .tc-temps { font-size: 64px; }
  .t-intro { padding: 8px var(--marge) 20px; }
  .consigne { min-height: 34vh; padding: 24px var(--marge); }
  .c-lieu { font-size: 34px; }
  .c-texte { font-size: 20px; line-height: 1.4; }
  .consignes li:last-child .consigne { min-height: 40vh; }
  .venir { padding: 48px var(--marge) 40px; }
}