/* Escale · mise en page du site
   Dépend de brand/tokens.css puis brand/components.css, chargés avant.
   Ce fichier ne contient que la mise en page : la signature visuelle de la
   marque (bois, palettes à volets, carte d'embarquement) reste dans
   brand/components.css et n'est pas dupliquée ici. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--escale-font-texte);
  background: var(--escale-noyer);
  color: var(--escale-texte-clair);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }
img, svg { max-width: 100%; }

/* --- Utilitaires --------------------------------------------------------- */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lien-evitement {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 20;
  background: var(--escale-laiton);
  color: var(--escale-texte-fonce);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--escale-radius-s);
  text-decoration: none;
}
.lien-evitement:focus { top: 12px; }

/* Emplacement d'une valeur non décidée. Reste visible : jamais remplacé par
   une valeur inventée. */
.variable {
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  border: 1.5px dashed currentColor;
  border-radius: var(--escale-radius-s);
  padding: 2px 8px;
  display: inline-block;
}

/* --- Trames de page ------------------------------------------------------ */
/* overflow-x: clip retient les encoches de la carte d'embarquement, qui
   débordent de 34 px, quand la marge de page devient plus étroite qu'elles. */
.bande { padding: var(--escale-section-y) var(--escale-marge-page); overflow-x: clip; }
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.pile { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.pile > * { margin: 0; }
@media (max-width: 1000px) { .duo { grid-template-columns: 1fr; } }

.section-creme { background: var(--escale-creme); color: var(--escale-texte-fonce); --escale-fond-parent: var(--escale-creme); }
.section-verte { background: var(--escale-vert); --escale-fond-parent: var(--escale-vert); }
.section-laiton { background: var(--escale-laiton); color: var(--escale-texte-fonce); --escale-fond-parent: var(--escale-laiton); }
.section-creme .texte, .section-laiton .texte { color: var(--escale-texte-fonce); }
.section-verte .texte, .wood .texte { color: var(--escale-texte-clair-doux); }
.section-creme .surtitre { color: var(--escale-vert); }
.section-laiton .surtitre { color: var(--escale-noyer); }

.titre--xl { font-size: var(--escale-titre-xl); }
.titre--l { font-size: var(--escale-titre-l); }
.mention { font-size: 1.125rem; max-width: 34em; }

/* En-tête des pages intérieures : surtitre, titre, chapeau. */
.entete-page { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.entete-page > * { margin: 0; }
.entete-page .texte { max-width: 40em; }
.apres-bloc { margin: 36px 0 0; }

/* --- Navigation ---------------------------------------------------------- */
.nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--escale-marge-page);
  flex-wrap: wrap;
}
.nav__marque {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--escale-laiton);
  padding: 4px 0;
}
.nav__marque svg { width: 44px; height: 44px; flex: none; }
.nav__mot {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--escale-texte-clair);
}
.nav__liens {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  font-size: 1rem;
  font-weight: 500;
}
.nav__liens a { text-decoration: none; }
.nav__liens > a:not(.bouton) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__liens > a:not(.bouton):hover { color: var(--escale-laiton); }
.nav__liens > a:not(.bouton)[aria-current="page"] {
  color: var(--escale-laiton);
  box-shadow: inset 0 -2px 0 var(--escale-laiton);
}
.nav__liens .bouton {
  height: var(--escale-hauteur-bouton-compact);
  padding: 0 24px;
  font-size: 1rem;
}
.nav__langue {
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  border: 1.5px solid var(--escale-acajou-clair);
  border-radius: var(--escale-radius-s);
  padding: 0 10px;
  color: var(--escale-texte-clair-sourd);
}
.nav__langue:hover { border-color: var(--escale-laiton); color: var(--escale-laiton); }

.nav__bascule {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  border: 1.5px solid var(--escale-acajou-clair);
  border-radius: var(--escale-radius-s);
  color: var(--escale-texte-clair);
  font-family: var(--escale-font-texte);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.nav__bascule span {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

@media (max-width: 900px) {
  .js .nav__bascule { display: inline-flex; }
  .js .nav__liens {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--escale-acajou);
  }
  .js .nav__liens[data-ouvert="true"] { display: flex; }
  .js .nav__liens > a:not(.bouton) { min-height: 48px; }
  .js .nav__liens .bouton { margin-top: 10px; height: var(--escale-hauteur-bouton); }
  .js .nav__langue { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero__colonne { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.hero__colonne > * { margin: 0; }
.hero__titre { font-size: var(--escale-titre-xxl); }
.hero__accent { color: var(--escale-laiton); }
.hero__texte { max-width: 34em; }
.hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero__actions .lien-souligne { display: inline-flex; align-items: center; min-height: 44px; }
.hero__objets {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 28px);
  margin-top: 36px;
  flex-wrap: wrap;
}
/* Les trois objets tiennent sur une seule ligne à toutes les largeurs :
   leur taille suit la colonne qui les porte, pas la fenêtre. */
.hero__objets svg { height: auto; display: block; }
.objet--lampe { width: clamp(90px, 30cqi, 190px); }
.objet--debardeur { width: clamp(64px, 20cqi, 128px); }
.objet--valise { width: clamp(78px, 26cqi, 158px); }
@media (max-width: 1000px) {
  .hero .duo > .hero__illustration { order: -1; }
}

/* --- Tableau des départs -------------------------------------------------
   Les cellules sont larges en ch : tout le panneau suit --fl-taille. Plutôt
   que de laisser déborder, on réduit la taille des caractères en fonction de
   la largeur réelle de la colonne, mesurée sur le rendu :
     4 colonnes : largeur = 24,7 x taille + 104 px
     3 colonnes : largeur = 16,9 x taille + 90 px
   d'où les pentes 4cqi et 5,85cqi ci-dessous, avec quelques pixels de marge. */
.hero__illustration { container-type: inline-size; }
.panneau-departs { --fl-taille: clamp(0.625rem, 4cqi - 4.4px, 1.125rem); }
.panneau-departs .fl { font-size: var(--fl-taille); line-height: 1.7; }
.fl--heure { width: 5ch; }
.fl--parcours { width: 16ch; }
.fl--distance { width: 5ch; }
.fl--statut { width: 12ch; }
/* Sous 620 px le statut sort. L'heure, le parcours et la distance restent,
   et le panneau retrouve sa pleine taille de caractères. */
@media (max-width: 620px) {
  .panneau-departs { --fl-taille: clamp(0.625rem, 5.85cqi - 5.6px, 1.125rem); }
  .panneau-departs .fl--statut { display: none; }
}

.distances { display: flex; gap: 12px; flex-wrap: wrap; --fl-taille: 1.375rem; }
.distances .fl { font-size: var(--fl-taille); line-height: 1.8; width: 4ch; }
@media (max-width: 480px) { .distances { --fl-taille: 1.125rem; } }

/* --- Comment ça marche --------------------------------------------------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--escale-gouttiere);
  margin-top: 44px;
}
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr; } }
.etape {
  background: var(--escale-creme-ombre);
  border-radius: var(--escale-radius-l);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.etape > * { margin: 0; }
.etape__num {
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--escale-vert);
  font-weight: 700;
}
.etape__titre {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: var(--escale-titre-m);
  line-height: 1;
}
.etape p { font-size: var(--escale-texte-m); line-height: 1.5; }
.etape__filet { border-top: 2px dashed var(--escale-pointille); margin-top: auto; }
.etape .codebarres { height: 34px; }

/* --- Cadres bois --------------------------------------------------------- */
.cadre-bois {
  border: 12px solid var(--escale-acajou);
  border-radius: 8px;
  line-height: 0;
  background: var(--escale-acajou);
}
.cadre-bois svg { width: 100%; height: auto; display: block; }

/* --- Accroche-porte ------------------------------------------------------ */
.accroches {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  justify-content: center;
  flex-wrap: wrap;
}
.accroche-porte { gap: 20px; }
.accroche-porte--recto { transform: rotate(-3deg); }
.accroche-porte--verso { transform: rotate(2deg); background: var(--escale-noyer-clair); }
.accroche-porte__titre {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  line-height: 0.98;
  font-size: 2.875rem;
  margin: 0;
}
.accroche-porte__soustitre { margin: 14px 0 0; font-size: 1.125rem; }
.accroche-porte__objet { width: 110px; height: auto; }
.accroche-porte__pied {
  font-family: var(--escale-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--escale-laiton);
  margin: 0;
}
.qr-emplacement {
  width: 96px;
  height: 96px;
  border: 2px dashed var(--escale-laiton);
  border-radius: var(--escale-radius-s);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--escale-font-mono);
  font-size: 0.625rem;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--escale-laiton);
  padding: 6px;
}

/* --- Carte d'embarquement et formulaires --------------------------------- */
.carte-embarquement { width: min(100%, 440px); }
.carte-embarquement__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--escale-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--escale-texte-sur-carte);
}
.carte-embarquement__marque {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--escale-texte-fonce);
}
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ--large { grid-column: 1 / -1; }
.champ label {
  font-family: var(--escale-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--escale-texte-sur-carte);
}
.champ input,
.champ select {
  font-family: var(--escale-font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--escale-texte-fonce);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--escale-pointille);
  border-radius: 0;
  min-height: 44px;
  padding: 4px 2px;
  width: 100%;
}
.champ input::placeholder { color: var(--escale-texte-sur-carte); font-weight: 400; }
.champ input:focus-visible,
.champ select:focus-visible { outline: 3px solid var(--escale-ambre); outline-offset: 3px; }
.carte-embarquement .bouton { width: 100%; }
.bouton[disabled] { cursor: default; opacity: 0.65; }

/* Confirmation : le formulaire se retourne en carte d'embarquement remplie.
   Les étiquettes sont reprises du formulaire, donc déjà dans la bonne langue. */
.confirmation__titre {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: var(--escale-titre-l);
  line-height: 1;
  margin: 0;
}
.confirmation__titre:focus-visible { outline: 3px solid var(--escale-ambre); outline-offset: 6px; }
.carte-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.carte-champs dt { text-transform: uppercase; }
.carte-embarquement__champ--large { grid-column: 1 / -1; }
@media (max-width: 520px) { .carte-champs { grid-template-columns: 1fr; } }

.message {
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  border: 1.5px dashed currentColor;
  border-radius: var(--escale-radius-s);
  padding: 10px 12px;
  margin: 0;
  color: var(--escale-texte-sur-carte);
}

.carte-embarquement__note {
  margin: 0;
  font-family: var(--escale-font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--escale-texte-sur-carte);
}
@media (max-width: 520px) { .champs { grid-template-columns: 1fr; } }

/* Carte claire sans encoches ni code-barres : le motif de la carte
   d'embarquement reste réservé aux billets et aux confirmations. */
.carte-simple {
  width: min(100%, 520px);
  background: var(--escale-creme);
  color: var(--escale-texte-fonce);
  border-radius: var(--escale-radius-l);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.carte-simple > * { margin: 0; }
.carte-simple__titre {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: var(--escale-titre-l);
  line-height: 1;
}
.carte-simple .bouton { width: 100%; }
.carte-simple__note {
  font-family: var(--escale-font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--escale-texte-sur-carte);
}

.rejoindre {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 1000px) { .rejoindre { grid-template-columns: 1fr; justify-items: start; } }

/* --- Page hôtels --------------------------------------------------------- */
.fournitures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--escale-gouttiere);
  margin-top: 44px;
}
@media (max-width: 900px) { .fournitures { grid-template-columns: 1fr; } }
.fourniture {
  border: 2px solid var(--escale-acajou);
  border-radius: var(--escale-radius-l);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--escale-noyer-clair);
}
.fourniture > * { margin: 0; }
.fourniture h3 {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: var(--escale-titre-m);
  line-height: 1;
  color: var(--escale-laiton);
}
.fourniture p { font-size: var(--escale-texte-m); line-height: 1.55; color: var(--escale-texte-clair-doux); }

.protocole { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; max-width: 46em; }
.protocole li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: baseline;
  padding-bottom: 22px;
  border-bottom: 2px dashed var(--escale-pointille);
}
.protocole li:last-child { border-bottom: none; padding-bottom: 0; }
.protocole b {
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--escale-vert);
  white-space: nowrap;
}
.wood .protocole b, .section-verte .protocole b { color: var(--escale-ambre); }
.protocole p { margin: 0; font-size: var(--escale-texte-m); line-height: 1.55; }
@media (max-width: 560px) { .protocole li { grid-template-columns: 1fr; gap: 8px; } }

/* Preuve sociale : emplacement laissé vide tant qu'il n'y a pas de vrais
   partenaires à citer. Jamais rempli avec des logos inventés. */
.emplacement-preuve {
  margin-top: 44px;
  border: 2px dashed currentColor;
  border-radius: var(--escale-radius-l);
  padding: 30px;
  text-align: center;
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: var(--escale-texte-clair-sourd);
}
.section-laiton .emplacement-preuve,
.section-creme .emplacement-preuve { color: var(--escale-texte-fonce); }
.pile .emplacement-preuve { margin-top: 0; align-self: stretch; }

/* --- Pied de page -------------------------------------------------------- */
.pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px var(--escale-marge-page);
  border-top: 1px solid var(--escale-acajou);
  color: var(--escale-texte-clair-doux);
  font-size: var(--escale-texte-s);
}
.pied__marque { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pied__logotype {
  font-family: var(--escale-font-titre);
  font-style: italic;
  font-weight: 500;
  font-size: 1.875rem;
  color: var(--escale-laiton);
}
.pied__liens { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.pied a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pied a:hover { color: var(--escale-laiton); }


/* --- Apparitions au défilement ------------------------------------------
   Sans JavaScript, rien n'est masqué : la classe .js conditionne tout. */
.js .revele { opacity: 0; transform: translateY(14px); }
.js .revele.est-visible {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: calc(var(--rang, 0) * 90ms);
}

/* --- Volets du tableau des départs ---------------------------------------
   À l'arrivée dans le champ de vision, chaque caractère bascule comme un
   volet, de gauche à droite. */
@keyframes volet {
  from { transform: rotateX(-88deg); opacity: 0.2; }
  to { transform: rotateX(0); opacity: 1; }
}
.js .panneau-departs.est-visible .fl {
  animation: volet 260ms ease-out backwards;
  animation-delay: calc(var(--rang, 0) * 45ms);
  transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
  .js .revele { opacity: 1; transform: none; }
  .js .panneau-departs.est-visible .fl { animation: none; }
  .arrivee__coureur, .arrivee__ruban { transition: none; }
}


/* --- La bande d'arrivée --------------------------------------------------
   Dernière bande de chaque page, juste avant le pied. Le coureur avance avec
   le défilement et coupe le ruban quand on atteint le bas du site. C'est du
   décor : la bande entière est masquée aux lecteurs d'écran.
   --arrivee-fin est la distance entre le bord droit et la fin de la course :
   la ligne d'arrivée s'y accroche, les deux restent donc toujours alignées. */
:root {
  --arrivee-hauteur: 180px;
  --arrivee-coureur: 84px;
  --arrivee-fin: 150px;
  --arrivee-sol: 30px;
}
@media (max-width: 700px) {
  :root {
    --arrivee-hauteur: 136px;
    --arrivee-coureur: 60px;
    --arrivee-fin: 112px;
    --arrivee-sol: 22px;
  }
}

.arrivee {
  position: relative;
  overflow: hidden;
  height: var(--arrivee-hauteur);
  border-top: 1px solid var(--escale-acajou);
}
.arrivee__sol {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--arrivee-sol);
  border-top: 2px dashed var(--escale-acajou);
}
.arrivee__coureur {
  position: absolute;
  bottom: calc(var(--arrivee-sol) - 7px);
  width: var(--arrivee-coureur);
  height: auto;
  left: calc(var(--escale-marge-page) + var(--progression, 0) * (100% - var(--escale-marge-page) - var(--arrivee-fin)));
  transition: left 160ms linear;
}

.arrivee__ligne {
  position: absolute;
  right: 24px;
  top: 12px;
  bottom: calc(var(--arrivee-sol) - 8px);
  width: calc(var(--arrivee-fin) - 72px);
}
.arrivee__poteau {
  position: absolute;
  top: 18px;
  bottom: 0;
  width: 8px;
  border-radius: 4px;
  background: var(--escale-laiton);
}
.arrivee__poteau--a { left: -8px; }
.arrivee__poteau--b { right: -8px; }
.arrivee__ruban {
  position: absolute;
  left: 0; right: 0;
  bottom: 46%;
  height: 10px;
  border-radius: 2px;
  background: var(--escale-creme);
  transform-origin: center;
  transition: transform 240ms ease;
}
.arrivee__mot {
  position: absolute;
  left: -30px; right: -30px;
  top: -2px;
  text-align: center;
  font-family: var(--escale-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--escale-ambre);
}
/* Le ruban cède quand le coureur le coupe. */
.arrivee.est-arrive .arrivee__ruban { transform: scaleX(0.04); }

/* --- Pied de page, plan du site ----------------------------------------- */
.pied__haut {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  width: 100%;
}
.pied__plan { display: flex; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; }
.pied__bas {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid var(--escale-acajou);
  color: var(--escale-texte-clair-sourd);
}


/* --- FAQ hôtelier --------------------------------------------------------
   Les réponses sont des emplacements marqués : ce sont les questions qui
   décident une signature, elles se rédigent avec le client, jamais ici. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--escale-gouttiere);
  margin-top: 44px;
}
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq__entree { border-top: 2px dashed var(--escale-pointille); padding-top: 18px; }
.faq__question { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.faq__reponse { margin: 0; }
.faq__note {
  margin: 36px 0 0;
  max-width: 46em;
  font-family: var(--escale-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--escale-texte-fonce-sourd);
}

/* --- Contact au pied de page --------------------------------------------- */
.pied__contact { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pied__contact-titre {
  margin: 0 0 2px;
  font-family: var(--escale-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--escale-laiton);
}