/* Territoire Intelligence : ajouts propres au site (le reste vient de /ds/tokens.css et /ds/bundle.css, v16). */

@font-face { font-family: "Satoshi"; src: url(/fonts/Satoshi-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/fonts/Satoshi-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/fonts/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/Manrope-ExtraBold.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/fonts/Manrope-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

body { margin: 0; background: var(--blanc); }
a { color: var(--texte-lien); }
a:hover { color: var(--texte-lien-survol); }

/* En-tête entre 1024 et 1319 px : les maquettes (1280 px sans barre de défilement) débordaient
   de quelques pixels avec une barre de défilement Windows. On resserre la navigation. */
@media (min-width: 1024px) and (max-width: 1319px) {
  .ti-nav { margin-left: var(--espace-4); }
  .ti-nav__lien { padding-left: 8px; padding-right: 8px; font-size: 15px; }
  .ti-entete .ti-logo__mots { font-size: 20px; }
  .ti-entete .ti-logo { gap: 10px; }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .ti-entete .ti-logo__mots { display: none; }
}

/* Vignettes cartographiques : variante ordinateur ou mobile (étiquettes agrandies). */
.ti-vig-mobile { display: none !important; }
@media (max-width: 520px) {
  .ti-vig-bureau { display: none !important; }
  .ti-vig-mobile { display: block !important; }
}

/* Filtres du centre de ressources : cartes masquées par thème. */
.ti-carte[hidden] { display: none; }

/* Formulaire de démo : champ piège anti-robots, hors écran (ni visible ni atteignable au clavier). */
.ti-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Bannière de témoins : en bas à gauche, sans bloquer la lecture (Loi 25). */
.ti-temoins-zone { position: fixed; left: var(--espace-4); right: var(--espace-4); bottom: var(--espace-4); z-index: 50; pointer-events: none; }
.ti-temoins-zone .ti-temoins { pointer-events: auto; margin: 0; }
@media (min-width: 768px) { .ti-temoins-zone { right: auto; max-width: 560px; } }
.ti-visuellement-cache { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page de recherche : liste de résultats. */
.ti-resultats { list-style: none; margin: var(--espace-3) 0 0; padding: 0; }
.ti-resultats li { padding: var(--espace-4) 0; border-bottom: var(--trait-1) solid var(--bordure-discrete); }
.ti-resultats a { font: 700 19px/1.35 var(--font-titre); }
.ti-resultats p { margin: var(--espace-2) 0 0; color: var(--texte-secondaire); font-size: 15px; }
.ti-resultats .ti-theme { display: inline-block; margin-bottom: var(--espace-2); }

/* ==========================================================================
   Animations (retours d'Alex, 30 sept.) : sobres, désactivées si l'usager
   demande moins de mouvement. La classe .anim est posée sur <html> par un
   script en tête (Base.astro) : sans JavaScript, tout reste visible.
   ========================================================================== */

/* 1. Apparition douce au défilement */
.anim .ti-apparition { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--rang, 0) * 70ms); }
.anim .ti-apparition.est-visible { opacity: 1; transform: none; }

/* 2. Léger surlignage au survol des cartes et blocs d'information */
.ti-carte, .ti-comparaison__col, .ti-etapes__item, .ti-avenir, .ti-faq__item { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease; }
@media (hover: hover) {
  .ti-carte:hover, .ti-avenir:hover, .ti-etapes__item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(31, 17, 25, .28); border-color: var(--sauge); }
  .ti-comparaison__col:hover { box-shadow: 0 12px 28px -16px rgba(31, 17, 25, .25); }
  .ti-faq__item:hover { background-color: var(--brume); }
}

/* 3. Vignettes cartographiques « vivantes » */
.ti-heros .ti-vignette { box-shadow: 0 0 0 1px rgba(44, 74, 48, .06), 0 30px 60px -28px rgba(44, 74, 48, .5), 0 0 90px -10px rgba(140, 180, 106, .45); }
.ti-vignette--incline { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; will-change: transform; }
.ti-direct { display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--foret); vertical-align: middle; }
.anim .ti-direct { animation: ti-direct 2s ease-in-out infinite; }
@keyframes ti-direct { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 129, 81, .5); } 50% { box-shadow: 0 0 0 6px rgba(74, 129, 81, 0); } }

/* Séquence de dessin quand la carte entre à l'écran (.carto-prete → .carto-joue) */
.anim .carto-prete .ti-carto-rue, .anim .carto-prete .ti-carto-flux { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .carto-joue .ti-carto-rue, .anim .carto-joue .ti-carto-flux { transition: stroke-dashoffset 1.4s cubic-bezier(.45,0,.2,1); stroke-dashoffset: 0; }
.anim .carto-prete :is(.ti-carto-densite-1, .ti-carto-densite-2, .ti-carto-iso, .ti-carto-iso-1, .ti-carto-iso-2, .ti-carto-iso-3, .ti-carto-chalandise, .ti-carto-mrc, .ti-carto-village) { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.anim .carto-joue :is(.ti-carto-densite-1, .ti-carto-densite-2, .ti-carto-chalandise, .ti-carto-mrc, .ti-carto-village) { opacity: var(--op, 1); transform: none; transition: opacity .9s ease .5s, transform 1.1s cubic-bezier(.2,.8,.2,1) .5s; }
.anim .carto-joue .ti-carto-densite-1 { --op: .8; }
.anim .carto-joue :is(.ti-carto-iso, .ti-carto-iso-1, .ti-carto-iso-2, .ti-carto-iso-3) { opacity: 1; transform: none; transition: opacity .8s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.4s + var(--rang, 0) * .25s); }
.anim .carto-prete :is(.ti-carto-pt, .ti-carto-vacant, .ti-carto-lot, .ti-carto-lot-vacant, .ti-carto-glyphe) { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.anim .carto-joue :is(.ti-carto-pt, .ti-carto-vacant, .ti-carto-lot, .ti-carto-lot-vacant, .ti-carto-glyphe) { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(1s + var(--rang, 0) * 35ms); }
.ti-carto-onde { fill: none; stroke: var(--mais); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; pointer-events: none; }
.anim .carto-joue .ti-carto-onde { animation: ti-onde 2.8s ease-out 1.6s infinite; }
@keyframes ti-onde { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
.ti-carto-pt:hover > :first-child { filter: drop-shadow(0 0 3px rgba(31, 17, 25, .45)); }

/* Légende interactive : survoler une catégorie met ses commerces en avant */
.ti-vignette__legende li[data-cat] { cursor: default; border-radius: 6px; transition: background-color .2s ease; }
.ti-vignette__legende li[data-cat]:hover { background: var(--brume); }
.ti-vignette[data-cat-active] .ti-carto-pt { transition: opacity .2s ease; opacity: .18; }
.ti-vignette[data-cat-active="alim"] .ti-carto-pt:has(.ti-carto-cat--alim),
.ti-vignette[data-cat-active="detail"] .ti-carto-pt:has(.ti-carto-cat--detail),
.ti-vignette[data-cat-active="serv"] .ti-carto-pt:has(.ti-carto-cat--serv),
.ti-vignette[data-cat-active="resto"] .ti-carto-pt:has(.ti-carto-cat--resto) { opacity: 1; }

/* 4. Sommaire (articles, pages légales) : repère qui suit la lecture */
.ti-tdm { position: relative; }
.ti-tdm a[aria-current="true"] { margin-left: 0; padding-left: 0; border-left: 0; }
.ti-tdm__curseur { position: absolute; left: -2px; top: 0; width: 2px; height: 36px; background: var(--foret); border-radius: 2px; transition: transform .35s cubic-bezier(.2,.8,.2,1), height .35s ease; }
.ti-tdm a { transition: color .2s ease; }

/* 5. Articles « À venir » : couverture cartographique du thème + ruban */
.ti-carte--a-venir { background: linear-gradient(180deg, var(--creme), var(--fond-page) 60%); }
.ti-carte .ti-carte__image { position: relative; overflow: hidden; }
.ti-carte .ti-carte__image .ti-couverture svg { width: 100%; height: 100%; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) { .ti-carte:hover .ti-carte__image .ti-couverture svg { transform: scale(1.06); } }
.ti-ruban { position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--encre); color: var(--blanc); font: 600 12px/1 var(--font-texte); letter-spacing: .06em; text-transform: uppercase; }
.ti-ruban::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mais); }
.ti-carte__bientot { color: var(--texte-secondaire); font-size: 15px; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ti-carte, .ti-comparaison__col, .ti-etapes__item, .ti-avenir, .ti-faq__item, .ti-vignette--incline, .ti-tdm__curseur, .ti-carte .ti-carte__image .ti-couverture svg { transition: none !important; transform: none !important; }
}

/* Couches activables (cartographie commerciale) : barre de boutons sous l'en-tête de la vignette */
.ti-couches { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; background: var(--fond-page); border-bottom: var(--trait-1) solid var(--bordure-discrete); }
.ti-couche { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--bordure-discrete); background: var(--brume); font: 600 13px/1.2 var(--font-texte); color: var(--texte-principal); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.ti-couche:hover { transform: translateY(-1px); border-color: var(--foret); }
.ti-couche:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-couche[aria-pressed="true"] { background: var(--foret-50); border-color: rgba(74, 129, 81, .35); }
.ti-couche[aria-pressed="false"] { background: var(--fond-page); color: var(--texte-secondaire); }
.ti-couche__pastille { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--fond-page); }
.ti-couche[aria-pressed="false"] .ti-couche__pastille { opacity: .3; }
/* En-tête de page : légende compacte, description gardée pour les lecteurs d'écran */
.ti-heros .ti-vignette__legende { font-size: 12.5px; gap: 4px 12px; padding: 10px 12px; }
.ti-heros .ti-vignette__legende svg { width: 14px; height: 14px; }
.ti-heros .ti-vignette--commerce .ti-vignette__description { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; border: 0; }
.ti-carto-pt, .ti-carto-vacant, .ti-carto-densite-1, .ti-carto-densite-2, .ti-carto-chalandise { transition: opacity .35s ease; }
.ti-couche--masquee { opacity: 0 !important; pointer-events: none; }
@media (max-width: 520px) { .ti-couche { font-size: 11.5px; padding: 3px 8px; min-height: 28px; } }

/* Tableaux de lecture (politique de confidentialité : liste des témoins) */
.ti-tableau-defilant { overflow-x: auto; margin: var(--espace-3) 0 var(--espace-5); border: var(--trait-1) solid var(--bordure-discrete); border-radius: var(--rayon-md); }
.ti-tableau-defilant:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ti-tableau { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ti-tableau th, .ti-tableau td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: var(--trait-1) solid var(--bordure-discrete); }
.ti-tableau thead th { background: var(--brume); font-weight: 600; color: var(--texte-principal); }
.ti-tableau tbody tr:last-child td { border-bottom: 0; }
.ti-tableau code { font-size: 13.5px; background: var(--creme); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }