/* ==========================================================================
   Gabarit fiche. Sert la fiche adresse et, à terme, la fiche étape.
   ========================================================================== */

.fiche__bandeau {
  height: 340px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background-color: var(--vert-coteau);
  background-image: url("/statique/images/motifs/filigrane-blanc.svg");
  background-repeat: repeat;
  background-size: 96px auto;
}
.fiche__bandeau img { width: 100%; height: 100%; object-fit: cover; }

.fiche__contenu {
  max-width: var(--largeur-site);
  margin: 0 auto;
  padding: var(--esp-12) var(--esp-12) var(--esp-16);
  display: flex; flex-direction: column; gap: var(--esp-12);
}

.fiche__identite { display: flex; flex-direction: column; gap: var(--esp-2); }
.fiche__meta,
.fiche__etape { font-size: var(--taille-legende); color: var(--vert-coteau); }

/* Le contact est premier dans le DOM. Ici la grille le renvoie à droite ;
   sur mobile la colonne unique le laisse juste sous le titre. */
.fiche__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--esp-12);
  align-items: start;
}
.fiche__aside     { grid-column: 2; grid-row: 1; position: sticky; top: var(--esp-6); }
.fiche__principal { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--esp-12); }
.fiche__texte     { max-width: var(--largeur-lecture); }

/* --- Bloc contact (T3) ----------------------------------------------------
   Corps à 18 px minimum, jamais moins : c’est lui qui déclenche l’action. */
.contact {
  background: var(--creme-haut);
  border: var(--filet);
  border-radius: var(--rayon);
  padding: var(--esp-6);
  display: flex; flex-direction: column; gap: var(--esp-4);
  font-size: var(--taille-corps);
}
.contact__titre {
  font-family: var(--font-texte);
  font-size: var(--taille-corps);
  font-weight: var(--poids-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vert-coteau);
}
/* Le numéro monte au-dessus du corps. */
.contact__tel {
  display: flex; align-items: center;
  min-height: var(--cible-tactile-min);
  font-size: var(--taille-h3);
  font-weight: var(--poids-semibold);
  color: var(--vert-profond);
  text-decoration: none;
}
.contact__tel:hover { text-decoration: underline; }
.contact__manquant { color: var(--vert-coteau); }
.contact__liste { margin: 0; }
.contact__liste dt { font-size: var(--taille-legende); color: var(--vert-coteau); }
.contact__liste dd { margin: 0 0 var(--esp-2); }
.contact__actions { display: flex; flex-direction: column; gap: var(--esp-2); }

/* Mode « réservation ». La plateforme est nommée juste sous le bouton, en
   légende : le visiteur doit savoir chez qui il part avant de cliquer. */
.contact__plateforme {
  margin: var(--esp-2) 0 0;
  font-size: var(--taille-legende);
  color: var(--vert-coteau);
}
/* Le lien secondaire reste à 18 px : le bloc contact ne descend pas sous le
   plancher du corps de texte, même pour une action de second rang. */
.contact__secondaire {
  margin: var(--esp-4) 0 0;
  font-size: var(--taille-corps);
}

/* --- Services -------------------------------------------------------------- */
.services__liste,
.services__atouts { list-style: none; margin: var(--esp-4) 0 0; padding: 0; }
.services__liste { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); }
.services__item  { display: flex; align-items: center; gap: var(--esp-2); min-height: var(--cible-tactile-min); }
.services__icone { flex: none; color: var(--vert-profond); }
.services__atouts { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.services__atouts li {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--rayon-pastille);
  background: var(--vert-pale);
  font-size: var(--taille-nav);
}

/* --- Galerie, carte -------------------------------------------------------- */
.galerie__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); margin-top: var(--esp-4); }
.galerie__photo { margin: 0; }
.galerie__photo figcaption { margin-top: var(--esp-1); font-size: var(--taille-legende); color: var(--vert-profond); }
.galerie__grille img { display: block; width: 100%; height: auto; border-radius: var(--rayon); object-fit: cover; aspect-ratio: 3 / 2; }
.galerie__vide { margin-top: var(--esp-4); color: var(--vert-coteau); }

.situer__carte {
  display: flex; align-items: center; justify-content: center;
  height: 280px; margin-top: var(--esp-4);
  border-radius: var(--rayon); text-decoration: none;
}
.situer__meta { margin-top: var(--esp-2); font-size: var(--taille-legende); color: var(--vert-coteau); }

/* --- Triptyque ------------------------------------------------------------- */
.triptyque__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); margin-top: var(--esp-6); }

/* --- Bas de fiche ---------------------------------------------------------- */
.partage {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-6); flex-wrap: wrap;
  padding-top: var(--esp-8); border-top: var(--filet);
}
.partage__actions,
.partage__langue { display: flex; align-items: center; gap: var(--esp-3); }

/* --- Barre d’appel collante (mobile) ---------------------------------------
   Apparaît quand le bloc contact sort de l’écran. */
.barre-appel { display: none; }

@media (max-width: 900px) {
  .fiche__bandeau  { height: 200px; }
  .fiche__contenu  { padding: var(--esp-6) var(--esp-4) var(--esp-16); gap: var(--esp-8); }
  .fiche__corps    { grid-template-columns: 1fr; gap: var(--esp-8); }
  .fiche__aside,
  .fiche__principal { grid-column: 1; grid-row: auto; position: static; }
  .fiche__principal { gap: var(--esp-8); }
  .galerie__grille   { grid-template-columns: repeat(2, 1fr); }
  .triptyque__grille { grid-template-columns: 1fr; }
  .contact__actions  { flex-direction: row; flex-wrap: wrap; }

  .barre-appel {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
    padding: var(--esp-3) var(--esp-4);
    background: var(--creme-calcaire);
    border-top: var(--filet);
    box-shadow: 0 -8px 24px rgba(63, 70, 46, 0.10);
  }
  .barre-appel[hidden] { display: none; }
  .barre-appel__nom { font-weight: var(--poids-semibold); }
}

@media print {
  .en-tete, .pied, .partage, .barre-appel, .situer__carte { display: none; }
}

/* --- Mention de propriété ---------------------------------------------------
   Une déclaration d'intérêt, pas une note de bas de page décorative : elle
   reste à 18 px, au-dessus du plancher des légendes, et se détache par un
   filet plutôt que par une couleur pâle qui la ferait passer pour un détail. */
.fiche__mention {
  margin: var(--esp-8) 0 0;
  padding-top: var(--esp-4);
  border-top: 1px solid rgba(104, 112, 80, 0.25);
  font-size: var(--taille-corps);
  color: var(--vert-profond);
  max-width: var(--largeur-lecture);
}

/* --- Mini-carte en SVG ---------------------------------------------------------
   Quand l'adresse est située, le plan remplace la trame. Le sélecteur est
   qualifié (.situer .situer__carte--plan) pour passer devant la règle de trame
   partagée de 20-composants.css. */
.situer .situer__carte--plan {
  display: block;
  height: auto;
  background: var(--vert-pale);
  background-image: none;
  border: 1px solid rgba(104, 112, 80, 0.25);
}
.mini-carte { display: block; width: 100%; height: auto; }
.mini-carte__trace { fill: none; stroke: var(--vert-coteau); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.mini-carte__trace--partiel { stroke-dasharray: 3 11; stroke-linecap: butt; }
.mini-carte__borne { fill: var(--creme-calcaire); stroke: var(--vert-profond); stroke-width: 3; }
.mini-carte__halo  { fill: var(--vert-profond); opacity: 0.25; }
.mini-carte__point { fill: var(--vert-profond); stroke: var(--creme-calcaire); stroke-width: 3; }
.situer__carte--plan:hover .mini-carte__halo,
.situer__carte--plan:focus-visible .mini-carte__halo { opacity: 0.45; }
/* La mini-carte devenue Leaflet : hauteur fixe, comme la trame qu'elle remplace. */
.situer .situer__carte--active { height: 320px; padding: 0; }
.situer__retour { margin: var(--esp-2) 0 0; }
.situer__retour a { display: inline-flex; align-items: center; min-height: var(--cible-tactile-min); font-weight: var(--poids-medium); }