/* Voyageur · site vitrine · page A propos (/a-propos et /en/about)
   Chargee uniquement par ces deux pages : les autres n'ont aucune de ces
   classes, et styles.css est deja lu partout. Tous les tokens viennent de
   styles.css, ce fichier n'en redefinit aucun.
   Source unique pour les DEUX langues : toute retouche vaut FR et EN. */

/* ============================== BARRE DE CARTE ==============================
   Meme grammaire que la .mod-bar des instruments (mono, majuscules, filet bas),
   mais autonome : instruments.css n'est pas charge sur cette page. */
.card-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--encre);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.card-bar b {
  color: var(--text);
  font-weight: 500;
}
.card-bar .sep {
  color: var(--border-strong);
}
.card-bar svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================== CARTE D'IDENTITE ==============================
   Les valeurs administratives (SIREN, telephone, code postal) passent en mono :
   ce sont des donnees a recopier, pas de la prose. */
.ident {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ident-row {
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.ident-row:last-of-type {
  border-bottom: 0;
}
.ident-ico {
  width: 19px;
  height: 19px;
  margin-top: 3px;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s var(--ease);
}
.ident-row:hover .ident-ico {
  stroke: var(--accent);
}
.ident-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.ident-v {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text);
}
.ident-v .data {
  font-family: var(--font-mono);
  font-size: 14.5px;
  /* Le courriel fait 31 caracteres sans espace : sans cette regle il ne peut
     pas se couper, donc il sort de la carte sous ~340 px de large et l'overflow
     du body le tronque en silence. */
  overflow-wrap: anywhere;
}
.ident-v .sub {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}
/* Le reset global rend une ancre invisible hors bouton/nav : ici les valeurs
   cliquables (mail, telephone) doivent se voir comme telles. */
.ident-v a {
  color: var(--accent);
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}
.ident-v a:hover {
  text-decoration: underline;
}
.ident-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: var(--encre);
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================== CARTE DE FRANCE ==============================
   SVG inline, aucun appel reseau : pas de tuiles tierces, donc pas de fuite
   d'IP du visiteur vers un fournisseur de cartes, et ca marche hors ligne.
   Le trace est projete en equirectangulaire cale sur la latitude moyenne du
   pays (voir la valeur des coordonnees dans le titre du SVG). */
.map-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.map-figure {
  margin: 0;
  padding: 8px 8px 0;
  background: radial-gradient(
    118% 88% at 71% 60%,
    oklch(0.79 0.11 215 / 0.08),
    transparent 62%
  );
}
.fr-map {
  display: block;
  width: 100%;
  height: auto;
}
.fr-grat {
  fill: none;
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  opacity: 0.65;
}
.fr-land {
  fill: oklch(0.245 0.031 268);
  stroke: var(--border-strong);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.fr-city {
  fill: var(--text-dim);
}
.fr-city-lbl {
  fill: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
/* Le marqueur EST la marque : orbite turquoise, corps ambre, satellite.
   La tour de controle est posee sur Grenoble, ce n'est pas une punaise. */
.fr-halo {
  fill: oklch(0.79 0.11 215 / 0.13);
  transform-box: fill-box;
  transform-origin: center;
  animation: fr-pulse 3.8s var(--ease) infinite;
}
@keyframes fr-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.fr-orbit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}
.fr-sat {
  fill: var(--accent);
}
.fr-core {
  fill: var(--claude);
}
.fr-lead {
  fill: none;
  stroke: oklch(0.79 0.11 215 / 0.45);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
}
.fr-pin-name {
  fill: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
}
.fr-pin-coord {
  fill: var(--accent);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.map-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.chip {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--encre);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}
.chip b {
  color: var(--text);
  font-weight: 500;
}
.chip-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-right: 2px;
}

/* ============================== LA PERSONNE ============================== */
.who {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.who-ini {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.02em;
  color: var(--claude);
  background: var(--claude-soft);
  border: 1px solid oklch(0.835 0.11 75 / 0.45);
}
.who-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.who h3 {
  margin-bottom: 8px;
}

/* Deux adresses, deux usages : la tuile dit lequel avant le clic. */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.route {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition:
    border-color 0.15s var(--ease),
    background 0.15s var(--ease);
}
.route:hover {
  border-color: var(--accent);
  background: var(--surface-2);
}
.route .route-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.route .route-v {
  display: block;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--accent);
  word-break: break-all;
}
.route p {
  font-size: 13.5px;
  margin-top: 7px;
}

/* ============================== CARTES A ICONE ============================== */
.card .card-ico {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 13px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================== MENTIONS LEGALES ============================== */
.legal {
  max-width: 820px;
}
.legal h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 26px 0 7px;
}
.legal h3:first-of-type {
  margin-top: 0;
}
.legal p {
  font-size: 14.5px;
}
.legal p + p {
  margin-top: 8px;
}
.legal a {
  overflow-wrap: anywhere;
}

/* ============================== RESPONSIVE ============================== */
/* Le texte de la carte est exprime dans les unites du viewBox : il rapetissit
   donc avec la largeur de la carte. Sur telephone la carte fait environ 366 px
   pour un viewBox de 704, tout est reduit de moitie, et la ligne de coordonnees
   tombe sous 7 px de haut, illisible. On grossit ce qui porte du sens et on
   retire l'ornement de precision, qui n'en porte plus a cette taille. */
@media (max-width: 560px) {
  .fr-pin-name {
    font-size: 36px;
  }
  .fr-city-lbl {
    font-size: 19px;
  }
  .fr-pin-coord {
    display: none;
  }
}

@media (max-width: 560px) {
  .who {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ident-row {
    padding: 13px 14px;
  }
  .map-foot {
    padding: 12px 13px;
  }
}