/* Garage 404 Motos : sections de la page d'accueil. */

/* ---------- Départ ---------- */
.depart { grid-template-columns: var(--km-col) minmax(0, 1fr); padding-top: 48px; }
.depart .photo { grid-column: 2; margin-top: 56px; }

/* Titre centré : plat, une seule touche d'accent sur le dernier mot */
.depart__titre { grid-column: 2; display: grid; justify-items: center; gap: 22px; text-align: center; }
.depart h1 { font-size: clamp(2.8rem, 1rem + 6.4vw, 7rem); line-height: 0.92; max-width: 12ch; margin-bottom: 14px; }
.depart h1 mark { display: inline-block; margin-top: 0.1em; padding: 0.06em 0.14em 0.02em; background: var(--accent); color: var(--noir); }
.depart .btns { justify-content: center; }
.depart .photo__cadre { aspect-ratio: 16 / 7; }
.depart .photo__cadre img { object-position: 64% 60%; }

/* ---------- Accompagné : une phrase posée sur le ciel ---------- */
.accompagne__img { position: relative; margin: 0; overflow: hidden; }
.accompagne__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 70%; }
.accompagne__img figcaption { position: absolute; top: 9%; right: 5%; max-width: 40%; text-align: right; }
.accompagne h2 { font-size: clamp(2rem, 0.8rem + 2.6vw, 3.4rem); line-height: 1; color: var(--noir); }
.accompagne h2 mark { background: var(--accent); color: var(--noir); padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Services : la feuille de route en quatre lignes ---------- */
.feuille { border: var(--trait); background: var(--papier); }
.ligne {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  border-top: var(--trait);
}
.ligne:first-child { border-top: 0; }
.ligne__schema { position: relative; border-right: var(--trait); padding: 26px 22px 18px; }
.ligne__partiel {
  position: absolute; top: 6px; left: 8px;
  font: 700 0.95rem/1 var(--f-titre); color: var(--granit); font-variant-numeric: tabular-nums;
}
.ligne__texte { padding: 22px 26px; display: grid; gap: 8px; align-content: center; }
.ligne__note { font-size: var(--t-petit); color: var(--granit); }
.ligne__prix {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px;
  padding: 22px 26px; border-left: 1px dashed var(--moraine);
}
.ligne__prix small { font-size: var(--t-petit); color: var(--granit); }

/* ---------- Réservation ---------- */
.resa { border: var(--trait); background: var(--papier); }
.resa__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resa fieldset { margin: 0; border: 0; border-left: var(--trait); padding: 24px 24px 28px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.resa fieldset:first-child { border-left: 0; }
.resa legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.resa legend b { font: 800 1.7rem/1 var(--f-titre); text-transform: uppercase; }
.resa legend span { font: 700 1rem/1 var(--f-titre); color: var(--granit); font-variant-numeric: tabular-nums; }
.resa legend + * { clear: both; }

.choix { display: grid; gap: 8px; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix label {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 54px; padding: 10px 14px; border: var(--trait); border-radius: 3px;
  cursor: pointer; background: var(--papier); line-height: 1.25;
}
.choix label:hover { background: var(--email); }
.choix input:checked + label { background: var(--accent); box-shadow: inset 0 0 0 2px var(--noir); font-weight: 700; }
.choix input:focus-visible + label { outline: 3px solid var(--noir); outline-offset: 3px; box-shadow: 0 0 0 7px var(--accent); }
.choix label em { font: 700 1.15rem/1 var(--f-titre); font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.choix--dates { grid-template-columns: 1fr 1fr; }
.choix--dates label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.choix--dates label em { font-size: 1.05rem; }

.champ { display: grid; gap: 6px; }
.champ label { font-weight: 700; font-size: var(--t-petit); }
.champ input {
  min-height: 54px; padding: 0 14px; border: var(--trait); border-radius: 3px;
  font: inherit; background: var(--papier); color: var(--noir);
}
.champ input:focus-visible { outline: 3px solid var(--noir); outline-offset: 3px; box-shadow: 0 0 0 7px var(--accent); }

.resa__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  border-top: var(--trait); padding: 18px 24px; background: var(--email);
}
.resa__total { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resa__total > span { font-weight: 700; }
.resa__total .prix .odo { font-size: 2.3rem; }
.resa__detail { font-size: var(--t-petit); color: var(--granit); flex-basis: 100%; }
.resa__retour { padding: 0 24px 18px; background: var(--email); font-weight: 700; }
.resa__retour:empty { display: none; }

/* ---------- Motos : étiquettes cartonnées accrochées au guidon ---------- */
.guidon { display: grid; gap: 12px; }
.guidon__barre { height: 10px; background: var(--noir); border-radius: 5px; margin-inline: -6px; }
.etiquettes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 36px;
  list-style: none; margin: 0; padding: 0;
}
.etiquette { display: grid; justify-items: center; transform-origin: 50% 0; }
.etiquette:nth-child(3n+1) { transform: rotate(-1.4deg); }
.etiquette:nth-child(3n+2) { transform: rotate(0.9deg); }
.etiquette:nth-child(3n) { transform: rotate(-0.5deg); }
.ficelle { width: 40px; height: 44px; display: block; }
.ficelle path { fill: none; stroke: var(--noir); stroke-width: 2; }
.carton {
  --coupe: polygon(22% 0, 78% 0, 100% 9%, 100% 100%, 0 100%, 0 9%);
  width: 100%; background: var(--noir); padding: 2px; clip-path: var(--coupe);
}
.carton__in {
  position: relative; background: var(--papier); clip-path: var(--coupe);
  padding: 38px 18px 18px; display: grid; gap: 12px;
}
.carton__in::before {
  content: ""; position: absolute; top: 11px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--email); box-shadow: 0 0 0 2px var(--noir), 0 0 0 6px var(--accent), 0 0 0 8px var(--noir);
}
.carton .photo__cadre { aspect-ratio: 3 / 2; }
.carton .photo figcaption { position: static; margin-top: 6px; background: none; color: var(--granit); padding: 0; font-size: 0.8rem; }
.carton h3 { font-size: 1.75rem; }
.carton__fiche { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: var(--t-petit); }
.carton__fiche dt { color: var(--granit); }
.carton__fiche dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.carton__bas { display: flex; justify-content: space-between; align-items: end; gap: 10px; border-top: 2px dashed var(--noir); padding-top: 12px; }
.permis {
  display: inline-block; border: 3px solid var(--bleu-col); color: var(--bleu-col);
  font: 900 1.15rem/1 var(--f-titre); padding: 5px 8px 4px; transform: rotate(-4deg); white-space: nowrap;
}
.motos__note { font-size: var(--t-petit); color: var(--granit); }

/* ---------- Notre histoire ---------- */
.histoire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.histoire__texte { display: grid; gap: 16px; font-size: 1.12rem; }
.histoire__sign { font: 800 1.4rem/1 var(--f-titre); text-transform: uppercase; }
.histoire .photo__cadre { aspect-ratio: 4 / 5; }

/* ---------- Sorties et cols ---------- */
.sorties { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.carte { border: var(--trait); background: var(--papier); padding: 10px; }
.carte svg { display: block; width: 100%; height: auto; }
.carte .canton { fill: var(--email); stroke: var(--noir); stroke-width: 2; }
.carte .lac { fill: var(--bleu-col); }
.carte .rhone { fill: none; stroke: var(--bleu-col); stroke-width: 3.5; stroke-linecap: round; }
.carte .ville circle { fill: var(--noir); }
.carte text { font: 600 13px var(--f-texte); fill: var(--noir); }
.carte .col-nom { font: 800 14px var(--f-titre); text-transform: uppercase; }
.carte .itin .fond { fill: none; stroke: var(--moraine); stroke-width: 8; stroke-linecap: round; }
.carte .itin .milieu { fill: none; stroke: var(--granit); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.carte .itin.actif .fond { stroke: var(--accent); stroke-width: 10; }
.carte .itin.actif .milieu { stroke: var(--noir); stroke-width: 2.5; }
.carte .atelier rect { fill: var(--accent); stroke: var(--noir); stroke-width: 2; }
.carte .atelier text { font: 900 12px var(--f-titre); }
.carte__legende { font-size: 0.8rem; color: var(--granit); padding: 6px 4px 0; }

.itins { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.itin-btn {
  width: 100%; text-align: left; cursor: pointer; display: grid; gap: 6px;
  border: var(--trait); border-radius: 3px; background: var(--papier); color: var(--noir);
  padding: 14px 16px; font: inherit;
}
.itin-btn:hover { background: var(--email); }
.itin-btn[aria-pressed="true"] { background: var(--accent); }
.itin-btn b { font: 800 1.5rem/1 var(--f-titre); text-transform: uppercase; }
.itin-btn .chiffres { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--t-petit); font-variant-numeric: tabular-nums; }
.itin-btn .chiffres strong { font: 800 1.15rem/1 var(--f-titre); }
.sorties__pistes { border-left: 6px solid var(--accent); padding: 4px 0 4px 14px; font-size: var(--t-petit); }

/* ---------- Arrivée ---------- */
.arrivee { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--trait); background: var(--papier); }
.arrivee > div { padding: 22px 24px; display: grid; gap: 10px; align-content: start; border-left: var(--trait); min-width: 0; }
.arrivee > div:first-child { border-left: 0; }
.arrivee h3 { font-size: 1.5rem; }
.arrivee address { font-style: normal; }
.horaires { border-collapse: collapse; font-variant-numeric: tabular-nums; width: 100%; }
.horaires th { text-align: left; font-weight: 400; color: var(--granit); padding: 3px 12px 3px 0; white-space: nowrap; }
.horaires td { padding: 3px 0; font-weight: 700; }
.liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.liens a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.copier { margin-top: 4px; }

/* ---------- Tablette ---------- */
@media (max-width: 1080px) {
  .depart .photo__cadre { aspect-ratio: 16 / 9; }
  .etiquettes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resa__etapes { grid-template-columns: 1fr; }
  .resa fieldset { border-left: 0; border-top: var(--trait); }
  .resa fieldset:first-child { border-top: 0; }
  .choix--dates { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .depart { padding-top: 24px; }
  .depart__titre { margin-top: 8px; gap: 16px; }
  .depart .photo { margin: 32px 0 0 -34px; }
  .depart .photo__cadre { aspect-ratio: 5 / 4; }
  .accompagne__img { display: flex; flex-direction: column-reverse; margin-left: -34px; }
  .accompagne__img figcaption { position: static; max-width: none; padding: 0 0 20px 34px; text-align: left; }
  .accompagne__img img { aspect-ratio: 4 / 3; object-position: 30% 70%; }

  .ligne { grid-template-columns: 96px minmax(0, 1fr); }
  .ligne__schema { padding: 24px 10px 10px; }
  .ligne__texte { padding: 16px; }
  .ligne__prix { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; border-left: 0; border-top: 1px dashed var(--moraine); padding: 12px 16px; }

  .resa fieldset { padding: 20px 16px 22px; }
  .choix--dates { grid-template-columns: 1fr 1fr; }
  .resa__bas { padding: 16px; }
  .resa__bas .btn { flex: 1 1 100%; }

  .guidon__barre { display: none; }
  .etiquettes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px;
    margin-left: -34px; margin-right: -16px; padding: 0 16px 12px 34px;
  }
  .etiquette { flex: 0 0 78%; scroll-snap-align: center; }

  .histoire, .sorties { grid-template-columns: 1fr; }
  .histoire .photo { margin-left: -34px; }
  .carte { margin-left: -34px; }

  .arrivee { grid-template-columns: 1fr; }
  .arrivee > div { border-left: 0; border-top: var(--trait); padding: 18px 16px; }
  .arrivee > div:first-child { border-top: 0; }
}