/* Garage BA Mécanique — « Adresse et heures » refaite : fiche (statut, adresse, téléphone, Appeler),
   carte interactive sombre avec « Voir l'itinéraire », tableau des heures avec le jour actuel.
   Ordinateur : fiche et heures à gauche (5/12), la carte à droite sur toute la hauteur (7/12).
   Téléphone : fiche, carte, heures, dans cet ordre. */

.visite__grille {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "fiche carte" "horaires carte";
  grid-template-rows: auto 1fr;
  gap: 20px;
}
.fiche { grid-area: fiche; }
.carte-geo { grid-area: carte; }
.horaires { grid-area: horaires; }
@media (max-width: 899px) {
  .visite__grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fiche" "carte" "horaires"; grid-template-rows: auto; gap: 16px; }
}

/* ---------- la fiche ---------- */
.fiche, .horaires {
  background: var(--p-surface); border: 1px solid var(--line-soft); border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
}
.fiche { display: grid; gap: 24px; align-content: start; }
.fiche > * { margin: 0; }

.statut {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  font-size: 15px; font-weight: 500; line-height: 1.2;
  background: rgb(255 255 255 / 0.06); color: var(--p-ink);
}
.statut .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--p-muted); flex: none; }
.statut[data-etat="ouvert"] { background: rgb(90 209 127 / 0.12); color: var(--ok); }
.statut[data-etat="ouvert"] .pastille { background: var(--ok); box-shadow: 0 0 0 3px rgb(90 209 127 / 0.2); }
.statut[data-etat="ferme"] { background: rgb(201 42 34 / 0.16); color: #ff9a90; }
.statut[data-etat="ferme"] .pastille { background: #ff6b5e; }

.fiche__bloc { display: grid; gap: 6px; }
.fiche__bloc > * { margin: 0; }
.fiche__label { font-size: 14px; font-weight: 500; color: var(--p-muted); }
.fiche__adresse { font-style: normal; }
.fiche__adresse a { color: inherit; text-decoration: none; display: grid; gap: 6px; }
.fiche__rue {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(32px, 3.2vw, 44px); line-height: 1;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em;
  text-decoration-color: rgb(242 240 235 / 0.25); transition: text-decoration-color 200ms ease;
}
.fiche__ville { font-size: 17px; line-height: 1.45; color: rgb(242 240 235 / 0.82); }
.fiche__tel {
  justify-self: start; font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 44px); line-height: 1;
  letter-spacing: 0.01em; color: var(--p-ink); text-decoration: none; font-variant-numeric: tabular-nums;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fiche__adresse a:hover .fiche__rue { text-decoration-color: currentColor; }
  .fiche__tel:hover { color: #ff6b5e; }
}
.fiche__actions { margin-top: 4px; }
.fiche__actions .btn { height: 52px; padding-inline: 26px; font-size: 17px; }
@media (max-width: 639px) { .fiche__actions .btn { width: 100%; } }

/* ---------- le tableau des heures ---------- */
.horaires { display: grid; gap: 16px; align-content: start; }
.horaires > * { margin: 0; }
.horaires__titre { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1.1; letter-spacing: 0.01em; }
.horaires__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.horaires__table th, .horaires__table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.horaires__table tr:last-child th, .horaires__table tr:last-child td { border-bottom: 0; }
.horaires__table th { text-align: left; font-weight: 400; color: var(--p-ink); }
.horaires__table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--p-ink); white-space: nowrap; }
.horaires__table tr.ferme td { color: var(--p-muted); }
.horaires__table tr.aujourdhui th, .horaires__table tr.aujourdhui td { background: rgb(201 42 34 / 0.16); font-weight: 600; border-bottom-color: transparent; }
.horaires__table tr.aujourdhui th { border-radius: 10px 0 0 10px; }
.horaires__table tr.aujourdhui td { border-radius: 0 10px 10px 0; }
.badge-auj {
  display: inline-block; margin-left: 10px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--p-action); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2;
}
.horaires__note { font-size: 15px; color: var(--p-muted); }

/* ---------- la carte ---------- */
.carte-geo { position: relative; min-height: 560px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-soft); background: #0e0d0c; isolation: isolate; }
@media (max-width: 899px) { .carte-geo { min-height: 0; aspect-ratio: 1 / 1; } }
@media (min-width: 640px) and (max-width: 899px) { .carte-geo { aspect-ratio: 16 / 10; } }
.carte-geo__map { position: absolute; inset: 0; z-index: 0; background: #0e0d0c; }
.carte-geo__repli {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: var(--p-muted); font-size: 15px; text-align: center; padding: 24px;
}
.carte-geo__repli-pin { width: 40px; height: 40px; fill: var(--p-action); }
.carte-geo__map.est-chargee .carte-geo__repli { display: none; }
.carte-geo a.carte-geo__itineraire.btn {
  position: absolute; z-index: 500; left: 20px; bottom: 20px; height: 52px; padding-inline: 22px 24px; font-size: 17px;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.75);
}
.carte-geo__ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 639px) { .carte-geo a.carte-geo__itineraire.btn { left: 12px; right: 12px; bottom: 12px; justify-content: center; } }

/* Leaflet, habillé en sombre */
.carte-geo .leaflet-container { background: #0e0d0c; font: 13px/1.4 var(--font-text); color: var(--p-ink); }
.carte-geo .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.18); }
.carte-geo .leaflet-bar { border: 1px solid var(--line-mid); box-shadow: none; border-radius: 10px; overflow: hidden; }
.carte-geo .leaflet-container .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; background: #1d1c1a; color: var(--p-ink); border-bottom-color: var(--line-mid); font-size: 20px; }
.carte-geo .leaflet-bar a:hover { background: #2a2826; color: #fff; }
.carte-geo .leaflet-control-zoom { margin: 16px 16px 0 0; }
.carte-geo .leaflet-top.leaflet-left { left: auto; right: 0; }
.carte-geo .leaflet-container .leaflet-control-attribution { background: rgb(14 13 12 / 0.78); color: #b9b7b2; font-size: 12px; padding: 2px 8px; border-top-left-radius: 8px; }
.carte-geo .leaflet-container .leaflet-control-attribution a { color: #e6e4df; }
@media (max-width: 639px) { .carte-geo .leaflet-bottom.leaflet-right { bottom: 72px; } }

/* le repère : une épingle rouge portant le logo */
.repere { background: none; border: 0; }
.repere__pin {
  position: absolute; left: 2px; top: 0; width: 48px; height: 48px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--p-action); display: grid; place-items: center;
  box-shadow: 0 8px 20px -6px rgb(0 0 0 / 0.8), 0 0 0 3px rgb(18 17 16 / 0.9);
}
.carte-geo .repere__pin img { width: 28px !important; height: auto !important; max-width: none; transform: rotate(45deg); position: static; }
.repere__halo { position: absolute; left: 14px; top: 52px; width: 24px; height: 10px; border-radius: 50%; background: rgb(0 0 0 / 0.55); filter: blur(2px); }
.carte-geo .leaflet-container .repere__etiquette {
  background: #121110; color: var(--p-ink); border: 1px solid var(--line-mid); border-radius: 10px;
  padding: 8px 12px; font: 14px/1.35 var(--font-text); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.8);
}
.carte-geo .repere__etiquette strong { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 16px; letter-spacing: 0.02em; }
.carte-geo .repere__etiquette::before { border-right-color: #121110; }

/* =====================================================================
   CARTES DE SERVICES AVEC ICÔNES
   ===================================================================== */
.carte--icone { padding: 28px 26px 26px; gap: 20px; min-height: 250px; }
.carte--icone .carte__corps { padding: 0; }
.carte__icone {
  width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.04); border: 1px solid var(--line-soft);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.ic { width: 52px; height: 52px; overflow: visible; fill: none; stroke: var(--p-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ic .acc, .ic .acc * { stroke: #e2433a; }
.ic g { transform-box: fill-box; transform-origin: center; }

/* apparition : le trait se dessine une fois quand la carte arrive */
@media (prefers-reduced-motion: no-preference) {
  .js .carte--icone[data-reveal] .ic :is(path, circle, rect) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .carte--icone[data-reveal].est-visible .ic :is(path, circle, rect) {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--ease-out) calc(var(--i, 0) * 70ms + 150ms);
  }
  .js .carte--icone[data-reveal].est-visible .ic .acc :is(path, circle, rect) { transition-delay: calc(var(--i, 0) * 70ms + 450ms); }
}

/* survol : un geste propre à chaque outil, court, sur transform */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .carte--icone .ic g { transition: transform 420ms var(--ease-out); }
  .carte--icone:hover .carte__icone { background: rgb(201 42 34 / 0.12); border-color: rgb(201 42 34 / 0.4); }
  .carte--icone:hover .ic-clef { transform: rotate(-16deg); }
  .carte--icone:hover .ic-tournevis { transform: rotate(14deg); }
  .carte--icone:hover .ic-code { transform: scale(1.12); }
  .carte--icone:hover .ic-goutte { animation: goutte 700ms var(--ease-out) both; }
  .carte--icone:hover .ic-roue { transform: rotate(120deg); transition-duration: 700ms; transition-timing-function: var(--ease-in-out); }
  .carte--icone:hover .ic-pignon { transform: rotate(90deg); }
  .carte--icone:hover .ic-signal { animation: signal 900ms var(--ease-out) both; }
  .carte--icone:hover .ic-loupe { transform: translate(-2px, -2px) scale(1.06); }
  .carte--icone:hover .ic-coches { animation: signal 600ms var(--ease-out) both; }
}
@keyframes goutte { 0% { transform: translateY(0); } 45% { transform: translateY(4px); opacity: 1; } 60% { opacity: 0; transform: translateY(6px); } 61% { transform: translateY(-4px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes signal { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ic-signal, .ic-coches { stroke-dasharray: 1; stroke-dashoffset: 0; }