@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

/* --------------------------------------------------
   VARIABLES — Minimal Ivoire
   Crème, anthracite, un seul accent émeraude. --accent / --accent-dark /
   --accent-soft restent les trois noms que la personnalisation de marque
   (E36) réécrit à la volée.
-------------------------------------------------- */
:root {
  --bg: #f7f4ec;
  --bg-alt: #f0ebdd;
  --surface: #fbfaf5;
  --text: #2b2b28;
  --muted: #746f63;

  --accent: #1f8a5c;
  --accent-dark: #145c3d;
  --accent-soft: rgba(31, 138, 92, 0.1);

  --border: #e3ddcb;

  --radius: 0;
  --shadow: 0 20px 45px rgba(43, 43, 40, 0.08);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------
   RESET
-------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.7rem;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

[id] { scroll-margin-top: 78px; }

/* --------------------------------------------------
   LAYOUT
-------------------------------------------------- */
.tr-container {
  width: 90%;
  max-width: 1160px;
  margin: 0 auto;
}

.tr-container--narrow {
  max-width: 720px;
}

.tr-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

/* --------------------------------------------------
   EN-TÊTE — nav centrée (grille à 3 colonnes symétriques)
-------------------------------------------------- */
.tr-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 244, 236, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.tr-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.15rem 0;
  gap: 1rem;
}

.tr-header__spacer {
  display: block;
}

.tr-logo {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
  display: flex;
  align-items: center;
  text-decoration: none;
}

.tr-logo__image {
  height: 34px;
  max-width: 160px;
  object-fit: contain;
}

.tr-nav {
  justify-self: center;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.82rem;
}

.tr-nav-toggle {
  display: none;
}

.tr-nav-toggle__label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  justify-self: end;
}

.tr-nav-toggle__label span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--text);
}

.tr-nav__link {
  position: relative;
  padding: 0.5rem 0.8rem;
  letter-spacing: 0.03em;
  color: var(--text);
  transition: color 0.2s;
}

.tr-nav__link::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.tr-nav__link:hover {
  color: var(--accent-dark);
}

.tr-nav__link:hover::after {
  transform: scaleX(1);
}

.btn-nav {
  border: 1px solid var(--text);
}

.tr-nav__dropdown {
  position: relative;
}

.tr-nav__dropdown > summary {
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  list-style: none;
  color: var(--text);
}

.tr-nav__dropdown > summary::-webkit-details-marker {
  display: none;
}

.tr-nav__dropdown > summary::after {
  content: " \25BE";
  font-size: 0.75em;
}

.tr-nav__dropdown-list {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0.5rem 0 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-width: 190px;
  max-width: 80vw;
  z-index: 20;
}

.tr-nav__dropdown-list li a {
  display: block;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.tr-nav__dropdown-list li a:hover {
  background: var(--bg-alt);
  color: var(--accent-dark);
}

/* --------------------------------------------------
   HERO — texte centré très aéré, puis un bandeau photo plein largeur
-------------------------------------------------- */
.tr-hero__text {
  text-align: center;
  padding: 5.5rem 5% 3.5rem;
}

.tr-hero__text h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 1rem;
}

.tr-hero__subtitle {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 auto 1.5rem;
  max-width: 34rem;
}

.tr-hero__meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2rem;
}

.tr-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  vertical-align: middle;
}

.tr-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.tr-hero__photo {
  width: 100%;
  height: 42vh;
  min-height: 260px;
  overflow: hidden;
}

.tr-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------
   SECTIONS
-------------------------------------------------- */
.tr-section {
  padding: 5rem 0;
}

.tr-section--alt {
  background: var(--bg-alt);
}

.tr-section h2 {
  font-size: 1.9rem;
  margin-bottom: 1.5rem;
}

.tr-lede {
  font-size: 1.05rem;
  color: var(--text);
}

.tr-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

.tr-prose {
  color: var(--text);
}

.tr-back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.tr-back-link:hover {
  color: var(--accent-dark);
}

/* --------------------------------------------------
   À PROPOS
-------------------------------------------------- */
.tr-facts {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 1.75rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--border);
}

.tr-facts dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.tr-facts dd {
  margin: 0.25rem 0 0;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text);
}

/* --------------------------------------------------
   CARTES — extrêmement sobres, un simple filet, pas d'ombre au repos
-------------------------------------------------- */
.tr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}

.tr-card {
  padding: 0 0 0;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  transition: opacity 0.2s ease;
}

.tr-card:hover {
  opacity: 0.75;
}

.tr-card h3 {
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.tr-card p {
  margin: 0;
  color: var(--muted);
}

.tr-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.tr-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.tr-card__price {
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--text);
  margin: 0.4rem 0;
}

.tr-card__date {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.4rem 0 0;
}

/* --------------------------------------------------
   GRILLE (galerie / réalisations)
-------------------------------------------------- */
.tr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.tr-grid__item {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.tr-grid__item:hover {
  opacity: 0.8;
}

.tr-grid__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 0.6rem;
}

.tr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.tr-lightbox:target {
  opacity: 1;
  visibility: visible;
}

.tr-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 40, 0.92);
}

.tr-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0;
}

.tr-lightbox__content img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}

.tr-lightbox__content figcaption {
  color: #ffffff;
  text-align: center;
  margin-top: 0.75rem;
  font-family: var(--font-display);
}

.tr-lightbox__close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
}

/* --------------------------------------------------
   PAGES DE DÉTAIL
-------------------------------------------------- */
.tr-detail__cover {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  margin-bottom: 1.25rem;
}

.tr-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.tr-detail__gallery-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

/* --------------------------------------------------
   PUCES
-------------------------------------------------- */
.tr-chip {
  display: inline-block;
  padding: 0.22rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.tr-chip--muted {
  background: var(--bg-alt);
  color: var(--muted);
}

.tr-chip--tag {
  margin: 0.15rem 0.3rem 0.15rem 0;
}

.tr-chip--type {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------
   CONTACT
-------------------------------------------------- */
.tr-contact-info {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tr-contact-info a {
  color: var(--accent-dark);
}

.tr-contact-info a:hover {
  text-decoration: underline;
}

.tr-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tr-alert {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  border-left: 2px solid;
}

.tr-alert--ok {
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-color: var(--accent);
}

.tr-alert--error {
  background: rgba(168, 50, 50, 0.08);
  color: #a83232;
  border-color: #a83232;
}

.tr-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1.75rem;
}

.tr-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.tr-social-link:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.tr-map-embed {
  margin: 0 0 1.75rem;
}

.tr-map-embed iframe {
  width: 100%;
  height: 280px;
  border: 1px solid var(--border);
  display: block;
}

.tr-map-embed-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--accent-dark);
}

.tr-map-embed-link:hover {
  text-decoration: underline;
}

.tr-form {
  max-width: 480px;
}

.tr-form h3 {
  font-size: 1.25rem;
}

.tr-form > p {
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.tr-form__row {
  margin-bottom: 1.25rem;
}

.tr-form__row label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.tr-form__row input,
.tr-form__row textarea {
  width: 100%;
  padding: 0.6rem 0;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.tr-form__row input:focus,
.tr-form__row textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------
   BOUTONS — rectangulaires, capitales espacées
-------------------------------------------------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-primary {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}

.btn-secondary:hover {
  background: var(--text);
  color: var(--bg);
}

/* --------------------------------------------------
   PIED DE PAGE
-------------------------------------------------- */
.tr-footer {
  border-top: 1px solid var(--border);
  padding: 1.75rem 0;
  background: var(--bg);
  font-size: 0.82rem;
  color: var(--muted);
}

.tr-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.tr-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

.tr-footer__links a {
  color: var(--muted);
}

.tr-footer__links a:hover {
  color: var(--accent-dark);
}

/* --------------------------------------------------
   RESPONSIVE
-------------------------------------------------- */
@media (max-width: 768px) {
  .tr-header__inner {
    grid-template-columns: 1fr auto;
  }

  .tr-header__spacer {
    display: none;
  }

  .tr-nav-toggle__label {
    display: flex;
  }

  .tr-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 5% 1rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .tr-nav-toggle:checked ~ .tr-nav {
    display: flex;
  }

  .tr-nav__link,
  .tr-nav__dropdown > summary {
    padding: 0.85rem 0.5rem;
    text-align: left;
  }

  .tr-nav__link::after {
    display: none;
  }

  .tr-nav__dropdown-list {
    position: static;
    max-width: none;
    transform: none;
    margin: 0 0 0 1rem;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border);
  }

  .tr-footer__inner {
    justify-content: center;
    text-align: center;
  }

  .tr-footer__links {
    justify-content: center;
  }
}


/* ==================================================================
   CORRECTIONS HERITEES DE LA FEUILLE DE BASE
   Voir `correctionsHeritees()` dans bin/make-webbuilder-templates.php.
   ================================================================== */
/* L'en-tete de la feuille de base peint `rgba(247, 244, 236, 0.94)` — le
   creme de « Minimal Ivoire », ecrit en dur et non en jeton. Tout modele
   derive heritait donc d'une barre creme quelle que soit sa palette : sur
   « Onde », dont le fond est blanc, elle se voyait franchement.

   La translucidite est voulue (l'en-tete est `sticky` et le flou rend
   lisible ce qui passe dessous), d'ou `color-mix` plutot qu'un aplat. La
   premiere declaration est le repli : un navigateur qui ignore `color-mix`
   ne comprend pas la seconde et garde un fond opaque, ce qui est laid
   nulle part. */
.tr-header {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}

/* La pastille « compte verifie » : la base peint son glyphe en `#ffffff`
   ecrit en dur, ce qui ne tient que sous un accent fonce. Selon la palette
   le contraste tombait entre 3,07 et 3,64.

   Cette paire-ci tient dans les DEUX sens, ce qui est ce qu'il faut quand
   un theme peut retourner la page : sur une page sombre `--accent-dark`
   est la variante CLAIRE de l'accent et `--bg` est sombre, donc glyphe
   sombre sur pastille claire ; sur une page claire c'est l'inverse, terme
   pour terme. Une seule regle, valable sous tous les themes, la ou il en
   fallait une par modele. */
.tr-badge {
  background: var(--accent-dark);
  color: var(--bg);
}

/* Le sur-titre est du petit texte en capitales peint avec `--accent`, une
   couleur choisie pour remplir des aplats, pas pour etre lue a 12px : sous
   les palettes claires le contraste tombait a 2,67. `--accent-dark` est
   precisement l'accent decale vers la lisibilite sur le fond courant, et il
   se decale dans le bon sens sur une page sombre comme sur une page claire. */
.tr-eyebrow {
  color: var(--accent-dark);
}

@media (max-width: 768px) {
  /* Le panneau deroulant prend toute la largeur : sans cela l'alignement
     de boite l'emporte sur l'etirement et le reduit a son contenu. */
  .tr-nav {
    justify-self: stretch;
  }
}

/* ==================================================================
   TRESSE — identité
   Inspiration de mise en page : un salon qui se prend sur rendez-vous.
   Adresse au-dessus du menu, nom écrit sur une bannière photo, récit à
   côté d'une image, adresse redonnée en pied.
   ------------------------------------------------------------------
   LE BORDEAUX EST LA COULEUR DE TEXTE AUTANT QUE D'ACCENT : #730125
   mesure 11,9:1 sur blanc, ce qui le rend lisible en corps de texte là
   où la plupart de nos accents ne tiennent qu'en aplat. C'est ce qui
   permet de l'employer pour les titres de section sans seconde teinte.

   L'OR N'EST JAMAIS DU TEXTE. #f8b93e mesure 1,9:1 sur blanc — il ne
   peut porter aucun mot. Il ne sert qu'à tracer : le filet sous la barre
   d'adresse, le trait sous les titres, le liseré du pied. C'est aussi le
   seul jeton de couleur que la personnalisation de marque (E36) ne
   réécrit pas, et c'est voulu : il se lit comme un métal, pas comme la
   couleur de l'enseigne. Une entreprise qui passe au vert garde son
   filet doré, et l'ensemble tient.
   ================================================================== */
:root {
  --bg: #ffffff;
  --bg-alt: #fdf6ec;
  --surface: #ffffff;
  --text: #2a051f;
  /* #6b5560 sur le crème : 6,3:1. Le gris froid de la base tombait à 4,1
     sur ce fond chaud — un gris n'a pas le même contraste selon la
     température du fond qui le porte. */
  --muted: #6b5560;

  --accent: #730125;
  --accent-dark: #4d0019;
  --accent-soft: rgba(115, 1, 37, 0.09);

  --border: #ead9c9;

  --radius: 14px;
  --shadow: 0 18px 44px rgba(42, 5, 31, 0.12);

  /* Aucune requête vers un fondeur : la pile est écrite pour son REPLI,
     qui est ce qui s'affichera. Georgia pour les titres — chaleureuse,
     présente sur tout appareil, et elle fait à ce modèle le caractère que
     l'anglaise manuscrite du site de référence lui donne. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* L'or, et le prune des deux bandes sombres. Hors des trois jetons de
     marque, donc stables sous la personnalisation. */
  --ornement: #f8b93e;
  --sombre: #2a051f;
}

/* ──────────────────────────────────────────────────────────────────
   1. LA BARRE D'ADRESSE
   ────────────────────────────────────────────────────────────────── */
.tr-topbar {
  background: var(--sombre);
  color: #ffffff;
  border-bottom: 2px solid var(--ornement);
  font-size: 0.85rem;
}

.tr-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0;
}

.tr-topbar__item {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Le numéro reste blanc : un lien en bordeaux sur prune mesure 1,4:1 et
   serait illisible, alors que le soulignement suffit à le dire cliquable. */
.tr-topbar__item a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  /* Sur un téléphone les deux informations s'empilent et se centrent :
     côte à côte, l'adresse se coupait au milieu d'un mot. */
  .tr-topbar__inner {
    flex-direction: column;
    justify-content: center;
  }
}

/* ──────────────────────────────────────────────────────────────────
   2. LA BARRE DU LOGO ET DU MENU
   ────────────────────────────────────────────────────────────────── */
.tr-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.tr-logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  color: var(--accent);
}

.tr-nav__link {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ──────────────────────────────────────────────────────────────────
   3. LA BANNIÈRE, LE TITRE DESSUS
   ────────────────────────────────────────────────────────────────── */
.tr-hero {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 460px;
  padding: 0;
  /* Sous l'image, et non autour : sans photo déposée, c'est cette couleur
     qui porte le titre blanc.
     `--sombre` ET NON `--accent`, et c'est la seule raison pour laquelle ce
     jeton existe. Un thème réécrit `--accent` : la palette « dark » de la
     maison en fait un orange clair, sur lequel du blanc mesure 2,0:1. Le
     héros d'un site sans bannière devenait illisible — pas sur ce modèle,
     sur une de ses variantes, c'est-à-dire là où personne ne regarde. */
  background: var(--sombre);
}

.tr-hero__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* `object-position: center 30%` et non `center` : sur une photo de
     personne, le centre géométrique tombe au niveau du buste et la tête
     sort du cadre dès que la bannière se raccourcit. */
  object-position: center 30%;
}

/* Le voile, et pourquoi il est un dégradé et non une opacité plate.
   Le texte occupe le bas du bloc : une teinte uniforme assez dense pour
   le porter éteindrait la photo sur toute sa hauteur. Le dégradé laisse
   le haut de l'image presque intact et ne fonce que là où il y a des
   mots. Le prune plutôt que du noir — un noir pur sur une photo chaude
   la rend grise. */
.tr-hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(42, 5, 31, 0.25) 0%,
    rgba(42, 5, 31, 0.55) 45%,
    rgba(42, 5, 31, 0.86) 100%
  );
}

.tr-hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
  color: #ffffff;
  text-align: left;
}

.tr-hero__text h1 {
  font-family: var(--font-display);
  color: #ffffff;
  margin: 0 0 0.6rem;
  font-size: clamp(2.1rem, 6vw, 3.4rem); /* fs-ok: le titre d'une bannière se dimensionne sur elle */
  line-height: 1.1;
}

.tr-hero__subtitle {
  color: #ffffff;
  max-width: 48ch;
  font-size: 1.05rem;
}

.tr-hero__text .tr-eyebrow {
  color: var(--ornement);
  letter-spacing: 0.22em;
}

/* Les puces du héros passent en verre : sur une photo, un aplat crème
   fait une tache, alors qu'un fond translucide prend la couleur de ce
   qu'il recouvre. Le texte reste blanc plein — mesuré sur le voile le
   plus clair du dégradé, il tient. */
.tr-hero__meta .tr-chip,
.tr-hero__meta .tr-chip--muted {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

.tr-hero__actions {
  margin-top: 1.6rem;
}

@media (max-width: 768px) {
  .tr-hero,
  .tr-hero__text {
    min-height: 380px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   4. L'IMAGE SUR LE CÔTÉ
   ────────────────────────────────────────────────────────────────── */
.tr-about {
  background: var(--bg);
}

/* `auto-fit` serait faux ici : les deux colonnes n'ont ni le même rôle ni
   la même taille, et c'est la proportion qui est voulue. Sans photo, la
   grille n'a qu'un enfant et la deuxième piste reste vide — le texte
   prend alors la largeur qu'il lui faut, ce qui est le repli souhaité. */
.tr-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 2.6rem;
  align-items: center;
}

.tr-about__photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.tr-about__photo img {
  display: block;
  width: 100%;
  /* Un portrait doux plutôt qu'un carré : à côté d'un texte, une image
     plus haute que large tient la colonne sans l'écraser. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.tr-about__texte h2 {
  margin-top: 0;
}

@media (max-width: 860px) {
  .tr-about__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
  }

  .tr-about__photo img {
    aspect-ratio: 16 / 10;
  }
}

/* ──────────────────────────────────────────────────────────────────
   5. LA GRANDE ZONE — tout ce qui vient ensuite
   ────────────────────────────────────────────────────────────────── */
.tr-section {
  padding: 4.5rem 0;
}

/* Une bande crème, large, sans liseré : c'est le changement de fond qui
   découpe la page, pas un trait. */
.tr-section--alt {
  background: var(--bg-alt);
}

/* Le trait d'or sous les titres de section — le seul ornement du modèle,
   et la seule chose que l'or y fait. */
.tr-section h2 {
  font-family: var(--font-display);
  position: relative;
  padding-bottom: 0.7rem;
  margin-bottom: 1.2rem;
}

.tr-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--ornement);
  border-radius: 2px;
}

.tr-eyebrow {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}

.tr-lede {
  font-size: 1.05rem;
}

.tr-card,
.tr-grid__item {
  border-radius: var(--radius);
  overflow: hidden;
}

.tr-card {
  border: 1px solid var(--border);
  background: var(--surface);
  transition: box-shadow 0.2s, transform 0.2s;
}

.tr-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

/* ──────────────────────────────────────────────────────────────────
   6. LA ZONE DE CONTACT
   ────────────────────────────────────────────────────────────────── */
.tr-contact-info {
  font-size: 1.02rem;
}

.tr-form input,
.tr-form textarea,
.tr-form select {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.tr-form input:focus,
.tr-form textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
}

/* Les boutons n'ont pas de préfixe dans la feuille de base : ce sont
   `.btn-primary` et `.btn-secondary`. Une règle écrite sur un bouton
   préfixé n'aurait rien peint du tout, et sans rien casser. */
.btn-primary,
.btn-secondary {
  border-radius: 999px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────
   7. LE PIED DE PAGE
   ────────────────────────────────────────────────────────────────── */
.tr-footer {
  background: var(--sombre);
  color: #ffffff;
  border-top: 3px solid var(--ornement);
}

.tr-footer a,
.tr-footer__links a {
  color: #ffffff;
}

.tr-footer__adresse {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  /* Le blanc atténué est ici du DÉCOR de hiérarchie, pas une économie :
     sur le prune, 72 % de blanc mesure encore 8,9:1. */
  color: rgba(255, 255, 255, 0.72);
}

.tr-footer__adresse a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
}