/* Page « Espace agence » (/agence). Classes préfixées agence-. Refonte du 24/10 : planches « Après » Agence-publique-1440 et -390
   de la maquette validée. Couleurs : jetons --dt-* ; les objets en papier (cartes du « Comment ça marche », billet d'invitation,
   captures) gardent des couleurs fixes, identiques de jour comme de nuit. Mouvement : seulement sous prefers-reduced-motion: no-preference,
   déclenché par agence.js (IntersectionObserver) ; sans mouvement ou sans script, l'état final est affiché. */

.agence-page { --sec: 112px; }
/* Fond blanc de la maquette (variante C) pour /agence, en clair seulement : seuls les fonds changent. */
html:not([data-theme="dark"]) .agence-page { --dt-surface: #ffffff; --dt-surface-alt: #eef3f5; --dt-encart: #eef3f5; }
.agence-sec { padding-top: 0; }

/* ========== Liens : 44 px de cible ========== */
.agence-cible { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Bouton d'en-tête : « Calculer mes économies possibles » en contour sur cette page (l'action principale est celle de la page). */
.agence-page .top .top-cta { background: transparent; color: var(--dt-ink); box-shadow: inset 0 0 0 2px var(--dt-ink); }
.agence-page .top .top-cta:hover { background: var(--dt-surface-alt); transform: none; box-shadow: inset 0 0 0 2px var(--dt-ink); }
.agence-page .top .top-cta:active { transform: none; }

/* Titres de la page */
.agence-h1 { font-variation-settings: "opsz" 96; font-size: clamp(33px, 3.75vw, 54px); line-height: 0.98; letter-spacing: -0.032em; }
.agence-h2 { font-variation-settings: "opsz" 72; font-size: clamp(30px, 3.9vw, 56px); line-height: 0.98; letter-spacing: -0.028em; }
.agence-espace .agence-h2, .faq .agence-h2 { font-size: clamp(30px, 3.34vw, 48px); }
.agence-insecable { white-space: nowrap; }
.agence-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5); }

/* ========== 1. Héros ========== */
.agence-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--esp-7) 56px; align-items: center; padding: var(--esp-6) 0 104px; }
.agence-tete-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.agence-tete-texte .actions-tete, .agence-actions { margin-top: 4px; }
.agence-pour { color: var(--dt-ink-2); font-size: 17px; line-height: 1.55; }
.agence-pour b { color: var(--dt-ink); font-weight: 600; }
.agence-gratuit { font-size: 15px; line-height: 1.5; color: var(--dt-ink-2); }
.agence-fig { margin: 0; }
.agence-fig img { display: block; width: 100%; height: auto; }
.agence-fig figcaption { margin-top: var(--esp-3); font-size: 13px; line-height: 1.4; color: var(--dt-ink-2); text-align: right; }
.agence-espace-fig figcaption { display: none; }

/* ========== 2. Comment ça marche : bandeau d'encre ========== */
.agence-bande { display: flex; flex-direction: column; gap: 40px; padding: 72px 64px 56px; border-radius: var(--r-panel); background: var(--dt-band); color: var(--dt-on-band); }
.agence-bande-tete { display: flex; flex-direction: column; gap: var(--esp-4); }
.agence-bande .sur-titre { color: var(--dt-on-band-2); }
.agence-bande h2 { color: var(--dt-on-band); max-width: 22ch; }
.agence-fictif { font-size: 14px; line-height: 1.45; color: var(--dt-on-band-2); }

.agence-cm-pas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.agence-cm-pas > li { position: relative; display: flex; flex-direction: column; gap: 18px; }
.agence-cm-tete { position: relative; display: flex; justify-content: center; height: 48px; }
.agence-cm-nb { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px 14px 11px 15px; background: #ffffff; color: #0e3a47; font: 800 22px/1 var(--display); }
/* Le trait en pointillés va du pas au suivant ; le trait blanc se trace dessus quand les pas s'allument (état final : trait blanc plein). */
.agence-cm-fil { position: absolute; top: 22px; left: calc(50% + 32px); right: -50%; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, #4f7c88 0 8px, transparent 8px 14px); }
.agence-cm-fil::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: #ffffff; transform-origin: left center; }
.agence-cm-carte { --dt-ink: #0e3a47; --dt-ink-2: #3f5f68; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-panel); background: #ffffff; color: #0e3a47; box-shadow: 6px 6px 0 #0a2a34; }
.agence-cm-carte h3 { font-size: 21px; line-height: 1.15; letter-spacing: -0.015em; }
.agence-cm-carte > p { font-size: 15px; line-height: 1.5; color: #3f5f68; }
.agence-cm-carte > .lien { align-self: flex-start; font-size: 15px; }
.agence-cm-vis { margin-top: auto; display: flex; flex-direction: column; gap: 10px; height: 304px; padding: 16px; border-radius: 14px; background: #f6f2ea; box-shadow: inset 0 0 0 2px #e6dccb; overflow: hidden; }
.agence-cm-q { font: 800 12px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #1f6f82; }
.agence-cm-url { display: block; padding: 12px 14px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 2px #bdd2d9; font: 800 15px/1.35 var(--display); color: #0e3a47; }
.agence-cm-url span { white-space: nowrap; }
.agence-cm-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.agence-cm-btn, .agence-cm-btn2 { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font: 700 15px/1 var(--display); }
.agence-cm-btn { background: #0e3a47; color: #ffffff; box-shadow: 0 3px 0 #c2265d; }
.agence-cm-btn2 { background: #ffffff; color: #0e3a47; box-shadow: inset 0 0 0 2px #0e3a47; }
.agence-cm-btn svg { width: 20px; height: 20px; }
.agence-cm-msg { margin-top: auto; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: #ffffff; box-shadow: inset 0 0 0 2px #bdd2d9; font: 400 13px/1.4 var(--text); color: #3f5f68; }
.agence-cm-rap-t { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 2px dashed #d8ccb6; }
.agence-cm-rap-t b { font: 800 15px/1.2 var(--display); }
.agence-cm-rap-t > span { font: 600 12px/1.3 var(--text); color: #3f5f68; }
.agence-cm-dpe { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.agence-cm-dpe > li { display: flex; align-items: center; gap: 10px; height: 20px; }
.agence-cm-b { flex: none; display: flex; align-items: center; height: 16px; padding: 0 8px; border-radius: 3px 9px 9px 3px; font: 800 11px/1 var(--display); color: #0a1628; transform-origin: left center; }
.agence-cm-dpe > li.ici .agence-cm-b { height: 20px; box-shadow: 0 0 0 2px #0e3a47; }
.agence-cm-o { font: 700 12px/1 var(--display); color: #0e3a47; white-space: nowrap; }
.agence-cm-couv { display: grid; gap: 6px; padding: 14px 14px 12px; border-radius: 10px; background: #ffffff; box-shadow: inset 0 0 0 2px #bdd2d9, inset 0 6px 0 #0e3a47; }
.agence-cm-couv-t { padding-top: 4px; font: 700 11px/1.25 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: #1f6f82; }
.agence-cm-couv b { font: 800 18px/1.15 var(--display); letter-spacing: -0.01em; }
.agence-cm-par { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 2px dashed #e6dccb; font: 700 13px/1.2 var(--display); }
.agence-cm-logo { display: grid; place-items: center; flex: none; height: 26px; padding: 0 8px; border-radius: 6px; background: #0e3a47; color: #ffffff; font: 800 12px/1 var(--display); }
.agence-cm-remis { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agence-cm-remis > li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #ffffff; box-shadow: inset 0 0 0 2px #bdd2d9; }
.agence-cm-remis b { font: 800 14px/1.2 var(--display); }
.agence-cm-remis > li > span { font: 600 12px/1.2 var(--text); color: #3f5f68; text-align: right; }

/* ========== 3. Votre espace ========== */
.agence-espace { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.agence-espace-texte { display: flex; flex-direction: column; gap: var(--esp-5); }
.agence-espace-tete { display: flex; flex-direction: column; gap: var(--esp-4); }
.agence-reperes { list-style: none; margin: 0; padding: 0; }
.agence-reperes li { display: flex; gap: var(--esp-4); align-items: flex-start; padding: 20px 0; border-top: 2px solid var(--dt-surface-alt-2); }
.agence-reperes li:first-child { border-top: 0; padding-top: 0; }
.agence-reperes li > div { display: grid; gap: 6px; }
.agence-reperes h3 { font-size: 20px; line-height: 1.15; letter-spacing: -0.015em; }
.agence-reperes p { font-size: 15px; line-height: 1.5; color: var(--dt-ink-2); }
.agence-repere { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 12px 14px 11px 15px; background: var(--dt-ink); color: var(--dt-surface); font: 800 16px/1 var(--display); }
.agence-collab { font-size: 16px; padding: var(--esp-4) 20px; }
.agence-collab b { font-weight: 600; }

/* ========== 4. Le client garde la main ========== */
.agence-client { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-7); align-items: start; }
.agence-client-tete { display: flex; flex-direction: column; gap: var(--esp-4); }
.agence-coches { list-style: none; margin: 28px 0 0; padding: 0; }
.agence-coches li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; padding: var(--esp-4) 0; border-top: 2px solid var(--dt-surface-alt-2); font: 600 18px/1.45 var(--text); }
.agence-coches li:last-child { border-bottom: 2px solid var(--dt-surface-alt-2); }
.agence-coches svg { width: 26px; height: 26px; color: var(--dt-ink); }
.agence-repere-encart { margin-top: 132px; display: grid; gap: var(--esp-2); }
.agence-repere-encart b { font: 700 17px/1.3 var(--display); }
.agence-repere-encart p { font-size: 15px; line-height: 1.5; color: var(--dt-ink-2); }

/* ========== 6. Appel final : billet d'invitation ========== */
.agence-fin { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-7); align-items: center; padding: 56px 64px; border-radius: var(--r-panel); background: var(--dt-creme) }
.agence-fin-texte { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.agence-billet-zone { padding: 8px var(--esp-6) 0 0; }
.agence-billet-ombre { transform: rotate(-3deg); filter: drop-shadow(2px 0 0 #0e3a47) drop-shadow(-2px 0 0 #0e3a47) drop-shadow(0 2px 0 #0e3a47) drop-shadow(0 -2px 0 #0e3a47) drop-shadow(6px 6px 0 #0e3a47); transition: transform 200ms var(--ease); }
.agence-billet { position: relative; display: grid; gap: 14px; justify-items: start; padding: 22px 22px 22px 74px; border-radius: 18px; color: #0e3a47;
  background: radial-gradient(circle 2.5px, #ffffff 96%, transparent) 49px 6px / 6px 12px repeat-y, linear-gradient(90deg, #1f6f82 0 52px, #ffffff 52px);
  -webkit-mask: radial-gradient(circle 11px at 52px 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 52px 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 11px at 52px 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 11px at 52px 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; }
.agence-billet::before { content: "Invitation"; position: absolute; left: 0; top: 0; bottom: 0; width: 48px; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font: 800 12px/1 var(--display); letter-spacing: 0.26em; text-transform: uppercase; color: #ffffff; }
.agence-billet::after { content: ""; position: absolute; right: 18px; top: 16px; width: 38px; height: 38px; opacity: 0.9;
  background:
    linear-gradient(#0e3a47 0 0) 4px 4px / 6px 6px no-repeat, linear-gradient(#fff 0 0) 2px 2px / 10px 10px no-repeat, linear-gradient(#0e3a47 0 0) 0 0 / 14px 14px no-repeat,
    linear-gradient(#0e3a47 0 0) 28px 4px / 6px 6px no-repeat, linear-gradient(#fff 0 0) 26px 2px / 10px 10px no-repeat, linear-gradient(#0e3a47 0 0) 24px 0 / 14px 14px no-repeat,
    linear-gradient(#0e3a47 0 0) 4px 28px / 6px 6px no-repeat, linear-gradient(#fff 0 0) 2px 26px / 10px 10px no-repeat, linear-gradient(#0e3a47 0 0) 0 24px / 14px 14px no-repeat,
    linear-gradient(#1f6f82 0 0) 17px 2px / 4px 4px no-repeat, linear-gradient(#1f6f82 0 0) 17px 10px / 4px 8px no-repeat, linear-gradient(#0e3a47 0 0) 17px 20px / 4px 4px no-repeat,
    linear-gradient(#0e3a47 0 0) 24px 17px / 8px 4px no-repeat, linear-gradient(#1f6f82 0 0) 34px 17px / 4px 8px no-repeat, linear-gradient(#0e3a47 0 0) 2px 17px / 8px 4px no-repeat,
    linear-gradient(#0e3a47 0 0) 22px 26px / 4px 4px no-repeat, linear-gradient(#1f6f82 0 0) 28px 28px / 4px 10px no-repeat, linear-gradient(#0e3a47 0 0) 34px 32px / 4px 6px no-repeat, linear-gradient(#0e3a47 0 0) 17px 32px / 6px 4px no-repeat; }
.agence-billet-q { padding-right: 52px; font: 800 13px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #1f6f82; }
.agence-billet-lien { display: block; padding: 12px 14px; border-radius: 12px; background: #f6f2ea; box-shadow: inset 0 0 0 2px #e6dccb; font: 800 21px/1.2 var(--display); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.agence-billet-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #0e3a47; color: #ffffff; box-shadow: 0 4px 0 #c2265d; font: 700 15px/1 var(--display); }
.agence-billet-btn svg { width: 20px; height: 20px; }

/* ========== Barre d'action du téléphone ========== */
.agence-collante { display: none; }

/* ========== Mouvement ========== */
@keyframes agence-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes agence-allume { from { background: transparent; color: #c9dce2; box-shadow: inset 0 0 0 2px #4f7c88; transform: scale(0.92); } 60% { transform: scale(1.12); } to { background: #ffffff; color: #0e3a47; box-shadow: none; transform: none; } }
@keyframes agence-voile { from { opacity: 0.35; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes agence-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes agence-trace-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes agence-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes agence-tampon { from { transform: scale(1.3); opacity: 0; } to { opacity: 1; } }
@keyframes agence-pose { from { opacity: 0; transform: translateY(18px) rotate(-8deg); } 60% { opacity: 1; transform: translateY(0) rotate(-1.5deg); } to { transform: rotate(-3deg); } }

@media (prefers-reduced-motion: no-preference) {
  .agence-entree { animation: agence-entree 600ms var(--ease-expo, ease) 120ms both; }
  .agence-tete-texte > * { animation: agence-entree 320ms var(--ease) both; }
  .agence-tete-texte > :nth-child(2) { animation-delay: 70ms; }
  .agence-tete-texte > :nth-child(3) { animation-delay: 140ms; }
  .agence-tete-texte > :nth-child(4) { animation-delay: 210ms; }
  .agence-tete-texte > :nth-child(5) { animation-delay: 280ms; }
  .agence-tete-texte > :nth-child(6) { animation-delay: 350ms; }

  /* Les éléments à révéler partent invisibles seulement si le script est là (classe posée par agence.js). */
  .agence-anim [data-vu]:not(.vu) { opacity: 0; transform: translateY(14px); }
  .agence-anim [data-vu].vu { animation: agence-entree 420ms var(--ease) both; }
  .agence-anim .agence-coches[data-vu].vu li { animation: agence-entree 320ms var(--ease) both; }
  .agence-anim .agence-coches[data-vu].vu li:nth-child(2) { animation-delay: 80ms; }
  .agence-anim .agence-coches[data-vu].vu li:nth-child(3) { animation-delay: 160ms; }
  .agence-anim .agence-coches[data-vu].vu li:nth-child(4) { animation-delay: 240ms; }
  .agence-anim .agence-reperes[data-vu].vu .agence-repere { animation: agence-tampon 260ms var(--ease) 240ms both; }

  /* Comment ça marche : au départ les pas 2 et 3 sont éteints ; le pas 1 s'allume, le trait se trace, le pas 2 s'allume, etc. */
  .agence-cm-pas.pret:not(.anime) .agence-cm-nb { background: transparent; color: #c9dce2; box-shadow: inset 0 0 0 2px #4f7c88; }
  .agence-cm-pas.pret:not(.anime) .agence-cm-carte { opacity: 0.35; }
  .agence-cm-pas.pret:not(.anime) .agence-cm-b { transform: scaleX(0); }
  .agence-cm-pas.pret:not(.anime) .agence-cm-couv, .agence-cm-pas.pret:not(.anime) .agence-cm-remis > li { opacity: 0; }
  .agence-cm-pas.anime .agence-cm-nb { animation: agence-allume 420ms var(--ease) both; }
  .agence-cm-pas.anime > li:nth-child(2) .agence-cm-nb { animation-delay: 700ms; }
  .agence-cm-pas.anime > li:nth-child(3) .agence-cm-nb { animation-delay: 1400ms; }
  .agence-cm-pas.pret:not(.anime) .agence-cm-fil::after { transform: scaleX(0); }
  .agence-cm-pas.anime .agence-cm-fil::after { animation: agence-trace 450ms linear both; animation-delay: 250ms; }
  .agence-cm-pas.anime > li:nth-child(2) .agence-cm-fil::after { animation-delay: 950ms; }
  .agence-cm-pas.anime .agence-cm-carte { animation: agence-voile 420ms var(--ease) both; }
  .agence-cm-pas.anime > li:nth-child(2) .agence-cm-carte { animation-delay: 700ms; }
  .agence-cm-pas.anime > li:nth-child(3) .agence-cm-carte { animation-delay: 1400ms; }
  .agence-cm-pas.anime .agence-cm-b { animation: agence-barre 260ms var(--ease) both; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(1) .agence-cm-b { animation-delay: 900ms; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(2) .agence-cm-b { animation-delay: 950ms; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(3) .agence-cm-b { animation-delay: 1000ms; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(4) .agence-cm-b { animation-delay: 1050ms; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(5) .agence-cm-b { animation-delay: 1100ms; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(6) .agence-cm-b { animation-delay: 1150ms; }
  .agence-cm-pas.anime .agence-cm-dpe > li:nth-child(7) .agence-cm-b { animation-delay: 1200ms; }
  .agence-cm-pas.anime .agence-cm-couv { animation: agence-tampon 300ms var(--ease) 1550ms both; }
  .agence-cm-pas.anime .agence-cm-remis > li { animation: agence-entree 300ms var(--ease) 1700ms both; }
  .agence-cm-pas.anime .agence-cm-remis > li:nth-child(2) { animation-delay: 1780ms; }

  .agence-anim .agence-billet-zone.vu .agence-billet-ombre { animation: agence-pose 700ms var(--ease-expo, ease) 150ms both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .agence-billet-ombre:hover { transform: rotate(-1deg) translateY(-3px); }
}

/* ========== Tablette ========== */
@media (max-width: 1023px) {
  .agence-tete, .agence-espace, .agence-client, .agence-fin { grid-template-columns: minmax(0, 1fr); }
  .agence-bande { padding: 48px var(--esp-5) 40px; }
  .agence-cm-pas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .agence-cm-pas > li { gap: 12px; }
  .agence-cm-tete { position: static; }
  .agence-cm-fil { top: auto; left: calc(50% - 2px); right: auto; bottom: -24px; width: 4px; height: 24px; background: repeating-linear-gradient(180deg, #4f7c88 0 6px, transparent 6px 10px); }
  .agence-cm-fil::after { transform-origin: center top; }
  .agence-cm-vis { height: auto; }
  .agence-repere-encart { margin-top: 0; }
  .agence-fin { padding: 40px var(--esp-5); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .agence-cm-pas.pret:not(.anime) .agence-cm-fil::after { transform: scaleY(0); }
  .agence-cm-pas.anime .agence-cm-fil::after { animation-name: agence-trace-v; }
}

/* ========== Téléphone : condensé ========== */
@media (max-width: 760px) {
  .agence-page { --sec: var(--esp-8); }
  .agence-tete { display: flex; flex-direction: column; align-items: stretch; gap: var(--esp-4); padding: var(--esp-2) 0 var(--esp-5); }
  .agence-tete-texte { display: contents; }
  .agence-tete-texte > * { order: 1; }
  .agence-tete-texte > .sur-titre { align-self: flex-start; }
  .agence-fig { order: 2; margin-top: 4px; }
  .agence-fig figcaption { text-align: left; }
  .agence-tete-texte > .agence-pour { order: 3; font-size: 15px; }
  .agence-actions { flex-direction: column; align-items: stretch; gap: var(--esp-2); }
  .agence-actions .btn { width: 100%; }
  .agence-actions .agence-cible { justify-content: center; }
  .agence-bande { margin: 0 calc(-1 * var(--g)); padding: 40px var(--g) 48px; border-radius: 0; gap: 20px; }
  .agence-bande h2 { max-width: none; }
  .agence-cm-carte { padding: 18px; gap: 8px; }
  .agence-cm-carte h3 { font-size: 19px; }
  .agence-cm-vis { padding: 14px; }
  .agence-espace-texte { display: contents; }
  .agence-espace { display: flex; flex-direction: column; gap: var(--esp-4); align-items: stretch; }
  .agence-espace-tete { order: 1; }
  .agence-espace-fig { order: 2; margin-top: 4px; }
  .agence-reperes { order: 3; }
  .agence-collab { order: 4; padding: var(--esp-4); }
  .agence-coches { margin-top: var(--esp-5); }
  .agence-coches li { font-size: 16px; padding: var(--esp-3) 0; gap: var(--esp-3); }
  .agence-client { gap: var(--esp-5); }
  .faq { gap: var(--esp-5); }
  .faq summary { font-size: 18px; padding: var(--esp-3) 0; }
  .faq details p { font-size: 16px; padding-right: 0; }
  .agence-fin { margin: 0 calc(-1 * var(--g)); padding: 32px var(--g) 36px; border-radius: 0; gap: var(--esp-5); }
  .agence-fin .agence-h2 { font-size: 34px; line-height: 1; }
  .agence-page .chapo { order: 0; font-size: 17px; }
  .agence-fin-texte { align-items: stretch; }
  .agence-billet-zone { display: none; }
  .agence-collante { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 16px 14px; background: var(--dt-paper); box-shadow: 0 -2px 0 var(--dt-surface-alt-2); transform: translateY(110%); visibility: hidden; transition: transform 220ms var(--ease), visibility 0s linear 220ms; }
  .agence-collante.visible { transform: none; visibility: visible; transition: transform 220ms var(--ease), visibility 0s; }
  .agence-collante .btn { width: 100%; min-height: 48px; }
}
@media (forced-colors: active) {
  .agence-cm-carte, .agence-billet, .agence-collante { border: 2px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .agence-collante, .agence-billet-ombre { transition: none; }
}