.tm-search-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .tm-search-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tm-field label {
  display: block;
}

.tm-field input,
.tm-field select,
.tm-field textarea {
  padding: 0.5rem 0.65rem;
}

/* Choix du type d'inscription: cartes selectionnables avec icone, titre et
   description. Scope sous .tm-field--type pour battre .tm-field label{display:block}
   (sinon les cartes ne passent pas en flex). */
.tm-field--type .tm-type-choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.tm-field--type .tm-type-choice__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius);
  cursor: pointer;
  background: var(--tm-surface);
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tm-type-choice__item:hover {
  border-color: var(--tm-primary-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.tm-type-choice__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.tm-type-choice__item:focus-within {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

.tm-type-choice__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tm-bg-soft);
  color: var(--tm-muted);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.tm-type-choice__title {
  display: block;
  font-weight: 700;
  color: var(--tm-text);
  line-height: 1.25;
}

.tm-type-choice__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--tm-muted);
  line-height: 1.3;
}

.tm-type-choice__item:has(input:checked) {
  border-color: var(--tm-primary);
  background: var(--tm-primary-soft);
}

.tm-type-choice__item:has(input:checked) .tm-type-choice__icon {
  background: var(--tm-primary);
  color: var(--tm-on-accent);
}

.tm-type-choice__item:has(input:checked) .tm-type-choice__title {
  color: var(--tm-primary-ink-strong);
}

.tm-type-choice__item::after {
  content: "";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--tm-primary) no-repeat center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.tm-type-choice__item:has(input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

.tm-reg-subtype {
  margin-top: 0.6rem;
}

@media (max-width: 420px) {
  .tm-field--type .tm-type-choice {
    grid-template-columns: 1fr;
  }
}

/* Inscription : les aides sous les champs sont devenues des infobulles, il faut
   redonner de l'air entre un champ et le libelle suivant. */
.tm-register .tm-field { margin-bottom: 1.15rem; }
.tm-register .tm-field > label { margin-bottom: 0.35rem; }

/* Des 640 px : les quatre types sur une seule ligne, cartes compactes. */
@media (min-width: 640px) {
  .tm-field--type .tm-type-choice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
  .tm-field--type .tm-type-choice__item { padding: 0.85rem 0.8rem; gap: 0.5rem; }
  .tm-field--type .tm-type-choice__icon { width: 2.1rem; height: 2.1rem; }
  .tm-field--type .tm-type-choice__title { font-size: 0.92rem; }
  .tm-field--type .tm-type-choice__desc { font-size: 0.74rem; }
}

.tm-field--hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Cartes resultats ---- */

.tm-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}


.tm-card__link {
  display: flex;
  color: inherit;
  text-decoration: none;
}

.tm-card__photo {
  object-fit: cover;
  flex: none;
}

.tm-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tm-card__practices {
  display: flex;
  flex-wrap: wrap;
}

/* ---- Fiche therapeute ---- */

.tm-profile__header {
  display: flex;
  flex-wrap: wrap;
}

.tm-profile__photo {
  object-fit: cover;
}

.tm-profile__practices {
  display: flex;
  flex-wrap: wrap;
}

.tm-profile__columns {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .tm-profile__columns {
    grid-template-columns: 1fr 1fr;
  }
}

.tm-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.tm-owner-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--tm-warm-border-vivid);
  margin-block-end: 1rem;
}

/* ---- Cartes Leaflet ---- */

.tm-map,
.tm-minimap {
  width: 100%;
  border-radius: var(--tm-radius);
  border: 1px solid var(--tm-border);
  /* Contexte d'empilement isole: les calques Leaflet (z-index jusqu'a 1000)
     restent DANS la carte et ne passent plus au-dessus de l'en-tete du site. */
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.tm-minimap {
  height: 300px;
}

.tm-map--error::after {
  content: attr(data-error-label);
  display: block;
  padding: 1rem;
  color: var(--tm-muted);
}

.tm-marker__dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--tm-on-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Badge carré pour les fiches « lieu » (centre / école / commerce). */
.tm-marker__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--tm-on-accent);
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.5);
}
.tm-marker__badge svg { display: block; }

/* Nom du cabinet dans une carte de resultat (annuaire) */
.tm-card__business {
  display: block;
}

/* Rappel de l'adresse web (slug) : colle au champ « Nom affiché » auquel il se
   rapporte, et bien detache du champ suivant (« Nom du cabinet »).
   Double classe pour l'emporter sur la regle generique .tm-hint (margin-block). */
.tm-hint.tm-slug-hint {
  margin-block: -0.5rem 1.6rem;
}

.tm-slug-hint strong {
  word-break: break-all;
}

/* ---- Inscription / formulaires ---- */

.tm-register {
  margin-inline: auto;
}

.tm-terms {
  display: flex;
  align-items: flex-start;
}

.tm-code-input {
  width: 100%;
  text-align: center;
  font-size: 1.75rem;
  letter-spacing: 0.6rem;
  padding: 0.6rem;
  border: 1px solid var(--tm-border);
}

.tm-form fieldset {
  border-radius: var(--tm-radius);
}

/* Deux champs cote a cote (ex. Pays + Canton/departement) */
@media (min-width: 600px) {
  .tm-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
    align-items: start;
  }
}

.tm-form .control-group:last-child {
  margin-block-end: 0;
}

/* Les champs enveloppes (affichage conditionnel [data-contact-dep]) portent
   eux-memes le rythme vertical standard, car leur control-group interieur
   est un:last-child (marge annulee ci-dessus). */
.tm-form [data-contact-dep] {
  margin-block-end: 1rem;
}

.tm-form [data-contact-dep]:last-child {
  margin-block-end: 0;
}

.tm-form .control-label .star {
  text-decoration: none;
}

.tm-form input[type="text"],
.tm-form input[type="email"],
.tm-form input[type="tel"],
.tm-form input[type="url"],
.tm-form input[type="number"],
.tm-form input[type="file"],
.tm-form select,
.tm-form textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--tm-border);
  border-radius: calc(var(--tm-radius) / 2);
  font: inherit;
  color: var(--tm-text);
}

.tm-form input:focus,
.tm-form select:focus,
.tm-form textarea:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px var(--tm-primary-glow);
}

.tm-form input[type="file"] {
  padding: 0.4rem;
  background: var(--tm-bg-soft);
}

/* Textes d'aide: UNE seule regle pour tous (descriptions de champ Joomla
   et phrases .tm-hint) — memes taille, couleur et marges partout. */
.tm-form .form-text,
.tm-form small,
.tm-form .hint,
.tm-hint {
  display: block;
}

/* Selecteur multiple enrichi (choices.js, layout list-fancy-select) */
.tm-form .choices {
  margin-block-end: 0;
}

/* Champ de recherche interne: sans le fond gris par defaut de Choices.js */
.tm-form .choices__input,
.tm-form input.choices__input--cloned {
  background: transparent;
  margin-block-end: 0;
  padding-block: 0.25rem;
}

.tm-form .choices__inner {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
}

.tm-form .choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--tag-color, var(--tm-primary));
  border: 0;
  border-radius: 999px;
  color: var(--tm-on-accent);
  margin: 0.15rem 0.25rem 0.15rem 0;
}

/* Bouton de retrait: croix ronde au lieu du texte « Remove item ». */
.tm-form .choices__list--multiple .choices__item .choices__button,
.tm-form .choices__list--multiple .choices__item .choices__button_joomla {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  position: relative;
  cursor: pointer;
  opacity: 1;
}

.tm-form .choices__list--multiple .choices__item .choices__button::before,
.tm-form .choices__list--multiple .choices__item .choices__button_joomla::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tm-surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/55% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/55% no-repeat;
}

.tm-form .choices__list--multiple .choices__item .choices__button:hover,
.tm-form .choices__list--multiple .choices__item .choices__button_joomla:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.tm-form .choices__list--dropdown .choices__item--selectable.is-highlighted,
.tm-form .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: var(--tm-bg-soft);
  color: var(--tm-text);
}

.tm-form fieldset.checkboxes .form-check::before {
  content: "";
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tm-form fieldset.checkboxes .form-check label {
  font-weight: inherit;
  cursor: pointer;
}

.tm-form fieldset.checkboxes input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.tm-form fieldset.checkboxes label {
  cursor: pointer;
  margin: 0;
}

/* En-tetes de categories colores dans la liste des pratiques */
.tm-form .choices__list--dropdown .tm-cat-heading,
.tm-form .choices__list[aria-expanded] .tm-cat-heading {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem 0.4rem;
  border-bottom: 0;
}

/* Badges « S'adresse a » (fiche publique) */
.tm-audiences {
  display: flex;
  flex-wrap: wrap;
}

.tm-chip svg {
  flex: none;
}

/* Tarifs structures (fiche publique) */
.tm-pricing {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.tm-pricing__row {
  display: flex;
  flex-wrap: wrap;
}

.tm-pricing__dots {
  flex: 1;
  border-bottom: 1px dotted var(--tm-border);
  min-width: 1.5rem;
}

.tm-pricing__price {
  white-space: nowrap;
}

.tm-pricing__link {
  font-size: 0.8125rem;
}

/* ===== Avis clients ===== */

/* Bloc « Recueillir des avis » (espace therapeute) */
.tm-review-invite {
  padding: 1.1rem 1.3rem;
  margin: 1rem 0 1.25rem;
}

.tm-review-invite h2 { margin-top: 0; font-size: 1.15rem; }
.tm-review-invite__result { margin-top: 0.75rem; }

/* Etoiles statiques (affichage des notes) */
.tm-stars-static { display: inline-flex; letter-spacing: 0.05em; }
.tm-star-static { color: var(--tm-border); line-height: 1; }
.tm-star-static.is-half {
  background: linear-gradient(90deg, #f5a623 50%, var(--tm-border) 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Synthese des avis sur la fiche */
.tm-reviews { margin-top: 2rem; }

.tm-reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1.25rem;
}

.tm-reviews__overall {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tm-reviews__overall .tm-stars-static { font-size: 1.3rem; }
.tm-reviews__count { color: var(--tm-muted); font-size: 0.9rem; }

.tm-reviews__criteria {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  flex: 1 1 20rem;
}

.tm-reviews__criteria li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.tm-reviews__crit-label { flex: 1 1 auto; color: var(--tm-muted); }
.tm-reviews__crit-val { font-weight: 600; min-width: 1.8rem; text-align: right; }

.tm-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.tm-review__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.tm-review__author { font-weight: 700; }
.tm-review__date { color: var(--tm-muted); font-size: 0.8rem; margin-left: auto; }
.tm-review__comment { margin: 0; line-height: 1.55; }

.tm-review__reply {
  margin-top: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--tm-primary);
  border-radius: 0 var(--tm-radius) var(--tm-radius) 0;
}

.tm-review__reply-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tm-primary-ink-strong);
  margin-bottom: 0.2rem;
}

.tm-review__reply p { margin: 0; font-size: 0.925rem; }

/* Bouton « signaler » discret sur un avis (fiche publique) */
.tm-review__report {
  background: none;
  border: 0;
  padding: 0.1rem 0.3rem;
  color: var(--tm-border);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: color 0.35s ease;
}

.tm-review__report:hover { color: var(--tm-danger-hover); }

/* Dialogue de signalement d'un avis */
.tm-report-dialog textarea {
  width: 100%;
  margin: 0.5rem 0 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--tm-border);
  border-radius: calc(var(--tm-radius) / 2);
  font: inherit;
  box-sizing: border-box;
}

/* Motifs de signalement affiches au therapeute */
.tm-manage-review__reports {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--tm-danger-bg-strong);
  border-radius: calc(var(--tm-radius) / 2);
  font-size: 0.85rem;
}

.tm-manage-review__reports-label { font-weight: 700; color: var(--tm-danger-deep); }
.tm-manage-review__reports ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* Gestion des avis (espace therapeute) */
.tm-manage-reviews { display: grid; gap: 1rem; margin-top: 1.1rem; }

.tm-manage-review__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.tm-manage-review__date { color: var(--tm-muted); font-size: 0.8rem; }
.tm-manage-review__comment { margin: 0 0 0.6rem; line-height: 1.5; }

.tm-manage-review__reply label { display: grid; gap: 0.3rem; }
.tm-manage-review__reply label span { font-weight: 600; font-size: 0.85rem; }
.tm-manage-review__reply textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--tm-border);
  border-radius: calc(var(--tm-radius) / 2);
  font: inherit;
  box-sizing: border-box;
}

.tm-manage-review__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Formulaire de depot d'avis (page dediee) */
.tm-review-page { max-width: 42rem; margin-inline: auto; }
.tm-review-form { display: grid; gap: 1.1rem; margin-top: 1rem; }

.tm-review-form__ratings {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
}

.tm-rating-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tm-rating-row__label { flex: 1 1 12rem; font-weight: 600; font-size: 0.925rem; }

.tm-stars { display: inline-flex; gap: 0.15rem; }

.tm-star {
  background: none;
  border: 0;
  padding: 0.1rem;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--tm-border);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.tm-star:hover { transform: scale(1.15); }

.tm-review-form__field { display: grid; gap: 0.35rem; }
.tm-review-form__field span { font-weight: 600; font-size: 0.925rem; }
.tm-review-form__field input,
.tm-review-form__field textarea {
  width: 100%;
  font: inherit;
  box-sizing: border-box;
}

.tm-review-form__actions { display: flex; align-items: center; gap: 1rem; }

.tm-review-done {
  text-align: center;
  padding: 2.5rem 1rem;
}

.tm-review-done__icon { font-size: 2.5rem; }

/* Import IA des prestations (onglet Tarifs) */
.tm-pricing-ai {
  margin-bottom: 1.1rem;
}

.tm-pricing-ai__label {
  display: block;
}

.tm-pricing-ai__row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-pricing-ai__row input {
  flex: 1 1 16rem;
  min-width: 0;
}

.tm-pricing-ai__row .tm-btn { flex: 0 0 auto; }
/* Fichier de tarifs : zone de depot compacte (variante du composant photo). */
.tm-pricing-ai__tool { margin-top: 0.9rem; }
.tm-pricing-ai__row .tm-upload { flex: 1 1 16rem; min-width: 0; }
.tm-upload--doc .tm-upload__zone { padding: 0.4rem 0.6rem; border-radius: var(--tm-radius); background: var(--tm-surface); }
.tm-upload--doc .tm-upload__thumb { width: 40px; height: 40px; border-radius: 10px; background: var(--tm-primary-50); border-color: var(--tm-primary-200); }
.tm-upload--doc .tm-upload__cam { width: 20px; height: 20px; color: var(--tm-primary); }
.tm-upload--doc.has-file .tm-upload__title { color: var(--tm-primary-ink-strong); }
/* Dans un formulaire (.tm-field) : la zone est un <label>, elle garde sa mise en ligne. */
.tm-field .tm-upload__zone { display: flex; margin: 0; font-weight: 400; }
.tm-field .tm-upload__title { margin: 0; }

/* Bouton « Demander » par prestation + popover des canaux de contact */
.tm-pricing__ask {
  position: relative;
  flex: 0 0 auto;
}

.tm-pricing__ask-btn {
  padding-block: 0.15rem;
  padding-inline: 0.6rem;
}

.tm-pricing__channels {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem;
  background: var(--tm-surface);
  border: 1px solid var(--tm-primary-border);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow-pop);
}

.tm-pricing__channels[hidden] {
  display: none;
}

.tm-pricing__channels .tm-btn {
  padding: 0.3rem;
}

/* Horaires (fiche publique) */
.tm-schedule {
  border-collapse: collapse;
}

.tm-schedule th,
.tm-schedule td {
  text-align: left;
}

.tm-absences__title {
  font-size: 1rem;
  margin-block-end: 0.35rem;
}

.tm-absences {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.tm-absences li {
  border: 1px solid var(--tm-warm-border-vivid);
  padding: 0.4rem 0.7rem;
}

/* Grille des jours (formulaire) : nom + matin (de–a) + apres-midi (de–a) */
.tm-day-row {
  display: grid;
  /* Largeurs fixes pour que l'en-tete (Matin / Apres-midi) s'aligne
     exactement sur les paires de selecteurs des lignes de jours.
     4e colonne: bouton « copier ce jour sur les autres ». */
  grid-template-columns: 6rem 14rem 14rem auto;
  gap: 0.5rem 2rem;
  align-items: center;
  border-bottom: 1px solid var(--tm-bg-soft);
}

/* Bouton « copier ce jour sur les autres ». */
.tm-day-copy {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  font-weight: 600;
  color: var(--tm-primary-ink-strong);
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.tm-day-copy:hover {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-on-accent);
}
.tm-day-copy.is-done {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-on-accent);
}
/* Jour source (copié) : rempli. */
.tm-day-copy.is-source {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-on-accent);
}
/* Autres jours pendant une copie: « Coller » en pointillé pour se distinguer. */
.tm-day-copy.is-paste {
  border-style: dashed;
  border-color: var(--tm-primary);
  color: var(--tm-primary-ink-strong);
}
.tm-day-copy.is-paste:hover {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-on-accent);
}

.tm-day-row__slot {
  justify-content: center;
}

.tm-day-row--head {
  border-bottom: none;
  padding-block-end: 0;
}

.tm-day-row__slot-label {
  font-weight: 600;
  color: var(--tm-muted);
  text-align: center;
}

.tm-day-row__name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.tm-day-row__slot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tm-day-row__sep {
  color: var(--tm-muted);
}

.tm-form .tm-time {
  flex: none;
  width: 6.25rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--tm-text);
}

.tm-form select.tm-time:has(option[value=""]:checked) {
  color: var(--tm-muted);
}

@media (max-width: 600px) {
  .tm-day-row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .tm-day-row--head {
    display: none;
  }

  .tm-day-row__slot::before {
    content: attr(data-slot);
    font-size: 0.8125rem;
    color: var(--tm-muted);
    min-width: 5.5rem;
  }
}

.tm-form .field-calendar input {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: 0.5rem;
  font-size: 0.9375rem;
}

.tm-form .input-group {
  display: flex;
  align-items: stretch;
}

.tm-form .input-group input {
  flex: 1;
  min-width: 0;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.tm-form .input-group .btn,
.tm-form .input-group button {
  flex: none;
  width: 2.1rem;
  padding: 0;
  border: 1px solid var(--tm-border);
  border-inline-start: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: calc(var(--tm-radius) / 2);
  border-end-end-radius: calc(var(--tm-radius) / 2);
  background: var(--tm-bg-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tm-form .input-group .btn,
.tm-form .input-group button {
  color: var(--tm-muted);
}

.tm-form .input-group .btn:hover,
.tm-form .input-group button:hover {
  background: var(--tm-border);
  color: var(--tm-text);
}

/* Icones (police d'icones Joomla non chargee) : SVG en masque CSS,
   colorees par la couleur courante du bouton. */
.tm-form .icon-plus,
.tm-form .icon-minus,
.tm-form .icon-calendar,
.tm-form .icon-calendar-alt,
.tm-form .icon-arrows-alt,
.tm-form .icon-arrows-alt-v,
.tm-form .icon-arrows-v,
.tm-form .icon-menu {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tm-form .icon-plus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.tm-form .icon-minus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.tm-form .icon-calendar,
.tm-form .icon-calendar-alt {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E");
}

.tm-form .icon-arrows-alt,
.tm-form .icon-arrows-alt-v,
.tm-form .icon-arrows-v,
.tm-form .icon-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
}

/* Sous-formulaires repetables (tarifs, absences).
   La table generee est <table class="table table-bordered"> avec des largeurs
   inline sur les <th> (reparties a parts egales) : on les neutralise et on
   dimensionne les colonnes sur leur contenu. */
.tm-form .subform-repeatable table.table {
  width: 100%;
  border-collapse: collapse;
}

.tm-form .subform-repeatable thead th {
  width: auto !important;
  text-align: left;
  font-weight: 600;
  padding: 0.2rem 0.35rem;
  border: 0;
}

.tm-form .subform-repeatable tbody td,
.tm-form .subform-repeatable tbody th {
  padding: 0.3rem 0.35rem;
  vertical-align: middle;
  border: 0;
  background: transparent;
}

.tm-form tr.subform-repeatable-group {
  background: transparent;
  border: 0;
}

.tm-form tr.subform-repeatable-group + tr.subform-repeatable-group td {
  border-top: 1px solid var(--tm-bg-soft);
}

/* Colonnes compactes: dates et boutons sur leur contenu, le reste absorbe l'espace. */
.tm-form .subform-repeatable td:has(.field-calendar) {
  width: 9.25rem;
  min-width: 9rem;
  white-space: nowrap;
}

/* Dans un tableau serre (Du / Au / Motif), l'input date ne doit PAS retrecir
   sous la largeur d'une date complete AAAA-MM-JJ (sinon "2026-0" tronque).
   Specificite volontairement elevee pour battre .input-group input min-width:0. */
.tm-form .subform-repeatable .field-calendar .input-group input {
  min-width: 5.5rem;
}

.tm-form .subform-repeatable td:has(input[name*="[note]"]),
.tm-form .subform-repeatable td:has(input[name*="[title]"]) {
  width: 58%;
}

.tm-form .subform-repeatable td:has(input[name*="[price]"]) {
  width: 8rem;
}

.tm-form .subform-repeatable td:last-child {
  width: 1%;
  white-space: nowrap;
}

/* L'input remplit toute la largeur de sa cellule: le titre complet est visible. */
.tm-form .subform-repeatable td input {
  width: 100%;
  box-sizing: border-box;
}

/* La popup du calendrier (champ date des absences) est rendue A L'INTERIEUR de
   la cellule du sous-formulaire: nos regles de colonnes (notamment
   td:last-child { width: 1% }) ecrasaient la derniere colonne (Samedi).
   On neutralise ces regles pour le tableau du calendrier. */
.tm-form .subform-repeatable .js-calendar td,
.tm-form .subform-repeatable .js-calendar th {
  width: auto !important;
  white-space: normal;
  padding: 8px 0 !important;
}
.tm-form .subform-repeatable .js-calendar td input { width: auto; }

/* Tarifs (onglet Tarifs) : chaque prestation sur DEUX lignes — intitulé en
   pleine largeur au-dessus, puis tarif + lien + actions en dessous. Le lien
   « plus d'infos » devient enfin lisible. */
#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] thead {
  display: none;
}

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] table,
#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] tbody {
  display: block;
}

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] tr.subform-repeatable-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--tm-border);
  margin-bottom: 0.5rem;
}

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] tr.subform-repeatable-group + tr.subform-repeatable-group td {
  border-top: 0;
}

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] td {
  display: block;
  padding: 0;
  width: auto !important;
}

/* Ligne 1 : intitulé pleine largeur. */
#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] td:has(input[name*="[title]"]) {
  flex: 1 1 100%;
}

/* Ligne 2 : tarif (compact), lien (extensible), actions. */
#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] td:has(input[name*="[price]"]) {
  flex: 0 0 8rem;
}

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] td:has(input[name*="[url]"]) {
  flex: 1 1 14rem;
}

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] td:last-child {
  flex: 0 0 auto;
  margin-left: auto;
}

.tm-form .subform-repeatable .group-add,
.tm-form .subform-repeatable .group-remove,
.tm-form .subform-repeatable .group-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--tm-border);
  background: var(--tm-surface);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.tm-form .subform-repeatable .group-add {
  color: var(--tm-primary-ink-strong);
}

.tm-form .subform-repeatable .group-add:hover {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: var(--tm-on-accent);
}

.tm-form .subform-repeatable .group-move {
  color: var(--tm-muted);
  cursor: grab;
}

.tm-form .subform-repeatable .group-move:hover {
  background: var(--tm-bg-soft);
}

/* Selecteur de photo importee depuis le site web */
.tm-photo-picker {
  flex-basis: 100%;
  margin-block-start: 0.5rem;
}

.tm-photo-picker__label {
  margin: 0 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tm-text);
}

.tm-photo-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tm-photo-picker__item {
  object-fit: cover;
  border: 2px solid var(--tm-border);
  cursor: pointer;
  transition: border-color 0.35s ease, transform 0.35s ease;
}

.tm-photo-picker__item.is-loading {
  opacity: 0.5;
}

/* Generation IA de la presentation */
.tm-ai-generate {
  flex-wrap: wrap;
  align-items: center;
}

.tm-ai-generate .tm-hint {
  flex-basis: 100%;
  margin: 0;
}

.tm-ai-status {
  font-size: 0.875rem;
  color: var(--tm-muted);
}

/* Resultat de l'analyse : vert = trouve, orange = a completer soi-meme. */
.tm-ai-ok { color: var(--tm-primary-ink-strong); font-weight: 600; }
.tm-ai-missing { color: var(--tm-warm-text-strong); font-weight: 600; }

.tm-ai-status--error {
  color: var(--tm-danger);
}

.tm-current-photo img {
  border-radius: 50%;
  object-fit: cover;
}

.tm-submit-review {
  border-top: 1px solid var(--tm-border);
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
}

/* ===== Onglets du formulaire « Ma fiche » ===== */
.tm-tabs {
  display: flex;
  flex-wrap: wrap;
}

.tm-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.tm-tab-panel {
  display: none;
}

.tm-tab-panel.is-active {
  display: block;
}

@media (max-width: 640px) {
  .tm-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }

  .tm-tab {
    white-space: nowrap;
    padding: 0.55rem 0.8rem;
  }
}

/* ===== Mini-editeur (gras uniquement) ===== */
.tm-editor {
  border: 1px solid var(--tm-border);
  background: var(--tm-surface);
  overflow: hidden;
}

.tm-editor:focus-within {
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px var(--tm-primary-glow);
}

.tm-editor__toolbar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--tm-border);
}

.tm-editor__btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tm-text);
  font: inherit;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

.tm-editor__btn:hover {
  background: var(--tm-surface);
  border-color: var(--tm-border);
}

.tm-editor__area {
  min-height: 11rem;
  padding: 0.85rem 1rem;
  outline: none;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 28rem;
}

.tm-editor__area p {
  margin: 0 0 0.75em;
}

.tm-editor__area p:last-child {
  margin-bottom: 0;
}

/* ===== Indicateur d'etapes (inscription) =====
   Pastille numerotee avec libelle en dessous ; trait continu reliant les
   pastilles, colore au fil de la progression ; coche sur les etapes faites. */
.tm-steps {
  display: flex;
  list-style: none;
  padding: 0;
}

.tm-steps__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  color: var(--tm-muted);
  font-weight: 600;
  text-align: center;
}

/* Trait de liaison: de la pastille precedente a la pastille courante. */
.tm-steps__item:not(:first-child)::before {
  content: "";
  position: absolute;
  border-radius: 2px;
  background: var(--tm-border);
  transition: background-color 0.35s ease;
}

.tm-steps__item.is-done:not(:first-child)::before,
.tm-steps__item.is-active:not(:first-child)::before {
  background: var(--tm-primary);
}

.tm-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--tm-border);
  background: var(--tm-surface);
  color: var(--tm-muted);
  flex-shrink: 0;
  transition: border-color 0.35s ease, background-color 0.35s ease,
    color 0.35s ease, box-shadow 0.35s ease;
}

.tm-steps__item.is-active .tm-steps__num {
  border-color: var(--tm-primary);
  background: var(--tm-primary);
  color: var(--tm-on-accent);
}

.tm-steps__item.is-active {
  color: var(--tm-primary-ink-strong);
}

/* Etape terminee: pastille verte pale avec coche. */
.tm-steps__item.is-done .tm-steps__num {
  border-color: var(--tm-primary);
  color: transparent;
  position: relative;
}

.tm-steps__item.is-done .tm-steps__num::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tm-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1.05rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1.05rem no-repeat;
}

.tm-steps__item.is-done {
  color: var(--tm-primary-ink-strong);
}

@media (max-width: 420px) {
  .tm-steps__label { font-size: 0.75rem; }
}

/* ===== Assistant de bienvenue (fiche vierge) ===== */
.tm-welcome {
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--tm-primary);
  margin: 0 0 1.75rem;
}

.tm-welcome__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--tm-on-accent);
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.tm-welcome__body { flex: 1; }

.tm-welcome__body > p {
  margin: 0 0 0.9rem;
  color: var(--tm-muted);
}

.tm-welcome__site {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tm-welcome__site input {
  flex: 1;
  min-width: 14rem;
  font: inherit;
}

.tm-welcome__site input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px var(--tm-primary-glow);
}

/* Le style vient du composant bouton (.tm-btn--secondary) : ici, seulement
   l'espacement par rapport a l'encart de pre-remplissage. */
.tm-welcome__manual {
  margin-top: 0.85rem;
}

.tm-otp-step .tm-subtitle strong {
  color: var(--tm-text);
}

/* Cercle d'icone commun (etape OTP, modale d'avertissement...) : meme
   pastille vert pale + icone en masque ; chaque usage ne regle que sa
   taille et son pictogramme. */
.tm-otp-icon,
.tm-consent-dialog__icon {
  position: relative;
}

.tm-otp-icon::after,
.tm-consent-dialog__icon::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tm-otp-icon::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
}

.tm-otp {
  display: flex;
  margin: 0 0 0.75rem;
  width: 100%;
}

.tm-otp__digit {
  /* Les cases se partagent la largeur disponible (jusqu'a 3rem chacune) au
     lieu d'etre figees: elles retrecissent dans un conteneur etroit (colonne
     laterale « Mon compte ») sans jamais deborder. */
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 700;
  color: var(--tm-text);
  border: 1.5px solid var(--tm-border);
  background: var(--tm-surface);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.tm-otp__digit:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px var(--tm-primary-glow);
}

.tm-otp__digit.is-filled {
  border-color: var(--tm-primary);
}

.tm-otp-step__spam {
  margin-bottom: 1rem;
}

.tm-otp-step__submit {
  width: 100%;
}

.tm-otp-step .tm-links {
  margin-top: 1rem;
}

.tm-links__sep {
  margin: 0 0.5rem;
  color: var(--tm-muted);
}

@media (max-width: 380px) {
  .tm-otp { gap: 0.3rem; }
  .tm-otp__digit { max-width: 2.8rem; height: 3.3rem; }
}

/* ===== Boutons messageries / reseaux avec icone de marque ===== */
.tm-btn--brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-color: var(--tm-border);
  color: var(--tm-text);
}

.tm-btn--brand:hover,
.tm-btn--brand:focus {
  background: var(--tm-bg-soft);
  border-color: var(--tm-muted);
  color: var(--tm-text);
}

.tm-brand-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

/* ===== Liste de contact: icones + liens sans soulignement ===== */
.tm-contact-list li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.tm-contact-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.tm-contact-list a {
  color: var(--tm-text);
  text-decoration: none;
  transition: color 0.35s ease;
}

.tm-contact-list a:hover,
.tm-contact-list a:focus {
  color: var(--tm-primary-ink-strong);
  text-decoration: none;
}

/* ===== Partage de la fiche ===== */
.tm-share {
  border-top: 1px solid var(--tm-border);
}

.tm-share__buttons {
  display: flex;
  flex-wrap: wrap;
}

.tm-share button.tm-btn--brand {
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
}

.tm-qr-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 1.1rem;
}

.tm-qr-box__code svg {
  width: 11rem;
  height: 11rem;
  display: block;
}

/* Pied de page reserve a l impression */
.tm-print-footer {
  display: none;
}

/* ===== Impression: belle fiche papier ===== */
@media print {
  /* Chrome du site, partage, carte: masques */
  .tpl-header,
  .tpl-footer,
  .tpl-sidebar,
  .tm-share,
  .tm-qr-box,
  .tm-owner-bar,
  .tm-profile__map,
  joomla-alert,
  .alert {
    display: none !important;
  }

  body {
    background: var(--tm-surface);
    color: var(--tm-ink-strong);
    font-size: 11pt;
  }

  .tpl-container,
  .tpl-main {
    max-width: none;
    padding: 0;
    margin: 0;
  }

  .tpl-layout--sidebar {
    display: block;
  }

  .tm-profile__header {
    border-bottom: 2.5pt solid var(--tm-primary);
    padding-bottom: 12pt;
    margin-bottom: 14pt;
  }

  .tm-profile__photo {
    width: 90pt;
    height: 90pt;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .tm-profile h1 {
    font-size: 20pt;
    margin: 0 0 4pt;
  }

  .tm-badge,
  .tm-badge::before,
  .tm-contact-pref,
  .tm-chip {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .tm-profile__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16pt;
  }

  .tm-profile h2 {
    font-size: 13pt;
    color: var(--tm-primary-ink-strong);
    margin: 12pt 0 6pt;
    break-after: avoid;
  }

  .tm-profile section,
  .tm-pricing,
  .tm-schedule {
    break-inside: avoid;
  }

  .tm-contact-list a {
    color: var(--tm-ink-strong);
    text-decoration: none;
  }

  .tm-btn--brand {
    border: none;
    padding: 0;
    background: none;
  }

  /* QR + rappel de la fiche en pied de page imprime */
  .tm-print-footer {
    display: flex;
    align-items: center;
    gap: 12pt;
    margin-top: 18pt;
    padding-top: 10pt;
    border-top: 1pt solid #bbb;
    break-inside: avoid;
  }

  .tm-print-footer__qr svg {
    width: 70pt;
    height: 70pt;
    display: block;
  }

  .tm-print-footer__text {
    font-size: 9pt;
    color: #444;
    line-height: 1.5;
  }
}

/* ===== Partage: boutons ronds icone seule ===== */
.tm-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-border);
  background: var(--tm-surface);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.1s ease;
}

.tm-share-status {
  align-self: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tm-primary-ink-strong);
}

/* ===== QR code en popup modale ===== */
/* Base commune de TOUTES les modales du composant: une seule definition
   (cadre, ombre, fond assombri) ; chaque modale ne regle que sa largeur. */
.tm-qr-dialog,
.tm-consent-dialog {
  border: none;
}

.tm-qr-dialog::backdrop,
.tm-consent-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

.tm-qr-dialog {
  padding: 1.6rem 2rem 1.4rem;
  max-width: 20rem;
}

.tm-qr-dialog__close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--tm-muted);
  cursor: pointer;
  padding: 0.2rem;
}

.tm-qr-dialog__close:hover {
  color: var(--tm-text);
}

.tm-qr-dialog__name {
  margin: 0 0 0.9rem;
  font-weight: 700;
}

.tm-qr-dialog .tm-qr-box__code svg {
  width: 12rem;
  height: 12rem;
  display: block;
  margin: 0 auto;
}

.tm-qr-dialog .tm-hint {
  margin: 0.8rem 0 0;
}

/* ===== Coordonnees protegees (bouton Afficher) ===== */
.tm-reveal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.tm-reveal__mask {
  letter-spacing: 0.04em;
  color: var(--tm-muted);
}

.tm-reveal__btn {
  appearance: none;
  border: 1px solid var(--tm-primary);
  background: var(--tm-surface);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.tm-reveal__btn[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ===== Moyens de paiement ===== */
.tm-payments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.75rem 0 0;
}

.tm-payments__label {
  font-weight: 600;
  margin-right: 0.2rem;
}

/* ===== Avertissement anti-demarchage ===== */
/* Modale d'avertissement: base commune plus haut, seules les specificites ici. */
.tm-consent-dialog {
  padding: 1.8rem 2rem 1.5rem;
  max-width: 26rem;
}

.tm-consent-dialog__icon::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
}

.tm-consent-dialog h3 {
  margin: 0 0 0.6rem;
}

.tm-consent-dialog p {
  margin: 0 0 1.2rem;
  color: var(--tm-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.tm-consent-dialog__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.tm-hero__stats {
  color: var(--tm-primary-ink-strong);
  font-weight: 600;
  margin: 0;
}

.tm-finder__form {
  flex-wrap: wrap;
}

.tm-finder__form textarea {
  flex: 1;
  font: inherit;
  resize: vertical;
}

.tm-finder__form .tm-btn.is-loading {
  opacity: 0.6;
  cursor: wait;
}

.tm-finder__result {
  margin-top: 1.1rem;
}

.tm-finder__advice {
  margin: 0 0 0.75rem;
  line-height: 1.6;
}

.tm-finder__result h3 {
  font-size: 1rem;
  margin: 0.75rem 0 0.4rem;
}

.tm-finder__matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.tm-finder__matches a {
  font-weight: 600;
}

.tm-finder__meta {
  display: block;
  color: var(--tm-muted);
  font-size: 0.85rem;
}

.tm-audiences-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .tm-audiences-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tm-audience-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tm-audience-card__icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--tm-primary-100);
  color: var(--tm-primary-ink);
  align-items: center;
  justify-content: center;
}

.tm-home-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.tm-audience-card > p {
  color: var(--tm-muted);
  margin: 0;
}

.tm-home-list {
  margin: 0;
  color: var(--tm-text);
}

.tm-audience-card .tm-btn {
  margin-top: auto;
}

.tm-home-ads {
  margin-bottom: 1rem;
}

/* ===== Annonces ===== */
.tm-ads__filter {
  display: flex;
  flex-wrap: wrap;
}

.tm-ads__filter .tm-chip {
  font: inherit;
}

.tm-ads__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.tm-ad__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.tm-ad__price {
  margin-left: auto;
}

.tm-ad__description {
  margin: 0 0 0.5rem;
  color: var(--tm-text);
  line-height: 1.55;
}

.tm-ad__by {
  margin: 0;
}

/* ===== Page Services (credits, parrainage, catalogue) ===== */
.tm-credits {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border: 1px solid var(--tm-primary-border);
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
}

.tm-credits__balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6rem;
}

.tm-credits__value {
  font-size: 2.4rem;
  line-height: 1.1;
}

.tm-credits__info {
  margin: 0;
  color: var(--tm-muted);
}

.tm-referral {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
  padding: 1.4rem 1.5rem;
  margin: 0 0 1.75rem;
}

.tm-referral h2 { margin: 0 0 0.4rem; }

.tm-referral__link {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.tm-referral__link input {
  flex: 1;
  min-width: 16rem;
  font: inherit;
}

.tm-service-cards {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .tm-service-cards { grid-template-columns: 1fr 1fr; }
}

.tm-service-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.tm-service-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  width: 100%;
}

.tm-service-card__head h3 { margin: 0; font-size: 1.05rem; }
.tm-service-card__head .tm-chip { margin-left: auto; }
.tm-service-card > p { margin: 0; color: var(--tm-muted); font-size: 0.925rem; }

.tm-service-card__pricing { margin: 0; }
.tm-service-card__or { color: var(--tm-muted); margin: 0 0.35rem; font-size: 0.875rem; }

.tm-service-card__interested {
  color: var(--tm-primary-ink-strong);
  font-weight: 600;
  font-size: 0.875rem;
}

.tm-services-support {
  text-align: center;
  border-top: 1px solid var(--tm-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

/* ===== Page Soutenir (dons) ===== */
.tm-donate-cards {
  display: grid;
  grid-template-columns: 1fr;
  margin: 1rem 0;
}

@media (min-width: 720px) {
  .tm-donate-cards { grid-template-columns: repeat(3, 1fr); }
}
.tm-donate-card__iban { word-break: break-all; }

/* ===== Quick wins revue design ===== */

/* #8 : le bouton de l''assistant reprend le gabarit standard des boutons */
.tm-finder__form {
  align-items: flex-start;
}

/* ===== Chantiers revue design: fiche 2 colonnes, hero accueil, etats vides ===== */

/* --- Fiche : contenu principal a gauche, carte de contact collante a droite --- */
.tm-profile__columns--split {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .tm-profile__columns--split {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  /* Placement explicite : depuis que le partage est un troisieme element de
     la grille, le laisser se placer seul le renverrait sous la colonne de
     gauche. */
  .tm-profile__columns--split > .tm-profile__main {
    grid-column: 1;
  }

  .tm-profile__columns--split > .tm-profile__contact--card {
    grid-column: 2;
    grid-row: 1;
  }

  /* Le partage est redevenu un contenu de la carte de contact : plus de
     troisieme element a placer dans la grille. */

  .tm-profile__contact--card {
    position: sticky;
    top: 84px;
  }
}

/* Telephone : l'ordre du document suffit — presentation, contact, partage.
   Le bouton « Contacter » est deja dans l'en-tete, au-dessus : rien ne
   justifie de faire franchir les 500 a 1000 px de la carte de contact avant
   de lire qui est la personne. */

.tm-profile__contact--card h2 {
  margin-top: 0;
}

.tm-profile__contact--card h2 + * {
  margin-top: 0.5rem;
}

.tm-profile__contact--card .tm-minimap {
  height: 220px;
}

/* Plusieurs lieux : plus de hauteur pour que les marqueurs et l'infobulle tiennent. */
.tm-profile__contact--card .tm-minimap[data-multi] {
  height: 340px;
}

.tm-profile__main > h2:first-child {
  margin-top: 0;
}

/* Lignes topographiques qui se dessinent lentement en boucle */
.tm-hero__topo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tm-topo-line {
  stroke: var(--tm-primary-ink);
  stroke-opacity: 0.09;
  stroke-width: 1.5;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: tm-topo-draw 26s ease-in-out infinite alternate;
}

.tm-topo-line--2 { animation-delay: 2s; }
.tm-topo-line--3 { animation-delay: 4s; }
.tm-topo-line--4 { animation-delay: 6s; }

@keyframes tm-topo-draw {
  to { stroke-dashoffset: 0; }
}

/* Halos verts flottants tres doux */
.tm-hero__blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tm-primary-soft) 0%, transparent 70%);
  pointer-events: none;
  animation: tm-blob-float 18s ease-in-out infinite alternate;
}

.tm-hero__blob--1 { top: -8rem; left: -6rem; }
.tm-hero__blob--2 { bottom: -10rem; right: -5rem; animation-delay: 6s; animation-duration: 22s; }

@keyframes tm-blob-float {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2.5rem, 1.5rem) scale(1.15); }
}

/* Epingle de carte qui pulse (signature TheraMap) */
.tm-hero__pin {
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--tm-primary-100);
  color: var(--tm-primary-ink);
}

.tm-hero__pin svg {
  width: 1.6rem;
  height: 1.6rem;
}

.tm-hero__pin-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--tm-primary-border);
  animation: tm-pin-pulse 2.6s ease-out infinite;
}

@keyframes tm-pin-pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Entree en fondu progressif du contenu */
.tm-hero__title,
.tm-hero__subtitle,
.tm-hero__stats,
.tm-hero__pin {
  position: relative;
  animation: tm-fade-up 0.7s ease-out both;
}

.tm-hero__subtitle { animation-delay: 0.15s; }
.tm-hero__stats { animation-delay: 0.3s; }

@keyframes tm-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* « naturellement » : accent vert avec soulignement qui se deploie */
.tm-hero__title em {
  background-image: linear-gradient(var(--tm-primary-border), var(--tm-primary-border));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 0.18em;
}

@keyframes tm-underline {
  to { background-size: 100% 0.18em; }
}

/* Accessibilite: aucune animation si l'utilisateur les refuse */
@media (prefers-reduced-motion: reduce) {
  .tm-topo-line { animation: none; stroke-dashoffset: 0; }
  .tm-hero__blob,
  .tm-hero__pin-pulse { animation: none; }
  .tm-hero__title,
  .tm-hero__subtitle,
  .tm-hero__stats,
  .tm-hero__pin,
  .tm-home .tm-finder { animation: none; }
  .tm-hero__title em { animation: none; background-size: 100% 0.18em; }
}

/* L'assistant chevauche legerement le hero: effet carte posee, pro et sobre */
.tm-home .tm-finder {
  margin-top: -2.25rem;
}

.tm-empty__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tm-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 1.4rem no-repeat;
}

.tm-profile__description {
  margin-bottom: 1.5rem;
}

/* Sur la fiche, le descriptif occupe toute la colonne principale (comme les
   Tarifs / prestations dessous) : evite un vide a droite du texte. Les autres
   blocs de prose (accueil, annonces, soutien) gardent la largeur de lecture. */
.tm-profile__main .tm-profile__description {
  max-width: none;
}

/* ===== Carte Contact: interieur raffine ===== */

/* Intertitres discrets (Messageries, Reseaux, Localisation) */
.tm-card-subtitle {
  margin: 1.4rem 0 0.6rem;
}

/* Contact souhaite: simple ligne de pastilles, plus de pave vert */
.tm-contact-prefs {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tm-border);
}

/* Lignes de coordonnees: aerees, bouton Afficher cale a droite */
.tm-profile__contact--card .tm-contact-list {
  gap: 0.7rem;
}

.tm-profile__contact--card .tm-contact-list .tm-reveal {
  flex: 1;
  justify-content: space-between;
}

/* Boutons messageries / reseaux: grille reguliere, largeurs egales */
.tm-profile__contact--card .tm-profile__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.tm-profile__contact--card .tm-btn--brand {
  justify-content: center;
  width: 100%;
}

/* ===== Annonces: grille 4 colonnes, formats 1x1 / 2x1 / 2x2 / 4x1 ===== */
.tm-ads__list--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* dense: les petites annonces comblent les espaces autour des grandes */
  grid-auto-flow: dense;
  align-items: stretch;
}

.tm-ads__list--grid .tm-ad {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
}

.tm-ad--2x1 { grid-column: span 2; }
.tm-ad--2x2 { grid-column: span 2; grid-row: span 2; }
.tm-ad--4x1 { grid-column: 1 / -1; }

/* Le descriptif absorbe la hauteur restante, la signature reste en bas ;
   fondu discret quand le texte est plus long que la case */
.tm-ads__list--grid .tm-ad__description {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Badge des dimensions (format demande par le therapeute) */
.tm-ad__format {
  font-weight: 600;
  border: 1px solid var(--tm-border);
  padding: 0.05rem 0.4rem;
}

.tm-ads__list--grid .tm-ad__by { margin-top: auto; padding-top: 0.5rem; }

@media (max-width: 1000px) {
  .tm-ads__list--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .tm-ads__list--grid { grid-template-columns: 1fr; }
  .tm-ad--2x1, .tm-ad--2x2, .tm-ad--4x1 { grid-column: auto; grid-row: auto; }

  /* Sur une colonne, les cartes texte reprennent une hauteur naturelle ;
     les annonces visuelles gardent le ratio de leur image */
  .tm-ads__list--grid .tm-ad:not(.tm-ad--visual) { aspect-ratio: auto; }
}

/* ===== Annonces visuelles: l'image EST l'annonce (taille exacte du format,
   aucun texte, carte cliquable) ===== */
.tm-ad--visual {
  overflow: hidden;
  /* la carte garde le ratio exact du format, sans etirement par la grille */
  align-self: start;
}

.tm-ad--visual.tm-ad--1x1 { aspect-ratio: 3 / 2; }
.tm-ad--visual.tm-ad--2x1 { aspect-ratio: 3 / 1; }
.tm-ad--visual.tm-ad--2x2 { aspect-ratio: 3 / 2; align-self: stretch; }
.tm-ad--visual.tm-ad--4x1 { aspect-ratio: 4 / 1; }

.tm-ad__link {
  display: block;
  width: 100%;
  height: 100%;
}

.tm-ad__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Onglet Annonces (espace therapeute) : solde de graines + cartes ===== */
.tm-seeds {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* Bouton d'action destructrice (confirmation de suppression) */
.tm-btn--danger {
  border: 1px solid var(--tm-danger-hover);
}

/* La confirmation de suppression reprend la base des dialogues du site */
.tm-confirm-delete h3 { margin-top: 0; }

/* ===== Boutique de graines (Stripe Checkout) ===== */
.tm-seed-shop {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.tm-seed-shop__packs {
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 0.75rem;
}

.tm-seed-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.tm-seed-pack__seeds {
  font-size: 1.15rem;
  font-weight: 700;
}

.tm-seed-pack__price {
  color: var(--tm-muted);
  font-size: 0.875rem;
}

/* ===== Porte-monnaie: soldes et historique des mouvements ===== */
.tm-wallet-balances {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}

.tm-wallet-balance {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.8rem 1.2rem;
}

.tm-wallet-balance__value {
  font-size: 1.35rem;
  font-weight: 700;
}

.tm-wallet-balance__label {
  color: var(--tm-muted);
  font-size: 0.875rem;
}

.tm-wallet-table-wrap {
  overflow-x: auto;
  /* Contient les elements positionnes des cellules (ex. .visually-hidden) :
     sans cela ils echappent au cadre et elargissent la page sur mobile. */
  position: relative;
}

.tm-wallet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.925rem;
}

.tm-wallet-table th,
.tm-wallet-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--tm-border);
}

.tm-wallet-table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tm-muted);
}

.tm-wallet-table__date {
  white-space: nowrap;
  color: var(--tm-muted);
}

.tm-wallet-table__amount {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

/* Encart discret de la page d'accueil: don = therapeute + TheraMap */
.tm-home-give {
  display: flex;
  align-items: center;
}

.tm-home-give__icon { font-size: 1.2rem; }

.tm-home-give__text {
  margin: 0;
  flex: 1 1 auto;
}

.tm-home-give .tm-btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .tm-home-give { flex-wrap: wrap; }
}

/* ===== Don fleche: offrir des graines a un therapeute ===== */
.tm-support__seeds {
  padding: 1.5rem;
}

.tm-gift-seeds > label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.tm-gift-seeds select {
  width: 100%;
  margin-bottom: 0.9rem;
}

.tm-gift-seeds__ref > p {
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.tm-gift-seeds__ref {
  margin-bottom: 0.75rem;
}

/* Bouton discret « offrir des graines » sur la fiche publique */
.tm-gift-link {
  margin: 0.75rem 0 0;
}

/* Bouton « + » principal du sous-formulaire: respirer entre l'aide et la liste */
.tm-ads-share-all {
  margin: 0.25rem 0 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--tm-bg-soft, var(--tm-primary-50));
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
}
.tm-ads-share-all__hint { margin: 0.5rem 0 0; }
#tm-panel-ads .group-add { margin: 0.75rem 0 1rem; }
#tm-panel-ads .tm-adcard .group-add { margin: 0; }

/* Chaque annonce du sous-formulaire devient une carte repliable */
.tm-adcard {
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
}

.tm-adcard.is-open {
  border-color: var(--tm-primary-border);
  box-shadow: var(--tm-shadow-pop);
}

.tm-adcard__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tm-adcard__thumb {
  flex: 0 0 auto;
  width: 66px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--tm-border);
  background: var(--tm-bg-soft);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-adcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tm-adcard__thumb img[hidden] { display: none; }

.tm-adcard__thumb--empty::before {
  content: "📣";
  font-size: 1.1rem;
  opacity: 0.55;
}

.tm-adcard__infos {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tm-adcard__title {
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-adcard__meta {
  color: var(--tm-muted);
  font-size: 0.8rem;
}

.tm-adcard__toggle { flex: 0 0 auto; }

.tm-adcard__native { flex: 0 0 auto; }

.tm-adcard__body {
  margin-top: 0.9rem;
  border-top: 1px solid var(--tm-border);
  padding-top: 0.9rem;
}

/* Periode de diffusion (verrouillee) + prolongation en graines */
.tm-ad-period {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--tm-border);
}

.tm-ad-period__dates {
  margin: 0 0 0.2rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.tm-ad-period .tm-hint { margin: 0 0 0.5rem; }

/* Visionneuse du visuel d'annonce */
.tm-adcard__thumb,
.tm-ad-image__preview { cursor: zoom-in; }

.tm-lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1200px);
  cursor: zoom-out;
}

.tm-lightbox::backdrop {
  background: rgba(15, 30, 22, 0.72);
}

.tm-lightbox img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow-pop);
}

/* Zone image du formulaire d''annonce (upload / generation IA) */
.tm-ad-image {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--tm-border);
}

.tm-ad-image__preview {
  display: block;
  max-width: 20rem;
  border-radius: calc(var(--tm-radius) / 2);
  border: 1px solid var(--tm-border);
  margin-bottom: 0.5rem;
}

.tm-ad-image__dims {
  margin: 0 0 0.5rem;
}

.tm-ad-image__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tm-home-mission p { line-height: 1.6; }
.tm-home .tm-hero__subtitle { margin-left: auto; margin-right: auto; }

/* Mission de-verdie: section "a propos" neutre, alignee a gauche */
.tm-home-mission { border-color: var(--tm-border); }

/* Titres de sections plus nets */
.tm-home .tm-finder h2, .tm-audience-card h2, .tm-home-ads h2, .tm-home-mission h2 { font-weight: 700; letter-spacing: -.01em; }

/* Confidentialite de l'assistant: repliable et discrete */
.tm-finder__privacy { margin-top: .6rem; }
.tm-finder__privacy > summary { font-size: .8125rem; font-weight: 600; color: var(--tm-muted); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .35rem; }
.tm-finder__privacy > summary::-webkit-details-marker { display: none; }
.tm-finder__privacy > summary::before { content: "🔒"; }
.tm-finder__privacy p { font-size: .8125rem; line-height: 1.5; color: var(--tm-muted); max-width: 68ch; margin: .4rem 0 0; }

/* Encart confidentialite: 3 points clairs (icone + texte) au lieu d'un pave */
.tm-finder__privacy-list {
  list-style: none;
  margin: .55rem 0 0;
  display: grid;
  gap: .55rem;
}
.tm-finder__privacy-list li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--tm-muted);
}
.tm-finder__privacy-list .tm-finder__privacy-ico {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1.45;
}
.tm-finder__privacy-list strong { color: var(--tm-text); font-weight: 600; }
/* Surface unique reutilisable (remplace les multiples styles de boite) */
.tm-surface{padding:var(--tm-space-5);}
.tm-surface--accent{border-color:var(--tm-primary-border);}
.tm-field input,.tm-field select,.tm-field textarea,
.tm-form input[type="text"],.tm-form input[type="email"],.tm-form input[type="tel"],
.tm-form input[type="url"],.tm-form input[type="number"],.tm-form select,.tm-form textarea{
  width:100%;min-height:2.75rem;border:1px solid var(--tm-border);border-radius:calc(var(--tm-radius)/2);
  font:inherit;background:var(--tm-surface);color:var(--tm-text);
}
.tm-hero > * { position: relative; z-index: 1; }
.tm-hero::before {
  position: absolute;
  left: 50%;
  top: -62%;
  width: min(1340px, 122%);
  aspect-ratio: 1 / 0.98;
  background: url("../images/tree.png") center top / contain no-repeat;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transform-origin: 50% 30%;
  /* Le feuillage s'epanouit depuis le centre du houppier vers l'exterieur,
     puis balancement doux en boucle. */
  clip-path: circle(150% at 50% 28%);
  animation:
    tm-tree-fade 1.4s ease-out both,
    tm-tree-grow 5.5s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    tm-tree-sway 8s ease-in-out 5.8s infinite alternate;
}
@keyframes tm-tree-fade {
  from { opacity: 0; }
  to   { opacity: 0.13; }
}
@keyframes tm-tree-grow {
  from { clip-path: circle(0% at 50% 28%); }
  to   { clip-path: circle(150% at 50% 28%); }
}
@keyframes tm-tree-sway {
  from { transform: translateX(-50%) rotate(-1deg); }
  to   { transform: translateX(-50%) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-hero::before { animation: tm-tree-fade 0.6s ease-out both; clip-path: circle(150% at 50% 20%); }
}

/* ============ Dialogues stylés (tmConfirm / tmCopyLink) ============ */
.tm-dialog {
  border: none;
  padding: 0;
  width: min(92vw, 420px);
  color: var(--tm-text);
  background: var(--tm-surface);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .16s ease, transform .16s ease;
}
.tm-dialog.is-open { opacity: 1; transform: none; }
/* Tenir dans l'ecran: colonne flex, contenu defilant, actions fixes en bas.
   Scope au [open] pour ne pas rendre le <dialog> ferme visible (display:none UA). */
.tm-dialog[open] {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.tm-dialog::backdrop {
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
}
.tm-dialog__body { padding: 1.4rem 1.6rem .3rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tm-dialog__msg { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--tm-text); }
.tm-dialog__input {
  width: 100%;
  margin-top: 1rem;
  padding: .6rem .8rem;
  border: 1px solid var(--tm-border);
  font-size: .95rem;
}
.tm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .3rem 1.6rem 1.3rem;
  flex: 0 0 auto;
}
@media (max-width: 460px) {
  .tm-dialog__actions { flex-direction: column-reverse; }
  .tm-dialog__actions .tm-btn { width: 100%; }
}

/* Titre optionnel du dialogue + partage multi-canaux */
.tm-dialog__title { margin: 0 0 .35rem; color: var(--tm-text); }
.tm-sharedlg .tm-dialog__title { padding-right: 2rem; }

/* Croix de fermeture: X blanc dans un rond vert, en haut a droite.
   Partagee par tous les popups (partage, confirmation, copier le lien). */
.tm-dialog__close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 3;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.tm-dialog__close svg { display: block; }
/* Le message ne doit pas passer sous la croix. */
.tm-dialog__body--x .tm-dialog__msg { padding-right: 1.9rem; }
/* Plus de pied « Fermer » : espace en bas du corps de partage. */
.tm-dialog__body.tm-sharedlg { padding-bottom: 1.5rem; }

/* Aperçu popup de la disposition des formats d'annonces (reprend la vraie grille). */
.tm-fmtdemo-dialog { width: min(94vw, 560px); }
.tm-fmtdemo-dialog .tm-dialog__title { padding-right: 2rem; }
.tm-fmtdemo-dialog .tm-dialog__body { padding-bottom: 1.5rem; }
.tm-fmtdemo { margin: 1.1rem 0 .2rem; gap: .6rem; }
/* Le 2x2 s'etire sur 2 lignes: sans ceci son aspect-ratio l'elargit au-dela de
   ses 2 colonnes et il deborde sur ses voisins de droite (ecart ~1px). On le
   laisse remplir exactement sa zone 2x2. */
.tm-fmtdemo .tm-ad--2x2 { aspect-ratio: auto; }
.tm-fmtdemo .tm-ad {
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-primary-border, var(--tm-primary-200));
  border-radius: 10px;
  background: linear-gradient(180deg, var(--tm-primary-50), var(--tm-surface));
  padding: .35rem;
}
.tm-fmtdemo__lbl { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.tm-fmtdemo__name { font-size: .8rem; font-weight: 700; color: var(--tm-primary-ink-strong); }
.tm-fmtdemo__size { font-size: .68rem; font-weight: 400; color: var(--tm-muted); }
.tm-ads-demo-row { margin: 0 0 .6rem; }
.tm-share__preview {
  margin: .75rem 0 0;
  padding: .7rem .9rem;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: var(--tm-bg-soft, var(--tm-primary-50));
  font: inherit;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--tm-text);
  white-space: pre-wrap;
  word-break: break-word;
}
/* Sections « Partager » / « Télécharger les gabarits » */
.tm-share__section { margin-top: 1rem; }
.tm-share__label {
  margin: 0 0 .55rem;
}
.tm-share__channels,
.tm-share__downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.tm-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.tm-share__ico { display: inline-flex; align-items: center; line-height: 0; }
.tm-share__ico svg { display: block; }

/* Boutons de téléchargement des gabarits: nom (gras) + taille (petit), centrés, sans flèche. */
.tm-share__dl {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: .6rem;
}
.tm-share__dl-text { display: flex; flex-direction: column; align-items: center; line-height: 1.25; min-width: 0; }
.tm-share__dl-name { font-weight: 600; }
.tm-share__dl-sub { font-size: .78rem; font-weight: 400; color: var(--tm-muted); }

@media (max-width: 460px) {
  .tm-share__channels,
  .tm-share__downloads { grid-template-columns: 1fr; }
}

/* Statut local du selecteur de photos (assistant) */
.tm-photo-picker__status { margin: .5rem 0 0; font-size: .85rem; font-weight: 600; color: var(--tm-primary-ink); }
.tm-photo-picker__status:empty { display: none; }
.tm-photo-picker__status.is-error { color: #dc2626; }

/* ============ Overlay de prechargement plein ecran (analyse IA) ============ */
.tm-loading {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 30, 21, .58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
}
.tm-loading.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.tm-loading__box {
  display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
  padding: 2.2rem 2.6rem;
  background: var(--tm-surface-veil);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4);
  max-width: 340px; text-align: center;
  transform: translateY(10px) scale(.97);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tm-loading.is-active .tm-loading__box { transform: translateY(0) scale(1); }
.tm-loading__spinner {
  position: relative; width: 62px; height: 62px;
}
.tm-loading__spinner::before,
.tm-loading__spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.tm-loading__spinner::before {
  border: 6px solid rgba(46, 133, 64, .15);
}
.tm-loading__spinner::after {
  border: 6px solid transparent;
  border-top-color: var(--tm-primary);
  border-right-color: var(--tm-primary);
  animation: tm-spin .85s cubic-bezier(.6, .2, .35, .85) infinite;
}
.tm-loading__text {
  margin: 0; font-size: 1.02rem; line-height: 1.45;
  color: var(--tm-text, var(--tm-loading-ink));
}
.tm-loading__sub {
  margin: 0; font-size: .82rem; color: var(--tm-muted, var(--tm-loading-sub));
}
body.tm-loading-lock { overflow: hidden; }

.tm-btn--loading { pointer-events: none; opacity: .9; }
.tm-btn--loading::after {
  content: ""; display: inline-block; vertical-align: -0.15em;
  width: 1em; height: 1em; margin-left: .55em;
  border-radius: 50%;
  border: 2px solid rgba(46, 133, 64, .3);
  animation: tm-spin .7s linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tm-loading__spinner::after { animation-duration: 1.8s; }
  .tm-loading__box { transition: none; transform: none; }
}

/* ==========================================================================
   Refonte 2026-08 : fondations (P1), ecrans (P2) et raffinements (P3).
   Les familles Source Serif 4 / Source Sans 3 sont auto-hebergees par le
   template: aucune ressource externe n'est chargee depuis cette feuille.
   ========================================================================== */

/* >>> P1-A — TOKENS ======================================================== */
:root {
  /* Typographie */
  --tm-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --tm-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tm-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Échelle typographique (paliers volontairement écartés) */
  --tm-fs-display: clamp(2.1rem, 4.2vw, 2.875rem); /* 34 → 46 px */
  --tm-fs-h1: clamp(1.75rem, 3vw, 2rem);           /* 28 → 32 px */
  --tm-fs-h2: 1.375rem;                            /* 22 px */
  --tm-fs-h3: 1.0625rem;                           /* 17 px */
  --tm-fs-lead: 1.1875rem;                         /* 19 px */
  --tm-fs-base: 1rem;                              /* 16 px */
  --tm-fs-sm: 0.875rem;                            /* 14 px */
  --tm-fs-xs: 0.8125rem;                           /* 13 px */
  --tm-lh-tight: 1.12;
  --tm-lh-title: 1.25;
  --tm-lh-body: 1.6;

  /* Encre : le titre est plus sombre que le texte courant */
  --tm-ink: #0f172a;
  --tm-text: #1e293b;
  --tm-muted: #64748b;

  /* Vert de marque + rampe opaque (remplace les rgba() semi-transparents) */
  --tm-primary: #2e8540;       /* inchangé — identité */
  --tm-primary-dark: #226633;  /* inchangé — survol / texte */
  --tm-primary-900: #143a1d;
  --tm-primary-800: #1b4d27;   /* texte sur fond teinté */
  --tm-primary-200: #c9e0cf;   /* bordure teintée */
  --tm-primary-100: #e6f0e8;   /* aplat teinté */
  --tm-primary-50: #f3f8f4;    /* fond teinté le plus léger */
  --tm-primary-soft: var(--tm-primary-50);
  --tm-primary-border: var(--tm-primary-200);
  --tm-primary-glow: rgba(46, 133, 64, 0.18);

  /* Neutres */
  --tm-border: #e2e8f0;
  --tm-border-strong: #cbd5e1; /* bordure des champs de saisie */
  --tm-bg-soft: #f8fafc;
  --tm-bg-sunken: #f1f5f9;

  /* Ambre : graines, dons, avis — SEULE couleur chaude du site */
  --tm-warm: #b45309;
  --tm-warm-strong: #7c3d09;
  --tm-warm-bg: #fffaf0;
  --tm-warm-border: #f3d9a4;
  --tm-star: #d97706;

  /* Rouge : erreurs et suppressions uniquement */
  --tm-danger: #b3261e;
  --tm-danger-bg: #fdf2f0;
  --tm-danger-border: #f3c9c4;

  /* Rayons */
  --tm-radius: 12px;      /* cartes et surfaces (était 10px) */
  --tm-radius-sm: 8px;    /* champs, boutons, petits objets */
  --tm-radius-pill: 999px;

  /* Espacement — base 4 px (les 8 pas existants sont conservés) */
  --tm-space-1: 0.25rem; --tm-space-2: 0.5rem;  --tm-space-3: 0.75rem;
  --tm-space-4: 1rem;    --tm-space-5: 1.5rem;  --tm-space-6: 2rem;
  --tm-space-7: 3rem;    --tm-space-8: 4rem;
  --tm-section: clamp(2.5rem, 5vw, 4rem); /* rythme entre deux sections */
  --tm-measure: 68ch;

  /* Ombres */
  --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --tm-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
  --tm-shadow-md: 0 8px 24px -12px rgba(15, 23, 42, 0.25);
  --tm-shadow-pop: 0 24px 60px -20px rgba(15, 23, 42, 0.45);

  /* ---- Surfaces et encres pilotables (mode sombre) -------------------------
     Tout ce qui doit s'inverser quand l'appareil est en mode sombre passe par
     ces variables. --tm-on-accent reste blanc dans les deux modes : c'est le
     texte pose sur un aplat de couleur (bouton vert, pastille rouge). */
  --tm-surface: #ffffff;            /* fond des cartes, des champs, de la page */
  --tm-surface-veil: rgba(255, 255, 255, 0.97); /* voile du bloc de chargement */
  --tm-on-accent: #ffffff;          /* texte et filets sur un aplat colore */

  /* Gris de texte, du plus soutenu au plus discret */
  --tm-muted-strong: #475569;
  --tm-text-soft: #5b6470;
  --tm-muted-soft: #94a3b8;
  --tm-neutral-dark: #4a5b6e;
  --tm-ink-strong: #111111;

  /* Filets */
  --tm-border-soft: #d9dee3;
  --tm-primary-300: #bfe3c8;

  /* Ambre (graines, contributions, attente) */
  --tm-warm-border-strong: #fed7aa;
  --tm-warm-border-vivid: #fdba74;
  --tm-warm-bg-strong: #fef3c7;
  --tm-warm-border-pending: #fcd97a;
  --tm-warm-text: #92610a;
  --tm-warm-text-strong: #92400e;
  --tm-gold: #e0a94a;
  --tm-gold-dark: #c6892f;
  --tm-gold-border: #e2c188;
  --tm-gold-border-soft: #efd9a8;
  --tm-gold-bg: #fdf7e8;
  --tm-gold-bg-deep: #fbf0d6;

  /* Rouge (erreurs, suppressions, signalements) */
  --tm-danger-strong: #8f1e17;
  --tm-danger-dark: #a03225;
  --tm-danger-hover: #b3392f;
  --tm-danger-deep: #96271c;
  --tm-danger-text-strong: #991b1b;
  --tm-danger-bg-strong: #fde8e6;
  --tm-danger-border-soft: #f0c9c9;
  --tm-danger-border-mid: #fca5a5;
  --tm-danger-border-warm: #f0c8c2;
  --tm-danger-border-dusty: #d9a49c;

  /* Divers */
  --tm-loading-ink: #1e2b22;
  --tm-loading-sub: #6b7a70;
  --tm-link-on-dark: #bbf7d0;

  /* Vert : deux roles, deux jetons. En clair ils valent la meme chose ; en
     sombre l'encre s'eclaircit alors que le fond reste soutenu, pour que le
     texte blanc pose dessus reste lisible. */
  --tm-primary-ink: #2e8540;        /* vert ecrit : texte, icone, trait */
  --tm-primary-ink-strong: #226633; /* vert ecrit soutenu : titres, survols */
  --tm-tooltip-bg: #1e293b;         /* fond des bulles d'aide (texte blanc) */

  /* Jetons utilises par l'habillage (template.css) */
  --tm-ink-mid: #334155;   /* libelle de bouton secondaire */
  --tm-warm-mid: #b8860b;  /* etat « en attente » */
  --tm-warm-ink: #9a3412;  /* bandeau d'assistance */
}
/* <<< P1-A */

/* >>> P1-B — TYPOGRAPHIE ==================================================
   Charge le serif sur les titres, le sans sur l'interface, et écarte
   réellement les paliers. Spécificité minimale : le template garde la main.
   ========================================================================= */
body {
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-base);
  line-height: var(--tm-lh-body);
  color: var(--tm-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.tm-hero__title,
.tm-form legend,
.tm-adcard__title {
  font-family: var(--tm-font-heading);
  color: var(--tm-ink);
  text-wrap: pretty;
}

h1 {
  font-size: var(--tm-fs-h1);
  line-height: var(--tm-lh-tight);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 var(--tm-space-3);
}

h2 {
  font-size: var(--tm-fs-h2);
  line-height: var(--tm-lh-title);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: var(--tm-space-6) 0 var(--tm-space-3);
}

h3 {
  font-size: var(--tm-fs-h3);
  line-height: 1.35;
  font-weight: 600;
  font-family: var(--tm-font-body);
  margin: var(--tm-space-4) 0 var(--tm-space-2);
}

/* Chapeau de page: la phrase qui suit un h1. Pas de max-width : la largeur est
   déjà bornée par le conteneur (~1200px) → on évite les retours à la ligne
   prématurés qui laissent un grand vide à droite. */
.tm-subtitle,
.tm-lead {
  font-size: var(--tm-fs-lead);
  line-height: 1.55;
  color: var(--tm-muted-strong);
  margin: 0 0 var(--tm-space-5);
}

/* Étiquette de section (LOCALISATION, MESSAGERIES, MON COMPTE...) */
.tm-card-subtitle,
.tm-share__label,
.tm-credits__label,
.tm-eyebrow {
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-muted);
}

/* Textes d'aide: une seule taille sur tout le site (14 px, pas 13) */
.tm-form .form-text,
.tm-form small,
.tm-form .hint,
.tm-hint {
  font-size: var(--tm-fs-sm);
  line-height: 1.5;
  color: var(--tm-muted);
  margin-block: var(--tm-space-2) 0;
}

/* Mesure de lecture confortable pour les blocs de texte long */
.tm-profile__description,
.tm-home-mission p,
.tm-ad__description,
.tm-support__mission p {
  max-width: var(--tm-measure);
}
/* <<< P1-B */

/* >>> P1-C — BOUTONS ======================================================
   Un gabarit, trois tailles, quatre variantes. Aucun dégradé.
   ========================================================================= */
.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-2);
  min-height: 2.75rem;            /* 44 px */
  padding: 0.6875rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tm-btn--primary {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  background-image: none;
  box-shadow: none;
  color: var(--tm-on-accent);
}

.tm-btn--primary:hover,
.tm-btn--primary:focus-visible {
  background: var(--tm-primary-dark);
  border-color: var(--tm-primary-dark);
  color: var(--tm-on-accent);
}

.tm-btn--primary:active { background: var(--tm-primary-800); border-color: var(--tm-primary-800); }

.tm-btn--secondary {
  background: var(--tm-surface);
  border-color: var(--tm-primary-200);
  color: var(--tm-primary-ink-strong);
}

.tm-btn--secondary:hover,
.tm-btn--secondary:focus-visible {
  background: var(--tm-primary-50);
  border-color: var(--tm-primary);
  color: var(--tm-primary-ink-strong);
}

.tm-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tm-muted-strong);
}

.tm-btn--ghost:hover,
.tm-btn--ghost:focus-visible {
  background: var(--tm-bg-sunken);
  border-color: transparent;
  color: var(--tm-text);
}

/* Tailles */
.tm-btn--small {
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--tm-fs-sm);
}

.tm-btn--large {
  min-height: 3rem;
  padding: 0.8125rem 1.5rem;
  font-size: 1rem;
}

.tm-btn--block { width: 100%; }

/* États */
.tm-btn:focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

.tm-btn:disabled,
.tm-btn[disabled] {
  background: var(--tm-bg-sunken);
  border-color: var(--tm-border);
  color: var(--tm-muted-soft);
  opacity: 1;                     /* plus de texte fantôme à 50 % */
  box-shadow: none;
  cursor: not-allowed;
}

/* Lien-action: remplace un second bouton plein quand l'action est secondaire */
.tm-link-action {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  font-weight: 600;
  color: var(--tm-primary-ink-strong);
  text-decoration: none;
}

.tm-link-action::after {
  content: "";
  width: 0.9375rem;
  height: 0.9375rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.18s ease;
}

.tm-link-action:hover::after { transform: translateX(2px); }

/* Lien de retour: flèche à gauche, ton discret */
.tm-link-back {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  font-size: var(--tm-fs-sm);
  color: var(--tm-muted);
  text-decoration: none;
}

.tm-link-back::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tm-link-back:hover { color: var(--tm-text); }
/* <<< P1-C */

/* >>> P1-D — CHAMPS DE FORMULAIRE ========================================= */
.tm-field label,
.tm-form .control-label label,
.tm-form .control-label {
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-sm);
  font-weight: 600;
  color: var(--tm-text);
  margin-block-end: var(--tm-space-2);
}

.tm-field input,
.tm-field select,
.tm-form input[type="text"],
.tm-form input[type="email"],
.tm-form input[type="tel"],
.tm-form input[type="url"],
.tm-form input[type="number"],
.tm-form input[type="search"],
.tm-form select,
.tm-form textarea,
.tm-finder__form textarea,
.tm-welcome__site input,
.tm-referral__link input,
.tm-gift-seeds select,
.tm-review-form__field input,
.tm-review-form__field textarea {
  min-height: 2.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  color: var(--tm-text);
  font-family: var(--tm-font-body);
  font-size: 0.9375rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tm-form textarea,
.tm-finder__form textarea { min-height: 6rem; line-height: 1.55; }

.tm-field:is(input, select):focus,
.tm-form :is(input, select, textarea):focus,
.tm-finder__form textarea:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px var(--tm-primary-glow);
}

.tm-form input::placeholder,
.tm-form textarea::placeholder,
.tm-finder__form textarea::placeholder { color: var(--tm-muted-soft); }

/* Groupe de champs: plus de cadre — un titre et de l'espace suffisent */
.tm-form fieldset {
  border: 0;
  padding: 0;
  background: none;
}

.tm-form legend {
  padding-inline: 0;
  font-size: var(--tm-fs-h2);
  font-weight: 600;
}

.tm-form .control-group { margin-block-end: var(--tm-space-4); }

/* Erreur: bordure + message, jamais une couleur seule */
.tm-form input.invalid,
.tm-form select.invalid,
.tm-form textarea.invalid { border-color: var(--tm-danger); }

.tm-error {
  background: var(--tm-danger-bg);
  border: 1px solid var(--tm-danger-border);
  color: var(--tm-danger-strong);
  border-radius: var(--tm-radius-sm);
  padding: var(--tm-space-3) var(--tm-space-4);
  margin-block: var(--tm-space-4);
}

.tm-form .control-label .star { color: var(--tm-danger); }

/* Case à cocher native lisible (conditions générales, cases isolées) */
.tm-terms input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  accent-color: var(--tm-primary);
  flex: none;
}
/* <<< P1-D */

/* >>> P1-E — PASTILLES (une seule métrique) ===============================
   .tm-badge (pratique) · .tm-chip (affichage) · .form-check (case à cocher)
   · .tm-ads__filter .tm-chip partagent désormais hauteur, rayon, graisse et
   espacement.
   ========================================================================= */
.tm-badge,
.tm-chip,
.tm-form fieldset.checkboxes .form-check,
.tm-ads__filter .tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 1.75rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-pill);
  background: var(--tm-surface);
  color: var(--tm-text);
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-xs);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Le point de famille de pratique: seule couleur porteuse d'information */
.tm-badge::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--tm-badge-color, var(--tm-muted));
  box-shadow: none;
}

/* Pastille « valeur affichée » : teinte verte, texte vert foncé */
.tm-chip {
  border-color: var(--tm-primary-200);
  font-weight: 500;
}

/* Pastilles de statut */
.tm-chip--pending {
  background: var(--tm-warm-bg);
  border-color: var(--tm-warm-border);
  color: var(--tm-warm);
  font-weight: 600;
}

.tm-chip--reported {
  background: var(--tm-danger-bg);
  border-color: var(--tm-danger-border);
  color: var(--tm-danger-strong);
  font-weight: 600;
}

/* Cases à cocher en pastille: état non coché = neutre, coché = vert */
.tm-form fieldset.checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-2);
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}

.tm-form fieldset.checkboxes .form-check {
  background: var(--tm-surface);
  border-color: var(--tm-border);
  color: var(--tm-muted-strong);
  cursor: pointer;
  margin: 0;
}

.tm-form fieldset.checkboxes .form-check:hover {
  background: var(--tm-bg-soft);
  border-color: var(--tm-border-strong);
}

.tm-form fieldset.checkboxes .form-check:has(input:checked) {
  background: var(--tm-primary-50);
  border-color: var(--tm-primary-200);
  color: var(--tm-primary-800);
  font-weight: 500;
}

.tm-form fieldset.checkboxes .form-check::before {
  width: 0.75rem;
  height: 0.75rem;
  opacity: 0.25;
}

.tm-form fieldset.checkboxes .form-check:has(input:checked)::before { opacity: 1; }

.tm-form fieldset.checkboxes .form-check:has(input:focus-visible) {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

/* Sélecteur multiple (choices.js) : mêmes métriques que les pastilles */
.tm-form .choices__inner {
  min-height: 2.75rem;
  border-color: var(--tm-border-strong);
  border-radius: var(--tm-radius-sm);
  padding: 0.3125rem 0.5rem;
  font-size: 0.9375rem;
}

.tm-form .choices__list--multiple .choices__item {
  min-height: 1.75rem;
  padding: 0.3125rem 0.4375rem 0.3125rem 0.75rem;
  font-size: var(--tm-fs-xs);
  font-weight: 600;
}
/* <<< P1-E */

/* >>> P1-F — SURFACES =====================================================
   Une carte = un objet discret et cliquable. Pour organiser une page:
   un titre et de l'espace, jamais un cadre.
   ========================================================================= */
.tm-card,
.tm-surface,
.tm-audience-card,
.tm-service-card,
.tm-donate-card,
.tm-ad,
.tm-review,
.tm-manage-review,
.tm-adcard,
.tm-finder__result,
.tm-seed-pack,
.tm-qr-box {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow-card);
}

.tm-card,
.tm-audience-card,
.tm-service-card,
.tm-donate-card,
.tm-ad,
.tm-review,
.tm-finder__result { padding: 0; }

.tm-audience-card,
.tm-service-card,
.tm-donate-card,
.tm-ad,
.tm-review,
.tm-manage-review,
.tm-finder__result { padding: var(--tm-space-5); }

/* Annonce visuelle: l'image EST l'annonce → bord à bord, aucun cadre blanc
   (doit repasser après le padding générique .tm-ad ci-dessus). */
.tm-ad--visual { padding: 0; }

/* Survol: réservé aux cartes qui sont un lien */
.tm-card:hover,
.tm-audience-card:hover {
  border-color: var(--tm-primary-200);
  box-shadow: var(--tm-shadow-md);
  transform: translateY(-1px);
}

.tm-card,
.tm-audience-card { transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }

.tm-card__link:focus-visible,
.tm-ad__link:focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
  border-radius: var(--tm-radius);
}

/* Fiche mise en avant: un liseré, pas une double bordure */
.tm-card--featured {
  border-color: var(--tm-primary);
  box-shadow: var(--tm-shadow-card);
}

/* Bande calme: regrouper sans encadrer */
.tm-surface--soft,
.tm-search-form,
.tm-reviews__summary,
.tm-review-form__ratings {
  background: var(--tm-bg-soft);
  border: 0;
  border-radius: var(--tm-radius);
  box-shadow: none;
}

/* Bande teintée: réservée aux blocs « graines / don / assistant » */
.tm-surface--accent,
.tm-seeds,
.tm-seed-shop,
.tm-support__seeds,
.tm-wallet-balance,
.tm-review-invite,
.tm-pricing-ai {
  background: var(--tm-primary-50);
  border: 1px solid var(--tm-primary-200);
  border-radius: var(--tm-radius);
  box-shadow: none;
}

/* Rappel d'état (brouillon / en validation / publiée) */
.tm-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-radius: var(--tm-radius);
  border: 1px solid var(--tm-border);
  background: var(--tm-bg-soft);
  margin-block-end: var(--tm-space-5);
  font-size: 0.9375rem;
}

.tm-status--published { background: var(--tm-primary-50); border-color: var(--tm-primary-200); }
.tm-status--pending { background: var(--tm-warm-bg); border-color: var(--tm-warm-border); }
.tm-status--draft { background: var(--tm-bg-soft); border-color: var(--tm-border); }

.tm-owner-bar {
  background: var(--tm-warm-bg);
  border-color: var(--tm-warm-border);
  border-radius: var(--tm-radius);
  padding: var(--tm-space-3) var(--tm-space-4);
}
/* <<< P1-F */

/* >>> P1-G — ÉTAT VIDE (patron unique) ====================================
   Icône en cercle vert pâle · titre serif · UNE phrase · UNE action.
   Sert pour: annonces, annuaire sans résultat, avis, absences.
   ========================================================================= */
.tm-empty {
  text-align: center;
  background: var(--tm-bg-soft);
  border: 1px dashed var(--tm-border-strong);
  border-radius: var(--tm-radius);
  padding: var(--tm-space-7) var(--tm-space-5);
  margin: var(--tm-space-5) 0;
  color: var(--tm-muted);
}

.tm-empty__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--tm-space-4);
  border-radius: 50%;
  background: var(--tm-primary-100);
  position: relative;
}

.tm-empty .tm-empty__title {
  font-family: var(--tm-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tm-ink);
  max-width: none;
  margin: 0 auto var(--tm-space-2);
}

.tm-empty p {
  margin: 0 auto var(--tm-space-5);
  max-width: 44ch;
  color: var(--tm-muted);
}

.tm-empty p:last-child { margin-bottom: 0; }
/* <<< P1-G */

/* >>> P1-H — ÉTATS D'INTERACTION GLOBAUX ================================== */
:where(a):focus-visible,
:where(button, [role="button"], summary, .tm-tab, .tm-share-btn, .tm-star):focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

::selection { background: var(--tm-primary-100); color: var(--tm-primary-900); }

a { color: var(--tm-primary-ink-strong); }
a:hover { color: var(--tm-primary-800); }
/* <<< P1-H */

/* >>> P2-A — ACCUEIL ======================================================
   Le motif de fond disparaît. Le hero devient une bannière calme, alignée
   à gauche, sur deux colonnes quand l'article utilise .tm-hero--split
   (voir CHANGES.md § Accueil (article — via admin)).
   ========================================================================= */
.tm-home .tm-hero,
.tm-hero {
  position: relative;
  overflow: visible;
  text-align: left;
  background: linear-gradient(175deg, var(--tm-primary-50) 0%, var(--tm-surface) 55%, var(--tm-surface) 100%);
  border-radius: var(--tm-radius);
  padding: var(--tm-space-7) var(--tm-space-6) var(--tm-space-7);
  margin-bottom: var(--tm-section);
}

/* Retrait de la décoration: arbre, halos, lignes topographiques, épingle */
.tm-hero::before { content: none; }
.tm-hero__topo,
.tm-hero__blob,
.tm-hero__pin { display: none; }

.tm-hero__eyebrow {
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tm-primary-ink-strong);
  margin: 0 0 var(--tm-space-4);
}

.tm-home .tm-hero__title,
.tm-hero h1 {
  font-family: var(--tm-font-heading);
  font-size: var(--tm-fs-display);
  font-weight: 600;
  line-height: var(--tm-lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--tm-space-4);
  max-width: 22ch;
}

/* « naturellement » : vert franc, sans soulignement animé */
.tm-hero__title em {
  font-style: normal;
  color: var(--tm-primary-ink);
  background: none;
  animation: none;
}

.tm-home .tm-hero__subtitle,
.tm-hero__subtitle {
  font-size: var(--tm-fs-lead);
  line-height: 1.55;
  color: var(--tm-muted-strong);
  max-width: 46ch;
  margin: 0 0 var(--tm-space-5);
}

.tm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tm-space-4);
}

/* Hero deux colonnes: promesse à gauche, assistant à droite */
@media (min-width: 900px) {
  .tm-hero--split {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: var(--tm-space-7);
    align-items: start;
  }
}

/* L'assistant: carte blanche posée dans le hero, plus de chevauchement */
.tm-home .tm-finder,
.tm-finder {
  position: static;
  margin: 0;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: var(--tm-space-5);
  box-shadow: 0 6px 22px -10px rgba(15, 23, 42, 0.16);
  animation: none;
}

.tm-finder h2 { margin: 0 0 var(--tm-space-2); font-size: 1.25rem; }
.tm-finder > p { margin: 0 0 var(--tm-space-4); color: var(--tm-muted); font-size: var(--tm-fs-sm); }

.tm-finder__form {
  display: grid;
  gap: var(--tm-space-3);
  margin-top: 0;
}

.tm-finder__form textarea { min-width: 0; width: 100%; }
.tm-finder__form .tm-btn { justify-self: end; }

/* Exemples cliquables sous le champ de l'assistant (markup, cf. CHANGES.md) */
.tm-finder__examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-finder__example {
  min-height: 1.75rem;
  padding: 0.3125rem 0.75rem;
  line-height: 1.2;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-pill);
  background: var(--tm-bg-soft);
  color: var(--tm-muted-strong);
  font: inherit;
  font-size: var(--tm-fs-xs);
  cursor: pointer;
}

.tm-finder__example:hover { background: var(--tm-surface); border-color: var(--tm-border-strong); }

/* Deux entrées: colonnes séparées par de l'espace, filet de 40 px en tête */
.tm-audiences-grid {
  gap: var(--tm-space-7);
  margin-bottom: var(--tm-section);
}

.tm-audience-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: none;
  gap: var(--tm-space-3);
}

.tm-audience-card:hover { transform: none; box-shadow: none; }

.tm-audience-card::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--tm-border);
  margin-bottom: var(--tm-space-3);
}

.tm-audience-card:first-child::before { background: var(--tm-primary); }
.tm-audience-card__icon { display: none; }
.tm-audience-card h2 { margin: 0; font-size: var(--tm-fs-h2); }

.tm-home-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--tm-space-2);
  line-height: 1.5;
}

.tm-home-list li { display: flex; gap: var(--tm-space-2); }

.tm-home-list li::before {
  content: "";
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.15rem;
  background-color: var(--tm-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Mission: bande calme pleine largeur, phrase d'accroche en serif */
.tm-home-mission {
  max-width: none;
  margin: var(--tm-section) 0;
  padding: var(--tm-space-7) var(--tm-space-6);
  text-align: left;
  background: var(--tm-bg-soft);
  border: 0;
  border-radius: var(--tm-radius);
}

.tm-home-mission h2 { margin: 0 0 var(--tm-space-4); color: var(--tm-ink); }
.tm-home-mission p { margin: 0 0 var(--tm-space-4); max-width: var(--tm-measure); color: var(--tm-muted-strong); }
.tm-home-mission p:first-of-type {
  font-family: var(--tm-font-heading);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--tm-ink);
  max-width: 60ch;
}
.tm-home-mission p:last-child { margin-bottom: 0; }

/* Illustration « raison d'être » : image encadrée à droite (desktop) */
@media (min-width: 860px) {
  .tm-home-mission {
    position: relative;
    padding-right: 460px;
    min-height: 340px;
  }
  .tm-home-mission::after {
    content: "";
    position: absolute;
    top: var(--tm-space-6);
    right: var(--tm-space-6);
    bottom: var(--tm-space-6);
    width: 400px;
    border-radius: var(--tm-radius);
    background: url("/images/vitanexo/mission-accueil.jpg") center / cover no-repeat;
    background-image: image-set(url("/images/vitanexo/mission-accueil.webp") type("image/webp"), url("/images/vitanexo/mission-accueil.jpg") type("image/jpeg"));
    box-shadow: 0 10px 30px -16px rgba(15, 23, 42, 0.45);
  }
}

/* Annonces: titre à gauche, action à droite, plus de centrage */
.tm-home-ads {
  text-align: left;
  border-top: 0;
  padding-top: 0;
  margin: var(--tm-section) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tm-space-6);
  flex-wrap: wrap;
}

.tm-home-ads h2 { margin: 0 0 var(--tm-space-2); }
.tm-home-ads .tm-subtitle { margin: 0; max-width: none; }

/* Encart don: la seule note ambre de la page */
.tm-home-give {
  max-width: none;
  margin: 0 0 var(--tm-section);
  padding: var(--tm-space-4) var(--tm-space-5);
  border: 1px solid var(--tm-warm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-warm-bg);
  gap: var(--tm-space-4);
}

.tm-home-give__text { color: var(--tm-warm-strong); font-size: 0.9375rem; }
.tm-home-give .tm-btn--secondary { border-color: var(--tm-gold-border); color: var(--tm-warm); }
.tm-home-give .tm-btn--secondary:hover { background: var(--tm-surface); border-color: var(--tm-warm); }
/* Mot du fondateur en tete d'accueil : carte chaleureuse (degrade creme ->
   blanc, ombre douce, medaillon dore), sous-titre en petites capitales,
   citation en police de titre. Colle au bandeau d'installation. */
.tm-home-word {
  margin-bottom: 1.25rem; align-items: flex-start; gap: 1.1rem;
  padding: 1.2rem 1.5rem 1.15rem;
  border: 1px solid var(--tm-gold-border-soft, var(--tm-warm-border));
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tm-warm-bg) 0%, var(--tm-surface) 70%);
  box-shadow: var(--tm-shadow-card);
}
.tm-home-word .tm-home-give__icon {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; margin-top: 0.1rem; border-radius: 50%;
  background: var(--tm-gold-bg, var(--tm-warm-bg-strong));
  border: 1px solid var(--tm-gold-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.tm-home-word .tm-home-give__icon .tm-ico { display: none; }
/* Icone en SVG (la police d'icones maison n'a pas ce glyphe) : coeur dans une main, teinte doree. */
.tm-home-word .tm-home-give__icon::before {
  content: ""; display: block; width: 26px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11.5 8.8 8.3a2.3 2.3 0 0 1 3.2-3.2 2.3 2.3 0 0 1 3.2 3.2z'/%3E%3Cpath d='M3 14.5h3.5l3 2.5h4.5a1.5 1.5 0 0 1 0 3H9'/%3E%3Cpath d='M14 17.2l4.4-1.6a1.6 1.6 0 0 1 1.3 2.9L14.5 21H9l-3-1.5H3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tm-home-word .tm-home-give__text { margin: 0; color: var(--tm-text); }
.tm-home-word .tm-hero__eyebrow { margin: 0 0 0.35rem; color: var(--tm-warm); }
.tm-home-word__quote {
  margin: 0; font-family: var(--tm-font-heading); font-size: 1.15rem; line-height: 1.5;
  color: var(--tm-text);
}
.tm-home-word__sign { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--tm-muted); }
.tm-home-word__sign::before { content: "— "; }
@media (max-width: 640px) {
  .tm-home-word { padding: 1rem 1.1rem; gap: 0.8rem; }
  .tm-home-word .tm-home-give__icon { width: 40px; height: 40px; }
  .tm-home-word .tm-home-give__icon::before { width: 22px; height: 22px; }
  .tm-home-word__quote { font-size: 1.05rem; }
}
.tm-home-word .tm-home-give__text em { color: var(--tm-muted); }

/* Confidentialité de l'assistant: liste discrète, sans cadre vert */
.tm-finder__privacy-list {
  padding: var(--tm-space-3) 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--tm-border);
  border-radius: 0;
}
/* <<< P2-A */

/* >>> P2-B — ANNUAIRE =====================================================
   Recherche sur une ligne, carte plafonnée, résultats pilotables.
   ========================================================================= */
.tm-search-form {
  padding: var(--tm-space-4) var(--tm-space-5);
  margin-block-end: var(--tm-space-5);
}

.tm-search-grid {
  gap: var(--tm-space-3);
  margin-block-end: var(--tm-space-3);
  align-items: end;
}

/* Une seule ligne au-delà de 1000 px: Nom · Pratique · Lieu · Rayon · [Rechercher] */
@media (min-width: 1000px) {
  .tm-search-grid {
    grid-template-columns: 1.1fr 1.3fr 1.1fr 0.7fr auto;
  }

  /* Filtres secondaires (dans le <details>) : trois colonnes régulières */
  .tm-search-grid--more {
    grid-template-columns: repeat(3, 1fr);
  }

  .tm-search-form .tm-btn--primary { margin: 0; }
}

.tm-field label {
  font-size: var(--tm-fs-xs);
  font-weight: 600;
  color: var(--tm-muted-strong);
}

/* Filtres secondaires repliés (markup <details>, cf. CHANGES.md) */
.tm-search-more { margin-top: var(--tm-space-3); }

.tm-search-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
  font-size: var(--tm-fs-sm);
  font-weight: 600;
  color: var(--tm-primary-ink-strong);
  cursor: pointer;
  list-style: none;
}

.tm-search-more > summary::-webkit-details-marker { display: none; }
.tm-search-more[open] > summary { margin-bottom: var(--tm-space-3); }

/* Barre de résultats: compteur + tri */
.tm-results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tm-space-5);
  flex-wrap: wrap;
  padding-bottom: var(--tm-space-3);
  margin-bottom: var(--tm-space-5);
  border-bottom: 1px solid var(--tm-border);
  font-size: 0.9375rem;
  color: var(--tm-muted);
}

.tm-results-bar__count { color: var(--tm-text); }
.tm-results-bar__count strong { font-weight: 600; }

.tm-results-bar__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-2);
}

.tm-results-bar__sort select {
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  color: var(--tm-text);
  font: inherit;
  font-size: var(--tm-fs-sm);
  font-weight: 600;
}

/* Carte Leaflet: hauteur maîtrisée, respiration au-dessus des résultats */
.tm-map { height: clamp(240px, 32vh, 320px); }
.tm-therapists .tm-map { margin-bottom: var(--tm-space-4); }

/* Résultats */
.tm-cards { gap: var(--tm-space-4); }

@media (min-width: 768px) {
  .tm-cards { grid-template-columns: repeat(2, 1fr); }
}

.tm-card__link {
  gap: var(--tm-space-4);
  padding: var(--tm-space-4);
  align-items: flex-start;
}

.tm-card__photo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--tm-primary-100);
}

/* Sans photo: initiales dans un cercle vert pâle (markup, cf. CHANGES.md) */
.tm-card__initials {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: var(--tm-primary-100);
  color: var(--tm-primary-ink-strong);
  font-family: var(--tm-font-heading);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tm-card__body { gap: var(--tm-space-1); flex: 1; }

.tm-card__name {
  font-size: 1.03125rem;
  font-weight: 600;
  color: var(--tm-ink);
}

.tm-card__business,
.tm-card__place {
  font-size: var(--tm-fs-sm);
  color: var(--tm-muted);
}

.tm-card__distance {
  font-size: var(--tm-fs-xs);
  color: var(--tm-muted);
  margin-left: auto;
  flex: none;
}

.tm-card__practices { gap: var(--tm-space-2); margin-top: var(--tm-space-2); }

/* Reste des pratiques non affichées: « +2 » en texte, pas en pastille */
.tm-card__more {
  align-self: center;
  font-size: var(--tm-fs-xs);
  color: var(--tm-muted);
}

/* Filtres actifs affichés au-dessus des résultats (pastille refermable) */
.tm-filters-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tm-space-2);
  margin: 0 0 var(--tm-space-4);
}

.tm-filters-active__clear {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--tm-fs-sm);
  color: var(--tm-muted);
  text-decoration: underline;
  cursor: pointer;
}

/* VARIANTE B (optionnelle) — liste à gauche, carte collante à droite.
   Demande une retouche du gabarit therapists/default.php: envelopper la liste
   dans .tm-therapists__list et la carte dans .tm-therapists__map, et ajouter
   la classe .tm-therapists--split sur le conteneur de la vue.
   Ne pas coller ce sous-bloc si vous retenez la variante A. */
.tm-therapists--split { display: grid; gap: var(--tm-space-5); align-items: start; }

@media (min-width: 1000px) {
  .tm-therapists--split { grid-template-columns: minmax(0, 1fr) 0.82fr; }
  .tm-therapists--split .tm-therapists__list { min-width: 0; }
  .tm-therapists--split .tm-therapists__map { position: sticky; top: 84px; }
  /* Liste en 2 colonnes de cartes compactes ; les fiches « mise en avant »
     occupent toute la largeur pour ressortir. */
  .tm-therapists--split .tm-cards { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
  .tm-therapists--split .tm-cards .tm-card--featured { grid-column: 1 / -1; }
  .tm-therapists--split .tm-card__link { padding: 0.75rem; gap: 0.7rem; }
  .tm-therapists--split .tm-card__photo,
  .tm-therapists--split .tm-card__initials { width: 46px; height: 46px; font-size: 1.05rem; }
  .tm-therapists--split .tm-map { height: 420px; }
}

/* Résultat survolé ↔ pin de la carte (JS : ajouter/retirer .is-hovered) */
.tm-card.is-hovered { border-color: var(--tm-primary); box-shadow: var(--tm-shadow-md); }
/* <<< P2-B */

/* >>> P2-C — FICHE THÉRAPEUTE ============================================= */
.tm-profile__header {
  gap: var(--tm-space-5);
  align-items: flex-start;
  margin-block-end: var(--tm-space-6);
}

.tm-profile__photo,
.tm-profile__initials {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  flex: none;
}

.tm-profile__initials {
  display: grid;
  place-items: center;
  background: var(--tm-primary-100);
  color: var(--tm-primary-ink-strong);
  font-family: var(--tm-font-heading);
  font-size: 2rem;
  font-weight: 600;
}

.tm-profile__identity { flex: 1 1 320px; min-width: 0; }

.tm-profile h1 { font-size: clamp(1.75rem, 3.4vw, 2.125rem); margin: 0 0 var(--tm-space-2); }

.tm-profile__business {
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-lead);
  font-weight: 400;
  color: var(--tm-muted);
  margin: 0 0 var(--tm-space-4);
}

.tm-profile__practices,
.tm-audiences { gap: var(--tm-space-2); margin: 0 0 var(--tm-space-3); }

.tm-profile__languages { font-size: var(--tm-fs-sm); color: var(--tm-muted); margin: 0; }

/* Carte de droite : publics, modes, langues — une ligne par categorie, au-dessus du contact. */
.tm-profile__facts { display: grid; gap: 0.45rem; margin: 0 0 1.1rem; padding: 0 0 0.9rem; border-bottom: 1px solid var(--tm-border); }
.tm-profile__fact { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.6rem; }
.tm-profile__fact dt { margin: 0; font-size: var(--tm-fs-sm); color: var(--tm-muted); }
.tm-profile__fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tm-profile__fact .tm-chip { padding: 0.15rem 0.55rem; font-size: 0.82rem; }
.tm-flags { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tm-flag { display: inline-flex; align-items: center; line-height: 0; }
.tm-flag svg { display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18); }
.tm-flag--code { height: 16px; padding: 0 0.4rem; border-radius: 3px; background: var(--tm-bg-soft); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.18); font-size: 0.7rem; font-weight: 700; line-height: 16px; color: var(--tm-text); }

/* Actions de contact en tête de fiche (markup, cf. CHANGES.md) */
.tm-profile__cta {
  display: flex;
  flex-direction: column;
  gap: var(--tm-space-2);
  margin-left: auto;
  flex: none;
}

/* Tarifs: lignes régulières, prix aligné, action discrète */
.tm-pricing { gap: 0; }

.tm-pricing__row {
  align-items: center;
  gap: var(--tm-space-4);
  padding: var(--tm-space-3) 0;
  border-bottom: 1px solid var(--tm-border);
}

.tm-pricing__row:last-child { border-bottom: 0; }
.tm-pricing__dots { display: none; }         /* les pointillés cèdent au filet */
.tm-pricing__title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tm-pricing__price { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: auto; }

.tm-pricing__ask-btn {
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  font-size: var(--tm-fs-xs);
  border-color: var(--tm-border);
  color: var(--tm-muted-strong);
}

.tm-pricing__ask-btn:hover { background: var(--tm-bg-soft); border-color: var(--tm-border-strong); color: var(--tm-text); }

.tm-payments { gap: var(--tm-space-2); margin-top: var(--tm-space-4); }
.tm-payments__label,
.tm-payments__note { font-size: var(--tm-fs-sm); color: var(--tm-muted); }

/* Horaires: deux colonnes, jour courant surligné */
.tm-schedule { max-width: none; width: 100%; }

.tm-schedule th,
.tm-schedule td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--tm-border);
  font-size: 0.9375rem;
}

.tm-schedule td { font-variant-numeric: tabular-nums; color: var(--tm-muted-strong); }
.tm-schedule th { font-weight: 600; color: var(--tm-text); width: 7rem; }
.tm-schedule__closed { color: var(--tm-muted-soft); font-style: normal; }
.tm-schedule tr.is-today th,
.tm-schedule tr.is-today td { background: var(--tm-primary-50); color: var(--tm-primary-800); }

/* Carte de contact: hiérarchie interne, boutons de même largeur */
.tm-profile__contact--card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: var(--tm-space-5);
  box-shadow: var(--tm-shadow-card);
}

.tm-profile__contact--card h2 {
  margin: 0 0 var(--tm-space-4);
  font-family: var(--tm-font-body);
  font-size: var(--tm-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-muted);
}

.tm-contact-pref,
.tm-contact-prefs {
  display: flex;
  align-items: flex-start;
  gap: var(--tm-space-2);
  padding: var(--tm-space-3);
  margin: 0 0 var(--tm-space-4);
  border: 0;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-primary-50);
  color: var(--tm-primary-800);
  font-size: var(--tm-fs-sm);
  font-weight: 400;
  line-height: 1.5;
}

.tm-contact-list { gap: var(--tm-space-3); }
.tm-contact-icon { color: var(--tm-muted); }

.tm-reveal__btn {
  min-height: 1.75rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--tm-radius-sm);
  border-color: var(--tm-border);
  color: var(--tm-muted-strong);
  font-size: var(--tm-fs-xs);
}

.tm-reveal__btn:hover,
.tm-reveal__btn:focus-visible { background: var(--tm-bg-soft); border-color: var(--tm-border-strong); color: var(--tm-text); }

.tm-profile__contact--card .tm-profile__links { gap: var(--tm-space-2); }
.tm-btn--brand { min-height: 2.25rem; padding: 0.5rem 0.75rem; font-size: var(--tm-fs-sm); }

/* Partage: discret, en fin de fiche */
.tm-share { margin-top: var(--tm-section); padding-top: var(--tm-space-5); }
.tm-share__buttons { gap: var(--tm-space-2); }

.tm-share-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--tm-radius-sm);
  color: var(--tm-muted);
}

.tm-share-btn:hover,
.tm-share-btn:focus-visible {
  border-color: var(--tm-border-strong);
  background: var(--tm-bg-soft);
  color: var(--tm-text);
  box-shadow: none;
  transform: none;
}

.tm-share-btn .tm-brand-icon { width: 1.0625rem; height: 1.0625rem; }

/* Avis: note en gros, étoiles ambre */
.tm-reviews__summary { padding: var(--tm-space-5); gap: var(--tm-space-5) var(--tm-space-7); }
.tm-reviews__score { font-family: var(--tm-font-heading); font-size: 1.875rem; font-weight: 600; color: var(--tm-ink); }
.tm-star-static.is-full { color: var(--tm-star); }
.tm-star.is-on { color: var(--tm-star); }
.tm-review__reply { background: var(--tm-primary-50); border-left-color: var(--tm-primary); }
/* <<< P2-C */

/* >>> P2-D — INSCRIPTION / OTP ============================================ */
.tm-register { max-width: 40rem; } /* 640 px : formulaire plus aere (27.5rem etait etroit), demande user 2026-09-17 */

.tm-steps {
  max-width: none;
  margin: 0 0 var(--tm-space-7);
  gap: 0;
}

.tm-steps__item { font-size: var(--tm-fs-xs); gap: var(--tm-space-2); }

.tm-steps__num {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--tm-fs-xs);
  border-width: 1.5px;
}

.tm-steps__item.is-active .tm-steps__num { box-shadow: 0 0 0 4px var(--tm-primary-glow); }
.tm-steps__item.is-done .tm-steps__num { background: var(--tm-primary-100); }
.tm-steps__item.is-done .tm-steps__num::after { -webkit-mask-size: 0.8125rem; mask-size: 0.8125rem; }

.tm-steps__item:not(:first-child)::before {
  top: 0.875rem;
  right: calc(50% + 1.15rem);
  left: calc(-50% + 1.15rem);
  height: 2px;
}

.tm-otp-step { text-align: left; max-width: 27.5rem; margin: 0; }
.tm-otp-step h2 { font-size: var(--tm-fs-h1); margin: 0 0 var(--tm-space-2); }
.tm-otp-step .tm-subtitle { margin-bottom: var(--tm-space-5); font-size: var(--tm-fs-base); }

.tm-otp-icon,
.tm-consent-dialog__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--tm-primary-100);
  box-shadow: none;
  margin: 0 0 var(--tm-space-4);
}

.tm-otp-icon::after,
.tm-consent-dialog__icon::after { background-color: var(--tm-primary-dark); }

.tm-otp { justify-content: flex-start; gap: var(--tm-space-2); }

.tm-otp__digit {
  max-width: 3rem;
  height: 3.5rem;
  border-width: 1px;
  border-color: var(--tm-border-strong);
  border-radius: var(--tm-radius-sm);
  font-family: var(--tm-font-body);
}

.tm-otp__digit.is-filled { background: var(--tm-primary-50); }
.tm-code-input { border-color: var(--tm-border-strong); border-radius: var(--tm-radius-sm); }
.tm-terms { gap: var(--tm-space-3); margin-block: var(--tm-space-4); font-size: 0.9375rem; }
/* <<< P2-D */

/* >>> P2-E — MON ESPACE (onglets) ========================================= */
.tm-tabs {
  gap: 0;
  margin: 0 0 var(--tm-space-6);
  border-bottom: 1px solid var(--tm-border);
}

.tm-tab {
  /* Resserre pour tenir sur une ligne avec 8-9 onglets (Produits ajoute en 2026-09). */
  padding: var(--tm-space-3) 0.65rem;
  font-family: var(--tm-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tm-muted-strong);
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tm-tab:hover { background: none; color: var(--tm-text); border-bottom-color: var(--tm-border-strong); }

.tm-tab.is-active {
  background: none;
  color: var(--tm-primary-ink-strong);
  font-weight: 600;
  border-bottom-color: var(--tm-primary);
}

.tm-tab:focus-visible { outline: 2px solid var(--tm-primary); outline-offset: -2px; }

/* Modules de la colonne latérale: étiquette + valeur, pas de cadre lourd */
.tm-manage-mod,
.tm-account-mod {
  padding: var(--tm-space-5) 0;
  border: 0;
  border-top: 1px solid var(--tm-border);
  background: none;
}

.tm-manage-mod:first-child,
.tm-account-mod:first-child { border-top: 0; padding-top: 0; }

/* Barre d'enregistrement: toujours atteignable */
.tm-form-actions {
  margin-block: var(--tm-space-6) 0;
  padding-top: var(--tm-space-5);
  border-top: 1px solid var(--tm-border);
}

/* Import IA : encart teinté discret, bouton secondaire */
.tm-pricing-ai { border-style: solid; padding: var(--tm-space-4); }
.tm-pricing-ai__label { font-size: var(--tm-fs-sm); font-weight: 600; margin-bottom: var(--tm-space-2); }
.tm-ai-generate { gap: var(--tm-space-3); margin: 0 0 var(--tm-space-4); }

/* Éditeur de présentation */
.tm-editor { border-color: var(--tm-border-strong); border-radius: var(--tm-radius-sm); }
.tm-editor__toolbar { background: var(--tm-bg-soft); border-color: var(--tm-border); padding: var(--tm-space-2) var(--tm-space-2); }
.tm-editor__btn { border-radius: 6px; }
.tm-editor__btn.is-active { background: var(--tm-primary-50); border-color: var(--tm-primary-200); color: var(--tm-primary-ink-strong); }

/* Grille des horaires: lignes lisibles */
.tm-day-row { border-bottom-color: var(--tm-border); padding-block: var(--tm-space-2); }
.tm-day-row__slot-label { font-size: var(--tm-fs-xs); }
.tm-day-copy { border-radius: var(--tm-radius-sm); border-color: var(--tm-border); font-size: var(--tm-fs-xs); }
/* <<< P2-E */

/* >>> P2-G — ANNONCES ET GRAINES ========================================== */
.tm-ads__filter { gap: var(--tm-space-2); margin: var(--tm-space-4) 0 var(--tm-space-5); }
.tm-ads__filter .tm-chip { background: var(--tm-surface); border-color: var(--tm-border); color: var(--tm-muted-strong); cursor: pointer; }
.tm-ads__filter .tm-chip:hover { background: var(--tm-bg-soft); }
.tm-ads__filter .tm-chip.is-active { background: var(--tm-primary-50); border-color: var(--tm-primary-200); color: var(--tm-primary-800); font-weight: 600; }

/* Gouttières resserrées: la mosaïque se lit comme un bloc dense, les écarts
   de taille sautent moins aux yeux. */
.tm-ads__list--grid { gap: var(--tm-space-2); }

/* ALIGNEMENT PARFAIT (4 colonnes) — seule disposition où un 1×1 et un 2×1
   partagent une rangée. RATIO EXACT du gabarit sur chaque format → l'image
   créée par le graphiste s'affiche SANS AUCUN ROGNAGE (Standard 600×400 = 3:2,
   Large 1200×400 = 3:1, Bannière 2400×600 = 4:1). NB : léger décalage de hauteur
   1×1/2×1 sur une même rangée (gap/3 ≈ 3px) — acceptable, la fidélité prime. */
.tm-ads__list--grid .tm-ad { aspect-ratio: 3 / 2; height: auto; align-self: start; }
.tm-ads__list--grid .tm-ad--2x1 { aspect-ratio: 3 / 1; }
.tm-ads__list--grid .tm-ad--4x1 { aspect-ratio: 4 / 1; }

/* 2 puis 1 colonne: aucune rangée mixte (un 2×1/4×1 occupe toute la largeur,
   les 1×1 vont par paires identiques) → on rétablit les ratios exacts, zéro
   rognage, toujours aligné. */
@media (max-width: 800px) {
  .tm-ads__list--grid .tm-ad { aspect-ratio: 3 / 2; height: auto; }
  .tm-ads__list--grid .tm-ad--2x1 { aspect-ratio: 3 / 1; }
}

/* Effet de filtre: fondu croisé de la grille entière. Elle s'estompe, se
   réagence PENDANT qu'elle est invisible (donc aucun saut de cartes visible),
   puis réapparaît en douceur. */
.tm-ads__list--grid { transition: opacity 0.22s ease; will-change: opacity; }
.tm-ads__list--grid.is-switching { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tm-ads__list--grid { transition: none; }
}
.tm-ad__title { font-family: var(--tm-font-heading); font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--tm-space-2); }
.tm-ad__dates,
.tm-ad__by { font-size: var(--tm-fs-sm); color: var(--tm-muted); }
.tm-ad__price { font-weight: 600; }

.tm-ad__format {
  font-family: var(--tm-font-mono);
  font-size: 0.6875rem;
  border-radius: 4px;
  border-color: var(--tm-border);
  background: var(--tm-bg-soft);
  color: var(--tm-muted);
}

/* Les grands formats ne changent plus de couleur, seulement de taille */
.tm-ad--2x2,
.tm-ad--4x1 { background: var(--tm-surface); border-color: var(--tm-border); }

/* Correctif 1 — le descriptif était fondu en transparence sur sa dernière
   ligne par un mask-image, y compris quand le texte n'est PAS tronqué : une
   description de deux lignes voyait sa deuxième ligne grisée sans raison.
   On coupe proprement à la ligne (line-clamp) et on retire le masque. */
.tm-ads__list--grid .tm-ad__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-mask-image: none;
  mask-image: none;
}

.tm-ads__list--grid .tm-ad--2x1 .tm-ad__description,
.tm-ads__list--grid .tm-ad--4x1 .tm-ad__description {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Correctif 2 — entre 641 et 1000 px la grille passe à 2 colonnes, mais chaque
   .tm-ad garde aspect-ratio: 3/2 : une annonce 2x2 occupe alors toute la
   largeur sur ~760 px de haut, presque vide. La règle qui existe déjà à
   1 colonne (hauteur naturelle pour les annonces texte) s'applique aussi ici ;
   seules les annonces visuelles gardent le ratio de leur image. */
@media (min-width: 641px) and (max-width: 1000px) {
  .tm-ads__list--grid .tm-ad:not(.tm-ad--visual) { aspect-ratio: auto; }
  .tm-ads__list--grid .tm-ad--2x2 { grid-row: auto; }
  .tm-ads__list--grid .tm-ad:not(.tm-ad--visual) .tm-ad__description {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
  }
}

/* Graines: ambre, jamais vert (le vert reste l'action) */
.tm-seeds,
.tm-seed-shop,
.tm-support__seeds,
.tm-wallet-balance {
  background: var(--tm-warm-bg);
  border-color: var(--tm-warm-border);
}

.tm-seeds__text,
.tm-wallet-balance__value { color: var(--tm-warm-strong); }
.tm-credits { background: var(--tm-warm-bg); border-color: var(--tm-warm-border); border-radius: var(--tm-radius); }
.tm-credits__value { font-family: var(--tm-font-heading); font-weight: 600; color: var(--tm-warm-strong); }
.tm-wallet-table__amount.is-plus { color: var(--tm-primary-ink-strong); }
.tm-wallet-table__amount.is-minus { color: var(--tm-danger); }

/* Dons: trois colonnes de même poids */
.tm-donate-cards { gap: var(--tm-space-4); }
.tm-donate-card { padding: var(--tm-space-5); text-align: left; }
.tm-donate-card h3 { margin: 0 0 var(--tm-space-3); color: var(--tm-ink); }
.tm-donate-card__iban { font-family: var(--tm-font-mono); font-size: var(--tm-fs-sm); }
.tm-support__mission,
.tm-support__donate,
.tm-support__seeds,
.tm-support__other { max-width: none; margin: 0 0 var(--tm-section); }
/* <<< P2-G */

/* >>> P3-A — DIALOGUES, CHARGEMENT, DÉTAILS =============================== */
.tm-dialog,
.tm-qr-dialog,
.tm-consent-dialog { border-radius: var(--tm-radius); box-shadow: var(--tm-shadow-pop); }

.tm-dialog__title { font-family: var(--tm-font-heading); font-size: 1.25rem; font-weight: 600; }
.tm-dialog__input { border-color: var(--tm-border-strong); border-radius: var(--tm-radius-sm); background: var(--tm-surface); }
.tm-consent-dialog,
.tm-qr-dialog { text-align: left; }
.tm-consent-dialog__actions { justify-content: flex-end; }
/* Fenetre « fiche prete » : « Plus tard » et « Completer d'abord » a 50 %,
   « Soumettre a validation » sur toute la largeur (demande du user, 2026-09-17). */
#tm-ready-dialog .tm-consent-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; }
#tm-ready-dialog .tm-consent-dialog__actions > form { grid-column: 1 / -1; display: flex; }
#tm-ready-dialog .tm-consent-dialog__actions .tm-btn { width: 100%; justify-content: center; }
.tm-consent-dialog h3 { font-family: var(--tm-font-heading); font-size: 1.25rem; }

.tm-dialog__close { background: var(--tm-bg-sunken); color: var(--tm-text); box-shadow: none; }
.tm-dialog__close:hover { background: var(--tm-border); transform: none; }

.tm-loading__box { border-radius: var(--tm-radius); }
.tm-loading__text { font-family: var(--tm-font-body); font-weight: 600; }
.tm-btn--loading::after { border-top-color: currentColor; border-color: rgba(255, 255, 255, 0.35); }

/* Sous-formulaires répétables: lignes calmes */
.tm-form .subform-repeatable thead th { font-size: var(--tm-fs-xs); color: var(--tm-muted); }
.tm-form .subform-repeatable .group-add,
.tm-form .subform-repeatable .group-remove,
.tm-form .subform-repeatable .group-move { border-radius: var(--tm-radius-sm); border-color: var(--tm-border); }
.tm-form .subform-repeatable .group-remove { color: var(--tm-danger); }
.tm-form .subform-repeatable .group-remove:hover { background: var(--tm-danger-bg); border-color: var(--tm-danger-border); }

#tm-panel-pricing .subform-repeatable[name="jform[pricing_text]"] tr.subform-repeatable-group {
  border-radius: var(--tm-radius);
  border-color: var(--tm-border);
  padding: var(--tm-space-3);
  gap: var(--tm-space-2) var(--tm-space-3);
}

/* Absences: ambre (information), pas orange vif */
.tm-absences li { background: var(--tm-warm-bg); border-color: var(--tm-warm-border); border-radius: var(--tm-radius-sm); font-size: var(--tm-fs-sm); }

/* Bloc de bienvenue: plus de dégradé diagonal */
.tm-welcome {
  background: var(--tm-primary-50);
  border-color: var(--tm-primary-200);
  border-radius: var(--tm-radius);
  padding: var(--tm-space-5);
  gap: var(--tm-space-4);
}

.tm-welcome__badge { background: var(--tm-primary); border-radius: 50%; }
.tm-welcome__body h2 { font-size: var(--tm-fs-h2); margin: 0 0 var(--tm-space-2); }

/* Sélecteur de photo: vignettes régulières */
.tm-photo-picker__item { width: 84px; height: 84px; border-width: 1px; border-radius: var(--tm-radius-sm); border-color: var(--tm-border); }
.tm-photo-picker__item:hover { border-color: var(--tm-primary); transform: none; }
.tm-photo-picker__item.is-selected { border-color: var(--tm-primary); box-shadow: 0 0 0 3px var(--tm-primary-glow); }

/* Aucune animation superflue si l'utilisateur les refuse */
@media (prefers-reduced-motion: reduce) {
  .tm-card, .tm-audience-card, .tm-btn, .tm-link-action::after { transition: none; }
  .tm-card:hover, .tm-audience-card:hover { transform: none; }
}
/* <<< P3-A */

/* >>> P3-B — IMPRESSION (ajustements) ===================================== */
@media print {
  body { font-family: var(--tm-font-body); }
  .tm-profile h1,
  .tm-profile h2 { font-family: var(--tm-font-heading); }
  .tm-profile__initials { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tm-profile__cta,
  .tm-results-bar,
  .tm-search-more { display: none !important; }
}
/* <<< P3-B */

/* ============================================================
   Flyers sur la fiche (feature 2026-08) — image + lien optionnel
   ============================================================ */
.tm-flyers { margin-top: var(--tm-section); }
.tm-flyers > h2 { font-size: var(--tm-fs-h2); margin: 0 0 var(--tm-space-5); color: var(--tm-ink); }
.tm-flyers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--tm-space-4);
}
.tm-flyer {
  display: block;
  border-radius: var(--tm-radius);
  overflow: hidden;
  border: 1px solid var(--tm-border);
  background: var(--tm-surface);
}
.tm-flyer img { display: block; width: 100%; height: auto; }
.tm-flyer--link { transition: box-shadow .18s ease, transform .18s ease; }
.tm-flyer--link:hover { box-shadow: var(--tm-shadow-md); transform: translateY(-2px); }
.tm-flyer--zoom { width: 100%; padding: 0; font: inherit; cursor: zoom-in; }
/* Agrandissement d'un flyer sans lien (popup des contenus legaux, taille de l'image). */
.tm-legal-dialog.tm-legal-dialog--image { width: fit-content; height: fit-content; max-width: 94vw; max-height: 94vh; }
.tm-legal-dialog.tm-legal-dialog--image[open] { display: flex; flex-direction: column; }
.tm-legal-dialog.tm-legal-dialog--image > img {
  display: block; max-width: 94vw; max-height: calc(94vh - 3.5rem);
  object-fit: contain;
}

/* Edition dans « Mon espace » */
.tm-flyers-edit { margin-top: var(--tm-space-7); padding-top: var(--tm-space-5); }
.tm-flyers-edit > h3 { font-size: var(--tm-fs-h3); margin: 0 0 var(--tm-space-2); }
.tm-flyer-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tm-space-3); margin-bottom: var(--tm-space-3); }
.tm-flyer-upload__preview {
  width: 108px; height: 72px; object-fit: cover;
  border-radius: var(--tm-radius-sm); border: 1px solid var(--tm-border); background: var(--tm-bg-soft);
}
.tm-flyer-upload__status { font-size: var(--tm-fs-sm); color: var(--tm-muted); }

/* Flyers: item (image + rangee de partage du lien) */
.tm-flyer-item { display: flex; flex-direction: column; gap: var(--tm-space-2); }
.tm-flyer__share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tm-space-1); margin: 0; }
.tm-flyer__share-label { font-size: var(--tm-fs-xs); color: var(--tm-muted); margin-right: var(--tm-space-1); }
.tm-flyer__share .tm-share-btn { width: 30px; height: 30px; }

/* Cohérence typographique de la carte (Leaflet) : attribution + compteurs de
   cluster héritent de la police du site au lieu d'Helvetica Neue.
   !important pour battre la CSS Leaflet chargée après. */
.leaflet-control-attribution,
.leaflet-control-attribution a,
.marker-cluster div { font-family: var(--tpl-font) !important; }

/* =========================================================================
   Accueil — « Annonces » + « Soutenir » : deux cartes côte à côte,
   même format, couleurs distinctes (CSS pur)
   ========================================================================= */

.tm-home-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tm-space-6);
  margin: var(--tm-section) 0;
  align-items: stretch;
}
@media (max-width: 760px) {
  .tm-home-duo { grid-template-columns: 1fr; }
}

/* format commun des deux cartes */
.tm-home-duo .tm-home-ads,
.tm-home-duo .tm-home-give {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tm-space-4);
  padding: var(--tm-space-6);
  border-radius: var(--tm-radius);
  border: 1px solid var(--tm-border);
}
.tm-home-duo > * > div {
  position: relative;
  padding-left: 3.5rem;
  flex: 1 1 auto;
}
.tm-home-duo h2 { margin: 0 0 var(--tm-space-2); font-weight: 700; letter-spacing: -0.01em; }
.tm-home-duo .tm-subtitle,
.tm-home-duo .tm-home-give__text {
  margin: 0;
  font-size: 1.1875rem; /* 19px — police et taille identiques dans les 2 cartes */
  line-height: 1.6;
}
.tm-home-give__icon { display: none; } /* ancien emoji: remplacé par le badge CSS */

/* badge icône commun */
.tm-home-duo > * > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
}

/* couleur 1 : Annonces (vert) */
.tm-home-duo .tm-home-ads {
  background: linear-gradient(180deg, rgba(46, 133, 64, 0.05), rgba(46, 133, 64, 0.015));
}
.tm-home-duo .tm-home-ads h2 { color: var(--tm-ink); }
.tm-home-duo .tm-home-ads > div::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m3%2011%2018-5v12L3%2014v-3z%27/%3E%3Cpath%20d%3D%27M11.6%2016.8a3%203%200%201%201-5.8-1.6%27/%3E%3C/svg%3E") center / 1.3rem no-repeat,
    linear-gradient(135deg, var(--tm-primary), var(--tm-primary-dark));
  box-shadow: 0 8px 18px -8px rgba(46, 133, 64, 0.55);
}

/* couleur 2 : Soutenir (ambre) */
.tm-home-duo .tm-home-give {
  border-color: var(--tm-gold-border-soft);
  background: linear-gradient(180deg, var(--tm-gold-bg), var(--tm-gold-bg-deep));
  box-shadow: 0 6px 20px -14px rgba(120, 90, 20, 0.4);
}
.tm-home-duo .tm-home-give h2 { color: var(--tm-warm-strong); }
.tm-home-duo .tm-home-give > div::before {
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2020h10%27/%3E%3Cpath%20d%3D%27M10%2020c5.5-2.5.8-6.4%203-10%27/%3E%3Cpath%20d%3D%27M9.5%209.4c1.1.8%201.8%202.2%202.3%203.7-2%20.4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2%202.8-.5%204.4%200%205.5.8z%27/%3E%3Cpath%20d%3D%27M14.1%206a7%207%200%200%200-1.1%204c1.9-.1%203.3-.6%204.3-1.4%201-1%201.6-2.3%201.7-4.6-2.7.1-4%201-4.9%202z%27/%3E%3C/svg%3E") center / 1.35rem no-repeat,
    linear-gradient(135deg, var(--tm-gold), var(--tm-gold-dark));
  box-shadow: 0 8px 18px -8px rgba(180, 130, 40, 0.55);
}

/* Boutons des cartes: centrés, pleins, dégradé assorti */
.tm-home-duo .tm-btn {
  margin-top: auto;
  align-self: center;
  border: 0;
  border-radius: var(--tm-radius-pill);
  padding: 0.62rem 1.5rem;
  font-weight: 600;
  color: var(--tm-on-accent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.tm-home-duo .tm-btn:hover { transform: translateY(-1px); color: var(--tm-on-accent); }
.tm-home-duo .tm-btn:active { transform: translateY(0); }

.tm-home-duo .tm-home-ads .tm-btn {
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-primary-dark));
  box-shadow: 0 8px 18px -8px rgba(46, 133, 64, 0.6);
}
.tm-home-duo .tm-home-ads .tm-btn:hover {
  background: linear-gradient(135deg, var(--tm-primary-dark), var(--tm-primary));
  box-shadow: 0 12px 24px -8px rgba(46, 133, 64, 0.7);
}

.tm-home-duo .tm-home-give .tm-btn {
  background: linear-gradient(135deg, var(--tm-gold), var(--tm-gold-dark));
  box-shadow: 0 8px 18px -8px rgba(180, 130, 40, 0.6);
}
.tm-home-duo .tm-home-give .tm-btn:hover {
  background: linear-gradient(135deg, var(--tm-gold-dark), var(--tm-gold));
  box-shadow: 0 12px 24px -8px rgba(180, 130, 40, 0.7);
}

/* =========================================================================
   Combobox « Type de pratique » — champ à saisie + suggestions
   ========================================================================= */
.tm-combo__wrap { position: relative; }
.tm-combo__input { width: 100%; }
.tm-combo__clear {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--tm-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}
.tm-combo__clear:hover { color: var(--tm-text); }
.tm-combo__list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border-strong, var(--tm-border));
  border-radius: var(--tm-radius);
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.25);
}
.tm-combo__group {
  padding: 0.45rem 0.6rem 0.2rem;
  font-size: var(--tm-fs-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tm-muted);
}
.tm-combo__opt {
  padding: 0.45rem 0.6rem;
  border-radius: calc(var(--tm-radius) - 4px);
  cursor: pointer;
  color: var(--tm-text);
}
.tm-combo__opt--family { font-weight: 700; }
.tm-combo__opt:not(.tm-combo__opt--family) { padding-left: 1.2rem; }
.tm-combo__opt.is-active,
.tm-combo__opt:hover { background: var(--tm-primary-soft, rgba(46, 133, 64, 0.08)); }
.tm-combo__empty { padding: 0.6rem; color: var(--tm-muted); }

/* ===== Accent de couleur par type de fiche (annuaire + fiche) =====
   Une couleur par type: liseré vertical sur la carte + badge de type teinte.
   Therapeute = vert de la marque ; centre = bleu ; ecole = ambre ; commerce = violet. */
.tm-card,
.tm-profile {
  --tc: var(--tm-primary);
  --tc-soft: var(--tm-primary-soft);
  --tc-border: var(--tm-primary-border);
}
.tm-card[data-type="center"],
.tm-profile[data-type="center"] { --tc: #2f6fb0; --tc-soft: rgba(47,111,176,.10); --tc-border: rgba(47,111,176,.35); }
.tm-card[data-type="school"],
.tm-profile[data-type="school"] { --tc: #b5820f; --tc-soft: rgba(181,130,15,.12); --tc-border: rgba(181,130,15,.35); }
.tm-card[data-type="shop"],
.tm-profile[data-type="shop"]   { --tc: #7d5ba6; --tc-soft: rgba(125,91,166,.10); --tc-border: rgba(125,91,166,.35); }

.tm-card { position: relative; }
.tm-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tc);
  border-radius: var(--tm-radius) 0 0 var(--tm-radius);
  z-index: 1;
  pointer-events: none;
}

.tm-chip--type {
  background: var(--tc-soft);
  color: var(--tc);
  border-color: var(--tc-border);
  font-weight: 600;
}
.tm-card__type { align-self: flex-start; }

/* Pictogramme de type en coin de carte (annuaire) */
.tm-card__type-ic {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--tc-soft);
  color: var(--tc);
  border: 1px solid var(--tc-border);
  z-index: 2;
  pointer-events: none;
}
.tm-card__name { padding-right: 2.25rem; }

/* Demandes de rattachement en attente (Mon espace de la cible) */
.tm-relation-requests { margin-top: 1rem; }
.tm-relation-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tm-relation-req {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.6rem 0.8rem; border: 1px solid var(--tm-border); border-radius: var(--tm-radius);
  background: var(--tm-bg-soft); flex-wrap: wrap;
}
.tm-relation-req__name { font-weight: 600; }
.tm-relation-req__actions { display: flex; gap: 0.4rem; }
.tm-relation-pending { color: var(--tm-primary-ink-strong); }

/* ===== Page « Soutenir » : remplir la largeur, réduire le vide ===== */
.tm-support .tm-hero { padding: var(--tm-space-6) var(--tm-space-6); margin-bottom: var(--tm-space-6); }
.tm-support .tm-hero__subtitle { max-width: none; }
.tm-support__mission p { max-width: none; }

.tm-support__cols {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-areas:
    "mission other";
  gap: 1.5rem 2.5rem;
  align-items: start;
  margin-bottom: var(--tm-space-6);
}
.tm-support__cols > .tm-support__mission { grid-area: mission; }
.tm-support__cols > .tm-support__donate  { grid-area: donate; }
.tm-support__cols > .tm-support__other   { grid-area: other; }
.tm-support__cols > .tm-support__mission,
.tm-support__cols > .tm-support__donate,
.tm-support__cols > .tm-support__other { margin-bottom: 0; }

.tm-support__cols > .tm-support__other {
  background: var(--tm-bg-soft);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  padding: 1.4rem 1.5rem;
}
.tm-support__cols > .tm-support__other p { max-width: none; }

.tm-support__mission,
.tm-support__seeds,
.tm-support__other { margin-bottom: var(--tm-space-6); }

@media (max-width: 800px) {
  .tm-support__cols {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mission"
      "other";
    gap: 1.5rem;
  }
}

/* Boutons « Autres façons » : largeur égale, remplissent la case */
.tm-support__other p:has(.tm-btn) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  max-width: none;
  margin-top: 1.1rem;
}
.tm-support__other p:has(.tm-btn) .tm-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}
@media (max-width: 520px) {
  .tm-support__other p:has(.tm-btn) { grid-template-columns: 1fr; }
}

/* ===== « Soutenir » : peaufinage héros + titres de colonnes ===== */
.tm-support__cols > section > h2:first-child { margin-top: 0; }

.tm-support .tm-hero { position: relative; overflow: hidden; padding-bottom: var(--tm-space-5); }
.tm-support .tm-hero__subtitle { margin-bottom: 0; }
.tm-support .tm-hero::after {
  content: "";
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 170px;
  height: 170px;
  opacity: 0.12;
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e8540' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E");
}
@media (max-width: 640px) { .tm-support .tm-hero::after { display: none; } }

/* ===== Formulaire de don (page Soutenir) ===== */
.tm-donate-form { display: flex; flex-direction: column; gap: 1rem; margin: 0.75rem 0 0; }
.tm-donate-form__field { display: flex; flex-direction: column; gap: 0.4rem; }
.tm-donate-form__field > label { font-weight: 600; font-size: 0.85rem; color: var(--tm-muted); }
.tm-donate-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tm-donate-chip {
  border: 1px solid var(--tm-border); background: var(--tm-surface); border-radius: 999px;
  padding: 0.45rem 0.95rem; font-weight: 600; cursor: pointer; color: var(--tm-text);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.tm-donate-chip:hover { border-color: var(--tm-primary-border); }
.tm-donate-chip.is-on { border-color: var(--tm-primary); background: var(--tm-primary-soft); color: var(--tm-primary-ink-strong); }
.tm-donate-custom { display: inline-flex; align-items: center; gap: 0.35rem; }
.tm-donate-custom input { width: 6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--tm-border); border-radius: calc(var(--tm-radius) / 2); font: inherit; }
.tm-donate-custom__cur { font-weight: 600; color: var(--tm-muted); }
.tm-donate-form select { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--tm-border); border-radius: calc(var(--tm-radius) / 2); font: inherit; background: var(--tm-surface); }
.tm-donate-giftnote { margin: 0.2rem 0 0; }
.tm-donate-form__submit { align-self: flex-start; margin-top: 0.25rem; }
.tm-donate-alt { margin-top: 1rem; }
.tm-donate-alt summary { cursor: pointer; font-size: 0.85rem; color: var(--tm-muted); font-weight: 600; }
.tm-donate-alt .tm-donate-cards { margin-top: 0.6rem; }

/* =====================================================================
   Harmonisation des groupes de boutons (audit 2026-08-30)
   ===================================================================== */

/* Rangée de CTA : même écart et même retour à la ligne partout */
.tm-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.tm-btn-row--block { flex-direction: column; align-items: stretch; }
.tm-btn-row--block > .tm-btn { width: 100%; justify-content: center; }

/* Fiche: les groupes de liens-boutons, écart constant (au lieu de l'espace HTML) */
.tm-profile__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Itinéraire: deux boutons de largeur égale, le 3e en pleine largeur dessous */
.tm-profile__links--nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.tm-profile__links--nav > .tm-btn { width: 100%; }
.tm-profile__links--nav > .tm-btn:last-child { grid-column: 1 / -1; }

/* =====================================================================
   Formulaire de fiche — polish
   ===================================================================== */

/* Champs à étiquettes (Choices.js) : la zone de saisie interne ne doit PAS
   ressembler à un second champ encadré. On enlève bordure / fond / rayon /
   ombre pour qu'elle se fonde dans le conteneur. */
.tm-form .choices__inner .choices__input,
.tm-form .choices__inner input.choices__input--cloned {
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0.25rem 0.35rem;
  min-height: 0;
}
.tm-form .choices__inner .choices__input:focus,
.tm-form .choices__inner input.choices__input--cloned:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}
/* Placeholder discret quand le champ est vide. */
.tm-form .choices__inner .choices__input::placeholder { color: var(--tm-muted); }

/* Messageries: chaque service (numéro + message d'accueil) forme un GROUPE
   visuel (petite carte) — on voit tout de suite quel message va avec quel
   service. */
#tm-messaging-fieldset [data-contact-dep] {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-bg-soft);
  padding: 0.9rem 1rem 1rem;
  margin-block-end: 0.85rem;
}
#tm-messaging-fieldset [data-contact-dep]:last-child { margin-block-end: 0; }
#tm-messaging-fieldset [data-contact-dep] .control-group:last-child { margin-block-end: 0; }

/* Sous-formulaires répétables (lieux, tarifs, formations, absences, annonces,
   flyers) : chaque entrée = une CARTE empilée, lisible, qui fonctionne à TOUTE
   largeur — y compris le mode guidé, plus étroit (le layout « tableau » y
   cassait). Style aligné sur les cartes de messagerie. */
.tm-form .subform-repeatable-group {
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-bg-soft);
  padding: 0.9rem 1rem 1rem;
  margin-block-end: 0.75rem;
}
.tm-form .subform-repeatable-group .control-group:last-child { margin-block-end: 0; }

/* Barre de boutons Joomla: les icônes ne sont pas chargées sur le front (d'où
   les « petites cases grises »). On masque le tri (déroutant) et on redessine
   proprement les boutons + / −. */
/* On masque la poignée de glisser (redondante) mais on GARDE les flèches
   ↑/↓ pour réordonner les entrées au clic. */
.tm-form .btn.group-move { display: none; }
.tm-form .subform-repeatable [class^="icon-"],
.tm-form .subform-repeatable-group [class^="icon-"] { display: none; }
.tm-form .btn-toolbar { justify-content: flex-end; margin-top: 0.4rem; gap: 0.4rem; }
.tm-form .btn-toolbar .btn-group { display: inline-flex; gap: 0.4rem; }
.tm-form .btn.group-add,
.tm-form .btn.group-remove,
.tm-form .btn.group-move-up,
.tm-form .btn.group-move-down {
  width: 2rem; height: 2rem; min-height: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm, 8px);
  background: var(--tm-surface); box-shadow: none; font-size: 0; line-height: 1; cursor: pointer;
}
.tm-form .btn.group-add::before { content: "+"; font-size: 1.15rem; font-weight: 700; color: var(--tm-primary-ink-strong); }
.tm-form .btn.group-remove::before { content: "\2212"; font-size: 1.15rem; font-weight: 700; color: var(--tm-danger); }
.tm-form .btn.group-move-up::before { content: "\2191"; font-size: 1rem; font-weight: 700; color: var(--tm-muted); }
.tm-form .btn.group-move-down::before { content: "\2193"; font-size: 1rem; font-weight: 700; color: var(--tm-muted); }
.tm-form .btn.group-add:hover { background: var(--tm-primary-50); border-color: var(--tm-primary-200); }
.tm-form .btn.group-remove:hover { background: var(--tm-danger-bg); border-color: var(--tm-danger); }
.tm-form .btn.group-move-up:hover,
.tm-form .btn.group-move-down:hover { background: var(--tm-bg-soft, var(--tm-bg-sunken)); border-color: var(--tm-primary-200); }

/* =====================================================================
   Panneau « Gérer ma fiche » (module) — présentation soignée
   ===================================================================== */
.tm-manage-mod__pub,
.tm-manage-mod__reviews { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; }

/* Statut = badge pastille (au lieu d'un simple ○ Brouillon) */
.tm-manage-mod__status {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0.3rem 0.75rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 700;
}
.tm-manage-mod__status.is-online  { background: var(--tm-primary-50); color: var(--tm-primary-ink-strong); border-color: var(--tm-primary-200); }
.tm-manage-mod__status.is-pending { background: var(--tm-warm-bg-strong); color: var(--tm-warm-text); border-color: var(--tm-warm-border-pending); }
.tm-manage-mod__status.is-draft,
.tm-manage-mod__status.is-offline { background: var(--tm-bg-sunken); color: var(--tm-muted); border-color: var(--tm-border); }

/* Boutons d'action en pleine largeur, bien lisibles */
.tm-manage-mod__pub .tm-btn,
.tm-manage-mod__pub form,
.tm-manage-mod__reviews > .tm-btn { width: 100%; }
.tm-manage-mod__pub form { display: flex; }
.tm-manage-mod__pub form .tm-btn { width: 100%; justify-content: center; }
.tm-manage-mod__pub .tm-btn,
.tm-manage-mod__reviews .tm-btn { min-height: 2.5rem; }

/* Séparateur net entre « publication » et « avis » */
.tm-manage-mod__reviews {
  border-top: 1px solid var(--tm-border);
  padding-top: var(--tm-space-4);
}
/* Éviter la DOUBLE ligne: le bloc « publication » avait déjà une bordure basse,
   on ne garde que le trait du haut de la section « avis ». */
.tm-manage-mod__pub { border-bottom: 0; padding-bottom: 0; }
.tm-manage-mod__reviews h4 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--tm-text); }
.tm-manage-mod__reviews p { margin: 0; font-size: 0.85rem; color: var(--tm-muted); }
.tm-manage-mod__hint { margin: 0; font-size: 0.8rem; color: var(--tm-muted); }

/* Champ de saisie interne des boutons: ne pas hériter du gabarit .tm-btn */
.tm-manage-mod__invite-link { display: flex; gap: 0.4rem; }
.tm-manage-mod__invite-link input { flex: 1 1 auto; min-width: 0; }

/* État verrouillé : lisible, avec une note explicite encadrée en pointillés */
.tm-manage-mod__reviews.is-locked { opacity: 1; }
.tm-manage-mod__reviews.is-locked .tm-btn[disabled] { opacity: 0.55; }
.tm-manage-mod__lockmsg {
  display: flex; gap: 0.4rem; align-items: flex-start;
  background: var(--tm-bg-soft); border: 1px dashed var(--tm-border);
  border-radius: var(--tm-radius-sm, 8px); padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
}

/* Champ en lecture seule (ex. « Type de fiche », figé à l'inscription) :
   ressemble à un champ verrouillé, pas à un input éditable. */
.tm-form .tm-readonly-value {
  margin: 0 0 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--tm-radius-sm, 8px);
  background: var(--tm-bg-soft);
  border: 1px solid var(--tm-border);
  color: var(--tm-text);
  font-weight: 600;
}

/* Multi-lieux: disposition compacte comme l'adresse principale — CP+Ville et
   Canton+Pays côte à côte, Intitulé/Adresse/Téléphone pleine largeur. Ciblé
   UNIQUEMENT sur les cartes de lieu (seules à avoir un champ [postcode]) pour
   ne pas toucher les autres sous-formulaires (tarifs, absences…). */
@media (min-width: 560px) {
  .tm-form .subform-repeatable-group:has([name$="[postcode]"]) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    align-items: start;
  }
  .tm-form .subform-repeatable-group:has([name$="[postcode]"]) > .control-group:has([name$="[label]"]),
  .tm-form .subform-repeatable-group:has([name$="[postcode]"]) > .control-group:has([name$="[address]"]),
  .tm-form .subform-repeatable-group:has([name$="[postcode]"]) > .control-group:has([name$="[phone]"]),
  .tm-form .subform-repeatable-group:has([name$="[postcode]"]) > .btn-toolbar { grid-column: 1 / -1; }
}

/* Tarifs: Prestation (large) + Prix (étroit) côte à côte, Lien pleine largeur
   dessous. Ciblé uniquement sur les tarifs (seuls à avoir un champ [price]). */
@media (min-width: 560px) {
  .tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0 1rem;
    align-items: start;
  }
  .tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) > .control-group:has([name$="[url]"]),
  .tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) > .btn-toolbar { grid-column: 1 / -1; }
}

/* Champs date (calendrier Joomla) dans le formulaire: le wrapper ne faisait
   que 148px (input riquiqui + bouton vide car l'icône Joomla n'est pas chargée
   sur le front). On le met pleine largeur, l'input remplit, et le bouton reçoit
   une vraie icône 📅. */
.tm-form .field-calendar { width: 100%; }
.tm-form .field-calendar .input-group { display: flex; width: 100%; }
.tm-form .field-calendar .input-group > .form-control {
  flex: 1 1 auto; min-width: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.tm-form .field-calendar .input-group > .btn {
  flex: 0 0 auto; width: 2.75rem; min-height: 0; padding: 0;
  border: 1px solid var(--tm-border); border-left: 0;
  border-radius: 0 var(--tm-radius-sm, 8px) var(--tm-radius-sm, 8px) 0;
  background: var(--tm-bg-soft); color: var(--tm-text);
  box-shadow: none; font-size: 0; display: inline-flex; align-items: center; justify-content: center;
}
.tm-form .field-calendar .input-group > .btn::before { content: "📅"; font-size: 1rem; }
.tm-form .field-calendar .input-group > .btn [class^="icon-"] { display: none; }

/* Absences: Du | Au côte à côte, Motif pleine largeur dessous (seul
   sous-formulaire à avoir un champ [from]). */
@media (min-width: 560px) {
  .tm-form .subform-repeatable-group:has([name$="[from]"]) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start;
  }
  .tm-form .subform-repeatable-group:has([name$="[from]"]) > .control-group:has([name$="[note]"]),
  .tm-form .subform-repeatable-group:has([name$="[from]"]) > .btn-toolbar { grid-column: 1 / -1; }
}

/* Champ calendrier: lever le max-width: 148px hérité qui bridait l'input. */
.tm-form .field-calendar { max-width: none; }

/* Switcher (radio on/off, ex. « Masquer ma localisation ») : le <fieldset>
   traînait 48px de marge basse → gros vide avant la description. Resserré. */
.tm-form .controls > fieldset { margin-bottom: 0.4rem; }

/* Boutons +/− de chaque carte: discrets, tout en haut à droite, sur la même
   ligne que le 1er label (pas de marge supplémentaire au-dessus). */
.tm-form .subform-repeatable-group { position: relative; padding-top: 0.9rem; padding-right: 2.6rem; }
/* Boutons +/− ↑/↓ en pile VERTICALE tout à droite (même style que Tarifs) pour
   TOUTES les cartes de sous-formulaire (lieux, tarifs, absences, flyers, formations).
   En absolu → n'étirent pas les rangées ; GROUPÉS en HAUT de la carte. */
.tm-form .subform-repeatable-group > .btn-toolbar {
  position: absolute; top: 0.6rem; right: 0.45rem;
  display: flex; align-items: flex-start;
  margin: 0; padding: 0; z-index: 2;
}
.tm-form .subform-repeatable-group > .btn-toolbar .btn-group {
  flex-direction: column; gap: 0.3rem; padding: 0; margin: 0;
}
/* Cartes en grille (lieux/tarifs/absences) : le repère de l'absolu part de la
   content-box (padding exclu) → on compense pour centrer dans la bande droite. */
.tm-form .subform-repeatable-group:has([name$="[postcode]"]) > .btn-toolbar,
.tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) > .btn-toolbar,
.tm-form .subform-repeatable-group:has([name$="[from]"]) > .btn-toolbar { right: -2.25rem; }
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-add,
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-remove,
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-move-up,
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-move-down {
  width: 1.6rem; height: 1.6rem; opacity: 1;
  background: var(--tm-surface); border-color: var(--tm-border);
}
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-add:hover { background: var(--tm-primary-50); border-color: var(--tm-primary-200); }
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-remove:hover { background: var(--tm-danger-bg); border-color: var(--tm-danger); }
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-move-up:hover,
.tm-form .subform-repeatable-group > .btn-toolbar .btn.group-move-down:hover { background: var(--tm-bg-soft, var(--tm-bg-sunken)); }

/* Bouton « + » d'ajout d'une entrée: placé APRÈS le label de la section
   (haut-droite), comme un bouton d'en-tête — au lieu d'une ligne à part. */
.tm-form .control-group:has(.subform-repeatable) { position: relative; }
.tm-form .subform-repeatable > .btn-toolbar {
  position: absolute; top: 0; right: 0; margin: 0;
}
.tm-form .subform-repeatable > .btn-toolbar .btn.group-add { width: 1.9rem; height: 1.9rem; }

/* La phrase d'aide occupe la meme ligne que ce bouton : sans cette reserve,
   ses derniers mots passent dessous. */
.tm-form .control-group:has(.subform-repeatable) > .controls > .form-text {
  padding-right: 2.6rem;
}

/* Sous-formulaire encore vide : le « + » est le seul geste possible a cet
   endroit et rien ne le dit. Un battement l'annonce, puis disparait des la
   premiere ligne ajoutee. */
@keyframes tm-pulse-add {
  0%   { box-shadow: 0 0 0 0 var(--tm-primary-glow); }
  70%  { box-shadow: 0 0 0 0.55rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.tm-form .subform-repeatable:not(:has(.subform-repeatable-group)) > .btn-toolbar .btn.group-add {
  animation: tm-pulse-add 2.4s ease-out infinite;
}

.tm-form .subform-repeatable > .btn-toolbar .btn.group-add:hover,
.tm-form .subform-repeatable > .btn-toolbar .btn.group-add:focus-visible {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .tm-form .subform-repeatable > .btn-toolbar .btn.group-add { animation: none; }
}

/* Sous-menu d'onglet (Contact, Tarifs & horaires) : accès rapide aux sections
   dans le formulaire complet. Masqué en mode guidé (chaque étape est déjà seule). */
/* Contrôle segmenté discret, centré et FIGÉ sous le header au défilement. */
.tm-subnav {
  position: sticky;
  top: 70px;                 /* petit espace sous le header sticky (65px) */
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  width: fit-content;
  max-width: 100%;
  margin: -1.4rem auto 0.35rem;
  padding: 0.15rem;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.tm-subnav__link {
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.85rem; border-radius: 999px;
  border: 0; background: transparent;
  color: var(--tm-muted); font-size: 0.78rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
/* Le bouton « Enregistrer » occupe la bande droite de cette meme rangee : le
   sous-menu s aligne a gauche au lieu de se centrer dessous. Sous 640 px le
   bouton repasse dans le flux, le centrage reprend. */
@media (min-width: 641px) {
  .tm-subnav { margin-inline: 0 auto; }
}

.tm-subnav__link:hover { background: var(--tm-primary-50); color: var(--tm-primary-ink-strong); }
.tm-subnav__link.is-active {
  background: var(--tm-primary); color: var(--tm-on-accent);
}

/* Mise en évidence brève de la section visée. */
.tm-sec-flash { animation: tm-sec-flash 1.1s ease; }
@keyframes tm-sec-flash {
  0%, 100% { background: transparent; }
  25% { background: var(--tm-primary-50); }
}
@media (prefers-reduced-motion: reduce) { .tm-sec-flash { animation: none; } }

/* Onglets « fonctions » (Annonces, Avis) : fond vert clair, vert foncé quand
   actif. Pas d'arrondi. */
#tm-tab-ads { margin-left: 0.6rem; }
#tm-tab-ads,
#tm-tab-reviews {
  background: var(--tm-primary-50);
  color: var(--tm-primary-ink-strong);
  border-radius: 0;
}
#tm-tab-ads.is-active,
#tm-tab-reviews.is-active {
  background: var(--tm-primary);
  color: var(--tm-on-accent);
}

/* Défilement doux vers les ancres de la fiche (bouton « Contacter », avis) avec
   un décalage pour ne pas passer sous le header sticky. */
html { scroll-behavior: smooth; }
#tm-contact-protect, #avis { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Tarifs: on retire les libellés visibles (Prestation, Tarif, Lien) — le
   placeholder dans chaque champ suffit → gain de place. Label conservé pour les
   lecteurs d'écran (accessibilité). */
.tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) .control-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Tarifs: champs resserrés (Prestation + Tarif, puis Lien juste dessous).
   Les boutons +/− ↑/↓ verticaux à droite sont gérés par la règle générale. */
.tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) {
  grid-template-columns: 1fr 7rem;
  row-gap: 0.55rem;
  column-gap: 0.9rem;
  align-items: start;
}
/* Le lien occupe les deux colonnes de champs. */
.tm-form .subform-repeatable-group:has([name$="[price]"]):not(:has([name$="[format]"])) > .control-group:has([name$="[url]"]) {
  grid-column: 1 / -1;
}

/* Flèche « haut de page » à gauche du sous-menu segmenté. */
.tm-subnav__top {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; padding: 0;
  border: 0; background: transparent; border-radius: 999px;
  color: var(--tm-muted); font-size: 1rem; font-weight: 700;
  line-height: 1; cursor: pointer;
}
.tm-subnav__top:hover { background: var(--tm-primary-50); color: var(--tm-primary-ink-strong); }

/* Bouton flottant « retour en haut » (bas-droite), plus gros, au défilement. */
.tm-back-top {
  /* Decale d'un cran vers la gauche quand le gabarit affiche la bascule
     clair/sombre dans le coin ; sans elle, la variable vaut 0 et le bouton
     reprend sa place d'origine. */
  position: fixed; right: calc(1.25rem + var(--tpl-fab-slot, 0rem)); bottom: 1.25rem;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--tm-primary); color: var(--tm-on-accent);
  font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.tm-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.tm-back-top:hover { background: var(--tm-primary-dark); }
@media (prefers-reduced-motion: reduce) { .tm-back-top { transition: none; } }

/* Solde de graines (onglet Annonces) — présentation modernisée: icône en pastille,
   solde en gras, « Comment en gagner ? » en bouton-pastille. Garde l'ambre (graines). */
.tm-seeds {
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--tm-radius);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.tm-seeds__icon {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tm-surface); border: 1px solid var(--tm-warm-border);
  border-radius: 50%; font-size: 1.1rem;
}
.tm-seeds__text { font-size: 0.95rem; font-weight: 700; }
.tm-seeds__earn {
  margin-left: auto;
  padding: 0.35rem 0.85rem; border-radius: 999px;
  background: var(--tm-surface); border: 1px solid var(--tm-warm-border);
  color: var(--tm-warm-strong); font-weight: 600; font-size: 0.8rem;
  text-decoration: none; white-space: nowrap;
}
.tm-seeds__earn:hover { background: var(--tm-warm-strong); color: var(--tm-on-accent); border-color: var(--tm-warm-strong); }

/* Onglet Annonces: les deux actions (aperçu + envoyer gabarits) côte à côte,
   pleine largeur du contenu, à parts égales. */
.tm-ads-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.7rem 0 0.4rem;
}
.tm-ads-actions .tm-btn { width: 100%; justify-content: center; }
@media (max-width: 480px) { .tm-ads-actions { grid-template-columns: 1fr; } }
.tm-ads-actions__hint { margin: 0 0 0.9rem; }

/* Pastille de coût en graines à côté des boutons IA (pré-remplissage, tarifs). */
.tm-ai-cost {
  display: inline-flex; align-items: center;
  margin-left: 0.45rem; padding: 0.05rem 0.45rem;
  background: var(--tm-warm-bg); color: var(--tm-warm-strong, var(--tm-warm));
  border: 1px solid var(--tm-warm-border, var(--tm-warm-border-strong));
  border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  line-height: 1.5; white-space: nowrap; vertical-align: middle;
}

/* Bannière « graines offertes » sur l'écran d'inscription. */
.tm-reg-gift {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.2rem 0 1.4rem; padding: 0.7rem 0.9rem;
  background: var(--tm-warm-bg);
  border: 1px solid var(--tm-warm-border, var(--tm-warm-border-strong));
  border-radius: var(--tm-radius, 10px);
  color: var(--tm-warm-strong, var(--tm-warm));
  font-size: 0.9rem; line-height: 1.4;
}
.tm-reg-gift__icon { font-size: 1.3rem; flex: 0 0 auto; line-height: 1; }
/* Encart « confiez-nous votre inscription » : texte, bouton centre, puis la
   petite phrase « vous-meme », sans vide superflu. */
.tm-reg-assisted { align-items: flex-start; padding: 0.9rem 1rem; }
.tm-reg-assisted .tm-reg-gift__icon { margin-top: 0.15rem; }
.tm-reg-assisted > div { flex: 1 1 auto; min-width: 0; padding-right: 2.15rem; } /* = icone + espace : marges texte egales a gauche et a droite */
.tm-reg-assisted p { margin: 0; }
.tm-reg-assisted .tm-btn { display: flex; width: max-content; max-width: 100%; margin: 0.75rem auto; }
.tm-reg-assisted p.tm-hint { margin: 0; font-size: 0.85rem; color: var(--tm-muted, var(--tm-text-muted)); text-align: center; }
/* Bandeau « installable depuis ce site » en tete de l'accueil : texte a gauche,
   bouton vert plein a droite ; invisible quand le site tourne deja en application
   (memes modes que le bouton .tpl-install). Le bouton reprend .tpl-install (JS du
   template) mais avec son propre habillage, survol compris (le style generique
   du pied de page rendait le texte blanc sur fond pale). */
.tm-home-install {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.25rem;
  margin: 0 0 1.25rem; padding: 0.85rem 1.1rem 0.85rem 1.25rem;
  background: var(--tm-primary-100);
  border: 1px solid color-mix(in srgb, var(--tm-primary) 30%, transparent);
  border-left: 4px solid var(--tm-primary);
  border-radius: var(--tm-radius, 10px);
  color: var(--tm-primary-ink-strong, var(--tm-primary-ink));
}
.tm-home-install__text { flex: 1 1 26rem; margin: 0; text-align: left; font-size: 0.95rem; line-height: 1.5; }
.tm-home-install .tpl-install {
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.15rem; border: 0; border-radius: 999px;
  background: var(--tm-primary); color: #fff;
  font: inherit; font-size: 0.9rem; font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); cursor: pointer;
}
.tm-home-install .tpl-install[hidden] { display: none; }
.tm-home-install .tpl-install:hover,
.tm-home-install .tpl-install:focus-visible { background: var(--tm-primary-ink-strong, #226633); color: #fff; border-color: transparent; transform: none; }
.tm-home-install .tpl-install .tm-ico { display: none; }
/* Icone telephone + fleche (la meme que les boutons d'installation du template),
   en CSS : la police d'icones maison ne la contient pas et l'editeur retire les SVG. */
.tm-home-install .tpl-install::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M12 8v6'/%3E%3Cpath d='m9.5 11.5 2.5 2.5 2.5-2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 640px) {
  .tm-home-install .tpl-install { margin-left: 0; width: 100%; justify-content: center; }
}
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen), (display-mode: window-controls-overlay), (display-mode: tabbed) {
  .tm-home-install { display: none !important; }
}
/* Page d'inscription : deux voies cote a cote (refonte 2026-09-18). */
.tm-reg-head { margin: 0 0 1.25rem; }
.tm-reg-head h1 { margin: 0 0 0.35rem; }
.tm-reg-head .tm-subtitle { margin: 0; }
.tm-reg-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; }
@media (max-width: 640px) { .tm-reg-ways { grid-template-columns: 1fr; } }
.tm-reg-way {
  position: relative; display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius, 12px);
}
.tm-reg-way--assisted {
  background: var(--tm-primary-100);
  border-color: color-mix(in srgb, var(--tm-primary) 40%, transparent);
}
.tm-reg-way h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
/* Pastilles au-dessus du titre, dans le flux : « Gratuit » sur les deux cartes,
   « Recommandé » en plus sur l'inscription assistee. */
.tm-reg-way__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.15rem; }
.tm-reg-way__badge {
  display: inline-block;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--tm-primary); color: #fff;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tm-reg-way__badge--free {
  background: var(--tm-surface); color: var(--tm-primary-ink-strong);
  border: 1px solid var(--tm-primary-200);
}
.tm-reg-way .tm-home-list { margin: 0; font-size: 0.93rem; }
.tm-reg-way .tm-btn { margin-top: auto; justify-content: center; }
.tm-reg-footnote { margin: 0 0 2rem; text-align: center; }
.tm-reg-self__title { margin: 0 0 0.35rem; font-size: 1.35rem; }

/* Uploader de photo moderne: zone cliquable + glisser-déposer + aperçu rond. */
.tm-upload { position: relative; }
.tm-upload__input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none;
}
.tm-upload__zone {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.75rem 0.85rem;
  border: 1.5px dashed var(--tm-border); border-radius: 14px;
  background: var(--tm-bg-soft); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tm-upload__zone:hover,
.tm-upload.is-drag .tm-upload__zone {
  border-color: var(--tm-primary);
  background: var(--tm-primary-50);
}
.tm-upload__input:focus-visible + .tm-upload__zone {
  outline: 2px solid var(--tm-primary); outline-offset: 2px;
}
.tm-upload__thumb {
  position: relative; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--tm-surface); border: 1px solid var(--tm-border);
}
.tm-upload__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-upload__thumb img[hidden] { display: none; }
.tm-upload__cam { width: 24px; height: 24px; color: var(--tm-muted); }
.tm-upload__thumb.has-img .tm-upload__cam { display: none; }
.tm-upload__body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; flex: 1 1 auto; }
.tm-upload__title { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-upload__hint { color: var(--tm-muted); font-size: 0.78rem; }
.tm-upload__btn {
  flex: 0 0 auto; padding: 0.35rem 0.85rem; border-radius: 999px;
  background: var(--tm-surface); border: 1px solid var(--tm-border);
  font-weight: 600; font-size: 0.8rem; color: var(--tm-primary-ink-strong);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tm-upload__zone:hover .tm-upload__btn { border-color: var(--tm-primary-200, var(--tm-primary-300)); background: var(--tm-primary-50); }
@media (max-width: 480px) {
  .tm-upload__zone { flex-wrap: wrap; }
  .tm-upload__btn { margin-left: calc(56px + 0.9rem); }
}

/* Selects natifs: chevron custom + finition moderne (cohérent avec les champs,
   couleur au survol/focus). N'affecte pas les multi-selects (Choices.js). */
.tm-form select:not([multiple]),
.tm-field select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  cursor: pointer;
}
.tm-form select:not([multiple]):hover,
.tm-field select:not([multiple]):hover {
  border-color: var(--tm-primary-200, var(--tm-primary-300));
}
.tm-form select:not([multiple]):focus,
.tm-field select:not([multiple]):focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232e8540' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Un peu d'air interne (hauteur confortable) sans casser l'alignement. */
.tm-form select:not([multiple]) { min-height: 2.55rem; }

/* Assistant d'accueil EN PAUSE : badge « Prochainement disponible » + formulaire
   en filigrane (estompé, non interactif). Piloté par l'option finder_paused. */
.tm-finder--paused { position: relative; }
.tm-finder--paused .tm-finder__form,
.tm-finder--paused .tm-finder__privacy {
  opacity: 0.4;
  filter: grayscale(0.25);
  pointer-events: none;
  user-select: none;
}
.tm-finder__soon {
  position: absolute; top: 1.1rem; right: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.32rem 0.85rem; border-radius: 999px;
  background: var(--tm-warm-bg); color: var(--tm-warm-strong, var(--tm-warm));
  border: 1px solid var(--tm-warm-border, var(--tm-warm-border-strong));
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.tm-finder__soon::before { content: "⏳"; font-size: 0.85rem; }
@media (max-width: 520px) {
  .tm-finder__soon { position: static; margin-bottom: 0.6rem; }
}

/* Formulaire de suggestion de service (page Services). */
.tm-service-suggest { margin-top: 1.6rem; }
.tm-service-suggest textarea {
  width: 100%; min-height: 5rem; margin-top: 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--tm-border); border-radius: calc(var(--tm-radius) / 2);
  font: inherit; background: var(--tm-surface); color: var(--tm-text); resize: vertical;
}
.tm-service-suggest textarea:focus {
  outline: none; border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px var(--tm-primary-glow);
}
.tm-service-suggest__actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; flex-wrap: wrap; }

/* Bouton « Prendre rendez-vous en ligne » : icône calendrier + texte centrés.
   Correctif: une règle de lien (.tm-profile a) rendait le texte vert sur vert. */
.tm-profile__cta .tm-btn--booking { color: var(--tm-on-accent); }
.tm-profile__cta .tm-btn--booking:hover,
.tm-profile__cta .tm-btn--booking:focus-visible { color: var(--tm-on-accent); }
.tm-btn--booking {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
}
.tm-btn--booking .tm-btn__ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* Carte « Parrainez un thérapeute » dans la colonne droite de Mon espace. */
.tm-manage-mod__share { border-top: 1px solid var(--tm-border); margin-top: 0.9rem; padding-top: 0.9rem; }
.tm-manage-mod__share h4 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.tm-manage-mod__share > p { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--tm-muted); line-height: 1.45; }
.tm-share-copy { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.tm-share-copy .tm-btn__ico { width: 16px; height: 16px; flex: 0 0 auto; }
.tm-share-copy.is-copied { background: var(--tm-primary-dark); border-color: var(--tm-primary-dark); }
.tm-manage-mod__share-quick { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.tm-share-quick {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.4rem 0.6rem; border-radius: 10px;
  border: 1px solid var(--tm-border); background: var(--tm-surface);
  color: var(--tm-primary-ink-strong); font-size: 0.82rem; font-weight: 600;
  text-decoration: none;
}
.tm-share-quick:hover { background: var(--tm-primary-50); border-color: var(--tm-primary-200, var(--tm-primary-300)); }
.tm-share-quick__ico { width: 16px; height: 16px; flex: 0 0 auto; }

/* Page Services: « Parrainez » et « Acheter des graines » côte à côte
   (2 colonnes sur large, empilés sur mobile ; 1 seul → pleine largeur). */
.tm-services-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.tm-services-row > section,
.tm-services-row > .tm-services-col { margin: 0; height: 100%; }
/* Pas de vide au-dessus du titre « Acheter des graines ». */
.tm-seed-shop > h2 { margin-top: 0; }
.tm-services-col { display: flex; flex-direction: column; gap: 1.25rem; }
/* Parrainage (page Services) : champ lien pleine largeur, bouton dessous + partage. */
.tm-referral__field {
  width: 100%; padding: 0.55rem 0.7rem; margin: 0 0 0.6rem;
  border: 1px solid var(--tm-border); border-radius: calc(var(--tm-radius) / 2);
  font: inherit; background: var(--tm-surface); color: var(--tm-text);
}
.tm-share-quick-row { display: flex; gap: 0.5rem; margin-top: 0.55rem; }

/* Liens « conditions » / « confidentialité » de la case d'inscription (popup). */
.tm-terms__link {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--tm-primary-ink-strong); font: inherit; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.tm-terms__link:hover { color: var(--tm-primary-ink); }

/* Popup contenu légal (iframe du contenu ?tmpl=component). */
.tm-legal-dialog {
  width: min(760px, 92vw); height: min(80vh, 720px); max-height: 90vh;
  padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
.tm-legal-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.tm-legal-dialog__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--tm-border); background: var(--tm-surface);
}
.tm-legal-dialog__title { font-size: 1rem; }
.tm-legal-dialog__title::first-letter { text-transform: uppercase; }
.tm-legal-dialog__close {
  border: 0; background: none; font-size: 1.6rem; line-height: 1;
  color: var(--tm-muted); cursor: pointer; padding: 0 0.3rem;
}
.tm-legal-dialog__close:hover { color: var(--tm-ink); }
.tm-legal-dialog__frame { width: 100%; height: calc(100% - 3.3rem); border: 0; display: block; background: var(--tm-surface); }

/* /mon-espace en invité : masquer le contenu principal (vide) et centrer le
   module de connexion au milieu de la page. */
body.tm-espace-guest .tpl-content { display: none; }
body.tm-espace-guest .tpl-layout--sidebar { grid-template-columns: 1fr; justify-items: center; }
body.tm-espace-guest .tpl-sidebar { width: 100%; max-width: 440px; }
@media (min-width: 900px) {
  body.tm-espace-guest .tpl-layout--sidebar { grid-template-columns: 1fr; }
}

/* =========================================================================
   Automatisations (Mon espace) : veille des prestations + rappel de mise à
   jour, et pages « proposition » / « rappel » ouvertes depuis un e-mail.
   ========================================================================= */
.tm-auto { margin-bottom: var(--tm-space-5, 1.5rem); }
.tm-auto__card {
  background: var(--tm-bg-soft); border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius); padding: 1rem 1.1rem; margin: 0.5rem 0 1.25rem;
}
.tm-auto__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.9rem; }
.tm-auto__meta { color: var(--tm-muted); font-size: var(--tm-fs-sm); }
.tm-auto__meta--error { color: var(--tm-warm); }
.tm-auto__label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.tm-auto__row { display: flex; gap: 0.5rem; align-items: center; }
.tm-auto__row input[type="url"] {
  flex: 1; min-width: 0; padding: 0.55rem 0.7rem; font: inherit;
  border: 1px solid var(--tm-border-strong); border-radius: calc(var(--tm-radius) / 2); background: var(--tm-surface);
}
.tm-auto__actions { margin-top: 0.9rem; }
.tm-auto__msg { display: block; min-height: 1.2em; margin-top: 0.4rem; }
.tm-auto__msg.is-error { color: var(--tm-warm); }
.tm-chip--active { background: var(--tm-primary-50); border-color: var(--tm-primary-200); color: var(--tm-primary-800); font-weight: 600; }
.tm-chip--paused { background: var(--tm-warm-bg); border-color: var(--tm-warm-border); color: var(--tm-warm); font-weight: 600; }
.tm-chip--expired { background: var(--tm-bg-sunken); border-color: var(--tm-border); color: var(--tm-muted); font-weight: 600; }
.tm-auto-props { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.tm-auto-prop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  padding: 0.6rem 0.8rem; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: calc(var(--tm-radius) / 2);
}
.tm-auto-prop__date { color: var(--tm-muted); font-size: var(--tm-fs-sm); }
.tm-auto-prop__changes { flex: 1; font-size: var(--tm-fs-sm); }
.tm-auto-prop .tm-btn { margin-left: auto; }
.tm-auto .control-group { margin-bottom: 0.6rem; }

/* Pages proposition / rappel (accès par lien e-mail, sans connexion) */
.tm-proposal { max-width: 780px; }
.tm-proposal__box {
  background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow-card); padding: 1.4rem 1.5rem; margin: 1rem 0; text-align: center;
}
.tm-proposal__box--ok { border-color: var(--tm-primary-200); background: var(--tm-primary-50); }
.tm-proposal__box--warn { border-color: var(--tm-warm-border); background: var(--tm-warm-bg); }
.tm-proposal__icon { font-size: 2.2rem; line-height: 1; margin-bottom: 0.5rem; }
.tm-proposal__table-wrap { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--tm-border); border-radius: var(--tm-radius); background: var(--tm-surface); }
.tm-proposal__table { width: 100%; border-collapse: collapse; font-size: var(--tm-fs-sm); }
.tm-proposal__table th { text-align: left; padding: 0.55rem 0.75rem; background: var(--tm-bg-soft); color: var(--tm-muted); font-size: var(--tm-fs-xs); font-weight: 600; }
.tm-proposal__table td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--tm-border); vertical-align: top; }
.tm-proposal__table .is-num { text-align: right; white-space: nowrap; }
.tm-diff__tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.15rem 0.45rem; border-radius: var(--tm-radius-pill); }
.tm-diff--added .tm-diff__tag { background: var(--tm-primary-100); color: var(--tm-primary-800); }
.tm-diff--modified .tm-diff__tag { background: var(--tm-warm-bg); color: var(--tm-warm); border: 1px solid var(--tm-warm-border); }
.tm-diff--removed .tm-diff__tag { background: var(--tm-danger-bg); color: var(--tm-danger-strong); }
.tm-diff--unchanged .tm-diff__tag { background: var(--tm-bg-sunken); color: var(--tm-muted); }
.tm-diff--unchanged td { color: var(--tm-muted); }
.tm-diff--removed .tm-diff__title { text-decoration: line-through; color: var(--tm-muted); }
.tm-diff--added .tm-diff__new, .tm-diff--modified .tm-diff__new { font-weight: 700; color: var(--tm-primary-800); }
.tm-proposal__suspicious { color: var(--tm-warm); }
.tm-proposal__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: center; margin: 1.2rem 0 0.6rem; }
.tm-proposal__form { margin: 0; }
.tm-proposal__links { margin-top: 1.2rem; color: var(--tm-muted); font-size: var(--tm-fs-sm); }

/* Espace partenaire — image d'une récompense de la mini boutique. */
.tm-seed-pack--reward { max-width: 14rem; }
.tm-seed-pack__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--tm-radius) - 4px);
  margin-bottom: 0.35rem;
  background: var(--tm-bg-soft);
}
.tm-seed-pack__title { font-weight: 700; text-align: center; }
.tm-seed-pack__desc { color: var(--tm-muted); font-size: 0.85rem; text-align: center; }

/* Partage de la fiche dans la carte contact: sous-bloc separe,
   icones en ligne (la carte force sinon une grille 2 colonnes sur .tm-profile__links). */
.tm-share--card { margin-top: 0; padding-top: 0; border-top: 0; }
.tm-profile__contact--card .tm-share__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-2);
}
.tm-share--card .tm-gift-link { margin-top: var(--tm-space-3); }
.tm-share--card .tm-gift-link .tm-btn { width: 100%; justify-content: center; }

/* Carte contact fixee: jamais de defilement interne. Si elle
   est plus haute que la fenetre, un petit script (fiche) la cale par son bas
   (top negatif) pour qu'elle reste entierement lisible. */
@media (min-width: 900px) {
  .tm-profile__main .tm-flyers { margin-top: var(--tm-section); }
}

/* Carte contact: chaque section (Messageries, Reseaux sociaux,
   Partager, Soutenir...) est separee par le meme filet et le meme espacement. */
.tm-profile__contact--card .tm-card-subtitle {
  margin: var(--tm-space-5) 0 var(--tm-space-3);
  padding-top: var(--tm-space-4);
  border-top: 1px solid var(--tm-border);
}
.tm-profile__contact--card .tm-share--card .tm-gift-link { margin-top: 0; }

/* Signalement discret en bas de fiche + textarea des dialogues. */
.tm-report-link {
  margin: var(--tm-section) 0 0;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--tm-muted);
}
.tm-report-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--tm-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.tm-report-btn:hover,
.tm-report-btn:focus-visible { color: var(--tm-text); }
.tm-report-status { margin-left: 0.5rem; }
.tm-report-status.is-error { color: var(--tm-warm); }
.tm-dialog__textarea {
  resize: vertical;
  min-height: 5.5rem;
  font-family: inherit;
  line-height: 1.45;
}
@media print {
  .tm-report-link { display: none !important; }
}

/* Dialogue de signalement identifie. */
.tm-report-dialog { width: min(34rem, calc(100vw - 2rem)); }
.tm-report-form label { display: block; margin-top: 0.85rem; }
.tm-report-form label > span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tm-muted);
}
.tm-report-form .tm-dialog__input { margin-top: 0; }
.tm-report-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.tm-report-form__captcha { margin-top: 0.9rem; }
.tm-report-form__captcha altcha-widget { display: block; }
.tm-report-form .tm-hint { margin: 0.75rem 0 0; font-size: 0.8rem; }
.tm-report-form__status { margin: 0.5rem 0 0; min-height: 1.2em; font-size: 0.875rem; font-weight: 600; color: var(--tm-primary-ink-strong); }
.tm-report-form__status.is-error { color: var(--tm-warm); }
@media (max-width: 520px) {
  .tm-report-form__row { grid-template-columns: 1fr; }
}

/* --- SEO 2026-09-11 : pages de pratique et hub des familles --- */
.tm-practice__crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; color: var(--tm-text-muted, var(--tm-text-soft)); margin: 0 0 0.75rem; }
.tm-practice__crumbs a { color: inherit; }
.tm-practice__kind { display: flex; align-items: center; gap: 0.75rem; margin: -0.25rem 0 1rem; color: var(--tm-text-muted, var(--tm-text-soft)); font-size: 0.9rem; }
.tm-practice__section { margin-top: var(--tm-space-6, 2rem); }
.tm-practice__section h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
.tm-practice__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tm-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border: 1px solid var(--tm-border, var(--tm-border-soft)); border-radius: 999px; background: var(--tm-bg, var(--tm-surface)); color: inherit; text-decoration: none; font-size: 0.9rem; line-height: 1.2; }
.tm-chip:hover, .tm-chip:focus-visible { border-color: var(--tm-practice-color, var(--tm-primary)); background: var(--tm-bg-soft); }
.tm-chip__count { font-size: 0.75rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--tm-practice-color, var(--tm-neutral-dark)); color: var(--tm-on-accent); }
.tm-practice__cta { margin-top: var(--tm-space-6, 2rem); padding: 1.25rem 1.5rem; border-radius: var(--tm-radius, 12px); background: var(--tm-bg-soft); border-left: 4px solid var(--tm-practice-color, var(--tm-primary)); }
.tm-practice__cta h2 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.tm-practice__cta p { margin: 0 0 0.85rem; }
.tm-health-disclaimer { margin-top: var(--tm-space-6, 2rem); font-size: 0.8rem; color: var(--tm-text-muted, var(--tm-text-soft)); }
.tm-families { margin-top: var(--tm-space-7, 3rem); padding-top: var(--tm-space-5, 1.5rem); border-top: 1px solid var(--tm-border, var(--tm-border-soft)); }
.tm-families h2 { font-size: 1.3rem; margin: 0 0 0.35rem; }
.tm-families__lead { margin: 0 0 1rem; color: var(--tm-text-muted, var(--tm-text-soft)); }
.tm-families__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; }
.tm-families__link { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: 0.9rem 1rem; border: 1px solid var(--tm-border, var(--tm-border-soft)); border-left: 4px solid var(--tm-family-color, var(--tm-neutral-dark)); border-radius: var(--tm-radius, 12px); background: var(--tm-bg, var(--tm-surface)); color: inherit; text-decoration: none; }
.tm-families__link:hover, .tm-families__link:focus-visible { border-color: var(--tm-family-color, var(--tm-neutral-dark)); background: var(--tm-bg-soft); }
.tm-families__name { font-weight: 600; line-height: 1.2; }
.tm-families__desc { font-size: 0.875rem; color: var(--tm-text-muted, var(--tm-text-soft)); }
.tm-families__count { margin-top: auto; font-size: 0.8rem; color: var(--tm-family-color, var(--tm-neutral-dark)); font-weight: 600; }

/* --- Rubrique « Comprendre » (guides) : meme mise en page que les pages
   legales (classes tm-legal du template: chapeau, sommaire collant,
   sections numerotees). --- */
.tm-guide { max-width: none; }
.tm-guide > h1 { font-family: var(--tpl-font, "Source Sans 3", system-ui, sans-serif); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 0.15rem; }
.tm-guide__meta { margin: 0 0 1.25rem; font-size: 0.875rem; color: var(--tm-text-muted, var(--tm-muted)); }
.tm-guide .tm-practice__crumbs { margin-bottom: 1rem; }
.tm-guide .tm-legal__content h3 { font-size: 1.02rem; margin: 1.1rem 0 0.4rem; }
.tm-guide .tm-legal__content ul, .tm-guide .tm-legal__content ol { padding-left: 1.4rem; margin: 0 0 0.7rem; line-height: 1.65; }
.tm-guide .tm-legal__content li { margin: 0.3rem 0; }
.tm-guide .tm-legal__content .tm-health-disclaimer { margin: 1.5rem 0 0; }
.tm-guide .tm-legal__content .tm-practice__cta { margin-top: 1.5rem; }
.tm-guide .tm-legal__content .tm-practice__cta h2 { color: inherit; font-size: 1.1rem; margin: 0 0 0.35rem; }
.tm-guide__toc-others { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--tm-border); }
.tm-guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tm-guide__list a { display: block; padding: 0.6rem 0.9rem; border: 1px solid var(--tm-border); border-radius: var(--tm-radius, 10px); background: var(--tm-bg, var(--tm-surface)); color: inherit; text-decoration: none; }
.tm-guide__list a:hover, .tm-guide__list a:focus-visible { border-color: var(--tm-primary); background: var(--tm-bg-soft); }
.tm-guides__grid { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.85rem; }
.tm-guides__link { position: relative; display: flex; flex-direction: column; gap: 0.4rem; height: 100%; padding: 1rem 1.1rem 1rem 3.1rem; border: 1px solid var(--tm-border); border-radius: 14px; background: var(--tm-surface); box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05); color: inherit; text-decoration: none; }
.tm-guides__link:hover, .tm-guides__link:focus-visible { border-color: var(--tm-primary); background: var(--tm-primary-50); }
.tm-guides__num { position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--tm-primary); color: var(--tm-on-accent); font-size: 0.8rem; font-weight: 700; }
.tm-guides__title { font-weight: 700; font-size: 1.05rem; color: var(--tm-primary-ink-strong); }
.tm-guides__excerpt { font-size: 0.9rem; color: var(--tm-text-muted, var(--tm-muted)); line-height: 1.5; }
.tm-guides__about h2 { font-size: 1.2rem; color: var(--tm-primary-ink); margin: 0 0 0.65rem; }
.tm-guide .tm-legal__content h2 { font-family: var(--tpl-font, "Source Sans 3", system-ui, sans-serif); }

/* Tableau « gratuit ou payant » (guide, 6 colonnes) : colonnes teintées aux
   couleurs des types de fiche (memes teintes que les cartes / bandeaux) et
   contenu centre. Le tableau a deux colonnes (graines) n'est pas concerne. */
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:not(:first-child),
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:not(:first-child) { text-align: center; white-space: nowrap; }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:nth-child(2),
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:nth-child(2) { background: var(--tm-bg-soft); }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:nth-child(3),
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:nth-child(3) { background: color-mix(in srgb, #2e8540 10%, var(--tm-surface)); }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:nth-child(4),
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:nth-child(4) { background: color-mix(in srgb, #2C7FB8 10%, var(--tm-surface)); }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:nth-child(5),
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:nth-child(5) { background: color-mix(in srgb, #B7791F 12%, var(--tm-surface)); }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:nth-child(6),
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:nth-child(6) { background: color-mix(in srgb, #7B1FA2 10%, var(--tm-surface)); }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(3) { color: #2e8540; }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(4) { color: #2C7FB8; }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(5) { color: #B7791F; }
.tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(6) { color: #7B1FA2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(3) { color: #6fcf85; }
  :root:not([data-theme="light"]) .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(4) { color: #6fa8dc; }
  :root:not([data-theme="light"]) .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(5) { color: #d9ab3d; }
  :root:not([data-theme="light"]) .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(6) { color: #b391d6; }
}
:root[data-theme="dark"] .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(3) { color: #6fcf85; }
:root[data-theme="dark"] .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(4) { color: #6fa8dc; }
:root[data-theme="dark"] .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(5) { color: #d9ab3d; }
:root[data-theme="dark"] .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(6) { color: #b391d6; }
/* Tableau a deux colonnes des guides (ex. « Comment obtenir des graines ») :
   la premiere colonne ne prend plus toute la largeur, les valeurs restent
   proches des libelles. */
.tm-guide .tm-wallet-table:has(thead th:nth-child(2):last-child) th:first-child,
.tm-guide .tm-wallet-table:has(thead th:nth-child(2):last-child) td:first-child { width: 62%; }

@media (max-width: 800px) {
  /* Telephone : le tableau devient une zone qui defile dans les deux sens,
     bornee a la hauteur de l'ecran. La ligne d'en-tete (types de fiche) reste
     collee en haut, la colonne des fonctions et les titres de section restent
     colles a gauche : on sait toujours de quelle ligne et de quel type on parle. */
  .tm-guide .tm-wallet-table-wrap:has(thead th:nth-child(6)) {
    max-height: calc(100vh - 5.5rem);
    overflow: auto;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
  }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) { min-width: 640px; }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tm-surface);
  }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(2) { background: var(--tm-bg-soft); }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(3) { background: color-mix(in srgb, #2e8540 10%, var(--tm-surface)); }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(4) { background: color-mix(in srgb, #2C7FB8 10%, var(--tm-surface)); }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(5) { background: color-mix(in srgb, #B7791F 12%, var(--tm-surface)); }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:nth-child(6) { background: color-mix(in srgb, #7B1FA2 10%, var(--tm-surface)); }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:first-child,
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 200px;
    background: var(--tm-surface);
    box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.25);
  }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) thead th:first-child { z-index: 3; }
  /* Titres de section (cellule sur toute la largeur) : c'est le texte qui colle. */
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) tbody th[colspan] {
    position: static;
    min-width: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) tbody th[colspan] > span {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: 0 0.75rem;
  }
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) th:not(:first-child),
  .tm-guide .tm-wallet-table:has(thead th:nth-child(6)) td:not(:first-child) { min-width: 86px; }
}
.tm-guides__about h2, .tm-guide__toc-title { font-family: var(--tpl-font, "Source Sans 3", system-ui, sans-serif); }

/* ============================================================
   Produits phares (fiches commerce / centre, 2026-09) — images en liaison
   ============================================================ */
.tm-products { margin: var(--tm-section, 2.5rem) 0; }
.tm-products > h2 { font-size: var(--tm-fs-h2, 1.5rem); margin: 0 0 var(--tm-space-5, 1.25rem); color: var(--tm-ink, var(--tm-text)); }
.tm-products__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--tm-space-4, 1rem); }
.tm-product__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--tm-border); border-radius: var(--tm-radius, 10px); background: var(--tm-surface); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .18s ease, transform .18s ease; }
.tm-product__link:hover, .tm-product__link:focus-visible { box-shadow: var(--tm-shadow-md, 0 8px 24px rgba(15,23,42,.08)); transform: translateY(-2px); }
.tm-product__media { aspect-ratio: 1 / 1; background: var(--tm-bg-soft); display: grid; place-items: center; overflow: hidden; position: relative; }

/* Fond : la meme image, elargie et floutee. Elle comble les bandes que laisse
   une photo non carree, sans rien recadrer. Une image carree la recouvre
   entierement : le rendu est alors identique a un affichage plein cadre. */
.tm-product__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tm-product-img, none);
  background-size: cover;
  background-position: center;
  /* L'agrandissement cache les bords adoucis par le flou. */
  transform: scale(1.3);
  /* Tres floute et tres pale : une ambiance, pas une seconde image. Sinon
     l'oeil y relit un produit recadre. */
  filter: blur(30px) saturate(1.2);
  opacity: 0.32;
}

/* Le produit est montre en entier, jamais ampute. ⚠ Ce sont max-width et
   max-height qui contraignent : « width/height: 100% » laisse l'image deborder
   du cadre, qui la rogne alors silencieusement. */
.tm-product__media img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.tm-product__placeholder { font-size: 2.2rem; opacity: .5; }
.tm-product__body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.8rem 0.9rem 0.9rem; flex: 1; }
.tm-product__title { font-weight: 600; line-height: 1.3; }
.tm-product__desc { font-size: 0.85rem; color: var(--tm-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tm-product__price { margin-top: auto; font-weight: 700; color: var(--tm-primary-ink-strong); }
.tm-product__cta { font-size: 0.8rem; color: var(--tm-primary-ink); font-weight: 600; }
.tm-products__more { margin: var(--tm-space-4, 1rem) 0 0; }

/* Edition dans « Mon espace » */
.tm-products-catalog { margin: 1rem 0; }
.tm-products-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.tm-products-filter input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.tm-products-filter select { flex: 0 1 14rem; }
.tm-products-filter__count { font-size: 0.85rem; color: var(--tm-muted); }
.tm-products-list { list-style: none; margin: 0; display: grid; gap: 0.5rem; max-height: max(28rem, 75vh); /* liste plus haute */ overflow: auto; border: 1px solid var(--tm-border); border-radius: var(--tm-radius, 10px); padding: 0.5rem; background: var(--tm-bg-soft); }
.tm-products-list--selected { max-height: none; background: var(--tm-surface); }
.tm-product-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.45rem 0.55rem; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 8px; }
.tm-products-list--selected .tm-product-row { background: var(--tm-bg-soft); }
.tm-product-row--featured { border-color: var(--tm-primary); }
.tm-product-row--paid { border-left: 4px solid var(--tm-primary); }
.tm-product-row--empty { display: block; text-align: center; color: var(--tm-muted); font-size: 0.9rem; }
.tm-product-row__media { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--tm-bg-sunken); display: grid; place-items: center; }
.tm-product-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-product-row__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tm-product-row__title { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-product-row__meta { font-size: 0.8rem; color: var(--tm-primary-ink-strong); font-weight: 600; }
.tm-product-row__desc { font-size: 0.8rem; color: var(--tm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-product-row__actions { display: flex; gap: 0.25rem; }
.tm-products-selected { margin-top: 1.25rem; }
.tm-products-selected h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.tm-products-selected__counter { font-weight: 400; color: var(--tm-muted); }
@media (max-width: 520px) {
  .tm-product-row { grid-template-columns: 44px minmax(0, 1fr); }
  .tm-product-row__actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Proposition produits: vignette + note */
.tm-diff__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 0.5rem; background: var(--tm-bg-sunken); }
.tm-diff__note { display: block; font-size: 0.78rem; color: var(--tm-muted); margin-top: 0.15rem; }

/* Boutons de reprise par onglet (adresse, coordonnees) depuis l'analyse du site */
.tm-ai-scope { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px dashed var(--tm-primary-border, var(--tm-primary-300)); border-radius: var(--tm-radius, 10px); background: var(--tm-primary-soft, var(--tm-primary-50)); }
.tm-ai-scope .tm-hint { margin: 0.4rem 0 0; }
.tm-ai-scope .tm-ai-status { display: block; margin-top: 0.35rem; }

/* --- Infobulles d'aide des champs (profile-help.js) + grille auto --- */
.tm-two-cols--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tm-form .control-label label { display: inline-flex; align-items: center; gap: 0.35rem; }
.tm-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; padding: 0; border: 1px solid var(--tm-border-strong); border-radius: 999px; background: var(--tm-surface); color: var(--tm-muted); font: 700 0.7rem/1 var(--tm-font-body, system-ui, sans-serif); cursor: help; vertical-align: middle; }
.tm-info:hover, .tm-info:focus-visible, .tm-info.is-open { color: var(--tm-on-accent); background: var(--tm-primary); border-color: var(--tm-primary); outline: none; }
.tm-info__bubble { display: none; position: absolute; left: 0; top: calc(100% + 0.4rem); z-index: 30; width: max-content; max-width: min(28rem, 80vw); padding: 0.55rem 0.75rem; border-radius: 8px; background: var(--tm-tooltip-bg); color: var(--tm-on-accent); font: 400 0.8rem/1.45 var(--tm-font-body, system-ui, sans-serif); text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); }
.tm-info__bubble a { color: var(--tm-link-on-dark); }
.tm-info:hover .tm-info__bubble, .tm-info:focus-visible .tm-info__bubble, .tm-info.is-open .tm-info__bubble { display: block; }
@media (max-width: 600px) { .tm-info__bubble { left: auto; right: 0; } }

/* Variante sans script (fiche publique) : le focus simple suffit a ouvrir la
   bulle. Sur un ecran tactile il n'y a pas de survol, et « focus-visible »
   ignore la plupart des appuis du doigt — la bulle ne s'ouvrirait jamais. */
.tm-info--static:focus { color: var(--tm-on-accent); background: var(--tm-primary); border-color: var(--tm-primary); outline: none; }
.tm-info--static:focus .tm-info__bubble { display: block; }

/* Paiement et remboursement dans la carte de contact : leur intertitre porte
   deja le sens, la marge haute du bloc ferait doublon. */
.tm-payments--card { margin-top: 0; }

/* L'agrement et son « i » restent solidaires. */
.tm-chip:has(.tm-info) { display: inline-flex; align-items: center; gap: 0.35rem; }

.tm-info--tool { margin-left: 0.4rem; }
.tm-ai-generate, .tm-ai-scope, .tm-pricing-ai { display: flow-root; }

/* Site web + bouton de pre-remplissage sur une ligne */
.tm-website-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.75rem; margin-block-end: 1rem; }
.tm-website-row > .control-group { flex: 1 1 18rem; margin-block-end: 0; }
.tm-website-row > .tm-ai-generate { flex: 0 0 auto; max-width: 100%; display: flex; align-items: center; gap: 0.4rem; margin: 0; }
/* Le bouton fait la hauteur du champ voisin : cote a cote, deux hauteurs
   differentes se voient immediatement. 2.875rem = le plancher des champs
   (2.75rem) porte a la hauteur reelle de leur ligne de texte. */
.tm-website-row > .tm-ai-generate > .tm-btn { min-height: 2.875rem; }

/* Message et aide : une ligne pleine chacun, sous le champ et le bouton. */
.tm-website-row > .tm-ai-status,
.tm-website-row > .tm-hint { flex: 0 0 100%; min-width: 0; margin: 0; }
.tm-website-row .tm-ai-status:empty { display: none; }

/* Rubrique pas encore ouverte (ex. Annonces) : grisee + badge */
.tm-soon { position: relative; }
.tm-soon__badge { display: inline-block; margin: 0 0 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--tm-warm-bg-strong); color: var(--tm-warm-text-strong); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.tm-soon__text { margin: 0 0 1rem; color: var(--tm-muted); }
.tm-soon__content { opacity: 0.4; pointer-events: none; user-select: none; filter: grayscale(1); }
.tm-tab--soon { color: var(--tm-muted-soft); }
.tm-tab--soon::after { margin-left: 0.3rem; color: #f59e0b; }

/* Dernier champ visible d'un fieldset (les suivants sont caches selon le type de compte) */
.tm-form .control-group.tm-cg-last { margin-bottom: 0; }

/* Packs de graines Fibonacci: grille 3 colonnes + bonus offert */
.tm-seed-shop__packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.tm-seed-pack { min-width: 0; padding: 1rem 0.75rem; }
.tm-seed-pack__bonus { font-size: 0.78rem; font-weight: 600; color: var(--tm-primary, var(--tm-primary-ink-strong)); background: var(--tm-primary-50); border-radius: 999px; padding: 0.1rem 0.55rem; }
.tm-seed-pack__bonus--none { color: var(--tm-muted); background: transparent; font-weight: 500; }

/* Onglets numerotes: chiffre au-dessus du titre, compteur CSS
   (les onglets masques selon le type de compte ne sont pas comptes). */
.tm-tabs { counter-reset: tmtab; align-items: flex-end; }
.tm-tab { counter-increment: tmtab; display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; padding-top: 0.45rem; }
.tm-tab::before {
  content: counter(tmtab);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; line-height: 1;
  color: var(--tm-muted); background: var(--tm-bg-sunken); border: 1px solid var(--tm-border);
}
.tm-tab:hover::before { color: var(--tm-text); border-color: var(--tm-border-strong); }
.tm-tab.is-active::before { color: var(--tm-on-accent); background: var(--tm-primary); border-color: var(--tm-primary); }
.tm-tab--soon::before { opacity: 0.6; }
.tm-tab--soon::after { content: none; }
.tm-tab--soon .tm-tab__label::after { content: "•"; margin-left: 0.3rem; color: #f59e0b; }

/* Onglet Annonces: flyers en premier, puis la rubrique annonces avec son propre titre */
.tm-flyers-edit { margin: 0 0 var(--tm-space-6); padding: 0 0 var(--tm-space-5); border-top: 0; border-bottom: 1px solid var(--tm-border); }
.tm-ads-title { margin: 0 0 var(--tm-space-3); }

/* Questionnaire « Votre expérience » */
.tm-exp__back { margin: 0 0 0.5rem; font-size: 0.9rem; }
.tm-exp__already { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--tm-radius); background: var(--tm-primary-50); color: var(--tm-primary-ink-strong); font-size: 0.9rem; }
.tm-exp__form { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 1rem; }
.tm-exp__block { margin: 0; padding: 0; border: 0; min-width: 0; }
.tm-exp__block > legend { font-family: var(--tm-font-heading, inherit); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; padding: 0; }
.tm-exp__block .tm-hint { margin: -0.3rem 0 0.6rem; }
.tm-exp__ratings { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tm-exp__rating { position: relative; flex: 1 1 5.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.8rem 0.5rem; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: var(--tm-radius); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tm-exp__rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.tm-exp__rating-face { font-size: 1.8rem; line-height: 1; }
.tm-exp__rating-label { font-size: 0.82rem; font-weight: 600; color: var(--tm-muted); }
.tm-exp__rating:hover { border-color: var(--tm-border-strong); }
.tm-exp__rating:has(input:checked) { border-color: var(--tm-primary); box-shadow: 0 0 0 3px var(--tm-primary-glow); background: var(--tm-primary-50); }
.tm-exp__rating:has(input:checked) .tm-exp__rating-label { color: var(--tm-primary-ink-strong); }
.tm-exp__rating:has(input:focus-visible) { outline: 2px solid var(--tm-primary); outline-offset: 2px; }
.tm-exp__areas, .tm-exp__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.tm-exp__area { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 999px; font-size: 0.88rem; cursor: pointer; }
.tm-exp__area input { margin: 0; accent-color: var(--tm-primary); }
.tm-exp__area:has(input:checked) { border-color: var(--tm-primary); background: var(--tm-primary-50); color: var(--tm-primary-ink-strong); font-weight: 600; }
.tm-exp textarea { width: 100%; min-height: 5rem; padding: 0.6rem 0.7rem; border: 1px solid var(--tm-border); border-radius: calc(var(--tm-radius) / 2); font: inherit; background: var(--tm-surface); color: var(--tm-text); resize: vertical; }
.tm-exp textarea:focus { outline: none; border-color: var(--tm-primary); box-shadow: 0 0 0 3px var(--tm-primary-glow); }
.tm-exp__contact { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.92rem; }
.tm-exp__contact input { margin-top: 0.2rem; accent-color: var(--tm-primary); }
.tm-exp__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tm-exp__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tm-exp__actions .tm-hint { margin: 0; flex: 1 1 14rem; }
/* Carte dans le panneau « gérer ma fiche » */
.tm-manage-mod__exp { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--tm-border); margin-top: var(--tm-space-4); padding-top: var(--tm-space-4); }
.tm-manage-mod__exp h4 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--tm-text); }
.tm-manage-mod__exp p { margin: 0; font-size: 0.85rem; color: var(--tm-muted); }
.tm-manage-mod__exp .tm-btn { width: 100%; justify-content: center; min-height: 2.5rem; }

/* Icônes Font Awesome: remplacent les emojis décoratifs */
.tm-ico { display: inline-block; width: 1.15em; text-align: center; line-height: 1; vertical-align: -0.05em; }
.tm-ico--warn { color: var(--tm-warm); }
.tm-ico--muted { color: var(--tm-muted); }
.tm-manage-mod h4 .tm-ico, .tm-seed-shop h2 .tm-ico, .tm-partner-shop h2 .tm-ico, legend .tm-ico { color: var(--tm-primary-ink); }
.tm-seeds__icon .tm-ico, .tm-wallet-balance__icon .tm-ico, .tm-wallet-mod__icon .tm-ico, .tm-reg-gift__icon .tm-ico, .tm-review-done__icon .tm-ico { color: var(--tm-primary-ink); }
.tm-exp__already .tm-ico { color: var(--tm-primary-ink-strong); }
.tm-proposal__icon .tm-ico { color: var(--tm-primary-ink); }
.tm-chip--reported .tm-ico, .tm-manage-review__reports-label .tm-ico { color: var(--tm-warm); }
.tm-finder__privacy-ico .tm-ico { color: var(--tm-primary-ink); }
.tm-btn .tm-ico { width: auto; }
.tm-relation-pending .tm-ico, .tm-soon__badge .tm-ico { color: var(--tm-warm-text); }

/* Badge de coût: « 8 » + icône graine Font Awesome (plus d'emoji) */
.tm-ai-cost { gap: 0.25rem; }
/* Sous-ensemble maison (icons.css) : la police de Font Awesome elle-meme
   n'est pas chargee, l'appeler par son nom ne donne qu'un carre vide. */
.tm-ai-cost::after { content: "\f4d8"; font-family: "VitaNexo Icons"; font-weight: 900; font-size: 0.8em; color: var(--tm-primary-ink); }
.tm-ai-cost:empty { display: none; }
.tm-seed-pack__seeds .tm-ico, .tm-wallet-table__amount .tm-ico { color: var(--tm-primary-ink); font-size: 0.85em; }

/* Espacement des sections du formulaire resserre: 3rem -> 1.5rem
   entre deux groupes, titre de section plus pres de ses champs. */
.tm-form fieldset { margin-block-end: var(--tm-space-5); }
.tm-form legend { margin-block-end: var(--tm-space-3); }
.tm-form fieldset > .tm-hint:first-of-type { margin-top: 0; }

/* Questionnaire: visages Font Awesome, gris au repos, colores au survol / a la selection */
.tm-exp__rating-face .tm-ico { font-size: 2rem; width: auto; color: var(--tm-muted-soft); transition: color .15s, transform .15s; }
.tm-exp__rating:hover .tm-ico, .tm-exp__rating:has(input:checked) .tm-ico { transform: scale(1.08); }
.tm-exp__rating[data-v="1"]:hover .tm-ico, .tm-exp__rating[data-v="1"]:has(input:checked) .tm-ico { color: #dc2626; }
.tm-exp__rating[data-v="2"]:hover .tm-ico, .tm-exp__rating[data-v="2"]:has(input:checked) .tm-ico { color: #f97316; }
.tm-exp__rating[data-v="3"]:hover .tm-ico, .tm-exp__rating[data-v="3"]:has(input:checked) .tm-ico { color: #eab308; }
.tm-exp__rating[data-v="4"]:hover .tm-ico, .tm-exp__rating[data-v="4"]:has(input:checked) .tm-ico { color: #65a30d; }
.tm-exp__rating[data-v="5"]:hover .tm-ico, .tm-exp__rating[data-v="5"]:has(input:checked) .tm-ico { color: var(--tm-primary-ink); }

/* Bandeau d'etat: liens transformes en boutons bien visibles */
.tm-status { gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; }
.tm-status .tm-status__btn { white-space: nowrap; margin-left: auto; }
.tm-status .tm-status__btn + .tm-status__btn { margin-left: 0; }
@media (max-width: 640px) { .tm-status .tm-status__btn { margin-left: 0; } }

/* Boutons Enregistrer haut + bas, signal des modifications non enregistrees */
.tm-form-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.tm-form-actions--top { justify-content: flex-end; margin: 0 0 var(--tm-space-4); }
.tm-form-actions--bottom { margin-top: var(--tm-space-5); }
.tm-save-btn { min-width: 10rem; justify-content: center; transition: box-shadow .2s, transform .2s; }
.tm-save-btn .tm-ico { width: auto; }
.tm-save-btn.is-dirty { animation: tm-save-pulse 1.6s ease-in-out infinite; }
.tm-save-btn.is-saving { opacity: .75; animation: none; }
.tm-save-state { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--tm-warm); }
.tm-save-state .tm-ico { width: auto; }
@keyframes tm-save-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 133, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0); }
}
@media (prefers-reduced-motion: reduce) { .tm-save-btn.is-dirty { animation: none; box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.35); } }

/* Titre de Mon espace + bouton Enregistrer sur la meme ligne */
.tm-profile-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--tm-space-4); }
.tm-profile-head h1 { margin: 0; }

/* Produits phares: bouton Retirer avec corbeille */
.tm-btn--remove { color: var(--tm-danger); border-color: var(--tm-danger-border-soft); }
.tm-btn--remove:hover { background: var(--tm-danger-bg); color: var(--tm-danger-text-strong); border-color: var(--tm-danger-border-mid); }

/* =============================================================================
   Espace therapeute — barre d'enregistrement, guide des etapes et video
   (2026-09, regroupe apres audit: une seule definition par selecteur)
   ============================================================================= */

/* --- Bouton « Enregistrer » aligne sur le titre de la rubrique affichee ------
   Le sous-menu de certains onglets porte une marge negative : ::before bloque la
   fusion des marges pour que le bouton reste toujours au meme endroit. La
   gouttiere droite evite que le texte colle au bord (et au bouton). */
.tm-panels { position: relative; padding-right: 1.6rem; }
.tm-panels::before { content: ""; display: table; }
.tm-save-float { position: absolute; top: -1.4rem; right: 1.6rem; z-index: 4; }
.tm-panels > .tm-tab-panel > fieldset > legend:first-child { padding-right: 12rem; }

@media (max-width: 640px) {
  .tm-panels { padding-right: 0; }
  .tm-save-float { position: static; display: inline-flex; margin: 0 0 var(--tm-space-4); }
  .tm-panels > .tm-tab-panel > fieldset > legend:first-child { padding-right: 0; }
}

/* Ligne de produit modifiable : les quatre champs cote a cote, repliables
   sur les petits ecrans. Meme grammaire que les lignes de prestations. */
.tm-product-row__edit {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) minmax(5rem, 1fr);
  gap: 0.4rem 0.6rem;
  width: 100%;
}

.tm-product-row__field {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  color: var(--tm-text);
  font: inherit;
  font-size: var(--tm-fs-sm);
}

.tm-product-row__field:focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 1px;
}

.tm-products-add { margin-top: 0.8rem; }
.tm-products-add__plus { font-size: 1.15em; font-weight: 700; line-height: 1; }

@media (max-width: 640px) {
  .tm-product-row__edit { grid-template-columns: 1fr; }
}

/* --- Boite d'analyse (Analyser ma boutique / Pre-remplir ma fiche) ---------- */
.tm-pricing-ai.tm-ai-generate { padding: 1.2rem 1.3rem; row-gap: 0.85rem; }
.tm-pricing-ai.tm-ai-generate > .tm-pricing-ai__label { flex-basis: 100%; margin: 0 0 0.6rem; }

/* --- Onglet Produits: respirations autour de l'intro et de la liste -------- */
#tm-panel-products > fieldset > legend + .tm-hint { margin-block: var(--tm-space-3) var(--tm-space-4); }
.tm-products-replace-hint { margin-block-end: var(--tm-space-4); }

/* --- Guide « Vos premieres etapes » (carte Gerer ma fiche) -------------------
   Liste compacte: une ligne « numero + nom de l'onglet » par etape ; seule
   l'etape en cours s'ouvre, avec sa consigne, son « pourquoi » et son bouton. */
.tm-manage-steps { border-bottom: 1px solid var(--tm-border); margin-bottom: var(--tm-space-3); padding-bottom: var(--tm-space-3); }
.tm-manage-steps h4 { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--tm-text); }
.tm-manage-steps__intro { margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--tm-muted); }
.tm-manage-steps__list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.tm-manage-steps__list--compact { gap: 0.3rem; }
.tm-manage-steps__item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; line-height: 1.4; color: var(--tm-text); }
.tm-manage-steps__list--compact .tm-manage-steps__item { align-items: center; }

/* Pastille numerotee (ou icone pour l'etape « Soumettre », qui n'a pas d'onglet) */
.tm-manage-steps__num { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; background: var(--tm-bg-sunken); color: var(--tm-muted); border: 1px solid var(--tm-border); }
.tm-manage-steps__num--icon .tm-ico { font-size: 0.6rem; width: auto; height: auto; line-height: 1; }

/* Etape faite / a venir / en cours */
.tm-manage-steps__item.is-done .tm-manage-steps__num { background: var(--tm-primary); color: var(--tm-on-accent); border-color: var(--tm-primary); }
.tm-manage-steps__item.is-done .tm-manage-steps__label { color: var(--tm-muted); text-decoration: line-through; }
.tm-manage-steps__item.is-todo { color: var(--tm-muted); }
.tm-manage-steps__list--compact .tm-manage-steps__item.is-current { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.45rem; background: var(--tm-primary-50); border: 1px solid var(--tm-primary-200); border-radius: var(--tm-radius); padding: 0.55rem 0.6rem; }
/* Pas de marge negative ici: la carte du module n'a pas de marge interieure
   laterale, l'encadre de l'etape en cours debordait donc hors de la carte et
   son texte etait rogne. */
.tm-manage-steps__item.is-current .tm-manage-steps__num { background: var(--tm-primary); color: var(--tm-on-accent); border-color: var(--tm-primary); animation: tm-halo 1.8s ease-out infinite; }
.tm-manage-steps__item.is-current .tm-manage-steps__num--icon { background: var(--tm-primary); color: var(--tm-on-accent); }

/* Titre (nom de l'onglet, cliquable) et detail de l'etape en cours */
.tm-manage-steps__title { font-size: 0.88rem; font-weight: 600; color: var(--tm-text); text-decoration: none; }
a.tm-manage-steps__title:hover { text-decoration: underline; color: var(--tm-primary-ink-strong); }
.tm-manage-steps__item.is-done .tm-manage-steps__title,
.tm-manage-steps__item.is-todo .tm-manage-steps__title { color: var(--tm-muted); font-weight: 500; }
.tm-manage-steps__item.is-current .tm-manage-steps__title { color: var(--tm-primary-ink-strong); }
.tm-manage-steps__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.tm-manage-steps__item.is-current .tm-manage-steps__body { flex: 1 1 0; min-width: 0; }
.tm-manage-steps__detail { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.15rem; }
.tm-manage-steps__item.is-current > .tm-manage-steps__detail { flex: 1 1 100%; margin-top: 0; }
.tm-manage-steps__item.is-current .tm-manage-steps__label { font-weight: 400; font-size: 0.85rem; color: var(--tm-text); }
.tm-manage-steps__why { font-size: 0.8rem; line-height: 1.45; color: var(--tm-muted); }
.tm-manage-steps__tab { font-size: 0.78rem; color: var(--tm-muted); }
.tm-manage-steps__hint { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--tm-muted); }
.tm-manage-steps__hint .tm-ico { width: auto; }

/* Bouton « Aller a cette etape » : texte blanc meme si le lien a deja ete visite
   (certains navigateurs coloraient le libelle en vert sur fond vert). */
.tm-manage-steps .tm-btn { width: 100%; justify-content: center; }
.tm-manage-steps .tm-btn.tm-manage-steps__go { width: auto; margin-top: 0.4rem; align-self: flex-start; }
.tm-manage-steps__go,
.tm-manage-steps__go:link,
.tm-manage-steps__go:visited,
.tm-manage-steps__go:hover,
.tm-manage-steps__go:focus,
.tm-manage-steps__go:active { color: var(--tm-on-accent) !important; text-decoration: none; }

/* Bloc publication: memes marges au-dessus et en dessous de « Soumettre » */
.tm-manage-mod__pub .tm-manage-mod__hint { margin: 0; }
.tm-manage-mod__msg:empty { display: none; }
.tm-manage-mod__reviews { margin-top: var(--tm-space-3); }

/* --- Halo « prochaine action » : une seule chose bat a la fois ---------------
   Halo seul, sans agrandissement: le numero ne bouge jamais (un agrandissement
   faisait trembler la ligne sur certains navigateurs). */
.tm-tab.is-next::before { color: var(--tm-on-accent); background: var(--tm-primary); border-color: var(--tm-primary); animation: tm-halo 1.8s ease-out infinite; }
.tm-manage-mod__pub .tm-btn.is-next { animation: tm-halo 1.8s ease-out infinite; }
.tm-tab.is-next:hover::before,
.tm-manage-mod__pub .tm-btn.is-next:hover { animation: none; }
.tm-tab.is-next::before,
.tm-manage-steps__item.is-current .tm-manage-steps__num { transform: none; will-change: box-shadow; }

@keyframes tm-halo {
  0%   { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(46, 133, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 133, 64, 0); }
}

/* Animations reduites (reglage systeme) : halo lent qui s'allume et s'eteint,
   sinon le repere disparaitrait completement. */
@media (prefers-reduced-motion: reduce) {
  .tm-tab.is-next::before,
  .tm-manage-mod__pub .tm-btn.is-next,
  .tm-manage-steps__item.is-current .tm-manage-steps__num { animation: tm-halo-soft 2.4s ease-in-out infinite; }
}

@keyframes tm-halo-soft {
  0%, 100% { box-shadow: 0 0 0 2px rgba(46, 133, 64, 0.15); }
  50%      { box-shadow: 0 0 0 6px rgba(46, 133, 64, 0.45); }
}

/* --- Video de presentation de la fiche --------------------------------------
   Facade cliquable: le lecteur (YouTube / Vimeo) n'est charge qu'au clic. */
.tm-profile__video { margin: 0 0 1.5rem; }
.tm-profile__video .tm-video-facade,
.tm-profile__video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--tm-radius); }
.tm-profile__video iframe { display: block; }
.tm-profile__video .tm-video-facade {
  cursor: pointer; padding: 1rem; color: var(--tm-on-accent); text-align: center;
  background: radial-gradient(ellipse at center, #2f6b3c 0%, #1d3f26 70%, #14291a 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  transition: filter .2s, box-shadow .2s;
}
.tm-video-facade:hover,
.tm-video-facade:focus-visible { filter: brightness(1.1); box-shadow: 0 0 0 3px rgba(46, 133, 64, 0.35); outline: none; }
.tm-video-facade__play {
  width: 4.5rem; height: 4.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.95);
  color: var(--tm-primary-ink-strong);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.tm-video-facade__play svg { margin-left: 0.2rem; }
.tm-video-facade__label { font-weight: 700; font-size: 1.05rem; }
.tm-video-facade__note { font-size: 0.8rem; opacity: 0.85; }
.tm-video-facade__ext { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; }
.tm-profile__video.is-playing .tm-video-facade__ext { display: none; }

/* =====================================================================
   Retouches mobiles du 2026-09-12
   ===================================================================== */

/* 1) En-tete de fiche: le bloc d'identite demandait 320 px et basculait sous
      la photo, laissant un grand vide a droite du portrait. En grille, le nom,
      le cabinet et la ville remontent a cote de la photo ; pastilles, langues
      et action passent en pleine largeur dessous. */
@media (max-width: 640px) {
  .tm-profile__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--tm-space-4);
    row-gap: var(--tm-space-3);
    align-items: center;
  }

  /* Le conteneur s'effface: ses enfants deviennent des cases de la grille. */
  .tm-profile__identity { display: contents; }

  .tm-profile__headline {
    grid-column: 2;
    min-width: 0;
  }

  .tm-profile__name {
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0 0 0.2rem;
  }

  .tm-profile__type { margin: 0 0 0.25rem; }
  .tm-profile__business { font-size: 1rem; margin: 0; }

  .tm-profile__practices,
  .tm-profile__header .tm-audiences,
  .tm-profile__languages,
  .tm-profile__cta { grid-column: 1 / -1; margin: 0; }

  /* Bouton de contact: pleine largeur, centre, moins haut. */
  .tm-profile__cta { margin-left: 0; }

  .tm-profile__cta .tm-btn {
    width: 100%;
    justify-content: center;
    min-height: 2.5rem;
    padding-block: 0.45rem;
  }
}

/* 2) Prestations et tarifs: prix et actions se tassaient contre le libelle.
      Deux colonnes — prix a droite du titre, actions sur la ligne dessous.
      Vaut aussi pour la liste des formations (memes classes). */
@media (max-width: 560px) {
  .tm-pricing__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--tm-space-3);
    row-gap: var(--tm-space-2);
    align-items: baseline;
    padding: var(--tm-space-4) 0;
  }

  .tm-pricing__title {
    grid-area: 1 / 1;
    font-weight: 600;
    line-height: 1.35;
  }

  .tm-pricing__price {
    grid-area: 1 / 2;
    margin-left: 0;
    text-align: right;
  }

  .tm-pricing__link {
    grid-area: 2 / 1;
    justify-self: start;
    align-self: center;
  }

  .tm-pricing__ask {
    grid-area: 2 / 2;
    justify-self: end;
    align-self: center;
  }
}

/* 3) Annuaire: presentation repliable (le texte reste dans la page, donc
      indexable, mais ne repousse plus la recherche hors de l'ecran). */
.tm-therapists__about { margin: 0 0 var(--tm-space-5); }

.tm-therapists__about > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  padding: 0.35rem 0;
  cursor: pointer;
  font-size: var(--tm-fs-sm);
  font-weight: 600;
  color: var(--tm-primary-ink-strong);
  list-style: none;
}

.tm-therapists__about > summary::-webkit-details-marker { display: none; }

.tm-therapists__about > summary::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.tm-therapists__about[open] > summary::before { transform: rotate(45deg); }
.tm-therapists__about > summary:hover { color: var(--tm-primary-ink); }
.tm-therapists__about .tm-therapists__intro { margin: 0.25rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .tm-therapists__about > summary::before { transition: none; }
}

/* 4) Inscription: les liens legaux se coupent comme du texte (c'etaient des
      boutons insecables qui sautaient entiers a la ligne suivante). */
.tm-terms__link { display: inline; }

/* --- Filtrer par secteur (annuaire) -----------------------------------------
   Une pastille par secteur, dans la couleur de ses epingles sur la carte. Ce
   sont des liens: la page se recharge filtree, donc la liste ET la carte
   s'accordent (l'ancienne legende ne filtrait que les epingles). */
.tm-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--tm-space-5);
}

.tm-sector {
  --tm-sector-color: #475569;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  background: var(--tm-surface);
  color: var(--tm-text);
  font-size: var(--tm-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tm-sector__ico { color: var(--tm-sector-color); flex: none; }

.tm-sector__count {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--tm-bg-soft);
  color: var(--tm-muted);
  font-size: 0.75rem;
  text-align: center;
}

a.tm-sector:hover,
a.tm-sector:focus-visible {
  border-color: var(--tm-sector-color);
  color: var(--tm-text);
}

a.tm-sector:focus-visible {
  outline: 2px solid var(--tm-sector-color);
  outline-offset: 2px;
}

/* Secteur affiche: pastille pleine, la couleur devient le fond. */
.tm-sector.is-active {
  background: var(--tm-sector-color);
  border-color: var(--tm-sector-color);
  color: var(--tm-on-accent);
}

.tm-sector.is-active .tm-sector__ico { color: var(--tm-on-accent); }

.tm-sector.is-active .tm-sector__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--tm-on-accent);
}

/* Secteur sans aucune fiche: visible (le projet couvre les quatre) mais
   grise et non cliquable, la page serait vide. */
.tm-sector.is-empty {
  opacity: 0.45;
  cursor: default;
}

/* Couleurs: identiques aux epingles de la carte (map.js). */
.tm-sector[data-sector="therapist"] { --tm-sector-color: #2e8540; }
.tm-sector[data-sector="center"]    { --tm-sector-color: #2f6fb0; }
.tm-sector[data-sector="school"]    { --tm-sector-color: #b5820f; }
.tm-sector[data-sector="shop"]      { --tm-sector-color: #7d5ba6; }

/* Mobile: pastilles resserrees pour tenir sur deux lignes. */
@media (max-width: 520px) {
  .tm-sectors { gap: 0.4rem; }

  .tm-sector {
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8125rem;
  }

  .tm-sector__ico { width: 14px; height: 14px; }
  .tm-sector__count { min-width: 1.2rem; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-sector { transition: none; }
}

/* --- Effacement du compte (Mon espace) --------------------------------------
   Volontairement discret et separe du formulaire: on ne tombe pas dessus par
   hasard, mais on le trouve sans ecrire a l'equipe. */
.tm-account-danger {
  margin: var(--tm-section) 0 0;
  padding: var(--tm-space-5);
  border: 1px solid var(--tm-danger-border-warm);
  border-radius: var(--tm-radius);
  background: var(--tm-danger-bg);
}

.tm-account-danger h2 {
  margin: 0 0 var(--tm-space-2);
  font-size: 1.05rem;
  color: var(--tm-danger-dark);
}

.tm-account-danger p {
  margin: 0 0 var(--tm-space-4);
  font-size: var(--tm-fs-sm);
  color: var(--tm-muted);
}

/* Dans la colonne laterale : une carte de la largeur des modules voisins. */
.tm-account-danger--aside {
  margin-block: var(--tm-space-4) 0;
  padding: var(--tm-space-4);
}

.tm-account-danger--aside h2 {
  font-size: 1rem;
}

.tm-account-danger--aside p {
  font-size: var(--tm-fs-xs);
}

.tm-account-danger--aside .tm-btn--danger {
  width: 100%;
  justify-content: center;
}

.tm-btn--danger {
  background: var(--tm-surface);
  border-color: var(--tm-danger-border-dusty);
  color: var(--tm-danger-dark);
}

.tm-btn--danger:hover,
.tm-btn--danger:focus-visible {
  background: var(--tm-danger-dark);
  border-color: var(--tm-danger-dark);
  color: var(--tm-on-accent);
}

/* --- Accord de publication du temoignage ------------------------------------
   Le choix du nom n'apparait qu'une fois l'accord donne (sans script). */
.tm-exp__publish-how {
  margin-top: var(--tm-space-3);
  padding-left: 1.9rem;
}

.tm-exp__publish:not(:has(#tm-exp-publish:checked)) .tm-exp__publish-how {
  display: none;
}

/* --- Nous ecrire ------------------------------------------------------------
   Trois etapes numerotees, le motif en cartes cliquables. Les champs propres a
   une demande d'inscription n'apparaissent que pour ce motif, en CSS seul. */
.tm-contact { max-width: 1080px; margin-inline: auto; }

.tm-contact__head { margin-bottom: var(--tm-space-6); }
.tm-contact__head h1 { margin: 0 0 var(--tm-space-2); }

.tm-contact__lead {
  margin: 0;
  max-width: var(--tm-measure);
  font-size: var(--tm-fs-lead);
  color: var(--tm-muted);
}

.tm-contact__layout {
  display: grid;
  gap: var(--tm-space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .tm-contact__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--tm-space-7); }
}

/* ---- etapes ---- */
.tm-contact__step {
  margin: 0 0 var(--tm-space-6);
  padding: 0;
  border: 0;
}

.tm-contact__step > legend {
  display: flex;
  align-items: center;
  gap: var(--tm-space-3);
  margin-bottom: var(--tm-space-4);
  padding: 0;
  font-family: var(--tm-font-heading);
  font-size: var(--tm-fs-h3);
  font-weight: 600;
  color: var(--tm-ink);
}

.tm-contact__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--tm-primary);
  color: var(--tm-on-accent);
  font-family: var(--tm-font-body);
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---- motif: cartes a cocher ---- */
.tm-contact__reasons {
  display: grid;
  gap: var(--tm-space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .tm-contact__reasons { grid-template-columns: 1fr 1fr; }
}

/* Trois colonnes seulement quand chaque carte garde plus de 200 px: en
   dessous, la description serait coupee. */
@media (min-width: 1100px) {
  .tm-contact__reasons { grid-template-columns: repeat(3, 1fr); }
}

.tm-contact__reason {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.tm-contact__reason:hover { border-color: var(--tm-primary-border); }

/* Le bouton radio reste focalisable mais invisible: la carte le remplace. */
.tm-contact__reason input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.tm-contact__reason:has(input:checked) {
  border-color: var(--tm-primary);
  background: var(--tm-primary-50);
  box-shadow: 0 0 0 1px var(--tm-primary);
}

.tm-contact__reason:has(input:focus-visible) {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}

.tm-contact__reason-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.8rem;
  flex: none;
  border-radius: 50%;
  background: var(--tm-primary-50);
  color: var(--tm-primary-ink-strong);
}

.tm-contact__reason:has(input:checked) .tm-contact__reason-ico {
  background: var(--tm-primary);
  color: var(--tm-on-accent);
}

.tm-contact__reason-txt { display: flex; flex-direction: column; min-width: 0; }

.tm-contact__reason-title {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--tm-text);
}

/* Description sur une seule ligne: elle situe le motif sans doubler la hauteur. */
.tm-contact__reason-desc {
  font-size: 0.78125rem;
  line-height: 1.35;
  color: var(--tm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- champs ---- */
.tm-contact__grid {
  display: grid;
  gap: var(--tm-space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .tm-contact__grid { grid-template-columns: 1fr 1fr; }
}

.tm-contact__form input,
.tm-contact__form select,
.tm-contact__form textarea { width: 100%; }

.tm-contact__form textarea { resize: vertical; min-height: 8rem; }
.tm-contact__req { color: var(--tm-primary-ink-strong); }

/* ---- bloc « demande d'inscription » ---- */
.tm-contact__signup {
  margin-top: var(--tm-space-5);
  padding: var(--tm-space-5);
  border: 1px dashed var(--tm-primary-border);
  border-radius: var(--tm-radius);
  background: var(--tm-primary-50);
}

.tm-contact__signup-note {
  display: flex;
  align-items: flex-start;
  gap: var(--tm-space-2);
  margin: 0 0 var(--tm-space-4);
  font-size: var(--tm-fs-sm);
  color: var(--tm-primary-800, var(--tm-primary-ink-strong));
}

.tm-contact__signup .tm-field label { color: var(--tm-primary-ink-strong); }

/* Ferme tant que le motif « inscription » n'est pas choisi. */
.tm-contact__form:not(:has(#tm-reason-signup:checked)) .tm-contact__signup { display: none; }

/* ---- envoi ---- */
.tm-contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tm-space-4);
  padding-top: var(--tm-space-4);
  border-top: 1px solid var(--tm-border);
}

.tm-contact__actions .tm-hint { max-width: 34ch; }

/* Piege a robots: hors ecran, jamais lu par les lecteurs d'ecran. */
.tm-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- colonne d'a cote ---- */
.tm-contact__aside { display: grid; gap: var(--tm-space-4); }

.tm-contact__card {
  padding: var(--tm-space-5);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-surface);
}

.tm-contact__card--soft { background: var(--tm-bg-soft); }

.tm-contact__card h2 {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
  margin: 0 0 var(--tm-space-2);
  font-size: 1rem;
  color: var(--tm-ink);
}

.tm-contact__card h2 .tm-ico,
.tm-contact__card h2 svg { color: var(--tm-primary-ink); }

.tm-contact__card p {
  margin: 0;
  font-size: var(--tm-fs-sm);
  color: var(--tm-muted);
  line-height: 1.55;
}

.tm-contact__links {
  list-style: none;
  margin: var(--tm-space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--tm-space-2);
  font-size: var(--tm-fs-sm);
}

@media (prefers-reduced-motion: reduce) {
  .tm-contact__reason { transition: none; }
}


/* --- Etat d'un flyer (Mon espace) -------------------------------------------
   Dit d'un coup d'oeil si le flyer est visible sur la fiche, jusqu'a quand, ou
   pourquoi il ne l'est pas. Meme regle que la fiche publique. */
.tm-flyer-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--tm-radius-pill, 999px);
  font-size: var(--tm-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.tm-flyer-state::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.tm-flyer-state.is-online {
  background: var(--tm-primary-50);
  color: var(--tm-primary-ink-strong);
}

.tm-flyer-state.is-over {
  background: var(--tm-danger-bg);
  color: var(--tm-danger);
}

.tm-flyer-state.is-draft {
  background: var(--tm-bg-soft);
  color: var(--tm-muted);
}


/* Annonce d'un code promo valable, au-dessus du champ code de l'inscription. */
.tm-promo-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--tm-primary-200);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-primary-50);
  color: var(--tm-primary-ink-strong);
  font-size: var(--tm-fs-sm);
  line-height: 1.45;
}

.tm-promo-note__seeds {
  flex: none;
  font-size: 1.1rem;
  line-height: 1.2;
}

/* ===== Mode sombre ==========================================================
   Le site suit le reglage clair/sombre de l'appareil (prefers-color-scheme) :
   rien a cliquer, et le basculement automatique du soir sur telephone est
   respecte. Seules les valeurs des jetons changent ; la mise en page, les
   espacements et les tailles restent identiques. */
@media (prefers-color-scheme: dark) {
  /* :not([data-theme="light"]) : un visiteur qui a choisi le mode
     clair garde le clair meme si son appareil est en sombre. */

  :root:not([data-theme="light"]) {
    /* Previent le navigateur : ascenseurs, listes deroulantes, calendriers et
       champs natifs se dessinent en sombre au lieu de rester blancs. */
    color-scheme: dark;

    /* Encres */
    --tm-ink: #f8fafc;
    --tm-text: #e2e8f0;
    --tm-ink-strong: #f8fafc;
    --tm-ink-mid: #cbd5e1;
    --tm-muted: #94a3b8;
    --tm-muted-strong: #cbd5e1;  /* plus soutenu que --tm-muted : donc plus clair ici */
    --tm-text-soft: #b4c0cd;
    --tm-muted-soft: #7f8fa4;    /* plus discret que --tm-muted : donc plus sombre ici */
    --tm-neutral-dark: #94a3b8;

    /* Surfaces : la page est le fond le plus sombre, la carte s'en detache */
    --tm-surface: #1e293b;
    --tm-surface-veil: rgba(30, 41, 59, 0.97);
    --tm-bg-soft: #172033;
    --tm-bg-sunken: #131c2c;
    --tm-tooltip-bg: #334155;
    --tm-on-accent: #ffffff;     /* inchange : texte pose sur un aplat colore */

    /* Filets */
    --tm-border: #334155;
    --tm-border-strong: #475569;
    --tm-border-soft: #2b3a50;

    /* Vert : le fond de bouton garde sa valeur (--tm-primary et
       --tm-primary-dark viennent de l'habillage et ne bougent pas), seule
       l'encre verte s'eclaircit. */
    --tm-primary-ink: #5cba72;
    --tm-primary-ink-strong: #86d49a;
    --tm-primary-800: #a7dcb4;
    --tm-primary-900: #c9ebd1;
    --tm-primary-300: #357744;
    --tm-primary-200: #2c6338;
    --tm-primary-100: #1e4b2b;
    --tm-primary-50: #17321f;
    --tm-primary-glow: rgba(92, 186, 114, 0.25);

    /* Ambre : graines, contributions, etats en attente */
    --tm-warm: #e2a44a;
    --tm-warm-strong: #f0c27a;
    --tm-warm-mid: #dfa72a;
    --tm-warm-ink: #f0a06a;
    --tm-warm-bg: #2a2114;
    --tm-warm-bg-strong: #382b16;
    --tm-warm-border: #4d3c1e;
    --tm-warm-border-strong: #5c4620;
    --tm-warm-border-vivid: #7a5a24;
    --tm-warm-border-pending: #5c4720;
    --tm-warm-text: #e8c27a;
    --tm-warm-text-strong: #f0cd8a;
    --tm-star: #e3a038;
    --tm-gold-border: #5a4a22;
    --tm-gold-border-soft: #4a3c1e;
    --tm-gold-bg: #2a2113;
    --tm-gold-bg-deep: #332816;

    /* Rouge : erreurs, suppressions, signalements */
    --tm-danger: #ef8078;
    --tm-danger-strong: #f3938b;
    --tm-danger-dark: #e27a6e;
    --tm-danger-hover: #f0938a;
    --tm-danger-deep: #ef8b80;
    --tm-danger-text-strong: #f0857d;
    --tm-danger-bg: #3a1d1a;
    --tm-danger-bg-strong: #42201d;
    --tm-danger-border: #5d2b26;
    --tm-danger-border-soft: #5a2f2c;
    --tm-danger-border-mid: #7a3a36;
    --tm-danger-border-warm: #56302b;
    --tm-danger-border-dusty: #6b3a34;

    /* Divers */
    --tm-loading-ink: #e2e8f0;
    --tm-loading-sub: #94a3b8;

    /* Ombres : une ombre grise disparait sur fond sombre, il faut du noir */
    --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
    --tm-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.75);
    --tm-shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  }

  /* --- Exceptions : ce qui n'est pas pilote par un jeton ------------------ */

  /* Couleurs de secteur : ecrites sur la carte, elles doivent s'eclaircir. */
  :root:not([data-theme="light"]) .tm-card,
  :root:not([data-theme="light"]) .tm-profile{ --tc: var(--tm-primary-ink); }
  :root:not([data-theme="light"]) .tm-card[data-type="center"],
  :root:not([data-theme="light"]) .tm-profile[data-type="center"]{ --tc: #6fa8dc; }
  :root:not([data-theme="light"]) .tm-card[data-type="school"],
  :root:not([data-theme="light"]) .tm-profile[data-type="school"]{ --tc: #d9ab3d; }
  :root:not([data-theme="light"]) .tm-card[data-type="shop"],
  :root:not([data-theme="light"]) .tm-profile[data-type="shop"]{ --tc: #b391d6; }
  :root:not([data-theme="light"]) .tm-sector[data-sector="therapist"]{ --tm-sector-color: var(--tm-primary-ink); }
  :root:not([data-theme="light"]) .tm-sector[data-sector="center"]{ --tm-sector-color: #6fa8dc; }
  :root:not([data-theme="light"]) .tm-sector[data-sector="school"]{ --tm-sector-color: #d9ab3d; }
  :root:not([data-theme="light"]) .tm-sector[data-sector="shop"]{ --tm-sector-color: #b391d6; }

  /* Echelle de notation : les teintes vives restent lisibles, on remonte
     seulement le rouge, trop sombre sur fond ardoise. */
  :root:not([data-theme="light"]) .tm-exp__rating[data-v="1"]:has(input:checked) .tm-ico{ color: #f87171; }

  /* Cartographie : les tuiles sont concues pour le jour. On les assombrit
     plutot que de les inverser, pour que le relief et les routes restent
     reconnaissables. Le filtre se pose sur le calque : Leaflet declare
     « filter: inherit » sur chaque tuile, et une regle posee sur la tuile
     elle-meme serait ecrasee par la feuille de Leaflet, chargee apres. */
  :root:not([data-theme="light"]) .leaflet-tile-pane{ filter: brightness(0.58) saturate(0.72) contrast(1.12); }
  /* Classe doublee : la feuille de Leaflet est chargee apres la notre et pose
     un fond gris clair sur le conteneur. */
  :root:not([data-theme="light"]) .leaflet-container.leaflet-container{ background: var(--tm-bg-sunken); }
  :root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
  :root:not([data-theme="light"]) .leaflet-popup-tip,
  :root:not([data-theme="light"]) .leaflet-control-zoom a,
  :root:not([data-theme="light"]) .leaflet-control-attribution{
    background: var(--tm-surface);
    color: var(--tm-text);
  }
  :root:not([data-theme="light"]) .leaflet-control-zoom a{ border-color: var(--tm-border); }
  :root:not([data-theme="light"]) .leaflet-control-attribution a{ color: var(--tm-primary-ink); }

  /* Fleche des listes deroulantes : dessinee en gris sombre dans un SVG. */
  :root:not([data-theme="light"]) .tm-form select:not([multiple]),
  :root:not([data-theme="light"]) .tm-field select:not([multiple]),
  :root:not([data-theme="light"]) select.tm-select{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  /* Couleurs de famille : elles viennent de la base (une teinte par famille de
     pratiques) et sont donc choisies pour du texte sur fond blanc. On les
     eclaircit a la volee plutot que de toucher aux donnees. */
  :root:not([data-theme="light"]) .tm-families__count{ color: color-mix(in srgb, var(--tm-family-color, var(--tm-neutral-dark)) 45%, #ffffff); }
  :root:not([data-theme="light"]) .tm-families__link{ border-left-color: color-mix(in srgb, var(--tm-family-color, var(--tm-neutral-dark)) 65%, #ffffff); }
  :root:not([data-theme="light"]) .tm-families__link:hover,
  :root:not([data-theme="light"]) .tm-families__link:focus-visible{ border-color: color-mix(in srgb, var(--tm-family-color, var(--tm-neutral-dark)) 55%, #ffffff); }

  /* Selecteur multiple (choices.js) : sa feuille est chargee apres la notre,
     mais elle expose ses couleurs en variables — c'est par la qu'on passe. */
  :root:not([data-theme="light"]) .choices{
    --choices-bg-color: var(--tm-surface);
    --choices-bg-color-dropdown: var(--tm-surface);
    --choices-bg-color-disabled: var(--tm-bg-sunken);
    --choices-text-color: var(--tm-text);
    --choices-item-color: var(--tm-text);
    --choices-item-disabled-color: var(--tm-muted);
    --choices-disabled-color: var(--tm-muted);
    --choices-keyline-color: var(--tm-border);
    --choices-highlighted-color: var(--tm-primary-100);
    --choices-highlight-color: var(--tm-primary-ink);
    --choices-primary-color: var(--tm-primary);
    --choices-invalid-color: var(--tm-danger);
  }
  :root:not([data-theme="light"]) .choices[data-type*="select-multiple"] .choices__inner,
  :root:not([data-theme="light"]) .choices[data-type*="select-one"] .choices__inner{
    background: var(--tm-surface);
    border-color: var(--tm-border-strong);
  }
  :root:not([data-theme="light"]) .choices .choices__list--dropdown,
  :root:not([data-theme="light"]) .choices .choices__list[aria-expanded]{
    background: var(--tm-surface);
    color: var(--tm-text);
    border-color: var(--tm-border);
  }
  :root:not([data-theme="light"]) .choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
  :root:not([data-theme="light"]) .choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
    background: var(--tm-primary-100);
    color: var(--tm-primary-ink-strong);
  }
  :root:not([data-theme="light"]) .choices__placeholder{ color: var(--tm-muted); opacity: 1; }

  /* Calendrier des champs date (feuille du noyau, entierement en dur) :
     fond blanc et chiffres gris tres clairs, illisibles la nuit. */
  :root:not([data-theme="light"]) .js-calendar .calendar-container{ background: var(--tm-surface); color: var(--tm-text); border-color: var(--tm-border); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .nav,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .title,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .day,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .time{ color: var(--tm-text); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .name,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .wn,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .day.disabled,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .emptycell{ color: var(--tm-muted); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .day:hover,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .hilite{ background: var(--tm-primary-100); color: var(--tm-primary-ink-strong); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .day.today{ color: var(--tm-primary-ink); font-weight: 700; }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .day.selected{ background: var(--tm-primary); color: var(--tm-on-accent); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .btn,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .js-btn{ background: var(--tm-bg-soft); color: var(--tm-text); border-color: var(--tm-border); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container .headrow,
  :root:not([data-theme="light"]) .js-calendar .calendar-container .calendar-head-row{ background: var(--tm-bg-sunken); }
  /* Le tableau des jours porte son propre fond blanc, et la colonne des
     numeros de semaine un gris clair. */
  :root:not([data-theme="light"]) .js-calendar .calendar-container table{ background: var(--tm-surface); }
  :root:not([data-theme="light"]) .js-calendar .calendar-container td.wn{ background: var(--tm-bg-sunken); }

  /* Messages systeme de Joomla (<joomla-alert>) : la feuille du noyau les
     peint en pastel clair. Elle expose heureusement ses couleurs en variables,
     qu'il suffit de redefinir. */
  :root:not([data-theme="light"]) joomla-alert{
    --jui-alert-success-color: #a7dcb4;
    --jui-alert-success-background-color: #16301f;
    --jui-alert-success-border-color: #2c6338;
    --jui-alert-success-link-color: #c9ebd1;
    --jui-alert-info-color: #9fd4e0;
    --jui-alert-info-background-color: #14272e;
    --jui-alert-info-border-color: #275661;
    --jui-alert-info-link-color: #c3e6ee;
    --jui-alert-warning-color: #e8c27a;
    --jui-alert-warning-background-color: #2a2114;
    --jui-alert-warning-border-color: #5c4620;
    --jui-alert-warning-link-color: #f0cd8a;
    --jui-alert-danger-color: #ef8078;
    --jui-alert-danger-background-color: #3a1d1a;
    --jui-alert-danger-border-color: #5d2b26;
    --jui-alert-danger-link-color: #f3938b;
    --jui-alert-button-color-dark: #e2e8f0;
  }

  /* Photos et visuels : rien n'est retouche, sauf une tres legere baisse de
     luminosite sur les grandes images de fond, qui eblouissent la nuit. */
  :root:not([data-theme="light"]) .tm-hero__media img,
  :root:not([data-theme="light"]) .tm-guide__cover img{ filter: brightness(0.88); }
}

@media screen {

  :root[data-theme="dark"] {
    /* Previent le navigateur : ascenseurs, listes deroulantes, calendriers et
       champs natifs se dessinent en sombre au lieu de rester blancs. */
    color-scheme: dark;

    /* Encres */
    --tm-ink: #f8fafc;
    --tm-text: #e2e8f0;
    --tm-ink-strong: #f8fafc;
    --tm-ink-mid: #cbd5e1;
    --tm-muted: #94a3b8;
    --tm-muted-strong: #cbd5e1;  /* plus soutenu que --tm-muted : donc plus clair ici */
    --tm-text-soft: #b4c0cd;
    --tm-muted-soft: #7f8fa4;    /* plus discret que --tm-muted : donc plus sombre ici */
    --tm-neutral-dark: #94a3b8;

    /* Surfaces : la page est le fond le plus sombre, la carte s'en detache */
    --tm-surface: #1e293b;
    --tm-surface-veil: rgba(30, 41, 59, 0.97);
    --tm-bg-soft: #172033;
    --tm-bg-sunken: #131c2c;
    --tm-tooltip-bg: #334155;
    --tm-on-accent: #ffffff;     /* inchange : texte pose sur un aplat colore */

    /* Filets */
    --tm-border: #334155;
    --tm-border-strong: #475569;
    --tm-border-soft: #2b3a50;

    /* Vert : le fond de bouton garde sa valeur (--tm-primary et
       --tm-primary-dark viennent de l'habillage et ne bougent pas), seule
       l'encre verte s'eclaircit. */
    --tm-primary-ink: #5cba72;
    --tm-primary-ink-strong: #86d49a;
    --tm-primary-800: #a7dcb4;
    --tm-primary-900: #c9ebd1;
    --tm-primary-300: #357744;
    --tm-primary-200: #2c6338;
    --tm-primary-100: #1e4b2b;
    --tm-primary-50: #17321f;
    --tm-primary-glow: rgba(92, 186, 114, 0.25);

    /* Ambre : graines, contributions, etats en attente */
    --tm-warm: #e2a44a;
    --tm-warm-strong: #f0c27a;
    --tm-warm-mid: #dfa72a;
    --tm-warm-ink: #f0a06a;
    --tm-warm-bg: #2a2114;
    --tm-warm-bg-strong: #382b16;
    --tm-warm-border: #4d3c1e;
    --tm-warm-border-strong: #5c4620;
    --tm-warm-border-vivid: #7a5a24;
    --tm-warm-border-pending: #5c4720;
    --tm-warm-text: #e8c27a;
    --tm-warm-text-strong: #f0cd8a;
    --tm-star: #e3a038;
    --tm-gold-border: #5a4a22;
    --tm-gold-border-soft: #4a3c1e;
    --tm-gold-bg: #2a2113;
    --tm-gold-bg-deep: #332816;

    /* Rouge : erreurs, suppressions, signalements */
    --tm-danger: #ef8078;
    --tm-danger-strong: #f3938b;
    --tm-danger-dark: #e27a6e;
    --tm-danger-hover: #f0938a;
    --tm-danger-deep: #ef8b80;
    --tm-danger-text-strong: #f0857d;
    --tm-danger-bg: #3a1d1a;
    --tm-danger-bg-strong: #42201d;
    --tm-danger-border: #5d2b26;
    --tm-danger-border-soft: #5a2f2c;
    --tm-danger-border-mid: #7a3a36;
    --tm-danger-border-warm: #56302b;
    --tm-danger-border-dusty: #6b3a34;

    /* Divers */
    --tm-loading-ink: #e2e8f0;
    --tm-loading-sub: #94a3b8;

    /* Ombres : une ombre grise disparait sur fond sombre, il faut du noir */
    --tm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --tm-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
    --tm-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.75);
    --tm-shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  }

  /* --- Exceptions : ce qui n'est pas pilote par un jeton ------------------ */

  /* Couleurs de secteur : ecrites sur la carte, elles doivent s'eclaircir. */
  :root[data-theme="dark"] .tm-card,
  :root[data-theme="dark"] .tm-profile{ --tc: var(--tm-primary-ink); }
  :root[data-theme="dark"] .tm-card[data-type="center"],
  :root[data-theme="dark"] .tm-profile[data-type="center"]{ --tc: #6fa8dc; }
  :root[data-theme="dark"] .tm-card[data-type="school"],
  :root[data-theme="dark"] .tm-profile[data-type="school"]{ --tc: #d9ab3d; }
  :root[data-theme="dark"] .tm-card[data-type="shop"],
  :root[data-theme="dark"] .tm-profile[data-type="shop"]{ --tc: #b391d6; }
  :root[data-theme="dark"] .tm-sector[data-sector="therapist"]{ --tm-sector-color: var(--tm-primary-ink); }
  :root[data-theme="dark"] .tm-sector[data-sector="center"]{ --tm-sector-color: #6fa8dc; }
  :root[data-theme="dark"] .tm-sector[data-sector="school"]{ --tm-sector-color: #d9ab3d; }
  :root[data-theme="dark"] .tm-sector[data-sector="shop"]{ --tm-sector-color: #b391d6; }

  /* Echelle de notation : les teintes vives restent lisibles, on remonte
     seulement le rouge, trop sombre sur fond ardoise. */
  :root[data-theme="dark"] .tm-exp__rating[data-v="1"]:has(input:checked) .tm-ico{ color: #f87171; }

  /* Cartographie : les tuiles sont concues pour le jour. On les assombrit
     plutot que de les inverser, pour que le relief et les routes restent
     reconnaissables. Le filtre se pose sur le calque : Leaflet declare
     « filter: inherit » sur chaque tuile, et une regle posee sur la tuile
     elle-meme serait ecrasee par la feuille de Leaflet, chargee apres. */
  :root[data-theme="dark"] .leaflet-tile-pane{ filter: brightness(0.58) saturate(0.72) contrast(1.12); }
  /* Classe doublee : la feuille de Leaflet est chargee apres la notre et pose
     un fond gris clair sur le conteneur. */
  :root[data-theme="dark"] .leaflet-container.leaflet-container{ background: var(--tm-bg-sunken); }
  .leaflet-popup-content-wrapper, .leaflet-popup-tip,
  :root[data-theme="dark"] .leaflet-control-zoom a,
  :root[data-theme="dark"] .leaflet-control-attribution {
    background: var(--tm-surface);
    color: var(--tm-text);
  }
  :root[data-theme="dark"] .leaflet-control-zoom a{ border-color: var(--tm-border); }
  :root[data-theme="dark"] .leaflet-control-attribution a{ color: var(--tm-primary-ink); }

  /* Fleche des listes deroulantes : dessinee en gris sombre dans un SVG. */
  :root[data-theme="dark"] .tm-form select:not([multiple]),
  :root[data-theme="dark"] .tm-field select:not([multiple]),
  :root[data-theme="dark"] select.tm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  /* Couleurs de famille : elles viennent de la base (une teinte par famille de
     pratiques) et sont donc choisies pour du texte sur fond blanc. On les
     eclaircit a la volee plutot que de toucher aux donnees. */
  :root[data-theme="dark"] .tm-families__count{ color: color-mix(in srgb, var(--tm-family-color, var(--tm-neutral-dark)) 45%, #ffffff); }
  :root[data-theme="dark"] .tm-families__link{ border-left-color: color-mix(in srgb, var(--tm-family-color, var(--tm-neutral-dark)) 65%, #ffffff); }
  :root[data-theme="dark"] .tm-families__link:hover,
  :root[data-theme="dark"] .tm-families__link:focus-visible{ border-color: color-mix(in srgb, var(--tm-family-color, var(--tm-neutral-dark)) 55%, #ffffff); }

  /* Selecteur multiple (choices.js) : sa feuille est chargee apres la notre,
     mais elle expose ses couleurs en variables — c'est par la qu'on passe. */
  :root[data-theme="dark"] .choices {
    --choices-bg-color: var(--tm-surface);
    --choices-bg-color-dropdown: var(--tm-surface);
    --choices-bg-color-disabled: var(--tm-bg-sunken);
    --choices-text-color: var(--tm-text);
    --choices-item-color: var(--tm-text);
    --choices-item-disabled-color: var(--tm-muted);
    --choices-disabled-color: var(--tm-muted);
    --choices-keyline-color: var(--tm-border);
    --choices-highlighted-color: var(--tm-primary-100);
    --choices-highlight-color: var(--tm-primary-ink);
    --choices-primary-color: var(--tm-primary);
    --choices-invalid-color: var(--tm-danger);
  }
  .choices[data-type*="select-multiple"] .choices__inner,
  :root[data-theme="dark"] .choices[data-type*="select-one"] .choices__inner {
    background: var(--tm-surface);
    border-color: var(--tm-border-strong);
  }
  .choices .choices__list--dropdown,
  :root[data-theme="dark"] .choices .choices__list[aria-expanded] {
    background: var(--tm-surface);
    color: var(--tm-text);
    border-color: var(--tm-border);
  }
  .choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
  :root[data-theme="dark"] .choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--tm-primary-100);
    color: var(--tm-primary-ink-strong);
  }
  :root[data-theme="dark"] .choices__placeholder{ color: var(--tm-muted); opacity: 1; }

  /* Calendrier des champs date (feuille du noyau, entierement en dur) :
     fond blanc et chiffres gris tres clairs, illisibles la nuit. */
  :root[data-theme="dark"] .js-calendar .calendar-container{ background: var(--tm-surface); color: var(--tm-text); border-color: var(--tm-border); }
  :root[data-theme="dark"] .js-calendar .calendar-container .nav,
  :root[data-theme="dark"] .js-calendar .calendar-container .title,
  :root[data-theme="dark"] .js-calendar .calendar-container .day,
  :root[data-theme="dark"] .js-calendar .calendar-container .time{ color: var(--tm-text); }
  :root[data-theme="dark"] .js-calendar .calendar-container .name,
  :root[data-theme="dark"] .js-calendar .calendar-container .wn,
  :root[data-theme="dark"] .js-calendar .calendar-container .day.disabled,
  :root[data-theme="dark"] .js-calendar .calendar-container .emptycell{ color: var(--tm-muted); }
  :root[data-theme="dark"] .js-calendar .calendar-container .day:hover,
  :root[data-theme="dark"] .js-calendar .calendar-container .hilite{ background: var(--tm-primary-100); color: var(--tm-primary-ink-strong); }
  :root[data-theme="dark"] .js-calendar .calendar-container .day.today{ color: var(--tm-primary-ink); font-weight: 700; }
  :root[data-theme="dark"] .js-calendar .calendar-container .day.selected{ background: var(--tm-primary); color: var(--tm-on-accent); }
  :root[data-theme="dark"] .js-calendar .calendar-container .btn,
  :root[data-theme="dark"] .js-calendar .calendar-container .js-btn{ background: var(--tm-bg-soft); color: var(--tm-text); border-color: var(--tm-border); }
  :root[data-theme="dark"] .js-calendar .calendar-container .headrow,
  :root[data-theme="dark"] .js-calendar .calendar-container .calendar-head-row{ background: var(--tm-bg-sunken); }
  /* Le tableau des jours porte son propre fond blanc, et la colonne des
     numeros de semaine un gris clair. */
  :root[data-theme="dark"] .js-calendar .calendar-container table{ background: var(--tm-surface); }
  :root[data-theme="dark"] .js-calendar .calendar-container td.wn{ background: var(--tm-bg-sunken); }

  /* Messages systeme de Joomla (<joomla-alert>) : la feuille du noyau les
     peint en pastel clair. Elle expose heureusement ses couleurs en variables,
     qu'il suffit de redefinir. */
  :root[data-theme="dark"] joomla-alert {
    --jui-alert-success-color: #a7dcb4;
    --jui-alert-success-background-color: #16301f;
    --jui-alert-success-border-color: #2c6338;
    --jui-alert-success-link-color: #c9ebd1;
    --jui-alert-info-color: #9fd4e0;
    --jui-alert-info-background-color: #14272e;
    --jui-alert-info-border-color: #275661;
    --jui-alert-info-link-color: #c3e6ee;
    --jui-alert-warning-color: #e8c27a;
    --jui-alert-warning-background-color: #2a2114;
    --jui-alert-warning-border-color: #5c4620;
    --jui-alert-warning-link-color: #f0cd8a;
    --jui-alert-danger-color: #ef8078;
    --jui-alert-danger-background-color: #3a1d1a;
    --jui-alert-danger-border-color: #5d2b26;
    --jui-alert-danger-link-color: #f3938b;
    --jui-alert-button-color-dark: #e2e8f0;
  }

  /* Photos et visuels : rien n'est retouche, sauf une tres legere baisse de
     luminosite sur les grandes images de fond, qui eblouissent la nuit. */
  :root[data-theme="dark"] .tm-hero__media img,
  :root[data-theme="dark"] .tm-guide__cover img{ filter: brightness(0.88); }
}

/* La marge de l'en-tete est desormais identique a toutes les largeurs
   (declaration unique plus haut) : la regle propre au telephone a ete
   retiree le 2026-09-14. */

/* ---------------------------------------------------------------------------
   Carte d'annuaire : pratiques et gammes en ligne
   --------------------------------------------------------------------------- */
.tm-card__practices {
  display: block;
  margin-top: var(--tm-space-2);
  font-size: var(--tm-fs-xs);
  line-height: 1.4;
  color: var(--tm-muted);
}

.tm-card__practices .tm-badge {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Pas de pastille de couleur ici : isolee en fin de ligne, elle passait pour
   une coquille. C'est le nom qui porte la couleur de sa famille. */
.tm-card__practices .tm-badge::before {
  display: none;
}

.tm-card__practices .tm-badge {
  color: var(--tm-badge-color, var(--tm-muted));
  font-weight: 500;
}

/* La virgule ne separe que deux entrees : jamais de virgule orpheline avant
   le « +2 », ni apres la derniere. Elle reste grise, elle ne porte rien. */
.tm-card__practices .tm-badge:has(+ .tm-badge)::after {
  content: ",";
  color: var(--tm-muted);
  font-weight: 400;
}

.tm-card__more {
  display: inline;
  margin-left: 0.15rem;
}

/* Les pratiques ne sont plus dans le corps de la carte : elles forment leur
   propre rangee, sur toute la largeur, photo comprise. */
.tm-card__link,
.tm-therapists--split .tm-card__link {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.tm-card__practices {
  flex: 0 0 100%;
  margin-top: 0;
}

/* Nom, cabinet et lieu se suivent : une hauteur de ligne de texte courant
   (1,6) les eloignait inutilement. */
.tm-card__body { gap: 0.1rem; }
.tm-card__name { line-height: 1.25; }
.tm-card__business,
.tm-card__place { line-height: 1.3; }

/* ---------------------------------------------------------------------------
   En-tete de fiche : pratiques et gammes en petites pastilles teintees, point
   de couleur de la famille devant le nom (2026-09-18, demande user : « joli
   sans prendre de place »). Texte dans la couleur du texte : les couleurs de
   famille claires (jaune, orange) ne suffiraient pas au contraste.
   --------------------------------------------------------------------------- */
.tm-profile__practices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
  margin: 0.35rem 0 0.5rem !important; /* un peu d'air au-dessus et au-dessous, pas plus (demande user) */
  font-size: 0.8rem;
  line-height: 1.3;
}

.tm-profile__practices .tm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.14rem 0.6rem 0.14rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--tm-badge-color, var(--tm-muted)) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tm-badge-color, var(--tm-muted)) 10%, transparent);
  color: var(--tm-text);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-decoration: none;
}

.tm-profile__practices .tm-badge::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--tm-badge-color, var(--tm-muted));
  flex: none;
}

.tm-profile__practices .tm-badge:hover,
.tm-profile__practices .tm-badge:focus-visible {
  border-color: var(--tm-badge-color, var(--tm-muted));
  background: color-mix(in srgb, var(--tm-badge-color, var(--tm-muted)) 18%, transparent);
  text-decoration: none;
}

/* Pratiques, domaines et langues : rangees pleines de l'en-tete de fiche, et
   non colonne de droite du portrait. Sous 640 px la grille les place deja
   ainsi ; au-dessus, l'en-tete est un flex qui doit pouvoir passer a la ligne. */
.tm-profile__header {
  flex-wrap: wrap;
  /* La gouttiere de 24 px separe le portrait du texte ; entre les rangees,
     elle creuserait trois fois cet ecart. */
  row-gap: 0.25rem;
  /* Le contenu suit immediatement : 2rem etait l'ecart d'une page aeree. */
  margin-block-end: var(--tm-space-4);
}

/* Ces trois blocs se suivent comme des lignes de texte : leurs marges dataient
   du temps ou ils etaient des pastilles empilees a droite du portrait. */
.tm-profile__practices,
.tm-profile__languages,
.tm-profile__header .tm-audiences {
  margin-block: 0;
}

.tm-profile__practices,
.tm-profile__header .tm-audiences,
.tm-profile__languages {
  flex: 0 0 100%;
}

/* Le bloc d'identite ne porte plus que le titre : il occupe l'espace restant
   a cote du portrait, avant le bouton de contact. */
.tm-profile__identity { flex: 1 1 16rem; min-width: 0; }

/* ---------------------------------------------------------------------------
   Genre d'etablissement, en tete de la carte de contact
   --------------------------------------------------------------------------- */
.tm-profile__kind {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  /* Annule la marge interieure de la carte : le bandeau touche les bords. */
  margin: -24px -24px 1.25rem;
  padding: 0.7rem 1rem;
  /* Arrondi de la carte moins l'epaisseur de sa bordure, sinon un lisere
     depasse dans les angles hauts. */
  border-radius: 9px 9px 0 0;
  text-align: center;
  /* Teinte de la couleur du genre, tres diluee : la carte reste sobre. */
  background: color-mix(in srgb, var(--tm-kind-color, var(--tm-primary)) 10%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--tm-kind-color, var(--tm-primary)) 35%, transparent);
}

.tm-profile__kind-type {
  font-size: var(--tm-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-kind-color, var(--tm-primary-ink-strong));
}

.tm-profile__kind-sub {
  font-size: var(--tm-fs-sm);
  color: var(--tm-text);
}

/* Une couleur par genre : on distingue les quatre d'un coup d'oeil, ici comme
   sur la pastille de type des cartes d'annuaire. */
.tm-profile__kind--therapist { --tm-kind-color: #2e8540; }
.tm-profile__kind--center    { --tm-kind-color: #2C7FB8; }
.tm-profile__kind--school    { --tm-kind-color: #B7791F; }
.tm-profile__kind--shop      { --tm-kind-color: #7B1FA2; }

/* La presentation est juste au-dessus : l'ecart d'une grande section de plus
   n'a pas lieu d'etre. */
.tm-products { margin-top: var(--tm-space-6); }

/* ------------------------------------------------------------------ *
 * Mes fiches : selecteur de l'espace client
 *
 * Un compte peut tenir plusieurs fiches (un therapeute et sa droguerie).
 * Des onglets plutot qu'une liste deroulante : a deux ou trois entrees, on
 * voit d'un coup ce que le compte possede et sur laquelle on travaille.
 * Les couleurs sont celles du bandeau de genre des fiches publiques.
 * ------------------------------------------------------------------ */
.tm-listings {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: var(--tm-space-4);
}

.tm-listings__label {
  align-self: center;
  font-size: var(--tm-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-text-soft);
  margin-inline-end: 0.25rem;
}

.tm-listings__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--tm-radius);
  border: 1px solid var(--tm-border);
  background: var(--tm-surface, #fff);
  text-decoration: none;
  color: var(--tm-text);
  transition: border-color 0.15s, background 0.15s;
}

a.tm-listings__item:hover,
a.tm-listings__item:focus-visible {
  border-color: color-mix(in srgb, var(--tm-kind-color, var(--tm-primary)) 45%, transparent);
  background: color-mix(in srgb, var(--tm-kind-color, var(--tm-primary)) 6%, transparent);
}

/* La fiche ouverte : bordure pleine du genre, pas un simple survol appuye. */
.tm-listings__item.is-current {
  border-color: color-mix(in srgb, var(--tm-kind-color, var(--tm-primary)) 60%, transparent);
  background: color-mix(in srgb, var(--tm-kind-color, var(--tm-primary)) 12%, transparent);
  box-shadow: inset 0 -2px 0 var(--tm-kind-color, var(--tm-primary));
}

.tm-listings__name {
  font-weight: 600;
  line-height: 1.2;
}

.tm-listings__type {
  font-size: var(--tm-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tm-kind-color, var(--tm-primary-ink-strong));
}

.tm-listings__item--therapist { --tm-kind-color: #2e8540; }
.tm-listings__item--center    { --tm-kind-color: #2C7FB8; }
.tm-listings__item--school    { --tm-kind-color: #B7791F; }
.tm-listings__item--shop      { --tm-kind-color: #7B1FA2; }
/* Lien « creer une autre fiche » sous le titre / le selecteur. */
.tm-listings__add { margin: 0 0 1rem; }
#tm-add-listing .tm-field { margin: 0 0 0.9rem; text-align: left; }
#tm-add-listing select, #tm-add-listing input[type=text] { width: 100%; }
#tm-add-listing .tm-terms { gap: 0.5rem; }
/* Fenetre « prestations trouvees » : liste a cocher, defilante. */
.tm-pricing-pick { max-width: 34rem; }
.tm-pricing-pick__tools { margin: 0 0 0.5rem; font-size: 0.85rem; }
.tm-pricing-pick__tools .tm-pricing-pick__tool { background: none; border: 0; padding: 0; font: inherit; color: var(--tm-primary); cursor: pointer; text-decoration: underline; }
.tm-pricing-pick__list { list-style: none; margin: 0 0 0.6rem; padding: 0.2rem 0; max-height: 46vh; overflow: auto; border: 1px solid var(--tm-border); border-radius: var(--tm-radius-sm, 8px); }
.tm-pricing-pick__list li { border-bottom: 1px solid var(--tm-border); }
.tm-pricing-pick__list li:last-child { border-bottom: 0; }
.tm-pricing-pick__list label { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; margin: 0; font-size: 0.9rem; cursor: pointer; }
.tm-pricing-pick__list input { margin: 0; flex: none; }
#tm-pricing-quota { margin: 0.4rem 0 1rem; }