/**
 * Encart « où nous trouver » — voir inc/carte.php
 *
 * N'introduit aucune valeur en dur : couleurs, espacements, rayons et
 * transitions viennent des jetons --ln-* déclarés en tête du CSS Divi
 * (cf. docs/ui-ux.md § Système de couleurs).
 */

.ln-carte {
  /* Explicite : la largeur du flottant ci-dessous doit être la largeur totale,
     quelle que soit la règle de box-sizing du thème parent. */
  box-sizing: border-box;
  border: 1px solid var(--ln-line, #ECE3DF);
  border-radius: var(--ln-radius, 14px);
  background: var(--ln-cream, #FBF7F5);
  padding: var(--ln-s4, 16px);
  margin: var(--ln-s5, 24px) 0;
  max-width: 27rem;
}

/*
 * Sur grand écran, l'encart se range à droite du titre et les paragraphes
 * d'accueil s'écoulent à sa gauche — c'est le « à côté de Onglerie à
 * Annemasse » demandé, plutôt qu'un bloc isolé sous le texte.
 *
 * 981px est le seuil de Divi pour le passage en une colonne : en dessous,
 * l'encart reprend sa place dans le flux, pleine largeur.
 *
 * `flow-root` sur le conteneur Divi enferme le flottant. Sans lui, un encart
 * plus haut que le texte déborderait sur le titre « Traitements & Prix ».
 */
@media (min-width: 981px) {
  .ln-carte--cote {
    float: right;
    width: 22rem;
    max-width: 40%;
    margin: 0 0 var(--ln-s4, 16px) var(--ln-s5, 24px);
  }

  .et_pb_text_inner:has(> .ln-carte--cote) { display: flow-root; }
}

/*
 * En dessous, plus de flottant : l'encart redescend dans le flux. Mais comme il
 * doit précéder les paragraphes dans le HTML (contrainte du flottant), il
 * s'intercalerait entre le titre et le texte d'accueil — soit l'inverse de la
 * hiérarchie que le grand écran installe, où l'on lit le titre puis le
 * paragraphe, l'encart restant sur le côté.
 *
 * `order` rétablit donc la lecture titre › texte › encart, sans toucher à
 * l'ordre du HTML dont dépend le flottant.
 */
@media (max-width: 980px) {
  .et_pb_text_inner:has(> .ln-carte--cote) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .et_pb_text_inner > .ln-carte--cote { order: 1; width: 100%; }
}

/*
 * Sélecteur inhabituel, et il le faut. Le CSS du site pose :
 *   h2, .et_pb_module h2 { font-size: clamp(2rem, 4.4vw, 3.125rem) !important }
 *   #services h2         { margin-bottom: var(--ln-s6) !important }
 *
 * `!important` seul ne suffit pas : entre deux déclarations `!important`, c'est
 * la spécificité qui tranche. `.ln-carte__titre` (0,1,0) perd contre
 * `.et_pb_module h2` (0,1,1), et tout sélecteur de classes perd contre
 * `#services h2` (1,0,1) qui porte un ID. Mesuré avant correction : le titre
 * sortait à **50 px** avec 32 px de marge, dans une carte de 22 rem.
 *
 * On s'appuie donc sur l'id que l'élément porte déjà (il sert à
 * `aria-labelledby`) : `#ln-carte-titre.ln-carte__titre` vaut (1,1,0) et passe
 * devant les deux. La famille et la couleur héritées de Divi sont les bonnes —
 * on n'y touche pas.
 */
#ln-carte-titre.ln-carte__titre {
  font-size: 1.25rem !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--ln-s3, 12px) !important;
}

.ln-carte__adresse {
  display: flex;
  gap: var(--ln-s2, 8px);
  align-items: flex-start;
  color: var(--ln-ink-soft, #4A4653);
  margin: 0 0 var(--ln-s3, 12px);
  line-height: 1.45;
}

.ln-carte__adresse strong { color: var(--ln-ink, #14121C); }

.ln-carte__pin {
  color: var(--ln-rose-700, #A8443C);
  flex: 0 0 auto;
  margin-top: 0.15em;
}

.ln-carte__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ln-s2, 8px) var(--ln-s3, 12px);
  align-items: center;
  margin: 0;
}

/*
 * Cible tactile : mesurés à 375 px, les trois liens sortaient à
 * 25–27 px de haut (WCAG 2.5.5 demande 44). La boîte monte à 44 px,
 * le texte reste verticalement centré ; l'écart horizontal de 12 px
 * entre liens reste au-dessus des 8 px requis.
 */
.ln-carte__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ln-rose-700, #A8443C);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ln-dur, 220ms) var(--ln-ease, cubic-bezier(.22,.61,.36,1));
}

.ln-carte__lien:hover,
.ln-carte__lien:focus-visible { color: var(--ln-rose-800, #8C3A34); }

.ln-carte__lien--discret { font-size: 0.9375rem; }

/* --- plan chargé à la demande ------------------------------------------- */

.ln-carte__plan { margin-top: var(--ln-s3, 12px); }

.ln-carte__afficher {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ln-rose-700, #A8443C);
  background: #fff;
  border: 1px dashed var(--ln-line, #ECE3DF);
  border-radius: var(--ln-radius-sm, 8px);
  padding: var(--ln-s3, 12px);
  transition: border-color var(--ln-dur, 220ms) var(--ln-ease, cubic-bezier(.22,.61,.36,1));
}

.ln-carte__afficher:hover,
.ln-carte__afficher:focus-visible { border-color: var(--ln-rose-700, #A8443C); }

/* La raison du clic doit être lisible, pas cachée dans une infobulle. */
.ln-carte__note {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ln-ink-muted, #6B6775);
}

/* Ratio réservé avant insertion : évite que la page saute au chargement. */
.ln-carte__plan iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--ln-radius-sm, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .ln-carte__lien,
  .ln-carte__afficher { transition: none; }
}