/* Mise en page propre au site (au-dessus des composants du design system). */

.tf-lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--papier-blanc); padding: 8px 16px; border-radius: var(--rayon-s); color: var(--encre); font-weight: 700; }
.tf-lien-evitement:focus { left: 16px; }

.tf-section--serree { padding-block: var(--espace-7); }
.tf-section--photo { padding-block: var(--espace-5) var(--espace-8); }
.tf-section__intro { max-width: var(--largeur-texte); margin: calc(var(--espace-5) * -1) auto var(--espace-7); text-align: center; }
.tf-section__suite { margin-top: var(--espace-6); text-align: center; }

/* En-tête de page intérieure */
.tf-entete-page { position: relative; padding-bottom: var(--espace-5); }
.tf-entete-page__photo { height: clamp(220px, 32vw, 400px); }
.tf-entete-page__texte { margin-top: var(--espace-6); }
.tf-entete-page--simple .tf-entete-page__texte { margin-top: var(--espace-7); }
.tf-entete-page__chapeau { max-width: var(--largeur-texte); margin: var(--espace-4) 0 0; }

/* Texte long (contenu Markdown) */
.tf-prose { max-width: var(--largeur-texte); }
.tf-prose p, .tf-prose ul, .tf-prose ol, .tf-prose blockquote { margin: 0 0 var(--espace-4); }
.tf-prose > :first-child { margin-top: 0; }
.tf-prose h2, .tf-prose h3 { font-family: "Blushes Espace", Blushes, var(--font-titre); font-weight: 900; color: var(--encre); line-height: 1.15; text-wrap: balance; }
.tf-prose h2 { font-size: 34px; margin: var(--espace-7) 0 var(--espace-4); }
.tf-prose h3 { font-size: 26px; margin: var(--espace-6) 0 var(--espace-3); }
.tf-prose h4, .tf-prose h5 { font-family: var(--font-texte); font-weight: 800; font-size: 19px; margin: var(--espace-5) 0 var(--espace-2); }
.tf-prose a { color: var(--petrole); font-weight: 700; text-decoration-color: var(--feuille); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tf-prose a:hover { color: var(--corail-fonce); }
.tf-prose img { display: block; height: auto; border-radius: var(--rayon-m); box-shadow: var(--ombre-feuille); margin-block: var(--espace-5); }
.tf-prose ul { padding-left: 0; list-style: none; }
.tf-prose ul li { position: relative; padding-left: 26px; margin-bottom: var(--espace-2); }
.tf-prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%237ea625' d='M3 17C3 9 8 3 18 2c0 9-6 15-15 15z'/%3E%3C/svg%3E") center / contain no-repeat; }
.tf-prose blockquote { margin: var(--espace-5) 0; padding: var(--espace-5) var(--espace-6); background: var(--papier-blanc); border-radius: var(--rayon-m); box-shadow: var(--ombre-feuille); }

/* Grilles */
.tf-grille-cartes, .tf-grille-oeuvres, .tf-grille-articles, .tf-grille-produits, .tf-grille-membres { display: grid; gap: var(--espace-7) var(--espace-6); }
.tf-grille-cartes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding-top: var(--espace-5); }
.tf-grille-oeuvres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: end; }
.tf-grille-oeuvres .tf-oeuvre__image { max-height: 380px; width: auto; max-width: 100%; }
.tf-grille-articles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tf-grille-produits { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tf-grille-membres { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tf-formule .tf-titre { color: var(--ton-encre, var(--encre)); }
.tf-carte__texte p { margin: 0; }

/* Liens-titres */
.tf-lien-titre { color: inherit; text-decoration: none; }
.tf-lien-titre:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Carte article */
.tf-carte-article__lien { display: block; color: inherit; text-decoration: none; }
.tf-carte-article__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon-m); box-shadow: var(--ombre-feuille); margin-bottom: var(--espace-3); background: var(--papier-ombre); }
.tf-carte-article__date { margin: 0 0 var(--espace-1); }
.tf-carte-article__titre { font-size: 22px; line-height: 1.2; }
.tf-carte-article__lien:hover .tf-carte-article__titre { color: var(--corail-fonce); }

/* Agenda */
.tf-liste-evenements { display: grid; gap: var(--espace-6); max-width: 820px; margin-inline: auto; }
.tf-evenement .tf-titre { font-size: 26px; }
.tf-evenement--fiche { margin-bottom: var(--espace-6); }
.tf-evenement--fiche .tf-titre { font-size: 44px; }
.tf-fiche { max-width: 880px; }
.tf-fiche__image { display: block; max-width: 100%; max-height: 520px; height: auto; margin: 0 0 var(--espace-6); border-radius: var(--rayon-m); }

/* Boutique */
.tf-produit-carte__image { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: var(--espace-3); }
.tf-produit__prix { font-family: var(--font-texte); font-weight: 800; font-size: 22px; color: var(--encre); margin: var(--espace-2) 0 var(--espace-4); }
.tf-produit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--espace-8); align-items: start; }
.tf-produit__image { width: 100%; height: auto; }

/* Formulaire de contact */
.tf-formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espace-5) var(--espace-6); max-width: 760px; margin-top: var(--espace-6); }
.tf-formulaire .plein { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .tf-produit { grid-template-columns: 1fr; gap: var(--espace-6); }
  .tf-formulaire { grid-template-columns: 1fr; }
  .tf-evenement .tf-titre { font-size: 22px; }
  .tf-evenement--fiche .tf-titre { font-size: 32px; }
  .tf-prose h2 { font-size: 28px; }
}

/* Corrections de mise en page */
body.tf-page { overflow-x: clip; }
.tf-evenement__date time { display: contents; }
.tf-hero__chapeau { max-width: 760px; }
.tf-hero__photo, .tf-entete-page__photo, .tf-section--photo .tf-photo-dechiree { overflow-x: clip; }
@media (max-width: 640px) {
  .tf-entete__inner { gap: var(--espace-3); }
  .tf-entete .tf-btn { padding: 12px 16px 13px; }
  .tf-hero .tf-colibri { display: none; }
}

/* Page pleine largeur, fond blanc granuleux ; hero plus compact */
html, body.tf-page { margin: 0; }
.tf-hero { padding-bottom: 0; }
.tf-hero__chapeau { margin-bottom: 0; }
.tf-hero + .tf-section:not(.tf-bande) { padding-top: var(--espace-8); }
.tf-hero + .tf-bande { margin-top: calc(var(--espace-8) + var(--hauteur-bord)); }
@media (max-width: 720px) { .tf-hero + .tf-section:not(.tf-bande) { padding-top: var(--espace-7); } }
.tf-section { padding-block: var(--espace-8); }
@media (max-width: 720px) { .tf-section { padding-block: var(--espace-7); } }

/* Agenda en grille (plusieurs colonnes de dates), passés regroupés par année */
.tf-liste-evenements--passes .tf-evenement .tf-titre { font-size: 21px; }
.tf-agenda__annee { font-family: var(--font-titre); font-weight: 900; font-size: 30px; margin: var(--espace-8) 0 var(--espace-5); padding-bottom: var(--espace-2); border-bottom: 2px solid var(--papier-ombre); }
.tf-agenda__annee:first-of-type { margin-top: var(--espace-4); }

/* ---------- Page contact : formulaire + coordonnées ---------- */
.tf-contact-page { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--espace-8); align-items: start; }
.tf-contact-page__formulaire { padding: var(--espace-7) var(--espace-7) var(--espace-6); }
.tf-contact-page__formulaire .tf-formulaire { max-width: none; margin-top: var(--espace-5); }
.tf-contact-page__intro { margin: var(--espace-3) 0 0; color: var(--texte-doux); }
.tf-contact-page__coordonnees { display: grid; gap: var(--espace-5); padding-top: var(--espace-4); }
.tf-contact-carte { display: grid; grid-template-columns: 72px 1fr; gap: var(--espace-4); align-items: center; padding: var(--espace-5); background: var(--papier-blanc); border-radius: 12px 5px 14px 6px / 6px 14px 5px 12px; box-shadow: var(--ombre-feuille); border-left: 6px solid var(--ton-trait); }
.tf-contact-carte:nth-child(2) { rotate: 0.6deg; } .tf-contact-carte:nth-child(3) { rotate: -0.5deg; }
.tf-contact-carte__dessin { width: 72px; height: 72px; object-fit: contain; }
.tf-contact-carte__titre { font-size: 24px; margin: 0 0 4px; color: var(--ton-encre); }
.tf-contact-carte__texte { margin: 0; font-size: 17px; line-height: 1.5; }
.tf-contact-page__reseaux { display: flex; gap: var(--espace-3); flex-wrap: wrap; margin: var(--espace-3) 0 0; }
@media (max-width: 900px) { .tf-contact-page { grid-template-columns: 1fr; gap: var(--espace-7); } .tf-contact-page__formulaire { padding: var(--espace-6) var(--espace-5); } }