/* PEAU « The Reference Desk » (direction 13) pour Field to Future, apps2025.org.
   Une salle de lecture a la fermeture : papier d'encre profond, ferrures de laiton,
   une question repondue par entree. Prefixed ftf-. Polices auto-hebergees
   (Fraunces 600 display, Source Sans 3 400/600 lecture), aucune requete tierce. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fraunces-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces-repli';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 107%;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../sourcesans3-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../sourcesans3-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3-repli';
  src: local('Segoe UI'), local('Verdana'), local('Arial');
  size-adjust: 104%;
}

:root {
  /* papier de nuit (direction 13) */
  --nuit: #141d28;
  --feuille: #1b2836;
  --creux: #0d141c;
  --trace: #e8ecf2;
  --trace-douce: #a3b1c2;
  --filet: #2d3d4f;
  /* laiton et contrepoint */
  --laiton: #d4a24a;
  --laiton-clair: #e6c68a;
  --laiton-voile: rgba(212, 162, 74, 0.13);
  --canard: #6fb2a8;
  /* matieres */
  --titre: 'Fraunces', 'Fraunces-repli', Georgia, serif;
  --texte: 'Source Sans 3', 'Source Sans 3-repli', 'Segoe UI', Verdana, sans-serif;
  --regie: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* gabarits : deux largeurs de page seulement (direction 13) */
  --halle: 76rem;
  --mesure: 68ch;
  --rythme: 1.5rem;
  --rond: 14px;
  --rond-g: 16px;
  --ombre: 0 14px 34px rgba(4, 9, 15, 0.55);
  --ombre-douce: 0 6px 18px rgba(4, 9, 15, 0.4);
  --filet-1: 1px solid var(--filet);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--trace);
  font-family: var(--texte);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 0.6em;
  color: var(--trace);
}
h1 { font-size: clamp(2.1rem, 1.6rem + 2vw, 3.3rem); }
h2 { font-size: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem); }
h3 { font-size: 1.12rem; }
p, ul, ol, dl, table, figure { margin: 0 0 var(--rythme); }
a { color: var(--laiton-clair); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--laiton); }
:focus-visible { outline: 2px solid var(--canard); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- utilitaires */
.ftf-halle { width: min(100% - 2.5rem, var(--halle)); margin-inline: auto; }
.ftf-acces-direct {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--laiton); color: var(--nuit);
  font-family: var(--regie); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.7rem 1.2rem; border-radius: 0 0 10px 0; text-decoration: none;
}
.ftf-acces-direct:focus { left: 0; }

.ftf-kicker {
  font-family: var(--regie);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--laiton);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ftf-kicker::before { content: ""; width: 2rem; height: 1px; background: var(--laiton); flex: none; }

.ftf-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  margin: 0;
  font-family: var(--regie);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--trace-douce);
}
.ftf-meta time { color: var(--trace-douce); }
.ftf-meta__sep { color: var(--filet); }

/* etiquette de specimen : pastille pleine couleur de rubrique, coin biseaute a la coupe */
.ftf-etiquette {
  display: inline-block;
  padding: 0.34em 0.8em 0.34em 0.7em;
  background: var(--voie, var(--laiton));
  color: var(--nuit);
  font-family: var(--regie);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0.55em 100%, 0 calc(100% - 0.55em));
  border-radius: 3px 0 0 0;
}
a.ftf-etiquette:hover { background: var(--trace); color: var(--nuit); }

.ftf-bouton {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.82rem 1.5rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: var(--laiton);
  color: var(--nuit);
  font-family: var(--texte); font-weight: 600; font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(212, 162, 74, 0.26);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ftf-bouton:hover { background: var(--laiton-clair); color: var(--nuit); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(212, 162, 74, 0.34); }
.ftf-bouton::after { content: "\203A"; font-weight: 700; }
.ftf-bouton--contour {
  background: transparent;
  color: var(--laiton-clair);
  border-color: var(--laiton);
  box-shadow: none;
}
.ftf-bouton--contour:hover { background: var(--laiton-voile); color: var(--laiton-clair); box-shadow: none; }

/* ---------------------------------------------------------------- fronton */
.ftf-fronton {
  background: var(--nuit);
  border-bottom: var(--filet-1);
  position: sticky; top: 0; z-index: 20;
}
.ftf-fronton__rang {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.9rem 0;
}
.ftf-enseigne {
  display: inline-flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--trace);
}
.ftf-enseigne__glyphe { width: 2.6rem; height: 2.6rem; flex: none; }
.ftf-enseigne__nom {
  font-family: var(--titre); font-weight: 600;
  font-size: 1.42rem; letter-spacing: 0.01em; line-height: 1;
}
.ftf-enseigne__nom em { font-style: normal; color: var(--laiton); }
.ftf-liens { display: flex; gap: 1.4rem; align-items: center; }
.ftf-liens a {
  font-family: var(--regie); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--trace-douce); text-decoration: none;
  position: relative; padding: 0.2rem 0;
}
.ftf-liens a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--laiton); transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s ease;
}
.ftf-liens a:hover { color: var(--trace); }
.ftf-liens a:hover::after, .ftf-liens a[aria-current]::after { transform: scaleX(1); }
.ftf-liens a[aria-current] { color: var(--trace); }

/* barre d'onglets pleine largeur (navigation de la direction 13) */
.ftf-onglets { background: var(--creux); border-top: var(--filet-1); }
.ftf-onglets__rang {
  display: flex; gap: 0.25rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.ftf-onglets__rang::-webkit-scrollbar { display: none; }
.ftf-onglet {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 1.1rem;
  font-weight: 600; font-size: 0.92rem;
  color: var(--trace-douce); text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap; scroll-snap-align: start;
  transition: color 0.18s ease, background 0.18s ease;
}
.ftf-onglet::before {
  content: ""; width: 0.55rem; height: 0.55rem; flex: none;
  background: var(--voie, var(--laiton)); border-radius: 2px;
}
.ftf-onglet:hover { color: var(--trace); background: var(--feuille); }
.ftf-onglet--courant { color: var(--trace); border-bottom-color: var(--voie, var(--laiton)); background: var(--feuille); }

/* ---------------------------------------------------------------- bande laiton */
.ftf-bande { background: var(--laiton); color: var(--nuit); }
.ftf-bande__rang {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.55rem 0;
}
.ftf-bande__devise {
  margin: 0;
  font-family: var(--regie); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.ftf-bande__jour { font-family: var(--regie); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }

/* ---------------------------------------------------------------- vestibule (hero) */
.ftf-vestibule {
  position: relative;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(27, 40, 54, 0.95), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(212, 162, 74, 0.055) 1px, transparent 1.6px),
    var(--nuit);
  background-size: auto, 30px 30px, auto;
  border-bottom: var(--filet-1);
  padding: 4rem 0 7.5rem;
  overflow: hidden;
}
.ftf-vestibule::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.ftf-vestibule__grille {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
.ftf-vestibule__accroche {
  margin: 0 0 0.55em;
  max-width: 16ch;
  font-size: clamp(2.4rem, 1.7rem + 3vw, 3.7rem);
  line-height: 1.08;
}
.ftf-vestibule__accroche em {
  font-style: normal;
  color: var(--laiton);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
  text-decoration-color: var(--laiton);
}
.ftf-vestibule__sous {
  margin: 0 0 1.6rem;
  color: var(--laiton-clair);
  font-weight: 600;
  font-size: 1.06rem;
  max-width: 40ch;
}
.ftf-chapeau {
  margin: 0 0 1.8rem;
  max-width: 46ch;
  color: var(--trace-douce);
  font-size: 1.02rem;
  line-height: 1.7;
}
.ftf-chapeau strong { color: var(--trace); font-weight: 600; }
.ftf-bilan {
  list-style: none; display: flex; flex-wrap: wrap;
  margin: 0 0 2rem; padding: 0;
  border: var(--filet-1); border-radius: 12px;
  background: rgba(27, 40, 54, 0.62);
  overflow: hidden;
  max-width: 34rem;
}
.ftf-bilan__poste { flex: 1 1 7rem; padding: 0.85rem 1.15rem; border-left: var(--filet-1); }
.ftf-bilan__poste:first-child { border-left: 0; }
.ftf-bilan__chiffre { display: block; font-family: var(--titre); font-size: 1.55rem; color: var(--laiton); line-height: 1.1; }
.ftf-bilan__libelle { display: block; font-family: var(--regie); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--trace-douce); margin-top: 0.25rem; }
.ftf-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0; }

/* la une : grande carte photo sous voile, qui deborde sur la section suivante */
.ftf-une {
  position: relative;
  border-radius: var(--rond-g);
  overflow: hidden;
  background: var(--feuille);
  border: var(--filet-1);
  box-shadow: var(--ombre);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ftf-une:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(4, 9, 15, 0.62); }
.ftf-une__photo { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--creux); }
.ftf-une__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.ftf-une:hover .ftf-une__photo img { transform: scale(1.04); }
.ftf-une__voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 20, 28, 0) 30%, rgba(13, 20, 28, 0.52) 60%, rgba(13, 20, 28, 0.94) 100%);
}
.ftf-une__corps { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.25rem; }
.ftf-une__titre { margin: 0.7rem 0 0.5rem; font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem); line-height: 1.14; }
.ftf-une__titre a { color: var(--trace); text-decoration: none; }
.ftf-une__titre a:hover { color: var(--laiton-clair); }
.ftf-une__abrege {
  margin: 0 0 0.8rem;
  color: rgba(232, 236, 242, 0.86);
  font-size: 0.95rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ftf-une .ftf-meta { color: rgba(232, 236, 242, 0.72); }
.ftf-une .ftf-meta time { color: rgba(232, 236, 242, 0.72); }

/* ---------------------------------------------------------------- rails (sections) */
.ftf-rail { padding: 4rem 0; }
.ftf-rail--creuse { background: var(--creux); border-top: var(--filet-1); border-bottom: var(--filet-1); }
.ftf-rail--premiere { padding-top: 9rem; }

.ftf-rail__tete {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  border-top: var(--filet-1);
  padding-top: 1.4rem;
  margin-bottom: 2rem;
}
.ftf-rail__titre { margin: 0; }
.ftf-rail__titre a { color: var(--trace); text-decoration: none; }
.ftf-rail__titre a:hover { color: var(--laiton-clair); }
.ftf-rail__phrase { margin: 0.4rem 0 0; color: var(--trace-douce); max-width: 62ch; }
.ftf-rail__kicker { margin: 0 0 0.35rem; }

/* signature A : cote de rubrique en laiton, calee en haut a droite, debordant sur le filet */
.ftf-cote {
  position: absolute; right: 0; top: 0; transform: translateY(-50%);
  background: var(--nuit);
  padding: 0 0.3rem 0 0.9rem;
  font-family: var(--titre); font-size: 2.4rem; line-height: 1;
  color: var(--laiton);
  user-select: none;
}
.ftf-rail--creuse .ftf-cote { background: var(--creux); }

/* cote en filigrane derriere un titre de section */
.ftf-filigrane {
  position: absolute; right: -0.5rem; bottom: -1.6rem;
  font-family: var(--titre); font-weight: 600;
  font-size: clamp(6rem, 12vw, 10rem); line-height: 1;
  color: var(--laiton); opacity: 0.07;
  pointer-events: none; user-select: none;
}

/* ---------------------------------------------------------------- cartes (tuiles, liste dense, phare) */
.ftf-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.5rem;
}
.ftf-tuile {
  display: flex; flex-direction: column;
  background: var(--feuille);
  border: var(--filet-1);
  border-radius: var(--rond-g);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.ftf-tuile:hover { transform: translateY(-4px); border-color: var(--voie, var(--laiton)); box-shadow: 0 18px 40px rgba(4, 9, 15, 0.5); }
.ftf-tuile__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creux); }
.ftf-tuile__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.ftf-tuile:hover .ftf-tuile__photo img { transform: scale(1.05); }
.ftf-tuile__corps { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.25rem 1.3rem; }
.ftf-tuile__bande { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin: 0; }
.ftf-tuile__titre { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.ftf-tuile__titre a { color: var(--trace); text-decoration: none; }
.ftf-tuile__titre a:hover { color: var(--laiton-clair); }
.ftf-tuile__abrege {
  margin: 0; color: var(--trace-douce); font-size: 0.92rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ftf-tuile__corps .ftf-meta { margin-top: 0.35rem; }
.ftf-cote-mini { font-family: var(--regie); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--trace-douce); }

/* liste dense : petites vignettes, filets fins */
.ftf-liste { list-style: none; margin: 2rem 0 0; padding: 0; }
.ftf-liste .ftf-entree { position: relative; display: flex; gap: 1.1rem; align-items: center; padding: 1rem 0.4rem; border-top: var(--filet-1); border-radius: 10px; transition: background 0.18s ease; }
.ftf-liste .ftf-entree:hover { background: var(--feuille); }
.ftf-entree__photo { display: block; flex: 0 0 6.5rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--creux); }
.ftf-entree__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ftf-entree:hover .ftf-entree__photo img { transform: scale(1.06); }
.ftf-entree__corps { min-width: 0; flex: 1; }
.ftf-entree__bande { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.3rem; }
.ftf-entree__titre { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.ftf-entree__titre a { color: var(--trace); text-decoration: none; }
.ftf-entree__titre a:hover { color: var(--laiton-clair); }
.ftf-entree__abrege {
  margin: 0.25rem 0 0; color: var(--trace-douce); font-size: 0.88rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ftf-entree__fleche { flex: none; font-size: 1.5rem; color: var(--filet); transition: color 0.18s ease, transform 0.18s ease; }
.ftf-entree:hover .ftf-entree__fleche { color: var(--laiton); transform: translateX(3px); }

/* phare : carte de tete d'une rubrique, photo 4/3 a gauche, filet couleur */
.ftf-phare {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  background: var(--feuille);
  border: var(--filet-1);
  border-left: 4px solid var(--voie, var(--laiton));
  border-radius: var(--rond-g);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ftf-phare:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(4, 9, 15, 0.5); }
.ftf-phare__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creux); }
.ftf-phare__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.ftf-phare:hover .ftf-phare__photo img { transform: scale(1.05); }
.ftf-phare__corps { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ftf-phare__titre { margin: 0; font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem); }
.ftf-phare__titre a { color: var(--trace); text-decoration: none; }
.ftf-phare__titre a:hover { color: var(--laiton-clair); }
.ftf-phare__abrege { margin: 0; color: var(--trace-douce); }
.ftf-phare__corps .ftf-meta { margin-top: auto; padding-top: 0.6rem; }

.ftf-rail__renvoi { margin: 1.6rem 0 0; text-align: right; }

/* ---------------------------------------------------------------- encart methode */
.ftf-encart {
  position: relative;
  background: var(--feuille);
  border: var(--filet-1);
  border-left: 4px solid var(--laiton);
  border-radius: var(--rond-g);
  padding: 2.2rem 2.4rem;
  margin: 4rem auto;
  overflow: hidden;
  box-shadow: var(--ombre-douce);
}
.ftf-encart__glyphe {
  position: absolute; right: -2rem; bottom: -3rem;
  width: 16rem; height: 16rem; opacity: 0.06; pointer-events: none;
}
.ftf-encart h2 { margin: 0 0 0.6rem; font-size: 1.6rem; }
.ftf-encart p { max-width: 60ch; margin: 0; color: var(--trace-douce); }

/* ---------------------------------------------------------------- section reseau */
.ftf-reseau .ftf-reseau__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.2rem; }
.ftf-reseau__item {
  position: relative;
  background: var(--feuille);
  border: var(--filet-1);
  border-radius: var(--rond);
  padding: 1.2rem 1.3rem 1.2rem 3.2rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.ftf-reseau__item:hover { border-color: var(--laiton); transform: translateY(-3px); }
.ftf-reseau__item::before {
  content: attr(data-num);
  position: absolute; left: 1rem; top: 1.05rem;
  font-family: var(--titre); font-size: 1.5rem; color: var(--laiton);
}
.ftf-reseau__item p { margin: 0; font-size: 0.95rem; }
.ftf-reseau__item a { color: var(--trace); font-weight: 600; }

/* ---------------------------------------------------------------- fil d'ariane */
.ftf-fil { padding: 1.5rem 0 0.4rem; }
.ftf-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; font-family: var(--regie); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--trace-douce); }
.ftf-fil li { display: flex; align-items: center; gap: 0.4rem; }
.ftf-fil li + li::before { content: "\203A"; color: var(--filet); }
.ftf-fil a { color: var(--trace-douce); text-decoration: none; }
.ftf-fil a:hover { color: var(--laiton); }
.ftf-fil [aria-current] { color: var(--laiton); }

/* ---------------------------------------------------------------- fiche article */
.ftf-fiche { padding-bottom: 3rem; }
.ftf-fiche__tete { position: relative; max-width: var(--mesure); margin: 0 auto; padding: 1.6rem 1.25rem 1.8rem; }
.ftf-fiche__mentions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 0 0 1.1rem; }
.ftf-fiche__section { font-family: var(--regie); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--trace-douce); }
.ftf-fiche__tete h1 { margin: 0 0 0.7rem; font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
.ftf-fiche__chapeau {
  margin: 0 0 1.2rem;
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--laiton-clair);
  line-height: 1.55;
}
.ftf-planche { margin: 0 auto 2.4rem; }
.ftf-planche__cadre { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rond-g); background: var(--creux); box-shadow: var(--ombre); border: var(--filet-1); }
.ftf-planche__cadre img { width: 100%; height: 100%; object-fit: cover; }
.ftf-planche figcaption {
  margin-top: 0.7rem;
  font-family: var(--regie); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--trace-douce);
  display: flex; gap: 0.6rem; align-items: baseline;
}
.ftf-planche figcaption::before { content: ""; flex: none; width: 1.4rem; height: 1px; background: var(--laiton); transform: translateY(-0.2rem); }

.ftf-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 3rem;
  align-items: start;
}
.ftf-corps { min-width: 0; max-width: var(--mesure); font-size: 1.04rem; line-height: 1.72; }
.ftf-corps h2 {
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: var(--filet-1);
  font-size: 1.65rem;
  display: flex; gap: 0.7rem; align-items: baseline;
}
.ftf-corps h2::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--laiton); transform: rotate(45deg); align-self: center; }
.ftf-corps h3 { margin-top: 2rem; font-size: 1.3rem; }
.ftf-corps a { color: var(--laiton-clair); }
.ftf-corps a:hover { color: var(--laiton); }
.ftf-corps > p:first-of-type::first-letter {
  font-family: var(--titre); font-weight: 600;
  font-size: 3.1em; float: left; line-height: 0.82;
  padding: 0.08em 0.14em 0 0;
  color: var(--laiton);
}
.ftf-corps blockquote {
  margin: 1.6rem 0;
  padding: 0.9rem 1.3rem;
  border-left: 3px solid var(--laiton);
  background: rgba(27, 40, 54, 0.55);
  border-radius: 0 12px 12px 0;
  color: var(--trace-douce);
}
.ftf-corps table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.ftf-corps th, .ftf-corps td { border-bottom: var(--filet-1); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.ftf-corps th { font-family: var(--regie); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--laiton); }
.ftf-corps ul, .ftf-corps ol { padding-left: 1.4rem; }
.ftf-corps li::marker { color: var(--laiton); }

.ftf-relais {
  position: sticky; top: 6.5rem;
  background: var(--feuille);
  border: var(--filet-1);
  border-radius: var(--rond);
  padding: 1.3rem 1.4rem;
  font-size: 0.9rem;
  box-shadow: var(--ombre-douce);
}
.ftf-relais h2 {
  font-family: var(--regie); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--laiton); margin: 0 0 0.8rem;
}
.ftf-relais ol, .ftf-relais ul { padding-left: 1.25rem; margin: 0 0 1.4rem; }
.ftf-relais li { margin-bottom: 0.4rem; }
.ftf-relais a { color: var(--trace-douce); text-decoration: none; }
.ftf-relais a:hover { color: var(--laiton-clair); }
.ftf-relais__sources { font-family: var(--regie); font-size: 0.75rem; }
.ftf-relais__sources a { word-break: break-all; }
.ftf-retour { margin: 1.8rem 0 0; }
.ftf-retour a { text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------- voisinage (a lire ensuite) */
.ftf-voisinage { padding: 3.5rem 0 4rem; }
.ftf-voisinage .ftf-tuiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.ftf-voisinage .ftf-tuile__photo { aspect-ratio: 3 / 2; }

/* ---------------------------------------------------------------- rubrique */
.ftf-rubrique__tete { position: relative; padding: 2.2rem 0 1.6rem; max-width: 62ch; }
.ftf-rubrique__tete h1 { margin: 0.2rem 0 0.6rem; }
.ftf-rubrique__tete .ftf-rubrique__intro { margin: 0; color: var(--trace-douce); }
.ftf-voisines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.2rem;
  margin-top: 3.5rem;
}
.ftf-voisine {
  position: relative;
  display: block;
  background: var(--feuille);
  border: var(--filet-1);
  border-top: 3px solid var(--voie, var(--laiton));
  border-radius: var(--rond);
  padding: 1.2rem 1.4rem 1.4rem;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.ftf-voisine:hover { transform: translateY(-3px); border-color: var(--voie, var(--laiton)); }
.ftf-voisine__titre { display: block; font-family: var(--titre); font-size: 1.15rem; color: var(--trace); margin-bottom: 0.4rem; }
.ftf-voisine__apercu { display: block; color: var(--trace-douce); font-size: 0.9rem; margin-bottom: 0.7rem; }
.ftf-voisine__compte { font-family: var(--regie); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--voie, var(--laiton)); }

/* ---------------------------------------------------------------- pages de service et 404 */
.ftf-service { padding: 2.2rem 0 4rem; max-width: var(--mesure); }
.ftf-service h1 { margin-bottom: 0.5rem; }
.ftf-service__chapeau { color: var(--laiton-clair); font-weight: 600; font-size: 1.12rem; }
.ftf-introuvable { text-align: center; padding: 5rem 1rem 6rem; max-width: 40rem; margin: 0 auto; }
.ftf-introuvable__code { font-family: var(--titre); font-size: 5rem; color: var(--laiton); opacity: 0.35; line-height: 1; margin: 0; }
.ftf-introuvable h1 { margin-top: 0.4rem; }
.ftf-introuvable p { color: var(--trace-douce); }
.ftf-introuvable .ftf-bouton { margin-top: 1rem; }

/* ---------------------------------------------------------------- pied (signature B : colophon trois colonnes) */
.ftf-pied {
  background: var(--creux);
  border-top: var(--filet-1);
  font-size: 0.92rem;
  padding-top: 3rem;
}
.ftf-pied__colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.2rem;
}
.ftf-pied__colonne h2 {
  font-family: var(--regie); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--laiton); margin: 0 0 0.9rem;
}
.ftf-pied__colonne p { margin: 0 0 0.8rem; color: var(--trace-douce); }
.ftf-pied__colonne ul { list-style: none; padding: 0; margin: 0; }
.ftf-pied__colonne li { margin-bottom: 0.45rem; }
.ftf-pied__colonne a { color: var(--trace-douce); text-decoration: none; }
.ftf-pied__colonne a:hover { color: var(--laiton); }
.ftf-pied__note {
  display: block;
  background: var(--feuille);
  border: var(--filet-1);
  border-left: 3px solid var(--laiton);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-top: 1rem;
  color: var(--trace-douce);
  font-size: 0.85rem;
}
.ftf-pied__enseigne { display: flex; margin-bottom: 1rem; }
.ftf-pied__bas {
  border-top: var(--filet-1);
  padding: 1.1rem 0 1.6rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; justify-content: space-between;
  font-family: var(--regie); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--trace-douce);
}
.ftf-pied__bas a { color: var(--trace-douce); }
.ftf-pied__bas a:hover { color: var(--laiton); }

/* ---------------------------------------------------------------- points de bascule */
@media (max-width: 64rem) {
  .ftf-vestibule { padding: 3rem 0 6.5rem; }
  .ftf-vestibule__grille { grid-template-columns: 1fr; gap: 2.8rem; }
  .ftf-vestibule__accroche { max-width: 20ch; }
  .ftf-rail--premiere { padding-top: 8rem; }
  .ftf-duo { grid-template-columns: 1fr; }
  .ftf-relais { position: static; }
  .ftf-phare { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
  .ftf-pied__colonnes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 46rem) {
  .ftf-halle { width: min(100% - 2rem, var(--halle)); }
  .ftf-fronton__rang { padding: 0.75rem 0; }
  .ftf-enseigne__glyphe { width: 2.2rem; height: 2.2rem; }
  .ftf-enseigne__nom { font-size: 1.2rem; }
  .ftf-liens { gap: 1rem; }
  .ftf-bande__jour { display: none; }
  .ftf-vestibule { padding: 2.6rem 0 5.5rem; }
  .ftf-vestibule__grille { gap: 2.2rem; }
  .ftf-bilan { max-width: none; }
  .ftf-actions .ftf-bouton { flex: 1 1 auto; justify-content: center; }
  .ftf-une__corps { left: 1rem; right: 1rem; bottom: 1rem; }
  .ftf-une__abrege { display: none; }
  .ftf-rail { padding: 2.8rem 0; }
  .ftf-rail--premiere { padding-top: 6.8rem; }
  .ftf-rail__tete { align-items: flex-start; }
  .ftf-cote { font-size: 2rem; }
  .ftf-filigrane { display: none; }
  .ftf-tuiles { gap: 1.1rem; }
  .ftf-liste .ftf-entree { gap: 0.9rem; }
  .ftf-entree__photo { flex-basis: 5.4rem; }
  .ftf-entree__abrege { display: none; }
  .ftf-entree__fleche { display: none; }
  .ftf-phare { grid-template-columns: 1fr; }
  .ftf-phare__photo { aspect-ratio: 16 / 9; }
  .ftf-encart { padding: 1.8rem 1.5rem; margin: 3rem auto; }
  .ftf-planche__cadre { border-radius: var(--rond); }
  .ftf-fiche__chapeau { font-size: 1.08rem; }
  .ftf-corps { font-size: 1rem; }
  .ftf-pied__colonnes { grid-template-columns: 1fr; gap: 2rem; }
  .ftf-pied__bas { flex-direction: column; gap: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .ftf-fronton, .ftf-bande, .ftf-pied, .ftf-relais, .ftf-voisinage { display: none; }
  body { background: #fff; color: #111; }
}