.fr-couv {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.fr-texte p { margin-top: 1rem; }

.fr-texte .fr-pastille {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; max-width: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem; font-size: .86rem; font-weight: 600; color: var(--marine);
  box-shadow: var(--shadow-carte); white-space: nowrap; line-height: 1.2;
}
.fr-pastille svg { width: 16px; height: 16px; color: var(--ink-mute); flex: none; }
.fr-point-vert {
  width: 8px; height: 8px; border-radius: 50%; background: var(--vert); flex: none;
  animation: fr-pulser 2.4s ease-out infinite;
}
@keyframes fr-pulser {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

.fr-carte { position: relative; }
.fr-svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (max-width: 900px) {
  .fr-couv { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .fr-carte { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .fr-couv { gap: 1.4rem; }
  .fr-carte { margin-inline: calc(2px - clamp(1.6rem, 3.2vw, 2.6rem)); width: auto; max-width: none; }
}
@media (max-width: 380px) {
  .fr-texte .fr-pastille { white-space: normal; border-radius: 18px; }
}

.fr-terre { fill: none; stroke-width: 3.7; stroke-linecap: round; }

.fr-piste, .fr-allume {
  fill: none; stroke: var(--bleu-600); stroke-linecap: round;
  stroke-dasharray: 0 7.4;
}
.fr-piste { stroke-width: 3; stroke-opacity: .5; }
.fr-allume { stroke-width: 4.6; }

.fr-fenetre { fill: none; stroke: #fff; stroke-width: 20; }
.fr-f1 { stroke-dasharray: 34 400; stroke-opacity: .3;  stroke-dashoffset: 34; }
.fr-f2 { stroke-dasharray: 20 400; stroke-opacity: .55; stroke-dashoffset: 20; }
.fr-f3 { stroke-dasharray: 8 400;  stroke-opacity: 1;   stroke-dashoffset: 8; }

.fr-tete {
  fill: none; stroke: var(--bleu-600); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 0 400; stroke-dashoffset: 0;
}

.fr-halo { fill: var(--bleu-600); opacity: .12; }
.fr-point { fill: var(--bleu-600); stroke: #fff; stroke-width: 2.6; }
.fr-hub .fr-point { fill: var(--marine); }
.fr-hub .fr-halo { opacity: .14; }
.fr-onde {
  fill: none; stroke: var(--bleu-600); stroke-width: 1.5; opacity: 0;
  vector-effect: non-scaling-stroke;
}
.fr-point, .fr-onde { transform-box: fill-box; transform-origin: center; }

.fr-nom {
  font-family: var(--font); font-size: 18px; font-weight: 740; letter-spacing: -.01em;
  fill: var(--marine);
  paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round;
}
@media (max-width: 560px) {
  .fr-nom { font-size: clamp(18px, calc(43.2px - 5.29vw), 26.5px); stroke-width: 6px; }
  .fr-piste { stroke-width: 3.5; stroke-opacity: .6; }
  .fr-allume { stroke-width: 4.4; }
  .fr-tete { stroke-width: 9.5; }
}

@media (prefers-reduced-motion: no-preference) {
  .fr-carte {
    --fr-cycle: 7s;
    --fr-courbe: cubic-bezier(.45, .05, .3, 1);
  }
  .fr-tete { animation: fr-tete var(--fr-cycle) var(--fr-courbe) infinite; }
  .fr-f1   { animation: fr-f1 var(--fr-cycle) var(--fr-courbe) infinite; }
  .fr-f2   { animation: fr-f2 var(--fr-cycle) var(--fr-courbe) infinite; }
  .fr-f3   { animation: fr-f3 var(--fr-cycle) var(--fr-courbe) infinite; }
  .fr-lumiere { animation: fr-lumiere var(--fr-cycle) linear infinite; }

  .fr-ville:not(.fr-hub) .fr-onde  { animation: fr-onde-arrivee var(--fr-cycle) ease-out infinite; }
  .fr-ville:not(.fr-hub) .fr-point { animation: fr-recoit var(--fr-cycle) ease-out infinite; }
  .fr-hub .fr-onde                 { animation: fr-onde-depart var(--fr-cycle) ease-out infinite; }
}

.fr-carte.fr-pause :is(.fr-tete, .fr-fenetre, .fr-lumiere, .fr-onde, .fr-point),
.fr-pastille.fr-pause .fr-point-vert { animation-play-state: paused; }

@keyframes fr-tete { 0% { stroke-dashoffset: 0; }  55%, 100% { stroke-dashoffset: -100; } }
@keyframes fr-f1   { 0% { stroke-dashoffset: 34; } 55%, 100% { stroke-dashoffset: -66; } }
@keyframes fr-f2   { 0% { stroke-dashoffset: 20; } 55%, 100% { stroke-dashoffset: -80; } }
@keyframes fr-f3   { 0% { stroke-dashoffset: 8; }  55%, 100% { stroke-dashoffset: -92; } }
@keyframes fr-lumiere {
  0%        { opacity: 0; }
  9%, 55%   { opacity: 1; }
  72%, 100% { opacity: 0; }
}

@keyframes fr-onde-depart {
  0%        { opacity: 0;   transform: scale(.9); }
  3%        { opacity: .5;  transform: scale(1.1); }
  26%, 100% { opacity: 0;   transform: scale(2.2); }
}
@keyframes fr-onde-arrivee {
  0%, 54%   { opacity: 0;   transform: scale(.9); }
  57%       { opacity: .65; transform: scale(1.1); }
  80%, 100% { opacity: 0;   transform: scale(2.2); }
}
@keyframes fr-recoit {
  0%, 54%   { transform: scale(1); }
  58%       { transform: scale(1.3); }
  70%, 100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fr-lumiere, .fr-onde { display: none; }
  .fr-piste { stroke-opacity: .7; }
  .fr-point-vert { animation: none; }
}