/*
 * Page Territoria (/logiciels/territoria).
 * Feuille autonome, chargée uniquement par cette page : tout est préfixé tr- et rattaché au conteneur .territoria.
 */

.territoria {
    --tr-ink: #1C2429;
    --tr-ink-2: #384851;
    --tr-muted: #66757F;
    --tr-faint: #98A4AC;
    --tr-line: #E5E8EB;
    --tr-line-2: #EEF0F2;
    --tr-canvas: #F6F7F8;
    --tr-red: #E21D48;
    --tr-bg: #fff;
    --tr-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    --tr-shadow-lg: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px -16px rgba(16, 24, 40, .16);
    --tr-ease: cubic-bezier(.2, .8, .2, 1);

    color: var(--tr-ink);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
/* Le thème rend <body> défilant (overflow-x: hidden), ce qui empêche position: sticky ; clip coupe le débordement sans créer de défilement. */
body:has(.territoria) { overflow-x: clip; }
.territoria h1, .territoria h2, .territoria h3, .territoria h4 { margin: 0; color: inherit; font-weight: 600 !important; text-wrap-style: balance; }
.territoria p { margin: 0; text-wrap-style: pretty; }
.territoria a:hover { text-decoration: none; }
/* Le thème remplit tous les SVG (svg { fill: currentColor }) : les icônes au trait gardent un intérieur vide. */
.territoria svg[fill="none"] { fill: none; }

/* ——— Mise en page ——— */
.tr-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.tr-section { padding: 72px 0; }
.tr-canvas { --tr-bg: var(--tr-canvas); background: var(--tr-canvas); }
.tr-border-y { border-top: 1px solid var(--tr-line); border-bottom: 1px solid var(--tr-line); }
.tr-head { max-width: 620px; margin-bottom: 36px; }
.tr-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; }
.tr-grid { display: grid; gap: 16px; }
.tr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.tr-split-media { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tr-split > *, .tr-grid > *, .tr-bento > * { min-width: 0; }

/* ——— Typographie ——— */
.tr-h1 { font-size: clamp(36px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.035em; }
.tr-h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.14; letter-spacing: -.028em; }
.tr-h2-sm { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.tr-h3 { font-size: 15.5px; line-height: 1.35; letter-spacing: -.01em; }
.tr-lead { font-size: 17px; line-height: 1.6; color: var(--tr-ink-2); }
.tr-body { font-size: 14.5px; line-height: 1.6; color: var(--tr-muted); }
.tr-small { font-size: 13px; line-height: 1.5; color: var(--tr-muted); }
.tr-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ——— Boutons, liens ——— */
.tr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent;
    font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s, box-shadow .15s; }
.tr-btn svg { width: 16px; height: 16px; }
.tr-btn-primary { background: var(--tr-red); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(226, 29, 72, .35); }
.tr-btn-primary:hover { background: #C9173E; }
.tr-btn-dark { background: var(--tr-ink); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.tr-btn-light { background: #fff; color: var(--tr-ink) !important; border-color: var(--tr-line); box-shadow: var(--tr-shadow); }
.tr-btn-light:hover { background: #FAFBFB; }
.tr-btn-sm { height: 28px; padding: 0 10px; gap: 6px; border-radius: 7px; font-size: 12.5px; }
.tr-btn-sm svg { width: 14px; height: 14px; }
.tr-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--tr-ink); }
.tr-link svg { width: 15px; height: 15px; transition: transform .15s; }
.tr-link:hover { color: var(--tr-red); }
.tr-link:hover svg { transform: translateX(2px); }

/* ——— Cartes, icônes ——— */
.tr-card { display: block; background: #fff; border: 1px solid var(--tr-line); border-radius: 14px; box-shadow: var(--tr-shadow); color: var(--tr-ink); }
.tr-raised { box-shadow: var(--tr-shadow-lg); }
.tr-pad { padding: 22px; }
.tr-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
    background: #fff; border: 1px solid var(--tr-line); color: var(--tr-ink-2); box-shadow: var(--tr-shadow); }
.tr-icon svg { width: 15px; height: 15px; }
.tr-icon-lg { width: 36px; height: 36px; border-radius: 10px; }
.tr-icon-lg svg { width: 18px; height: 18px; }
.tr-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
    background: var(--tr-canvas); border: 1px solid var(--tr-line); font-size: 12px; font-weight: 600; color: var(--tr-ink-2); }
.tr-stage { background-color: var(--tr-canvas); background-image: radial-gradient(#D5DBE0 1px, transparent 1px); background-size: 16px 16px;
    border: 1px solid var(--tr-line); border-radius: 16px; padding: 24px; }
.tr-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.tr-photo-frame { overflow: hidden; border-radius: 9px; }

/* ——— Étiquettes, avatars ——— */
.tr-tag { display: inline-flex; align-items: center; flex-shrink: 0; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.tr-tag.is-gray { background: #F0F2F4; color: #4B5A64; }
.tr-tag.is-blue { background: #E9EFFB; color: #2B4C9B; }
.tr-tag.is-rose { background: #FCEAEF; color: #B0244B; }
.tr-tag.is-green { background: #E5F4EC; color: #1E7650; }
.tr-tag.is-amber { background: #FCF0DC; color: #95590A; }
.tr-tag.is-violet { background: #F0EBFA; color: #5A3B9F; }
.tr-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    font-size: 9.5px; font-weight: 600; color: #fff; letter-spacing: .02em; }

/* ——— Listes, logos ——— */
.tr-list { list-style: none; padding: 0; margin: 0; }
.tr-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14.5px; color: var(--tr-ink-2); white-space: nowrap; }
.tr-list li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--tr-red); }

/* ——— Onglets (sélecteur de profil) ——— */
.tr-seg { position: relative; display: inline-flex; max-width: 100%; gap: 2px; padding: 3px; border-radius: 10px; background: #ECEFF1; overflow-x: auto; scrollbar-width: none; }
.tr-seg::-webkit-scrollbar { display: none; }
.tr-seg [role="tab"], .tr-ui .tr-seg > span { position: relative; z-index: 1; flex-shrink: 0; padding: 6px 12px; border: 0; border-radius: 8px; background: none;
    font-size: 13.5px; font-weight: 500; color: var(--tr-muted); white-space: nowrap; cursor: pointer; transition: color .2s; }
.tr-seg [role="tab"]:hover { color: var(--tr-ink); }
.tr-seg [role="tab"]:focus-visible { outline: 2px solid var(--tr-ink); outline-offset: 1px; }
.tr-seg .active { background: #fff; color: var(--tr-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
/* Curseur glissant ajouté par territoria.js : il remplace le fond de l'onglet actif. */
.tr-seg-thumb { position: absolute; top: 0; left: 0; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 1px rgba(16, 24, 40, .03); pointer-events: none; }
.tr-seg-thumb.is-ready { transition: transform .4s cubic-bezier(.3, .7, .1, 1), width .4s cubic-bezier(.3, .7, .1, 1); }
.tr-seg.has-thumb .active { background: transparent; box-shadow: none; }

/* ——— Héros ——— */
.tr-hero { padding: 124px 0 64px; }
.tr-hero-head { max-width: 56rem; margin: 0 auto; text-align: center; }
.tr-hero-head .tr-lead { max-width: 38rem; margin-left: auto; margin-right: auto; }
/* Pastille au-dessus du titre : logo Territoria et public visé. */
.tr-pill { display: inline-flex; align-items: center; gap: 10px; height: 36px; margin-bottom: 20px; padding: 0 14px 0 12px; background: #fff;
    border: 1px solid var(--tr-line); border-radius: 999px; box-shadow: var(--tr-shadow); font-size: 13.5px; font-weight: 500; color: var(--tr-ink-2); }
.tr-pill img { display: block; width: auto; height: 19px; }
.tr-pill i { width: 1px; height: 16px; background: var(--tr-line); }
/* Titre en deux tons : la seconde idée passe à la ligne, en gris. */
.tr-h1-sub { display: block; color: #A3AEB6; }
.tr-switch { display: flex; justify-content: center; margin-top: 28px; }
.tr-pane { margin-top: 32px; padding: 8px; }
.tr-pane-text { padding: 24px 32px 24px 0; }
.tr-photo-wrap { position: relative; margin-bottom: 28px; }
.tr-photo-wrap .tr-photo-frame { aspect-ratio: 4 / 3; }
.tr-photo-ui { position: absolute; right: -20px; bottom: -28px; width: 58%; }
@keyframes tr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tr-settle { from { transform: scale(1.05); } to { transform: none; } }
.tr-pane-in { animation: tr-rise .45s var(--tr-ease) both; }
.tr-pane-in .tr-photo { animation: tr-settle 1.2s var(--tr-ease) both; }
.tr-pane-in .tr-raised { animation: tr-rise .6s .12s var(--tr-ease) both; }

/* ——— Ils nous font confiance ——— */
.tr-trust-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: stretch; }
.tr-trust-label { display: flex; align-items: center; padding: 28px 0; font-size: 14px !important; font-weight: 500 !important; line-height: 1.4; letter-spacing: -.005em; color: var(--tr-ink-2) !important; }
.tr-trust-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tr-trust-logos li { display: flex; align-items: center; justify-content: center; padding: 26px 16px; border-left: 1px solid var(--tr-line); }
.tr-trust-logos li:last-child { border-right: 1px solid var(--tr-line); }
.tr-trust-logos img { height: 52px; width: auto; filter: grayscale(1); opacity: .62; mix-blend-mode: multiply; transition: filter .25s, opacity .25s; }
.tr-trust-logos li:hover img { filter: none; opacity: 1; }

/* ——— Bento ——— */
.tr-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tr-span-2 { grid-column: span 2; }
.tr-span-3 { grid-column: span 3; }
.tr-feature { display: flex; flex-direction: column; padding: 8px; transition: box-shadow .2s, transform .2s; }
a.tr-feature:hover { color: var(--tr-ink); box-shadow: var(--tr-shadow-lg); transform: translateY(-2px); }
.tr-peek { position: relative; height: 220px; overflow: hidden; border-radius: 10px; padding: 18px 18px 0;
    background-color: var(--tr-canvas); background-image: radial-gradient(#D5DBE0 1px, transparent 1px); background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.tr-feature-text { display: flex; flex-direction: column; flex: 1; padding: 16px 14px 16px; }
.tr-feature-text .tr-h3 { margin: 10px 0 4px; font-size: 16px; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ——— Guide (sommaire à gauche, chapitres à droite, regroupés par catégorie comme dans le menu de Territoria) ——— */
.tr-guide { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 56px; }
/* Le sommaire défile seul s'il dépasse la hauteur de l'écran. */
.tr-toc { position: sticky; top: 32px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; scrollbar-width: none; }
.tr-toc::-webkit-scrollbar { display: none; }
.tr-toc nav a { display: flex; align-items: center; gap: 10px; margin-left: -1px; padding: 3px 0 3px 14px; border-left: 2px solid transparent;
    font-size: 13px; line-height: 1.45; color: var(--tr-muted); transition: color .2s, border-color .2s; }
.tr-toc nav { border-left: 1px solid var(--tr-line); }
.tr-toc nav a span { width: 14px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--tr-faint); }
.tr-toc nav a:hover { color: var(--tr-ink); }
.tr-toc nav a.is-active { border-left-color: var(--tr-ink); color: var(--tr-ink); font-weight: 500; }
.tr-toc nav a.is-active span { color: var(--tr-ink); }
/* Catégorie du sommaire : passe au rouge quand l'une de ses pages est lue. */
.tr-toc-group + .tr-toc-group { margin-top: 12px; }
.tr-toc-group > p { padding: 0 0 3px 16px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--tr-faint); transition: color .2s; }
.tr-toc-group:has(.is-active) > p { color: var(--tr-red); }
.tr-toc-cta { margin-top: 28px; padding: 16px; border: 1px solid var(--tr-line); border-radius: 12px; background: var(--tr-canvas); }
.tr-toc-cta .tr-h3 { font-weight: 600; }
.tr-chapter { padding: 40px 0; border-top: 1px solid var(--tr-line); scroll-margin-top: 24px; }
/* Catégorie : son nom en rouge sur un filet rouge, puis ses chapitres. */
.tr-group + .tr-group { margin-top: 64px; }
.tr-group .tr-group-title { padding-bottom: 16px; border-bottom: 1px solid var(--tr-red); font-size: 26px; line-height: 1.2; letter-spacing: -.025em; color: var(--tr-red); }
.tr-group-title + .tr-chapter { border-top: 0; }
.tr-chapter .tr-chapter-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
/* Numéro sur fond blanc, centré sur la première ligne du titre (27,5 px) ; étiquette « Nouveau » dans le fil du texte. */
.tr-chapter-title .tr-num { margin-top: 2px; background: #fff; }
.tr-chapter-title .tr-tag { margin-left: 4px; vertical-align: 3px; }
/* Scène d'une illustration du guide : 426 × 278 px à l'intérieur du cadre ; territoria.js la réduit (--tr-scale) quand la colonne est plus étroite. */
.tr-scene { position: relative; box-sizing: border-box; height: calc(278px * var(--tr-scale, 1) + 2px); padding: 0; overflow: hidden; }
.tr-scene-in { position: absolute; top: 0; left: 50%; display: grid; place-items: center; width: 426px; height: 278px; transform: translateX(-50%) scale(var(--tr-scale, 1)); transform-origin: top center; }
/* Hors de l'écran, les animations CSS de la scène s'arrêtent. */
.tr-scene.is-paused *, .tr-scene.is-paused *::before, .tr-scene.is-paused *::after { animation-play-state: paused !important; }

/* ——— Sécurité (onglets à gauche, interface de l'onglet actif à droite) ——— */
.tr-security { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.tr-security .tr-body { max-width: 26rem; }
.tr-sec-tabs { display: flex; flex-direction: column; gap: 4px; max-width: 28rem; margin-top: 28px; }
.tr-sec-tab { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; align-items: start; width: 100%; padding: 12px 14px; overflow: hidden;
    border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; color: var(--tr-muted); text-align: left; cursor: pointer;
    transition: background-color .25s, border-color .25s, box-shadow .25s, color .25s; }
.tr-sec-tab:hover { color: var(--tr-ink); }
.tr-sec-tab:focus { outline: none; }
.tr-sec-tab:focus-visible { outline: 2px solid var(--tr-ink); outline-offset: 2px; }
.tr-sec-tab.is-active { border-color: var(--tr-line); background: #fff; box-shadow: var(--tr-shadow-lg); color: var(--tr-ink); }
.tr-sec-title { display: block; padding-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.tr-sec-tab.is-active .tr-sec-title { padding-bottom: 2px; }
/* Texte de l'onglet : replié, il se déplie sur l'onglet actif. */
.tr-sec-text { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s var(--tr-ease), opacity .3s; }
.tr-sec-text > span { min-height: 0; overflow: hidden; font-size: 13.5px; line-height: 1.5; color: var(--tr-muted); }
.tr-sec-tab.is-active .tr-sec-text { grid-template-rows: 1fr; opacity: 1; }
/* Barre de l'onglet actif : à la fin de son animation, territoria.js passe à l'onglet suivant. Elle s'arrête au survol et hors de l'écran. */
.tr-sec-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--tr-ink); opacity: 0; transform: scaleX(0); transform-origin: left; }
.tr-sec-tab.is-active .tr-sec-progress { opacity: .85; animation: tr-progress 6s linear forwards; }
.tr-security:hover .tr-sec-progress, .tr-security.is-paused .tr-sec-progress { animation-play-state: paused; }
@keyframes tr-progress { to { transform: scaleX(1); } }
/* Les interfaces sont superposées : la scène garde sa hauteur, l'interface de l'onglet actif apparaît en fondu. */
.tr-security .tr-stage { display: grid; place-items: center; min-height: 400px; padding: 40px 32px; border-radius: 20px; background-color: #fff; }
.tr-sec-pane { grid-area: 1 / 1; width: 100%; max-width: 320px; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .35s, transform .5s var(--tr-ease); }
.tr-sec-pane.is-active { opacity: 1; transform: none; }
/* À l'affichage d'une interface, les droits non accordés se désactivent et les lignes d'un .tr-cascade arrivent l'une après l'autre. */
.tr-sec-pane.is-active .tr-toggle:not(.is-on) { animation: tr-toggle-off .3s 1s both; }
.tr-sec-pane.is-active .tr-toggle:not(.is-on)::after { animation: tr-knob-off .3s 1s var(--tr-ease) both; }
@keyframes tr-toggle-off { from { background-color: var(--tr-ink); } }
@keyframes tr-knob-off { from { transform: translateX(10px); } }
.tr-sec-pane.is-active .tr-cascade .tr-row { animation: tr-rise .45s var(--tr-ease) both; }
.tr-sec-pane.is-active .tr-cascade .tr-row:nth-child(2) { animation-delay: .15s; }
.tr-sec-pane.is-active .tr-cascade .tr-row:nth-child(3) { animation-delay: .3s; }

/* ——— Étapes ———
 * Une barre par étape se remplit, puis l'étape suivante prend le relais ; l'étape en cours reste à l'encre, les autres s'estompent.
 * Le script ajoute .is-ready : sans lui (ou avec le mouvement réduit), toutes les étapes restent lisibles, barres pleines. */
.tr-reading { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.tr-read-step { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tr-read-step:focus { outline: none; }
.tr-read-step:focus-visible { outline: 2px solid var(--tr-ink); outline-offset: 6px; border-radius: 2px; }
.tr-read-bar { display: block; height: 2px; margin-bottom: 28px; overflow: hidden; border-radius: 2px; background: var(--tr-line); }
.tr-read-bar > span { display: block; height: 100%; background: var(--tr-ink); transform-origin: left; transition: transform .4s var(--tr-ease); }
.tr-read-body { display: block; transition: opacity .5s var(--tr-ease); }
.tr-read-num { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--tr-faint); font-variant-numeric: tabular-nums; }
.tr-read-body .tr-h3 { display: block; }
.tr-read-body .tr-small { display: block; max-width: 16rem; margin-top: 6px; }
.tr-reading.is-ready .tr-read-bar > span { transform: scaleX(0); }
.tr-reading.is-ready .is-done .tr-read-bar > span { transform: none; }
.tr-reading.is-playing .is-active .tr-read-bar > span { animation: tr-progress 5s linear forwards; }
/* Pause au survol, au clavier et hors de l'écran. */
.tr-reading:hover .tr-read-bar > span, .tr-reading:has(:focus-visible) .tr-read-bar > span, .tr-reading.is-paused .tr-read-bar > span { animation-play-state: paused; }
.tr-reading.is-ready .tr-read-body { opacity: .38; }
.tr-reading.is-ready .tr-read-step:hover .tr-read-body, .tr-reading.is-ready .is-active .tr-read-body { opacity: 1; }
/* Entrée : les étapes montent en fondu quand la frise arrive à l'écran. */
.tr-reading.is-ready > li { transition: opacity .7s var(--tr-ease), transform .9s var(--tr-ease); transition-delay: calc(var(--i) * .1s); }
.tr-reading.is-ready:not(.is-playing) > li { opacity: 0; transform: translateY(10px); }

/* ——— Réservation : déroulé du rendez-vous, puis le calendrier Cal.com intégré ——— */
/* Composition centrée sur 880 px : Cal.com n'affiche les créneaux à côté du mois qu'à partir de 768 px, et centre son calendrier au-delà de 800 px. */
.tr-booking { max-width: 880px; margin: 0 auto; text-align: center; }
.tr-booking > .tr-lead { max-width: 30rem; margin: 12px auto 0; }
.tr-booking-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 36px 0 28px; padding: 0; list-style: none; }
.tr-booking-steps::before { content: ''; position: absolute; top: 14px; left: 16.66%; right: 16.66%; height: 1px; background: var(--tr-line); }
.tr-booking-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px; font-size: 14px; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.tr-booking-steps b { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%;
    background: #fff; border: 1px solid var(--tr-line); box-shadow: var(--tr-shadow); font-size: 12px; font-weight: 600; color: var(--tr-ink-2); }
.tr-booking-steps li:first-child b { background: var(--tr-ink); border-color: var(--tr-ink); color: #fff; }
.tr-booking-steps small { font-size: 12.5px; font-weight: 400; color: var(--tr-faint); }
.tr-booking-card { overflow: hidden; text-align: left; background: #fff; border: 1px solid var(--tr-line); border-radius: 18px; box-shadow: var(--tr-shadow-lg); }
.tr-booking-bar { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--tr-line-2); }
.tr-booking-hosts { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.tr-host { display: flex; align-items: center; gap: 12px; }
.tr-host img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(16, 24, 40, .08); }
.tr-host b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.tr-host span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--tr-muted); }
.tr-booking-chips { display: flex; gap: 6px; margin-left: auto; }
.tr-booking-chips span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--tr-canvas);
    font-size: 12.5px; font-weight: 500; color: var(--tr-ink-2); white-space: nowrap; }
.tr-booking-chips svg { width: 14px; height: 14px; color: var(--tr-muted); }
.tr-booking-cal { position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 8px 12px; }
.tr-booking-cal.is-loaded { display: block; }
.tr-booking-cal.is-ready { min-height: 0; }
.tr-booking-cal.is-loaded .tr-booking-fallback { display: none; }
.tr-booking-fallback { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 18rem; text-align: center; }
/* Squelette du mois et des créneaux, effacé quand Cal.com est prêt. */
.tr-skel { position: absolute; inset: 0; display: flex; justify-content: center; gap: 32px; padding: 28px; transition: opacity .3s; }
.tr-booking-cal.is-ready .tr-skel { opacity: 0; pointer-events: none; }
.tr-skel span { display: block; border-radius: 10px; background: var(--tr-line-2); animation: tr-pulse 1.4s ease-in-out infinite; }
.tr-skel-month { display: flex; flex: 1; flex-direction: column; gap: 24px; max-width: 440px; }
.tr-skel-month > span { width: 140px; height: 18px; }
.tr-skel-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.tr-skel-days span { aspect-ratio: 1; }
.tr-skel-slots { display: flex; flex-direction: column; gap: 10px; width: 30%; max-width: 260px; }
.tr-skel-slots span { height: 44px; }
@keyframes tr-pulse { 50% { opacity: .55; } }
.tr-booking-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; }
.tr-booking-trust p { font-size: 13px; color: var(--tr-muted); white-space: nowrap; }
.tr-booking-trust ul { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.tr-booking-trust img { display: block; width: auto; height: 36px; filter: grayscale(1); opacity: .6; mix-blend-mode: multiply; }
.tr-booking-contact { margin-top: 20px; }

/* ——— Interfaces dessinées de Territoria ——— */
.tr-ui { overflow: hidden; font-size: 13px; text-align: left; }
.tr-row > * { min-width: 0; }
.tr-ui-title { font-size: 13.5px; font-weight: 600; color: var(--tr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-ui-body { padding: 14px; }
.tr-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tr-grow { flex: 1; min-width: 0; }
.tr-person { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--tr-ink); white-space: nowrap; }
.tr-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--tr-line-2); }
.tr-row:last-child { border-bottom: 0; }
.tr-check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #C9D0D5; }
.tr-check.is-done { background: var(--tr-ink); border-color: var(--tr-ink); color: #fff; }
.tr-check svg { width: 10px; height: 10px; }
.tr-ui .tr-seg { display: flex; margin-top: 12px; }
.tr-ui .tr-seg > span { padding: 4px 10px; font-size: 12px; cursor: default; }
/* Cartes compactes du héros : en-tête d'une ligne, une information par ligne. */
.tr-mini { font-size: 12.5px; line-height: 1.4; border-radius: 12px; }
.tr-mini-head { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-bottom: 1px solid var(--tr-line-2); font-weight: 600; color: var(--tr-ink); white-space: nowrap; }
.tr-mini-head > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-muted); }
.tr-mini-meta { font-size: 11.5px; font-weight: 400; color: var(--tr-muted); }
.tr-mini-meta b { font-weight: 500; color: var(--tr-ink); }
.tr-mini-head .tr-mini-meta { min-width: 0; margin-left: auto; overflow: hidden; text-overflow: ellipsis; }
.tr-mini-body { padding: 10px 12px; }
.tr-mini-body + .tr-mini-body { border-top: 1px solid var(--tr-line-2); }
.tr-mini-foot { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--tr-line-2); background: #FBFBFC; }
.tr-mini-strong { font-weight: 500; color: var(--tr-ink); }
.tr-mini .tr-ui-title { font-size: 12.5px; }
.tr-mini .tr-row { gap: 8px; padding: 6px 0; }
.tr-mini .tr-row:first-child { padding-top: 0; }
.tr-mini .tr-row:last-child { padding-bottom: 0; }
.tr-mini .tr-tag { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; }
.tr-mini .tr-avatar { width: 18px; height: 18px; font-size: 7.5px; }
.tr-mini .tr-btn-sm { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; }
.tr-mini .tr-btn-sm svg { width: 12px; height: 12px; }
.tr-map { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; }
.tr-map > img, .tr-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tr-mini-stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; background: #fff; }
.tr-mini-stops > span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tr-pin { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--tr-ink); color: #fff; font-size: 9.5px; font-weight: 600; }
/* Frise des mandats : chaque point est aligné sur le début de son libellé. */
.tr-mandats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tr-mandats::before { content: ''; position: absolute; top: 4px; left: 4px; right: 0; height: 1px; background: var(--tr-line);
    -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
.tr-mandats li { position: relative; padding: 15px 6px 0 0; font-size: 11px; line-height: 1.35; color: var(--tr-muted); }
.tr-mandats li > span { display: block; color: var(--tr-faint); font-variant-numeric: tabular-nums; }
.tr-mandats li::before { content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid #AEB9C1; }
.tr-mandats .is-current { font-weight: 500; color: var(--tr-ink); }
.tr-mandats .is-current::before { background: var(--tr-ink); border-color: var(--tr-ink); }
.tr-stack { display: flex; }
.tr-stack .tr-avatar { box-shadow: 0 0 0 2px #fff; }
.tr-stack .tr-avatar + .tr-avatar { margin-left: -3px; }
.tr-stack .is-more { background: var(--tr-line-2); color: var(--tr-ink-2); }
.tr-rsvp { display: flex; gap: 2px; height: 6px; margin: 12px 0 8px; border-radius: 3px; overflow: hidden; }
.tr-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--tr-muted); }
.tr-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.tr-legend b { font-weight: 500; color: var(--tr-ink); }
.tr-dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.tr-ui [hidden] { display: none !important; }
.tr-file { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--tr-canvas); color: var(--tr-ink-2); }
.tr-file svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-muted); }
/* Interfaces animées par territoria.js : les éléments arrivent en fondu, sans changer la hauteur des cartes. */
@keyframes tr-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes tr-spin { to { transform: rotate(360deg); } }
/* Recherche d'élus : la saisie est tapée par territoria.js ; l'étiquette de l'élu remplace sa commune quand il ne reste qu'un résultat. */
.tr-search { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--tr-ink); border-radius: 8px; background: #fff;
    box-shadow: 0 0 0 3px rgba(28, 36, 41, .08); font-weight: 500; color: var(--tr-ink); white-space: nowrap; }
.tr-search svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-muted); }
.tr-caret { width: 1px; height: 14px; margin-left: -7px; background: var(--tr-ink); animation: tr-blink 1s steps(1) infinite; }
@keyframes tr-blink { 50% { opacity: 0; } }
.tr-search-alert { display: none !important; margin-left: auto; }
.is-found .has-alert .tr-mini-meta { display: none; }
.is-found .has-alert .tr-search-alert { display: inline-flex !important; animation: tr-pop .35s var(--tr-ease) both; }
/* Repère sur une carte : un cercle qui glisse de commune en commune et la bulle de la commune, décalée pour tenir dans les cartes étroites. */
.tr-target { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--tr-ink); border-radius: 50%; background: rgba(255, 255, 255, .5);
    transition: left .9s var(--tr-ease), top .9s var(--tr-ease); }
.tr-callout { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; border: 1px solid var(--tr-line); border-radius: 8px;
    background: #fff; box-shadow: var(--tr-shadow-lg); font-size: 11.5px; font-weight: 500; white-space: nowrap; color: var(--tr-ink);
    opacity: 0; transform: translate(var(--decalage, -35%), calc(-100% - 8px)); transition: opacity .3s, transform .3s var(--tr-ease); }
.tr-callout.is-on { z-index: 1; opacity: 1; transform: translate(var(--decalage, -35%), calc(-100% - 14px)); }
/* Conversation : messages de l'élu à gauche, réponses du cabinet à droite. */
.tr-msg { display: flex; align-items: flex-end; gap: 6px; transition: opacity .35s, transform .35s var(--tr-ease); }
.tr-msg + .tr-msg { margin-top: 8px; }
.tr-msg.is-me { justify-content: flex-end; }
.tr-msg.is-wait { opacity: 0; transform: translateY(6px); }
.tr-bubble { max-width: 86%; padding: 7px 10px; border-radius: 10px 10px 10px 3px; background: var(--tr-canvas); color: var(--tr-ink-2); line-height: 1.45; }
.tr-msg.is-me .tr-bubble { border-radius: 10px 10px 3px 10px; background: var(--tr-ink); color: #fff; }
/* Parcours en étapes : chaque point est relié au précédent, l'étape en cours est cerclée, la dernière se coche une fois faite.
   Un libellé long passe sur deux lignes ; elles restent réservées pour que la carte garde sa hauteur d'un courrier à l'autre. */
.tr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tr-steps li { position: relative; min-height: calc(22px + 2.6em); padding: 22px 2px 0; font-size: 11px; line-height: 1.3; color: var(--tr-muted); text-align: center; text-wrap: balance; transition: color .3s; }
.tr-steps li::before { content: ''; position: absolute; z-index: 1; top: 0; left: 50%; box-sizing: border-box; width: 14px; height: 14px; margin-left: -7px;
    border: 2px solid #C9D0D5; border-radius: 50%; background: #fff; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.tr-steps li + li::after { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--tr-line); transition: background-color .3s; }
.tr-steps .is-done, .tr-steps .is-current { font-weight: 500; color: var(--tr-ink); }
.tr-steps .is-done::before { border-color: var(--tr-ink); background-color: var(--tr-ink); }
.tr-steps .is-current::before { border-color: var(--tr-ink); box-shadow: 0 0 0 3px rgba(28, 36, 41, .1); }
.tr-steps .is-done::after, .tr-steps .is-current::after { background: var(--tr-ink); }
.tr-steps li:last-child.is-done::before { background: var(--tr-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 10px no-repeat; }
/* Courriers : un seul courrier ouvert sur sa frise ; l'un se ferme pendant que l'autre s'ouvre, la carte garde sa hauteur. */
.tr-mail + .tr-mail { border-top: 1px solid var(--tr-line-2); }
.tr-mini .tr-mail .tr-row { padding: 7px 0; border-bottom: 0; }
.tr-mini .tr-mail:first-child .tr-row { padding-top: 0; }
.tr-mail .tr-mini-strong { transition: color .3s; }
.tr-mail.is-done .tr-mini-strong { color: var(--tr-faint); text-decoration: line-through; }
.tr-mail-steps { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--tr-ease); }
.tr-mail-steps > div { min-height: 0; overflow: hidden; }
.tr-mail-steps .tr-steps { padding: 4px 0 10px; }
.tr-mail.is-open .tr-mail-steps { grid-template-rows: 1fr; }
.tr-check { transition: background-color .3s, border-color .3s; }
.tr-check svg { opacity: 0; transition: opacity .2s; }
.tr-mail.is-done .tr-check { background: var(--tr-ink); border-color: var(--tr-ink); color: #fff; }
.tr-check.is-done svg, .tr-mail.is-done .tr-check svg { opacity: 1; }
/* Journée d'agenda : une ligne par heure, les événements posés par-dessus (top et height en ligne). */
.tr-day { position: relative; }
.tr-hour { display: flex; align-items: flex-start; gap: 6px; height: 28px; font-size: 10.5px; line-height: 1; color: var(--tr-faint); font-variant-numeric: tabular-nums; }
.tr-hour:last-child { height: 12px; }
.tr-hour span { width: 30px; }
.tr-hour::after { content: ''; flex: 1; margin-top: 5px; border-top: 1px solid var(--tr-line-2); }
.tr-event { position: absolute; left: 36px; right: 0; display: flex; align-items: center; padding: 0 8px; border-left: 3px solid; border-radius: 3px 6px 6px 3px;
    font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.tr-event.is-blue { border-color: #6F8FD8; background: #E9EFFB; color: #2B4C9B; }
.tr-event.is-green { border-color: #4FB386; background: #E5F4EC; color: #1E7650; }
.tr-event.is-tall { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
/* Réponses à une invitation, sous le titre de l'événement. */
.tr-event-rsvp { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 400; }
.tr-event-rsvp b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-event-rsvp .tr-avatar { width: 16px; height: 16px; font-size: 6.5px; box-shadow: 0 0 0 1.5px #E5F4EC; transition: opacity .3s, transform .3s var(--tr-ease); }
.tr-event-rsvp .tr-avatar.is-wait { opacity: 0; transform: scale(.5); }
.tr-event-rsvp [data-absent] { opacity: .75; transition: opacity .35s, transform .35s var(--tr-ease); }
.tr-event-rsvp [data-absent].is-wait { opacity: 0; transform: translateX(-4px); }
/* Choix d'un questionnaire. */
.tr-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--tr-line); border-radius: 8px; color: var(--tr-ink-2);
    transition: border-color .25s, background-color .25s, color .25s; }
.tr-option + .tr-option { margin-top: 6px; }
.tr-option.is-hover { background: var(--tr-canvas); }
.tr-option.is-on { border-color: var(--tr-ink); font-weight: 500; color: var(--tr-ink); }
.tr-radio { flex-shrink: 0; box-sizing: border-box; width: 14px; height: 14px; border: 1.5px solid #C9D0D5; border-radius: 50%; transition: border-width .25s, border-color .25s; }
.tr-option.is-on .tr-radio { border: 4px solid var(--tr-ink); }
.tr-mini-foot .tr-btn { transition: opacity .3s; }
.tr-mini-foot .tr-btn.is-wait { opacity: .35; }
/* Statut d'une ligne : un indicateur de chargement, puis l'étiquette à la même place. */
.tr-status { display: grid; justify-items: end; align-items: center; margin-left: auto; }
.tr-status > * { grid-area: 1 / 1; transition: opacity .3s, transform .3s var(--tr-ease); }
.tr-spinner { box-sizing: border-box; width: 14px; height: 14px; border: 2px solid var(--tr-line); border-top-color: var(--tr-ink); border-radius: 50%; opacity: 0; }
.tr-status.is-loading .tr-spinner { opacity: 1; animation: tr-spin .8s linear infinite; }
.tr-status.is-loading .tr-tag { opacity: 0; transform: scale(.85); }
/* Éditeur de lettre : blocs posés sur un fond gris ; l'en-tête et le bouton sont glissés dans leurs emplacements pointillés. */
.tr-editor { padding: 8px; border-radius: 8px; background: var(--tr-canvas); }
.tr-editor > * + * { margin-top: 6px; }
.tr-block { padding: 8px; border: 1px solid var(--tr-line); border-radius: 6px; background: #fff; }
.tr-block-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
.tr-block-row svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-faint); }
.tr-bar { display: block; height: 6px; border-radius: 3px; background: var(--tr-line-2); }
.tr-bar.is-strong { height: 8px; background: #D7DEE4; }
.tr-block-img { display: block; height: 30px; margin-bottom: 6px; border-radius: 4px; background: linear-gradient(135deg, #E9EFFB, #F6F7F8); }
.tr-slot { border: 1.5px dashed #AEB9C1; border-radius: 6px; }
.tr-slot > .tr-block { margin: -1.5px; transition: opacity .3s, transform .55s var(--tr-ease), box-shadow .55s; }
.tr-slot > .is-out { opacity: 0; transform: translate(16px, -8px) rotate(-3deg); box-shadow: var(--tr-shadow-lg); }
/* Logo et bouton de la lettre, aux couleurs du client (ici le bleu d'un département). */
.tr-block-logo { width: 14px; height: 14px; flex-shrink: 0; border-radius: 4px; background: #2B4C9B; }
.tr-block-btn { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; background: #2B4C9B; color: #fff; font-size: 10.5px; font-weight: 600; }
/* Sécurité : interrupteur d'un droit, heure du journal, suppression des données, drapeau et état du serveur. */
.tr-toggle { position: relative; flex-shrink: 0; width: 26px; height: 16px; border-radius: 999px; background: #D5DBE0; }
.tr-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .2); }
.tr-toggle.is-on { background: var(--tr-ink); }
.tr-toggle.is-on::after { transform: translateX(10px); }
.tr-time { flex-shrink: 0; width: 32px; font-size: 11px; color: var(--tr-faint); font-variant-numeric: tabular-nums; }
.tr-danger { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: #B0244B; }
.tr-danger svg { width: 13px; height: 13px; }
.tr-flag { width: 13px; height: 9px; margin-right: 5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(16, 24, 40, .08);
    background: linear-gradient(90deg, #0055A4 33.3%, #fff 33.3% 66.6%, #EF4135 66.6%); }
.tr-online { display: inline-flex; align-items: center; gap: 6px; }
.tr-online .tr-dot { background: #1E9E63; animation: tr-online 2s ease-out infinite; }
@keyframes tr-online { from { box-shadow: 0 0 0 0 rgba(30, 158, 99, .45); } to { box-shadow: 0 0 0 6px rgba(30, 158, 99, 0); } }

/* ——— Illustrations du guide (resources/views/logiciels/territoria/ui/guide) ———
 * Une par page du guide, posée dans une scène de 426 × 278 px (.tr-scene) ; chacune est rattachée à .tr-ill-<page>, animée par territoria.js. */
/* Fiches collectivités : la fiche de Montclar, ses sections et leur nombre à gauche, le contenu de la section ouverte à droite, dont la participation aux événements. */
.tr-ill-collectivites { width: 380px; }
.tr-ill-collectivites .tr-mini-head { padding: 9px 14px; }
.tr-ill-collectivites .tr-collectivites-corps { display: grid; grid-template-columns: 138px minmax(0, 1fr); }
/* Sections : un curseur gris glisse sous la section ouverte. */
.tr-ill-collectivites .tr-collectivites-sections { position: relative; margin: 0; padding: 6px; list-style: none; border-right: 1px solid var(--tr-line-2); background: #FBFBFC; }
.tr-ill-collectivites .tr-collectivites-curseur { position: absolute; top: 6px; left: 6px; right: 6px; height: 26px; border-radius: 7px; background: #fff;
    box-shadow: 0 0 0 1px var(--tr-line), 0 1px 2px rgba(16, 24, 40, .06); transition: transform .45s cubic-bezier(.3, .7, .1, 1); }
.tr-ill-collectivites .tr-collectivites-sections li { position: relative; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; font-size: 12px; color: var(--tr-muted); white-space: nowrap; transition: color .3s; }
.tr-ill-collectivites .tr-collectivites-sections li svg { width: 13px; height: 13px; flex-shrink: 0; }
.tr-ill-collectivites .tr-collectivites-sections li b { margin-left: auto; padding-left: 6px; font-size: 11.5px; font-weight: 500; color: var(--tr-faint); font-variant-numeric: tabular-nums; transition: color .3s; }
.tr-ill-collectivites .tr-collectivites-sections li.is-on, .tr-ill-collectivites .tr-collectivites-sections li.is-on b { color: var(--tr-ink); }
.tr-ill-collectivites .tr-collectivites-sections li.is-on { font-weight: 500; }
/* Contenu : les six volets occupent la même place ; les lignes du volet ouvert arrivent l'une après l'autre. */
.tr-ill-collectivites .tr-collectivites-volets { display: grid; padding: 6px 14px; }
.tr-ill-collectivites .tr-collectivites-volet { grid-area: 1 / 1; min-width: 0; }
.tr-ill-collectivites .tr-collectivites-volet .tr-row { height: 39px; padding: 0; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .35s var(--tr-ease); }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row { opacity: 1; transform: none; transition-duration: .35s; transition-delay: .12s; }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row:nth-child(2) { transition-delay: .18s; }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row:nth-child(3) { transition-delay: .24s; }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row:nth-child(4) { transition-delay: .3s; }
.tr-ill-collectivites .tr-collectivites-volet .tr-row > .tr-mini-meta, .tr-ill-collectivites .tr-collectivites-volet .tr-row > .tr-tag { flex-shrink: 0; margin-left: auto; white-space: nowrap; }
.tr-ill-collectivites .tr-collectivites-volet .tr-row > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-muted); }
/* Événements : participation acceptée (coche verte) ou refusée (croix rouge) ; la pastille, serrée contre le titre, se pose juste après sa ligne. */
.tr-ill-collectivites .tr-collectivites-presence { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 14px; height: 14px; margin-right: -2px; border-radius: 50%; color: #fff; transform: scale(.4); transition: transform .35s var(--tr-ease); }
.tr-ill-collectivites .tr-collectivites-presence svg { width: 9px; height: 9px; }
.tr-ill-collectivites .tr-collectivites-presence.is-oui { background: #1E9E63; }
.tr-ill-collectivites .tr-collectivites-presence.is-non { background: var(--tr-red); }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-collectivites-presence { transform: none; transition-delay: .32s; }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row:nth-child(2) .tr-collectivites-presence { transition-delay: .38s; }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row:nth-child(3) .tr-collectivites-presence { transition-delay: .44s; }
.tr-ill-collectivites .tr-collectivites-volet.is-on .tr-row:nth-child(4) .tr-collectivites-presence { transition-delay: .5s; }
.tr-ill-collectivites .tr-person { gap: 8px; min-width: 0; }
/* Fiches élus : Catherine Morel au centre, entourée de ce que sa fiche garde d'elle (mandat, étiquettes, dernier événement, dernier échange). */
.tr-ill-elus { position: relative; width: 378px; height: 226px; }
/* Liens : de l'élue vers chaque information, tracés l'un après l'autre ; ils partent à distance de l'avatar, sans se rejoindre derrière lui. */
.tr-ill-elus .tr-elus-liens { position: absolute; inset: 0; width: 378px; height: 226px; overflow: visible; }
.tr-ill-elus .tr-elus-lien { stroke: #C9D0D5; stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--tr-ease), opacity .35s; }
.tr-ill-elus .tr-elus-lien.is-cache { stroke-dashoffset: 1; }
/* L'élue au centre. */
.tr-ill-elus .tr-elus-elue { position: absolute; top: 75px; left: 50%; display: flex; flex-direction: column; align-items: center; width: 140px; margin-left: -70px; }
.tr-ill-elus .tr-elus-elue .tr-avatar { width: 52px; height: 52px; font-size: 16px; box-shadow: 0 0 0 4px #fff, var(--tr-shadow-lg); }
.tr-ill-elus .tr-elus-elue b { margin-top: 9px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--tr-ink); white-space: nowrap; }
/* Informations : une petite carte par coin, qui arrive depuis le centre. */
.tr-ill-elus .tr-elus-info { position: absolute; width: 168px; padding: 8px 10px 9px; transition: opacity .35s, transform .5s var(--tr-ease); }
.tr-ill-elus .tr-elus-info.is-cache { opacity: 0; }
.tr-ill-elus .tr-elus-info.is-hg { top: 0; left: 0; }
.tr-ill-elus .tr-elus-info.is-hd { top: 0; right: 0; }
.tr-ill-elus .tr-elus-info.is-bg { bottom: 0; left: 0; }
.tr-ill-elus .tr-elus-info.is-bd { bottom: 0; right: 0; }
.tr-ill-elus .tr-elus-info.is-hg.is-cache { transform: translate(14px, 12px) scale(.96); }
.tr-ill-elus .tr-elus-info.is-hd.is-cache { transform: translate(-14px, 12px) scale(.96); }
.tr-ill-elus .tr-elus-info.is-bg.is-cache { transform: translate(14px, -12px) scale(.96); }
.tr-ill-elus .tr-elus-info.is-bd.is-cache { transform: translate(-14px, -12px) scale(.96); }
.tr-ill-elus .tr-elus-type { display: flex; align-items: center; gap: 5px; height: 18px; font-size: 11px; color: var(--tr-muted); white-space: nowrap; }
.tr-ill-elus .tr-elus-type > svg { width: 12px; height: 12px; flex-shrink: 0; }
.tr-ill-elus .tr-elus-type > :last-child:not(svg) { margin-left: auto; }
.tr-ill-elus .tr-elus-valeur { display: flex; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 500; line-height: 18px; color: var(--tr-ink); white-space: nowrap; }
/* Fondu de fin de boucle, et remise à zéro sans transition. */
.tr-ill-elus.is-efface .tr-elus-info, .tr-ill-elus.is-efface .tr-elus-lien { opacity: 0; }
.tr-ill-elus.is-fige .tr-elus-info, .tr-ill-elus.is-fige .tr-elus-lien { transition: none; }
/* Étiquettes : chaque élu reçoit les siennes, puis le filtre « Ruralité » ne garde que les élus concernés et propose deux actions. */
.tr-ill-etiquettes { width: 340px; }
.tr-ill-etiquettes .tr-row { transition: opacity .4s; }
.tr-ill-etiquettes .tr-row.is-hors { opacity: .3; }
.tr-ill-etiquettes .tr-etiquettes-tags { display: flex; gap: 4px; margin-left: auto; }
.tr-ill-etiquettes .tr-etiquettes-tags .tr-tag { transition: opacity .3s, transform .35s var(--tr-ease); }
.tr-ill-etiquettes .tr-etiquettes-tags .tr-tag.is-wait { opacity: 0; transform: scale(.8); }
/* Filtre de l'en-tête : « Étiquettes », puis « Ruralité » à la même place. */
.tr-ill-etiquettes .tr-etiquettes-filtre { display: grid; margin-left: auto; }
.tr-ill-etiquettes .tr-etiquettes-filtre > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 22px; padding: 0 8px;
    border: 1px solid var(--tr-line); border-radius: 6px; background: #fff; font-size: 11.5px; font-weight: 500; color: var(--tr-muted); transition: opacity .3s; }
.tr-ill-etiquettes .tr-etiquettes-filtre svg { width: 12px; height: 12px; flex-shrink: 0; }
.tr-ill-etiquettes .tr-etiquettes-filtre .is-actif { border-color: var(--tr-ink); color: var(--tr-ink); }
.tr-ill-etiquettes .tr-etiquettes-filtre .is-cache { opacity: 0; }
/* Actions sur les élus filtrés : les boutons n'apparaissent qu'une fois le filtre posé. */
.tr-ill-etiquettes .tr-etiquettes-actions { justify-content: flex-end; }
.tr-ill-etiquettes .tr-etiquettes-actions .tr-btn { transition: opacity .35s, transform .4s var(--tr-ease); }
.tr-ill-etiquettes .tr-etiquettes-actions .tr-btn.is-wait { opacity: 0; transform: translateY(4px); }
/* Listes : chaque règle ajoutée (collectivités, mandats, étiquettes) resserre le nombre de personnes ciblées et complète le nom de la liste. */
.tr-ill-listes { width: 340px; }
/* Nom de la liste : estompé tant qu'aucune règle n'est posée, puis réécrit en fondu à chaque règle. */
.tr-ill-listes .tr-listes-nom { transition: color .3s; }
.tr-ill-listes .tr-listes-nom.is-vide { color: var(--tr-muted); }
.tr-ill-listes .tr-listes-nom.is-neuf { animation: tr-listes-nom .45s var(--tr-ease) both; }
.tr-ill-listes .tr-row > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-muted); transition: color .3s; }
.tr-ill-listes .tr-listes-cle { flex: 0 0 76px; color: var(--tr-muted); transition: color .3s; }
.tr-ill-listes .tr-listes-valeur { margin-left: auto; transition: opacity .3s, transform .4s var(--tr-ease); }
/* Règle pas encore posée : critère estompé, sans valeur. */
.tr-ill-listes .tr-listes-regle.is-wait > svg, .tr-ill-listes .tr-listes-regle.is-wait .tr-listes-cle { color: #C3CBD1; }
.tr-ill-listes .tr-listes-regle.is-wait .tr-listes-valeur { opacity: 0; transform: translateX(8px); }
.tr-ill-listes .tr-listes-total { display: flex; align-items: center; gap: 10px; }
.tr-ill-listes .tr-listes-total .tr-mini-meta { font-size: 12px; }
.tr-ill-listes .tr-listes-nombre { margin-left: auto; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--tr-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Actions sur la liste : les boutons apparaissent une fois la dernière règle posée. */
.tr-ill-listes .tr-listes-actions { justify-content: flex-end; }
.tr-ill-listes .tr-listes-actions .tr-btn { transition: opacity .35s, transform .4s var(--tr-ease); }
.tr-ill-listes .tr-listes-actions .tr-btn.is-wait { opacity: 0; transform: translateY(4px); }
@keyframes tr-listes-nom { from { opacity: 0; transform: translateY(3px); } }
/* Entités : un collège et ce qui lui est rattaché, événement, don et changement de contact, accrochés à sa fiche dans l'ordre. */
.tr-ill-entites { width: 330px; }
/* L'entité, en tête du fil. */
.tr-ill-entites .tr-entites-entite { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 7px; font-size: 13px; font-weight: 600; color: var(--tr-ink); white-space: nowrap; }
.tr-ill-entites .tr-entites-entite .tr-tag { margin-left: 4px; }
/* Le fil : un trait gris qui part de l'icône de l'entité, et par-dessus un trait à l'encre qui descend d'un rattachement au suivant. */
.tr-ill-entites .tr-entites-fil { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.tr-ill-entites .tr-entites-fil::before, .tr-ill-entites .tr-entites-trait { content: ''; position: absolute; top: -14px; bottom: 17px; left: 22px; width: 1.5px; margin-left: -.75px; background: #D5DBE0; }
.tr-ill-entites .tr-entites-trait { background: var(--tr-ink-2); transform-origin: top; transition: transform .6s var(--tr-ease), opacity .4s; }
.tr-ill-entites .tr-entites-item { position: relative; display: flex; align-items: center; gap: 13px; padding-left: 11px; }
.tr-ill-entites .tr-entites-pastille { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1px var(--tr-line); color: var(--tr-faint); transition: background-color .3s, color .3s, box-shadow .3s; }
.tr-ill-entites .tr-entites-pastille svg { width: 12px; height: 12px; }
/* Pastille aux couleurs du type (événement, don, contact) une fois le rattachement atteint. */
.tr-ill-entites .tr-entites-item:not(.is-wait) .is-blue { background: #E9EFFB; box-shadow: 0 0 0 1px #D3DEF5; color: #2B4C9B; }
.tr-ill-entites .tr-entites-item:not(.is-wait) .is-amber { background: #FCF0DC; box-shadow: 0 0 0 1px #F3DDB6; color: #95590A; }
.tr-ill-entites .tr-entites-item:not(.is-wait) .is-violet { background: #F0EBFA; box-shadow: 0 0 0 1px #DFD5F2; color: #5A3B9F; }
/* Un rattachement : titre et date, dans une petite carte qui glisse le long du fil. */
.tr-ill-entites .tr-entites-item .tr-card { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px 11px; border-radius: 9px; white-space: nowrap;
    transition: opacity .4s, transform .5s var(--tr-ease); }
.tr-ill-entites .tr-entites-item.is-wait .tr-card { opacity: 0; transform: translateX(-10px); }
.tr-ill-entites .tr-entites-item .tr-mini-meta { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Dons : sur la fiche d'une commune, « Ajouter un don » ouvre le volet de saisie ; une fois validé, le volet se ferme et le don rejoint les dons reçus. */
.tr-ill-dons { position: relative; width: 340px; }
/* La fiche ; elle s'estompe derrière le volet ouvert. */
.tr-ill-dons .tr-dons-fiche { transition: opacity .35s; }
.tr-ill-dons.is-ouvert .tr-dons-fiche { opacity: .45; }
.tr-ill-dons .tr-dons-section { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11.5px; font-weight: 500; color: var(--tr-muted); }
.tr-ill-dons .tr-dons-section > svg { width: 13px; height: 13px; }
.tr-ill-dons .tr-dons-section b { font-weight: 600; color: var(--tr-ink); font-variant-numeric: tabular-nums; }
.tr-ill-dons .tr-dons-section .tr-btn { margin-left: auto; transition: background-color .15s; }
.tr-ill-dons .tr-dons-section .tr-btn.is-press { background: var(--tr-line-2); }
/* Chaque don : son type en étiquette, puis la quantité ; le nouveau arrive en fondu. */
.tr-ill-dons .tr-dons-fiche .tr-row { transition: opacity .4s; }
.tr-ill-dons .tr-dons-fiche .tr-row > * { transition: transform .5s var(--tr-ease); }
.tr-ill-dons .tr-dons-fiche .tr-row.is-wait { opacity: 0; }
.tr-ill-dons .tr-dons-fiche .tr-row.is-wait > * { transform: translateY(4px); }
/* Volet « Ajout d'un don », par-dessus la fiche : fermé dans l'état final, il s'ouvre le temps de la saisie. */
.tr-ill-dons .tr-dons-volet { position: absolute; top: -18px; right: 14px; width: 224px; opacity: 0; transform: translateY(8px) scale(.97);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 22px 44px -14px rgba(16, 24, 40, .28); transition: opacity .25s, transform .35s var(--tr-ease); }
.tr-ill-dons.is-ouvert .tr-dons-volet { opacity: 1; transform: none; }
.tr-ill-dons .tr-dons-volet .tr-mini-body { display: flex; flex-direction: column; gap: 7px; }
.tr-ill-dons .tr-dons-champ { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid var(--tr-line); border-radius: 6px;
    font-weight: 500; color: var(--tr-ink); white-space: nowrap; transition: border-color .25s, box-shadow .25s; }
.tr-ill-dons .tr-dons-champ svg { width: 13px; height: 13px; margin-left: auto; color: var(--tr-faint); }
.tr-ill-dons .tr-dons-champ.is-focus { border-color: var(--tr-ink); box-shadow: 0 0 0 3px rgba(28, 36, 41, .08); }
/* Champ vide : le texte d'exemple du vrai formulaire (data-vide). */
.tr-ill-dons .tr-dons-champ [data-valeur]:empty::before { content: attr(data-vide); font-weight: 400; color: var(--tr-faint); }
.tr-ill-dons .tr-dons-quantite { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; }
.tr-ill-dons .tr-dons-quantite .tr-dons-champ:first-child { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.tr-ill-dons .tr-dons-volet .tr-btn { align-self: flex-end; margin-top: 2px; transition: background-color .15s; }
.tr-ill-dons .tr-dons-volet .tr-btn.is-press { background: #000; }
/* Fichiers : un document glissé sur la fiche d'une élue, qui s'y range parmi ses fichiers. */
.tr-ill-fichiers { width: 300px; }
/* Le document tenu dépasse de la carte : .tr-ui coupe d'ordinaire ce qui déborde. */
.tr-ill-fichiers.tr-ui { overflow: visible; }
.tr-ill-fichiers .tr-fichiers-titre { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 500; color: var(--tr-ink); }
.tr-ill-fichiers .tr-fichiers-titre svg { width: 13px; height: 13px; color: var(--tr-muted); }
.tr-ill-fichiers .tr-fichiers-titre .tr-tag { min-width: 18px; justify-content: center; font-variant-numeric: tabular-nums; }
.tr-ill-fichiers .tr-fichiers-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tr-ill-fichiers .tr-fichiers-tuile { position: relative; display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px; border: 1px solid var(--tr-line);
    border-radius: 8px; background: #fff; font-weight: 500; color: var(--tr-ink); white-space: nowrap; }
.tr-ill-fichiers .tr-fichiers-tuile > svg { display: block; flex-shrink: 0; }
/* Emplacement libre en pointillés ; le nouveau fichier vient le recouvrir. */
.tr-ill-fichiers .tr-fichiers-place { border: 1.5px dashed #C9D0D5; border-radius: 8px; transition: border-color .25s, background-color .25s; }
.tr-ill-fichiers .tr-fichiers-place > .tr-fichiers-tuile { margin: -1.5px; transition: transform .3s var(--tr-ease), box-shadow .3s, opacity .3s; }
/* Pointeur blanc cerné d'encre (le thème remplit tous les SVG de la couleur du texte). */
.tr-ill-fichiers .tr-fichiers-curseur { position: absolute; right: -9px; bottom: -13px; width: 18px; height: 18px; color: var(--tr-ink); fill: #fff; opacity: 0; transition: opacity .25s; }
/* Tenu : au-dessus de la fiche, incliné, avec son ombre et le pointeur. */
.tr-ill-fichiers.is-depart .tr-fichiers-place > .tr-fichiers-tuile { transform: translate(44px, -142px) rotate(5deg); }
.tr-ill-fichiers.is-depart .tr-fichiers-place > .tr-fichiers-tuile,
.tr-ill-fichiers.is-survol .tr-fichiers-place > .tr-fichiers-tuile { box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 32px -14px rgba(16, 24, 40, .35); transition: transform 1s var(--tr-ease), box-shadow .3s, opacity .3s; }
.tr-ill-fichiers.is-survol .tr-fichiers-place > .tr-fichiers-tuile { transform: translate(4px, -6px) rotate(2deg); }
.tr-ill-fichiers.is-depart .tr-fichiers-curseur, .tr-ill-fichiers.is-survol .tr-fichiers-curseur { opacity: 1; }
.tr-ill-fichiers.is-survol .tr-fichiers-place { border-color: var(--tr-ink); background: var(--tr-canvas); }
.tr-ill-fichiers.is-cache .tr-fichiers-place > .tr-fichiers-tuile { opacity: 0; }
.tr-ill-fichiers.is-reset .tr-fichiers-place > .tr-fichiers-tuile { transition: none; }
/* Campagnes e-mail : l'éditeur de la newsletter et sa palette de blocs ; une image est glissée dans la lettre, puis la campagne part aux élus. */
.tr-ill-campagnes { position: relative; width: 372px; font-size: 12px; line-height: 1.4; }
.tr-ill-campagnes svg { flex-shrink: 0; }
/* Barre du haut : nom de la campagne, état, envoi. */
.tr-ill-campagnes .tr-campagnes-barre { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 8px 0 12px; border-bottom: 1px solid var(--tr-line-2);
    font-size: 12.5px; font-weight: 600; color: var(--tr-ink); white-space: nowrap; }
.tr-ill-campagnes .tr-campagnes-barre > svg { width: 14px; height: 14px; color: var(--tr-muted); }
.tr-ill-campagnes .tr-tag { height: 18px; padding: 0 6px; border-radius: 5px; font-size: 11px; }
.tr-ill-campagnes .tr-campagnes-action { display: grid; justify-items: end; align-items: center; margin-left: auto; }
.tr-ill-campagnes .tr-campagnes-action > * { grid-area: 1 / 1; }
.tr-ill-campagnes .tr-campagnes-envoyer { transition: opacity .25s, transform .2s var(--tr-ease), background-color .2s; }
.tr-ill-campagnes .tr-campagnes-envoye { gap: 4px; height: 22px; padding: 0 8px; font-size: 11.5px; transition: opacity .3s .1s, transform .35s .1s var(--tr-ease); }
.tr-ill-campagnes .tr-campagnes-envoye svg { width: 11px; height: 11px; }
.tr-ill-campagnes .tr-campagnes-brouillon { transition: opacity .25s; }
/* État final : envoyée ; tant que la classe is-brouillon est là, le brouillon et le bouton « Envoyer ». */
.tr-ill-campagnes .tr-campagnes-envoyer, .tr-ill-campagnes .tr-campagnes-brouillon { opacity: 0; }
.tr-ill-campagnes .tr-campagnes-envoyer { transform: scale(.9); }
.tr-ill-campagnes.is-brouillon .tr-campagnes-envoyer, .tr-ill-campagnes.is-brouillon .tr-campagnes-brouillon { opacity: 1; transform: none; }
.tr-ill-campagnes.is-brouillon .tr-campagnes-envoye { opacity: 0; transform: scale(.9); transition-delay: 0s; }
.tr-ill-campagnes.is-appui .tr-campagnes-envoyer { background: var(--tr-ink-2); transform: scale(.95); }
.tr-ill-campagnes .tr-campagnes-corps { display: grid; grid-template-columns: 124px minmax(0, 1fr); height: 182px; }
/* Palette : six blocs, deux par ligne. */
.tr-ill-campagnes .tr-campagnes-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; padding: 8px;
    border-right: 1px solid var(--tr-line-2); background: #FBFBFC; }
.tr-ill-campagnes .tr-campagnes-outil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--tr-line);
    border-radius: 7px; background: #fff; font-size: 10.5px; font-weight: 500; white-space: nowrap; color: var(--tr-ink-2); transition: border-color .2s, background-color .2s, transform .2s var(--tr-ease); }
.tr-ill-campagnes .tr-campagnes-outil svg { width: 16px; height: 16px; color: var(--tr-muted); }
.tr-ill-campagnes.is-prise [data-outil] { border-color: var(--tr-ink); background: var(--tr-canvas); transform: scale(.95); }
/* Toile : la lettre, coupée en bas comme dans l'éditeur. */
.tr-ill-campagnes .tr-campagnes-toile { position: relative; overflow: hidden; padding-top: 12px; background: var(--tr-canvas); }
.tr-ill-campagnes .tr-campagnes-page { width: 196px; height: 100%; margin: 0 auto; border-radius: 6px 6px 0 0; background: #fff;
    box-shadow: 0 0 0 1px var(--tr-line), 0 6px 16px -8px rgba(16, 24, 40, .14); }
.tr-ill-campagnes .tr-campagnes-entete { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px 6px 0 0; background: #2B4C9B; }
.tr-ill-campagnes .tr-campagnes-logo { flex-shrink: 0; width: 12px; height: 12px; border-radius: 3px; background: #fff; }
.tr-ill-campagnes .tr-campagnes-entete i { width: 34%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .6); }
.tr-ill-campagnes .tr-campagnes-contenu { padding: 10px 12px 0; }
.tr-ill-campagnes .tr-campagnes-titre { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 600; color: var(--tr-ink); white-space: nowrap; }
.tr-ill-campagnes .tr-campagnes-contenu i { display: block; height: 4px; margin-bottom: 5px; border-radius: 2px; background: #E6EAED; }
.tr-ill-campagnes .tr-campagnes-bouton { display: inline-flex; align-items: center; height: 20px; margin: 3px 0 9px; padding: 0 10px; border-radius: 5px; background: #2B4C9B;
    font-size: 10px; font-weight: 600; color: #fff; }
/* Bloc image déposé : il s'ouvre et pousse la suite de la lettre ; un trait marque l'endroit pendant le survol. */
.tr-ill-campagnes .tr-campagnes-insere { position: relative; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--tr-ease); }
.tr-ill-campagnes .tr-campagnes-insere > div { min-height: 0; overflow: hidden; }
.tr-ill-campagnes .tr-campagnes-image { display: block; height: 46px; margin: 3px 0 6px; overflow: hidden; border-radius: 4px; transition: opacity .35s .15s; }
.tr-ill-campagnes .tr-campagnes-image svg { display: block; width: 100%; height: 100%; }
.tr-ill-campagnes .tr-campagnes-insere::before { content: ''; position: absolute; top: 0; left: -6px; right: -6px; height: 2px; border-radius: 1px; background: #2B4C9B;
    opacity: 0; transition: opacity .2s; }
.tr-ill-campagnes.is-vide .tr-campagnes-insere { grid-template-rows: 0fr; }
.tr-ill-campagnes.is-vide .tr-campagnes-image { opacity: 0; transition-delay: 0s; }
.tr-ill-campagnes.is-survol .tr-campagnes-insere::before { opacity: 1; }
/* Menu d'envoi : élus ou mairies. */
.tr-ill-campagnes .tr-campagnes-menu { position: absolute; top: 40px; right: 8px; z-index: 2; width: 166px; padding: 4px; border: 1px solid var(--tr-line); border-radius: 10px;
    background: #fff; box-shadow: var(--tr-shadow-lg); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
    transition: opacity .2s, transform .25s var(--tr-ease); }
.tr-ill-campagnes.is-menu .tr-campagnes-menu { opacity: 1; transform: none; }
.tr-ill-campagnes .tr-campagnes-menu-titre { padding: 3px 8px 4px; font-size: 11px; color: var(--tr-muted); }
.tr-ill-campagnes .tr-campagnes-choix { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 7px; font-weight: 500; color: var(--tr-ink);
    transition: background-color .15s; }
.tr-ill-campagnes .tr-campagnes-choix svg { width: 14px; height: 14px; color: var(--tr-muted); }
.tr-ill-campagnes .tr-campagnes-choix .tr-mini-meta { margin-left: auto; font-variant-numeric: tabular-nums; }
.tr-ill-campagnes .tr-campagnes-choix.is-survol { background: var(--tr-canvas); }
/* Pointeur blanc cerné d'encre (le thème remplit tous les SVG de la couleur du texte), et bloc tenu pendant le glisser. */
.tr-ill-campagnes .tr-campagnes-pointeur { position: absolute; top: 0; left: 0; z-index: 4; width: 18px; height: 18px; fill: #fff; color: var(--tr-ink); opacity: 0;
    filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .18)); transition: transform .8s var(--tr-ease), opacity .3s; }
.tr-ill-campagnes .tr-campagnes-fantome { position: absolute; top: 0; left: 0; z-index: 3; width: 51px; height: 50px; border-color: var(--tr-ink); opacity: 0;
    box-shadow: var(--tr-shadow-lg); transition: transform .8s var(--tr-ease), opacity .25s; }
/* Événements : la semaine sur une ligne ; le jour choisi ouvre son inauguration, sa commune s'allume sur la carte et les invités sont marqués présents ou absents. */
.tr-ill-evenements { width: 368px; }
.tr-ill-evenements .tr-evenements-nav { display: inline-flex; gap: 2px; margin-left: auto; color: var(--tr-faint); }
.tr-ill-evenements .tr-evenements-nav svg { width: 13px; height: 13px; }
/* Semaine : sept colonnes, un point de la couleur du type sous chaque jour qui a un événement. */
.tr-ill-evenements .tr-evenements-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding-top: 6px; padding-bottom: 6px; }
.tr-ill-evenements .tr-evenements-jour { display: flex; flex-direction: column; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.tr-ill-evenements .tr-evenements-jour small { font-size: 10px; font-weight: 500; line-height: 14px; color: var(--tr-faint); }
.tr-ill-evenements .tr-evenements-jour b { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11.5px; font-weight: 500; color: var(--tr-ink-2); transition: color .3s; }
.tr-ill-evenements .tr-evenements-jour i { width: 5px; height: 5px; border-radius: 50%; }
/* Jour choisi : un disque à l'encre apparaît derrière la date. */
.tr-ill-evenements .tr-evenements-jour b::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 50%; background: var(--tr-ink); opacity: 0; transform: scale(.5); transition: opacity .25s, transform .35s var(--tr-ease); }
.tr-ill-evenements .tr-evenements-jour.is-on b { font-weight: 600; color: #fff; }
.tr-ill-evenements .tr-evenements-jour.is-on b::before { opacity: 1; transform: none; }
/* L'événement du jour : son type, son nom et son heure, puis les invités à gauche et la carte à droite. */
.tr-ill-evenements .tr-evenements-titre { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.tr-ill-evenements .tr-evenements-titre .tr-mini-meta { margin-left: auto; font-variant-numeric: tabular-nums; }
.tr-ill-evenements .tr-evenements-bas { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 14px; }
.tr-ill-evenements .tr-evenements-invites { display: flex; flex-direction: column; justify-content: space-between; }
.tr-ill-evenements .tr-evenements-invite { display: flex; align-items: center; gap: 8px; height: 20px; }
.tr-ill-evenements .tr-evenements-invite .tr-tag { margin-left: auto; transition: opacity .3s, transform .35s var(--tr-ease); }
.tr-ill-evenements .tr-evenements-invite .tr-tag.is-wait { opacity: 0; transform: scale(.8); }
.tr-ill-evenements .tr-evenements-titre, .tr-ill-evenements .tr-evenements-invites { transition: opacity .35s, transform .4s var(--tr-ease); }
.tr-ill-evenements .is-wait.tr-evenements-titre, .tr-ill-evenements .is-wait.tr-evenements-invites { opacity: 0; transform: translateY(4px); }
/* Carte : les communes en gris ; celle de l'événement prend la couleur de son type, avec un repère. */
.tr-ill-evenements .tr-evenements-carte { position: relative; height: 72px; overflow: hidden; border: 1px solid var(--tr-line-2); border-radius: 8px; }
.tr-ill-evenements .tr-evenements-carte svg { display: block; width: 104px; height: 72px; margin: -1px; }
.tr-ill-evenements .tr-evenements-commune { fill: var(--tr-ink); fill-opacity: .06; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; transition: fill .35s, fill-opacity .35s; }
.tr-ill-evenements .tr-evenements-commune.is-on { fill: #4FB386; fill-opacity: .55; }
.tr-ill-evenements .tr-evenements-repere { position: absolute; left: 56px; top: 15px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--tr-ink); box-shadow: 0 0 0 2px #fff;
    opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.tr-ill-evenements .tr-evenements-repere.is-on { opacity: 1; transform: none; transition: opacity .3s .15s, transform .4s .15s var(--tr-ease); }
/* Questionnaires : gros plan sur un bloc de question, la barre des onze types et une vraie question de chaque type ; puis on recule sur le questionnaire complet. */
.tr-ill-questionnaires { position: relative; width: 376px; height: 228px; font-size: 13px; line-height: 1.4; color: var(--tr-ink); text-align: left; }
/* La vue : le gros plan et le questionnaire, réduits ensemble pour reculer ; la racine garde sa taille. */
.tr-ill-questionnaires .tr-qb-vue { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
/* De loin, le questionnaire (356 × 328, placé en 10, 62) est centré dans la racine à 66 %. */
.tr-ill-questionnaires.is-loin .tr-qb-vue { transform: translate(63.9px, -35.2px) scale(.66); }

/* ——— Gros plan : la barre des types, puis le bloc ; son texte est posé exactement sur la première question du questionnaire ——— */
.tr-ill-questionnaires .tr-qb-gros { position: absolute; top: 30px; left: 10px; z-index: 1; width: 356px; transition: opacity .45s .1s; }
.tr-ill-questionnaires.is-loin .tr-qb-gros { opacity: 0; }
.tr-ill-questionnaires .tr-qb-types { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; padding: 8px; border-bottom: 1px solid var(--tr-line-2); background: #FBFBFC; }
.tr-ill-questionnaires .tr-qb-types > span { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 7px; color: var(--tr-muted); transition: background-color .45s, color .45s; }
.tr-ill-questionnaires .tr-qb-types svg { width: 15px; height: 15px; }
.tr-ill-questionnaires .tr-qb-types > .is-on { background: var(--tr-ink); color: #fff; }
.tr-ill-questionnaires .tr-qb-corps { padding: 14px 16px 16px; }
.tr-ill-questionnaires .tr-qb-entete { display: flex; align-items: center; height: 20px; margin-bottom: 6px; }
.tr-ill-questionnaires .tr-qb-entete .tr-tag { justify-content: center; min-width: 46px; height: 20px; margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tr-ill-questionnaires .tr-qb-noms > span { font-size: 12px; font-weight: 500; color: var(--tr-muted); white-space: nowrap; }
/* Type, question et aperçu : superposés, un seul visible à la fois ; fondus lents, hauteurs fixes. */
.tr-ill-questionnaires .tr-qb-noms, .tr-ill-questionnaires .tr-qb-questions, .tr-ill-questionnaires .tr-qb-apercus { display: grid; }
.tr-ill-questionnaires .tr-qb-questions { height: 20px; margin-bottom: 8px; }
.tr-ill-questionnaires .tr-qb-apercus { height: 36px; }
.tr-ill-questionnaires .tr-qb-noms > *, .tr-ill-questionnaires .tr-qb-questions > *, .tr-ill-questionnaires .tr-qb-apercus > * { grid-area: 1 / 1; align-self: start; opacity: 0; transform: translateY(6px);
    transition: opacity .35s, transform .45s var(--tr-ease); }
.tr-ill-questionnaires .tr-qb-noms > .is-on, .tr-ill-questionnaires .tr-qb-questions > .is-on, .tr-ill-questionnaires .tr-qb-apercus > .is-on { opacity: 1; transform: none;
    transition: opacity .5s .3s, transform .6s .3s var(--tr-ease); }
/* Une question : même rendu dans le gros plan et dans le questionnaire. */
.tr-ill-questionnaires .tr-qb-questions > span, .tr-ill-questionnaires .tr-qb-question { display: block; font-size: 14.5px; font-weight: 600; line-height: 20px; letter-spacing: -.01em; white-space: nowrap; }
.tr-ill-questionnaires .tr-qb-questions > .tr-qb-grand { font-size: 17px; letter-spacing: -.015em; }
/* Les aperçus : un champ, des cases, des boutons… sur une ligne de 36 px. */
.tr-ill-questionnaires .tr-qb-texte { display: flex; align-items: center; height: 36px; font-size: 13.5px; color: var(--tr-muted); white-space: nowrap; }
.tr-ill-questionnaires .tr-qb-champ { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--tr-line); border-radius: 8px; background: #fff; font-size: 13.5px; color: var(--tr-ink); white-space: nowrap; }
.tr-ill-questionnaires .tr-qb-champ svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--tr-muted); }
.tr-ill-questionnaires .tr-qb-champ .tr-qb-droite { display: flex; margin-left: auto; }
.tr-ill-questionnaires .tr-qb-champ .tr-caret { margin-left: -6px; }
.tr-ill-questionnaires .tr-qb-champ .tr-tag { height: 22px; }
.tr-ill-questionnaires .tr-qb-outils { display: flex; align-items: center; gap: 9px; height: 18px; padding-right: 10px; border-right: 1px solid var(--tr-line); font-size: 12.5px; color: var(--tr-muted); }
.tr-ill-questionnaires .tr-qb-outils i { font-style: italic; }
.tr-ill-questionnaires .tr-qb-outils u { text-decoration: underline; }
.tr-ill-questionnaires .tr-qb-pas { display: flex; gap: 14px; padding-left: 12px; border-left: 1px solid var(--tr-line); font-size: 15px; color: var(--tr-muted); }
.tr-ill-questionnaires .tr-qb-coche { display: flex; align-items: center; gap: 10px; height: 36px; font-size: 13.5px; color: var(--tr-ink); }
.tr-ill-questionnaires .tr-qb-case { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: var(--tr-ink); color: #fff; }
.tr-ill-questionnaires .tr-qb-case svg { width: 12px; height: 12px; }
.tr-ill-questionnaires .tr-qb-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tr-ill-questionnaires .tr-qb-boutons > span { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px solid var(--tr-line); border-radius: 8px; font-weight: 500; color: var(--tr-ink-2); }
.tr-ill-questionnaires .tr-qb-boutons > .is-choisi { border-color: var(--tr-ink); background: var(--tr-ink); color: #fff; }
.tr-ill-questionnaires .tr-qb-depot { border-style: dashed; border-color: #C9D0D5; }
.tr-ill-questionnaires .tr-qb-radios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tr-ill-questionnaires .tr-qb-radios .tr-option { height: 36px; padding: 0 12px; background: #fff; }
.tr-ill-questionnaires .tr-qb-radios .tr-option + .tr-option { margin-top: 0; }

/* ——— Le questionnaire complet : invisible de près (sauf sa première question, cachée sous le gros plan), il apparaît en reculant ——— */
.tr-ill-questionnaires .tr-qb-page { position: absolute; top: 62px; left: 10px; width: 356px; padding: 18px 17px 16px; }
.tr-ill-questionnaires .tr-qb-fond { position: absolute; inset: 0; border: 1px solid var(--tr-line); border-radius: 14px; background: #fff; box-shadow: var(--tr-shadow-lg); }
.tr-ill-questionnaires .tr-qb-page > :not(.tr-qb-fond) { position: relative; }
.tr-ill-questionnaires .tr-qb-reste { opacity: 0; transition: opacity .5s .3s; }
.tr-ill-questionnaires.is-loin .tr-qb-reste { opacity: 1; transition: opacity .6s .2s; }
.tr-ill-questionnaires .tr-qb-titre { height: 24px; margin-bottom: 12px; font-size: 17px; font-weight: 600; line-height: 24px; letter-spacing: -.015em; white-space: nowrap; }
.tr-ill-questionnaires .tr-qb-ligne { margin-bottom: 12px; }
.tr-ill-questionnaires .tr-qb-ligne .tr-qb-question { margin-bottom: 8px; }
.tr-ill-questionnaires .tr-qb-envoyer { display: flex; justify-content: flex-end; }
.tr-ill-questionnaires .tr-qb-envoyer .tr-btn { height: 30px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
/* Dossiers administratifs : un dossier rattaché à sa commune et à son intercommunalité, suivi jusqu'à la clôture : un événement, un fichier ajouté, un e-mail aux élus. */
.tr-ill-dossiers { width: 340px; }
.tr-ill-dossiers .tr-do-statut { display: grid; justify-items: end; margin-left: auto; }
.tr-ill-dossiers .tr-do-statut > * { grid-area: 1 / 1; opacity: 0; transform: scale(.9); transition: opacity .15s, transform .2s; }
.tr-ill-dossiers .tr-do-statut > .is-on { opacity: 1; transform: none; transition: opacity .3s .12s, transform .35s .12s var(--tr-ease); }
/* Collectivités de rattachement. */
.tr-ill-dossiers .tr-do-lieux { display: flex; gap: 6px; }
.tr-ill-dossiers .tr-do-lieu { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--tr-line); border-radius: 6px;
    font-size: 11.5px; font-weight: 500; color: var(--tr-ink-2); white-space: nowrap; }
.tr-ill-dossiers .tr-do-lieu svg { width: 12px; height: 12px; color: var(--tr-muted); }
/* Frise : rail gris, remplissage à l'encre, un repère par étape (événement, fichier, e-mail) ; son libellé s'affiche au-dessus du repère. */
.tr-ill-dossiers .tr-do-frise { position: relative; height: 20px; margin: 30px 10px 0; }
.tr-ill-dossiers .tr-do-rail { position: absolute; top: 9px; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--tr-line); overflow: hidden; }
.tr-ill-dossiers .tr-do-plein { position: absolute; inset: 0; background: var(--tr-ink); transform-origin: left; transition: transform .7s var(--tr-ease); }
.tr-ill-dossiers .tr-do-plein.is-instant { transition: none; }
.tr-ill-dossiers .tr-do-point { position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: -10px;
    border: 1.5px solid #C9D0D5; border-radius: 50%; background: #fff; color: var(--tr-faint); transition: background-color .3s, border-color .3s, color .3s; }
.tr-ill-dossiers .tr-do-point svg { width: 11px; height: 11px; }
.tr-ill-dossiers .tr-do-point.is-on { border-color: var(--tr-ink); background: var(--tr-ink); color: #fff; }
.tr-ill-dossiers .tr-do-debut { top: 5px; width: 10px; height: 10px; margin-left: -5px; border: 0; background: var(--tr-ink); }
.tr-ill-dossiers .tr-do-fin svg { opacity: 0; transition: opacity .2s; }
.tr-ill-dossiers .tr-do-fin.is-on svg { opacity: 1; }
.tr-ill-dossiers .tr-do-bulle { position: absolute; bottom: calc(100% + 7px); left: 50%; padding: 3px 7px; border: 1px solid var(--tr-line); border-radius: 6px; background: #fff;
    box-shadow: var(--tr-shadow-lg); font-size: 11px; font-weight: 500; color: var(--tr-ink); white-space: nowrap;
    opacity: 0; transform: translate(-50%, 4px); transition: opacity .3s, transform .35s var(--tr-ease); }
.tr-ill-dossiers .tr-do-point.is-said .tr-do-bulle { opacity: 1; transform: translate(-50%, 0); }
.tr-ill-dossiers .tr-do-dates { display: flex; justify-content: space-between; margin-top: 7px; font-size: 11px; color: var(--tr-faint); font-variant-numeric: tabular-nums; }
/* La date de clôture n'apparaît qu'à la clôture. */
.tr-ill-dossiers .tr-do-dates > span:last-child { transition: opacity .3s; }
.tr-ill-dossiers .tr-do-dates > .is-wait { opacity: 0; }
/* Courriers : les courriers non lus partent, chacun avec sa catégorie, vers la direction qui les traite ; le dernier reçoit son expéditeur, un élu. */
.tr-ill-courriers { position: relative; width: 376px; height: 212px; font-size: 12.5px; line-height: 1.4; color: var(--tr-ink); }
.tr-ill-courriers .tr-cc-traits { position: absolute; inset: 0; overflow: visible; }
.tr-ill-courriers .tr-cc-traits path { fill: none; stroke: #CDD4DA; stroke-width: 1.5; }
.tr-ill-courriers .tr-cc-noeud { position: absolute; display: flex; align-items: center; box-sizing: border-box; border: 1px solid var(--tr-line); background: #fff; white-space: nowrap; }
/* Courriers reçus, avec le nombre de non lus. */
.tr-ill-courriers .tr-cc-recus { top: 0; left: 92px; width: 192px; height: 44px; gap: 8px; padding: 0 9px 0 8px; border-radius: 11px; box-shadow: var(--tr-shadow-lg); font-weight: 600; }
.tr-ill-courriers .tr-cc-icone { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; background: var(--tr-ink); color: #fff; }
.tr-ill-courriers .tr-cc-icone svg { width: 14px; height: 14px; }
.tr-ill-courriers .tr-cc-non-lus { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; height: 22px; padding: 0 7px; border-radius: 6px; background: #FCF0DC; color: #95590A;
    font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; transition: opacity .3s; }
.tr-ill-courriers .tr-cc-non-lus b { font-weight: 600; }
.tr-ill-courriers .tr-cc-non-lus.is-vide { opacity: 0; }
/* Directions : nom et nombre de courriers suivis. */
.tr-ill-courriers .tr-cc-direction { top: 168px; width: 120px; height: 44px; gap: 6px; padding: 0 10px 0 9px; border-radius: 10px; box-shadow: var(--tr-shadow); font-size: 12px; font-weight: 500;
    color: var(--tr-ink-2); transition: border-color .3s; }
.tr-ill-courriers .tr-cc-direction > svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--tr-faint); }
.tr-ill-courriers .tr-cc-direction b { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--tr-ink); font-variant-numeric: tabular-nums; transition: opacity .25s; }
.tr-ill-courriers .tr-cc-direction.is-recu { border-color: var(--tr-ink); }
.tr-ill-courriers .tr-cc-direction b.is-fade { opacity: 0; }
/* Un courrier en route : sa catégorie suit le trait jusqu'à la direction. */
.tr-ill-courriers .tr-cc-pli { position: absolute; top: 0; left: 0; z-index: 1; gap: 5px; box-shadow: 0 0 0 3px #fff, var(--tr-shadow-lg); offset-rotate: 0deg; offset-anchor: 50% 50%; offset-distance: 0%;
    transition: offset-distance .85s cubic-bezier(.45, 0, .35, 1), opacity .2s; }
.tr-ill-courriers .tr-cc-pli svg { width: 12px; height: 12px; }
.tr-ill-courriers .tr-cc-pli.is-wait { opacity: 0; }
.tr-ill-courriers .tr-cc-pli.is-instant { transition: none; }
.tr-ill-courriers .tr-cc-pli.is-arrive { offset-distance: 100%; }
.tr-ill-courriers .tr-cc-vers-0 { offset-path: path('M188 44 C188 106 60 106 60 168'); }
.tr-ill-courriers .tr-cc-vers-1 { offset-path: path('M188 44 L188 168'); }
.tr-ill-courriers .tr-cc-vers-2 { offset-path: path('M188 44 C188 106 316 106 316 168'); }
/* Le dernier courrier, ouvert entre les nœuds : il monte depuis sa direction, puis son champ « Élu / Citoyen » reçoit l'expéditeur. */
.tr-ill-courriers .tr-cc-fiche { position: absolute; top: 66px; left: 40px; z-index: 2; width: 296px; transition: opacity .4s, transform .5s var(--tr-ease); }
.tr-ill-courriers .tr-cc-fiche.is-cache { opacity: 0; transform: translateY(40px) scale(.92); }
.tr-ill-courriers .tr-cc-fiche .tr-tag { margin-left: auto; }
.tr-ill-courriers .tr-cc-champ { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.tr-ill-courriers .tr-cc-libelle { flex-shrink: 0; font-size: 11.5px; color: var(--tr-muted); white-space: nowrap; }
.tr-ill-courriers .tr-cc-saisie { position: relative; display: flex; align-items: center; flex: 1; height: 28px; padding: 0 3px; border: 1px solid var(--tr-line); border-radius: 7px;
    transition: border-color .25s, box-shadow .25s; }
.tr-ill-courriers .tr-cc-saisie .tr-caret { position: absolute; left: 9px; margin: 0; opacity: 0; transition: opacity .2s; }
.tr-ill-courriers .tr-cc-personne { gap: 6px; height: 22px; padding: 0 8px 0 2px; border-radius: 6px; background: var(--tr-canvas); font-size: 12px; transition: opacity .3s, transform .35s var(--tr-ease); }
.tr-ill-courriers .tr-cc-personne .tr-mini-meta { margin-left: 1px; }
/* Champ vide : il a le focus, le curseur clignote, l'expéditeur n'est pas encore choisi. */
.tr-ill-courriers .tr-cc-saisie.is-vide { border-color: var(--tr-ink); box-shadow: 0 0 0 3px rgba(28, 36, 41, .08); }
.tr-ill-courriers .tr-cc-saisie.is-vide .tr-caret { opacity: 1; }
.tr-ill-courriers .tr-cc-saisie.is-vide .tr-cc-personne { opacity: 0; transform: scale(.85); }
/* Citoyens : fiche d'un citoyen rattaché à sa commune, l'historique de ses courriers ; la carte grandit à chaque courrier, le plus récent passe de « Non lu » à « En cours ». */
.tr-ill-citoyens { width: 340px; }
.tr-ill-citoyens .tr-cit-commune { gap: 4px; margin-left: auto; }
.tr-ill-citoyens .tr-cit-commune svg { width: 11px; height: 11px; }
.tr-ill-citoyens .tr-cit-hist { margin: 0; padding: 0; list-style: none; }
/* Un courrier qui arrive ouvre d'abord sa place, puis apparaît ; en repartant, il s'efface, puis la referme. */
.tr-ill-citoyens .tr-cit-hist li { position: relative; display: flex; align-items: center; gap: 9px; height: 30px; transition: height .45s var(--tr-ease), opacity .35s .2s, transform .45s .2s var(--tr-ease); }
.tr-ill-citoyens .tr-cit-hist li.is-wait { height: 0; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s, height .45s .15s var(--tr-ease); }
/* Frise : un point par courrier, relié au précédent ; le plus récent est plein et cerclé. */
.tr-ill-citoyens .tr-cit-hist li + li::before { content: ''; position: absolute; top: -10px; left: 4px; width: 1px; height: 20px; background: #C9D0D5; }
.tr-ill-citoyens .tr-cit-point { position: relative; z-index: 1; flex-shrink: 0; box-sizing: border-box; width: 9px; height: 9px; border: 2px solid var(--tr-ink); border-radius: 50%; background: #fff; transition: background-color .3s, box-shadow .3s; }
.tr-ill-citoyens .is-new .tr-cit-point { background: var(--tr-ink); box-shadow: 0 0 0 3px rgba(28, 36, 41, .1); }
.tr-ill-citoyens .tr-cit-date { flex: 0 0 44px; font-size: 11px; color: var(--tr-faint); text-align: right; font-variant-numeric: tabular-nums; }
/* Statut : les étiquettes sont superposées à la même place, seule l'active est visible. */
.tr-ill-citoyens .tr-cit-statut { display: grid; flex: 0 0 60px; justify-items: end; }
.tr-ill-citoyens .tr-cit-statut > * { grid-area: 1 / 1; transition: opacity .2s .15s, transform .3s .15s var(--tr-ease); }
.tr-ill-citoyens .tr-cit-statut > .is-off { opacity: 0; transform: scale(.85); transition-duration: .15s; transition-delay: 0s; }
/* Actualités : l'actualité publiée (image, titre, résumé) et son lien de partage ; copié, le lien part vers les élus, dont les pastilles s'allument une à une. */
.tr-ill-actualites { position: relative; display: flex; align-items: center; width: 376px; height: 208px; }
/* Carte de l'actualité, à gauche, telle que les élus la voient dans leur espace. */
.tr-ill-actualites .tr-actu-carte { position: relative; width: 260px; }
.tr-ill-actualites .tr-actu-couv { display: block; width: 100%; height: 74px; background: #EEF2F5; border-bottom: 1px solid var(--tr-line-2); }
.tr-ill-actualites .tr-actu-statut { position: absolute; top: 8px; left: 8px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.tr-ill-actualites .tr-actu-titre { display: block; }
.tr-ill-actualites .tr-actu-resume { display: block; margin-top: 2px; font-size: 11.5px; color: var(--tr-muted); }
/* Lien de partage, en pied de carte ; le bouton copie l'URL : son icône (premier tracé) laisse place à la coche verte (second). */
.tr-ill-actualites .tr-actu-lien > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--tr-muted); }
.tr-ill-actualites .tr-actu-url { flex: 1; color: var(--tr-faint); }
.tr-ill-actualites .tr-actu-url b { font-weight: 500; color: var(--tr-ink); }
.tr-ill-actualites .tr-actu-copier { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--tr-line); border-radius: 6px; background: #fff;
    box-shadow: var(--tr-shadow); transition: background-color .15s; }
.tr-ill-actualites .tr-actu-copier svg { grid-area: 1 / 1; width: 13px; height: 13px; transition: opacity .2s; }
.tr-ill-actualites .tr-actu-copier svg:first-child { opacity: 0; }
.tr-ill-actualites .tr-actu-copier svg:last-child { color: #1E7650; }
.tr-ill-actualites.is-lien .tr-actu-copier svg:first-child { opacity: 1; }
.tr-ill-actualites.is-lien .tr-actu-copier svg:last-child { opacity: 0; }
.tr-ill-actualites.is-appui .tr-actu-copier { background: var(--tr-line-2); }
/* Élus destinataires, à droite : grisés tant que le lien ne leur est pas parvenu ; chacun s'allume au bout de son trait (--d : départ du trait). */
.tr-ill-actualites .tr-actu-elu { position: absolute; right: 0; z-index: 2; width: 30px; height: 30px; margin-top: -15px; font-size: 10.5px; background: var(--c);
    box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px rgba(16, 24, 40, .25); transition: background-color .35s calc(var(--d) + .45s); }
/* Traits du lien vers chaque élu, partis du bord de la carte et dessinés l'un après l'autre. */
.tr-ill-actualites .tr-actu-traits { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.tr-ill-actualites .tr-actu-trait { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--tr-ease) var(--d), opacity .2s var(--d); }
.tr-ill-actualites .tr-actu-depart { transition: opacity .2s; }
.tr-ill-actualites.is-attente .tr-actu-trait { stroke-dashoffset: 1; opacity: 0; transition: none; }
.tr-ill-actualites.is-efface .tr-actu-trait, .tr-ill-actualites.is-efface .tr-actu-depart, .tr-ill-actualites.is-attente .tr-actu-depart { opacity: 0; transition: opacity .3s; }
.tr-ill-actualites.is-attente .tr-actu-elu, .tr-ill-actualites.is-efface .tr-actu-elu { background: #D5DBE0; transition-delay: 0s; }
/* Échanges : l'élue écrit depuis son espace (« Ajout d'un échange ») et envoie ; le formulaire se ferme, l'échange arrive en tête de la liste du cabinet, « En attente ». */
.tr-ill-echanges { position: relative; width: 372px; height: 228px; }
.tr-ill-echanges > .tr-card { position: absolute; }
/* Derrière, en haut à droite : la liste des échanges du cabinet. */
.tr-ill-echanges .tr-ech-cabinet { top: 0; right: 0; width: 264px; transition: transform .6s var(--tr-ease); }
.tr-ill-echanges .tr-ech-fenetre { height: 56px; margin: 0 -6px; overflow: hidden; }
.tr-ill-echanges .tr-ech-rouleau { transition: transform .55s var(--tr-ease), opacity .3s; }
.tr-ill-echanges .tr-ech-rouleau.is-off { opacity: 0; }
.tr-ill-echanges .tr-ech-rouleau .tr-row { height: 28px; padding: 0 6px; border-radius: 6px; border-bottom: 0; transition: opacity .35s, background-color .6s; }
.tr-ill-echanges .tr-ech-rouleau .is-wait { opacity: 0; }
.tr-ill-echanges .tr-ech-rouleau .is-new { background: var(--tr-canvas); }
/* Lignes plus anciennes, esquissées : le formulaire de l'élue les recouvre en partie. */
.tr-ill-echanges .tr-ech-esquisse { display: flex; align-items: center; gap: 8px; height: 28px; }
.tr-ill-echanges .tr-ech-esquisse i { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--tr-line-2); }
.tr-ill-echanges .tr-ech-esquisse .tr-bar { width: 96px; }
.tr-ill-echanges .tr-ech-esquisse .tr-bar + .tr-bar { width: 44px; margin-left: auto; }
/* Devant, en bas à gauche : le formulaire de l'espace élu. */
.tr-ill-echanges .tr-ech-elu { left: 0; bottom: 0; width: 212px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 20px 44px -14px rgba(16, 24, 40, .26); transform-origin: 30% 100%; transition: opacity .35s, transform .5s var(--tr-ease); }
/* Une fois l'échange envoyé, le formulaire se ferme en descendant et la liste du cabinet se recentre ; tout revient au tour suivant. */
.tr-ill-echanges.is-envoye .tr-ech-elu { opacity: 0; transform: translateY(14px) scale(.97); }
.tr-ill-echanges.is-envoye .tr-ech-cabinet { transform: translate(-54px, 43px); }
.tr-ill-echanges .tr-ech-elu .tr-mini-head .tr-avatar { margin-left: auto; }
.tr-ill-echanges .tr-ech-saisie { display: flex; align-items: center; height: 28px; padding: 0 9px; border: 1px solid var(--tr-line); border-radius: 7px; font-weight: 500; white-space: nowrap; transition: border-color .25s, box-shadow .25s; }
.tr-ill-echanges .tr-ech-saisie.is-focus { border-color: var(--tr-ink); box-shadow: 0 0 0 3px rgba(28, 36, 41, .08); }
.tr-ill-echanges .tr-ech-saisie .tr-caret { margin-left: 1px; }
.tr-ill-echanges .tr-ech-saisie:not(.is-focus) .tr-caret { visibility: hidden; }
/* Message (esquissé) et bouton d'envoi, comme dans la zone de saisie du vrai formulaire. */
.tr-ill-echanges .tr-ech-message { display: flex; align-items: flex-end; gap: 10px; height: 36px; margin-top: 6px; padding: 5px 5px 5px 9px; border: 1px solid var(--tr-line); border-radius: 7px; }
.tr-ill-echanges .tr-ech-lignes { flex: 1; align-self: flex-start; margin-top: 3px; transition: opacity .35s; }
.tr-ill-echanges .tr-ech-lignes.is-wait { opacity: 0; }
.tr-ill-echanges .tr-ech-lignes .tr-bar + .tr-bar { width: 62%; margin-top: 5px; }
.tr-ill-echanges .tr-ech-message .tr-btn { transition: background-color .15s, transform .15s; }
.tr-ill-echanges .tr-ech-message .tr-btn.is-press { background: var(--tr-ink-2); transform: translateY(1px); }
/* Idées : deux commentaires d'une idée, chacun avec son vote + / − ; le mieux noté passe devant et en tête, comme dans Territoria (tri par note). */
.tr-ill-idees { position: relative; width: 352px; height: 178px; }
/* L'idée commentée, en étiquette au-dessus des commentaires. */
.tr-ill-idees .tr-idee-idee { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border: 1px solid var(--tr-line); border-radius: 999px; background: #fff; box-shadow: var(--tr-shadow); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tr-ill-idees .tr-idee-idee svg { width: 14px; height: 14px; color: var(--tr-muted); }
/* Deux places : devant en haut, derrière en bas et décalée. Le script échange les commentaires. */
.tr-ill-idees .tr-idee-com { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 316px; height: 72px; padding: 0 14px 0 12px; border: 1px solid var(--tr-line); border-radius: 12px; background: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 16px -10px rgba(16, 24, 40, .18); transition: transform .65s var(--tr-ease), box-shadow .65s, opacity .3s; }
.tr-ill-idees .tr-idee-com.is-devant { z-index: 2; box-shadow: var(--tr-shadow-lg); }
/* Vote : +, note, −. Le vote de l'élu connecté est à l'encre. */
.tr-ill-idees .tr-idee-vote { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; box-sizing: border-box; width: 30px; height: 56px; padding: 3px; border: 1px solid var(--tr-line); border-radius: 9px; background: var(--tr-canvas); }
.tr-ill-idees .tr-idee-vote > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 16px; border-radius: 6px; color: var(--tr-muted); transition: background-color .2s, color .2s; }
.tr-ill-idees .tr-idee-vote > span svg { width: 11px; height: 11px; }
.tr-ill-idees .tr-idee-vote > span.is-on { background: var(--tr-ink); color: #fff; }
.tr-ill-idees .tr-idee-vote b { flex: 1; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--tr-ink); font-variant-numeric: tabular-nums; }
.tr-ill-idees .tr-idee-texte { min-width: 0; flex: 1; }
.tr-ill-idees .tr-idee-texte .tr-person { gap: 7px; }
.tr-ill-idees .tr-idee-texte .tr-avatar { width: 20px; height: 20px; font-size: 8px; }
.tr-ill-idees .tr-idee-texte p { margin-top: 4px; padding-left: 27px; color: var(--tr-ink-2); }
.tr-ill-idees.is-off .tr-idee-com { opacity: 0; }
/* ——— Fin des illustrations du guide ——— */

@media (max-width: 991.98px) {
    .tr-section { padding: 64px 0; }
    .tr-split, .tr-split-media { grid-template-columns: 1fr; gap: 32px; }
    .tr-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-span-2 { grid-column: span 1; }
    .tr-span-3 { grid-column: span 2; }
    .tr-guide { grid-template-columns: 1fr; }
    .tr-toc { display: none; }
    .tr-security { grid-template-columns: 1fr; gap: 32px; }
    .tr-head-row { flex-direction: column; align-items: flex-start; }
    .tr-reading { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .tr-pane-text { padding: 8px 16px 16px; }
    .tr-photo-wrap { margin-bottom: 0; }
    .tr-photo-ui { position: relative; right: auto; bottom: auto; width: auto; margin-top: -48px; padding: 0 16px; }
}
@media (max-width: 767.98px) {
    .tr-hero { padding: 116px 0 48px; }
    .tr-pane .tr-split { gap: 16px; }
    .tr-photo-wrap .tr-photo-frame { aspect-ratio: 16 / 9; }
    .tr-photo-ui { width: max(82%, 248px); margin-top: -56px; padding: 0 0 0 12px; }
    .tr-photo-ui .tr-map { width: 128px; }
    .tr-pane .tr-actions .tr-btn { flex: 1 1 100%; height: 44px; }
    .tr-offer .tr-feature-text .tr-h3 { font-size: 20px; letter-spacing: -.02em; white-space: normal; }
    .tr-grid-2, .tr-grid-4, .tr-bento { grid-template-columns: 1fr; }
    .tr-span-2, .tr-span-3 { grid-column: span 1; }
    .tr-list li { white-space: normal; }
    .tr-hide-sm { display: none !important; }
    .tr-trust-row { grid-template-columns: 1fr; }
    .tr-trust-label { justify-content: center; padding: 20px 0 0; }
    .tr-trust-logos li { padding: 18px 8px 22px; border: 0 !important; }
    .tr-trust-logos img { height: 36px; }
    .tr-booking-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; width: fit-content; margin: 28px auto; text-align: left; }
    .tr-booking-steps::before { top: 14px; bottom: 14px; left: 13.5px; right: auto; width: 1px; height: auto; }
    .tr-booking-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 0; }
    .tr-booking-steps b { grid-row: span 2; margin: 0; }
    .tr-booking-bar { flex-wrap: wrap; }
    .tr-booking-chips { margin-left: 0; }
    .tr-booking-cal { padding: 4px; }
    .tr-skel { gap: 16px; padding: 16px; }
    .tr-skel-slots { display: none; }
    .tr-booking-trust ul { gap: 20px; }
    .tr-booking-trust img { height: 28px; }
    .tr-reading { grid-template-columns: 1fr; row-gap: 32px; }
    .tr-security .tr-stage { min-height: 340px; padding: 32px 16px; }
}
@media (min-width: 992px) and (max-height: 899.98px) {
    .tr-toc-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .territoria *, .territoria *::before, .territoria *::after { animation: none !important; transition: none !important; }
}