@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* ==================================================
   TREILLIÈRES MUSIQUE - STYLES OPENTALENT
   Fichier conseillé : TM-style.css

   Objectif :
   Styles communs pour les pages "Cours" du site
   Treillières Musique dans OpenTalent.

   Préfixe utilisé :
   tm-course- = élément appartenant aux pages cours.

   Organisation actuelle des pages cours :
   1. Cours individuels / instrumentaux
      .tm-course-instrument .tm-course-theme-instrument

   2. Cours collectifs d’instrument
      .tm-course-collectif .tm-course-theme-collectif

   3. Ateliers & ensembles
      .tm-course-ensemble .tm-course-theme-ensemble

   4. Éveil musical
      .tm-course-eveil .tm-course-theme-eveil

   Exemple recommandé :
   <div class="tm-course-page tm-course-instrument tm-course-theme-instrument">

   NOTE OPENTALENT :
   Si chaque section est dans un bloc HTML séparé, répéter
   les classes sur chaque bloc :
   <div class="tm-course-page tm-course-instrument tm-course-theme-instrument">
     <section class="tm-course-section">...</section>
   </div>
   ================================================== */


/* ==================================================
   1. VARIABLES GÉNÉRALES
   ==================================================

   Ces variables définissent le socle graphique commun :
   polices, textes, bordures, arrondis, ombres.

   Les couleurs propres à chaque famille de cours sont
   définies plus bas dans les thèmes fonctionnels.
   ================================================== */

:root {
  --tm-text: #222222;
  --tm-muted: #666666;
  --tm-border: #e6e0e8;
  --tm-white: #ffffff;

  --tm-radius: 16px;
  --tm-radius-small: 10px;

  --tm-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  --tm-font-title: 'Poppins', Arial, sans-serif;
  --tm-font-text: 'Nunito Sans', Arial, sans-serif;
}


/* ==================================================
   2. CONTENEUR GLOBAL DES PAGES COURS
   ==================================================

   La classe .tm-course-page doit être présente autour
   de chaque bloc HTML de page cours dans OpenTalent.

   Les variables ci-dessous servent de valeurs par défaut.
   Elles sont remplacées par les thèmes :
   instrument, collectif, ensemble, éveil.
   ================================================== */

.tm-course-page {
  /* Variables de secours si aucun thème n’est appliqué */
  --tm-course-accent: #8e297b;
  --tm-course-accent-dark: #6f1f60;
  --tm-course-accent-light: #f8eef6;
  --tm-course-title: #3b2537;
  --tm-course-title-dark: #2a1a27;

  /* Dégradé par défaut basé sur les couleurs du thème actif */
  --tm-course-gradient-start: var(--tm-course-accent-dark);
  --tm-course-gradient-end: var(--tm-course-accent);

  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}

.tm-course-page h1,
.tm-course-page h2,
.tm-course-page h3,
.tm-course-summary-item strong,
.tm-course-button,
.tm-course-related-card {
  font-family: var(--tm-font-title);
}


/* ==================================================
   3. THÈMES FONCTIONNELS
   ==================================================

   Les thèmes portent le nom de la catégorie pédagogique,
   pas seulement la couleur.

   Avantage :
   le HTML reste compréhensible pour les futurs contributeurs.

   Exemple :
   .tm-course-theme-ensemble
   est plus parlant que .tm-course-theme-blue.
   ================================================== */


/* --------------------------------------------------
   3.1 THÈME COURS INDIVIDUELS / INSTRUMENTAUX

   Pour :
   accordéon, batterie, chant, flûte, guitare classique,
   guitare électrique, piano, saxophone, trompette, violon...
   -------------------------------------------------- */

.tm-course-theme-instrument,
.tm-course-instrument {
  --tm-course-accent: #8e297b;
  --tm-course-accent-dark: #6f1f60;
  --tm-course-accent-light: #f8eef6;
  --tm-course-title: #3b2537;
  --tm-course-title-dark: #2a1a27;
}


/* --------------------------------------------------
   3.2 THÈME COURS COLLECTIFS D’INSTRUMENT

   Pour :
   piano collectif adultes, guitare d’accompagnement.

   Idée :
   apprentissage instrumental en petit groupe.
   -------------------------------------------------- */

.tm-course-theme-collectif,
.tm-course-collectif {
  --tm-course-accent: #f28c28;
  --tm-course-accent-dark: #c96a12;
  --tm-course-accent-light: #fff4e8;
  --tm-course-title: #3f3020;
  --tm-course-title-dark: #2d2116;
}


/* --------------------------------------------------
   3.3 THÈME ATELIERS & ENSEMBLES

   Pour :
   chorales, atelier percussion, orchestre,
   ensemble pop rock, ensemble blues,
   ensemble musiques actuelles, prélude à l’orchestre,
   ensemble création musicale.

   Idée :
   jouer en harmonie avec d’autres instruments,
   écouter le groupe, construire un répertoire commun.
   -------------------------------------------------- */

.tm-course-theme-ensemble,
.tm-course-ensemble {
  --tm-course-accent: #00a7b5;
  --tm-course-accent-dark: #24566b;
  --tm-course-accent-light: #eefbfc;
  --tm-course-title: #244454;
  --tm-course-title-dark: #18313d;
}


/* --------------------------------------------------
   3.4 THÈME ÉVEIL MUSICAL

   Pour :
   éveil 0 à 3 ans, éveil 4 ans,
   éveil 5 ans, éveil 6 ans.

   Palette :
   corail soutenu, corail lumineux, bleu ardoise.

   Particularité :
   le dégradé du bloc CTA utilise une fin de dégradé
   plus lumineuse que la variable d’accent classique.
   -------------------------------------------------- */

.tm-course-theme-eveil,
.tm-course-eveil {
  --tm-course-accent: #e45b67;
  --tm-course-accent-dark: #d84b58;
  --tm-course-accent-light: #fff1f2;
  --tm-course-title: #344254;
  --tm-course-title-dark: #253141;

  /* Exception validée pour l’éveil :
     corail soutenu à gauche vers corail lumineux à droite. */
  --tm-course-gradient-start: #e45b67;
  --tm-course-gradient-end: #f58d96;
}


/* ==================================================
   4. STRUCTURE GÉNÉRALE DES SECTIONS
   ================================================== */

.tm-course-section {
  margin: 2.5rem 0;
}

.tm-course-section h2,
.tm-course-summary h2,
.tm-course-objectives h2,
.tm-course-info-section h2,
.tm-course-parcours-musical h2,
.tm-course-teacher-card h2,
.tm-course-related-section h2 {
  margin: 0 0 1rem;
  color: var(--tm-course-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-course-section h3,
.tm-course-info-card h3,
.tm-course-teacher-card h3,
.tm-course-faq-item h3 {
  margin: 0 0 0.6rem;
  color: var(--tm-course-title);
  font-size: 1.15rem;
  line-height: 1.3;
}

.tm-course-section p,
.tm-course-info-card p,
.tm-course-parcours-musical p,
.tm-course-teacher-card p,
.tm-course-faq-item p {
  line-height: 1.65;
}

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

.tm-course-intro {
  max-width: 850px;
  margin: 1rem 0 2rem;
  font-size: 1.15rem;
  line-height: 1.65;
}
/*COMPOSANTS*/

/* =========================================================
   C-06 — LIEN FLÉCHÉ

   Indique qu’un texte mène vers une autre page.
   La flèche se décale légèrement au survol ou au focus.

   Utilisation :
   <a class="tm-link-arrow" href="...">Intitulé du lien</a>

   Peut également être appliqué à un élément visuel placé
   dans une carte entièrement cliquable.
   ========================================================= */

.tm-link-arrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--tm-font-title);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.tm-link-arrow::after {
  content: "›";
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.tm-link-arrow:hover::after,
.tm-link-arrow:focus::after,
a:hover .tm-link-arrow::after,
a:focus .tm-link-arrow::after {
  transform: translateX(4px);
}

.tm-link-arrow:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}


/* ==================================================
   5. HERO / EN-TÊTE DE PAGE
   ==================================================

   Bloc d’introduction :
   titre H1, phrase d’accroche et, si besoin, image.
   ================================================== */

.tm-course-hero {
  margin: 2rem 0 2.5rem;
  padding: 2rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(135deg, var(--tm-course-accent-light), #ffffff);
  border-left: 6px solid var(--tm-course-accent);
}

.tm-course-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--tm-course-title);
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 800;
}

.tm-course-hero p {
  max-width: 850px;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
}


/* ==================================================
   6. HERO AVEC IMAGE INTÉGRÉE
   ==================================================

   Utilisé quand on veut une image dans le haut de page,
   plutôt que le bandeau natif OpenTalent.

   Desktop :
   texte à gauche, image à droite.

   Mobile :
   image au-dessus, texte en dessous.
   ================================================== */

.tm-course-hero-with-image {
  padding: 1.5rem;
}

.tm-course-hero-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 1.5rem;
  align-items: center;
}

.tm-course-hero-content h1 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.tm-course-hero-content p {
  margin-bottom: 0;
}

.tm-course-hero-media img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px 14px 100px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}


/* ==================================================
   7. REMONTÉE DU PREMIER BLOC
   ==================================================

   À utiliser uniquement sur le premier bloc visible
   d’une page cours pour réduire l’espace sous le fil
   d’Ariane / l’en-tête OpenTalent.

   Exemple :
   <div class="tm-course-page tm-course-eveil tm-course-theme-eveil tm-course-pull-up">
   ================================================== */

.tm-course-pull-up {
  margin-top: -3rem;
}


/* ==================================================
   8. BLOC "EN BREF"
   ==================================================

   Résumé des informations clés :
   public, âge, format, durée, lieu, professeur...
   ================================================== */

.tm-course-summary {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-course-accent-light);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-course-accent);
}

.tm-course-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.tm-course-summary-item {
  padding: 1rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
}

.tm-course-summary-item strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--tm-course-title);
  font-size: 0.95rem;
}

.tm-course-summary-item span {
  display: block;
  line-height: 1.45;
}


/* ==================================================
   9. OBJECTIFS PÉDAGOGIQUES
   ================================================== */

.tm-course-objectives {
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-left: 6px solid var(--tm-course-accent);
}

.tm-course-objectives ul {
  margin: 0;
  padding-left: 1.2rem;
}

.tm-course-objectives li {
  margin: 0.45rem 0;
  line-height: 1.55;
}

.tm-course-objectives li::marker {
  color: var(--tm-course-accent);
}


/* ==================================================
   10. DÉROULÉ / INFOS PRATIQUES
   ==================================================

   Section avec cartes :
   contenu des séances, durée, calendrier,
   matériel, niveau, prérequis, organisation...
   ================================================== */

.tm-course-info-section {
  margin: 2.5rem 0;
}

.tm-course-info-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.tm-course-info-card {
  padding: 1.25rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-course-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.tm-course-info-card h3 {
  color: var(--tm-course-title);
}

.tm-course-info-card p {
  margin-bottom: 0;
  line-height: 1.55;
}


/* ==========================================================================
   Bloc Découverte : instruments proposés / disponibilités

   Statuts disponibles :
   - .tm-course-status-open    : Places disponibles
   - .tm-course-status-limited : Quelques places
   - .tm-course-status-full    : Complet
   - .tm-course-status-confirm : À confirmer

   Pour changer un statut, modifier à la fois la classe CSS et le texte affiché
   dans le HTML.
   ========================================================================== */

.tm-course-availability-section {
  margin-top: 3rem;
}

.tm-course-availability-panel {
  box-sizing: border-box;
  margin-left: 1.25rem;
  margin-right: 1.25rem;
  padding: 2rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff8ef 0%, #ffffff 60%);
  border: 1px solid rgba(245, 132, 32, 0.18);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.05);
}

.tm-course-availability-panel * {
  box-sizing: border-box;
}

.tm-course-availability-section .tm-course-section-header {
  max-width: 860px;
  margin-bottom: 1.5rem;
}

.tm-course-availability-section .tm-course-section-kicker {
  margin-bottom: 0.35rem;
  color: var(--tm-course-accent);
  font-weight: 700;
}

.tm-course-availability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
  align-items: stretch;
}

.tm-course-availability-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 190px;
  background: #ffffff;
  border: 1px solid rgba(30, 30, 30, 0.08);
  border-radius: 18px;
  padding: 1.25rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.tm-course-availability-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.tm-course-availability-card h3 {
  margin: 0;
  flex: 1;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.2rem;
}

.tm-course-availability-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.tm-course-availability-card > p:not(.tm-course-availability-slot) {
  margin-bottom: 1rem;
}

.tm-course-availability-slot {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-self: flex-start;
  margin-top: 0;
  padding: 0.18rem 0.46rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(90, 90, 95, 0.35);
  color: #5a5a5f;
  font-size: 0.58rem;
  font-weight: 400;
  line-height: 1.15;
}

/* ==== */


.tm-course-status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.tm-course-status-open {
  background: #e7f7ec;
  color: #207a3b;
}

.tm-course-status-limited {
  background: #fff4d8;
  color: #8a5a00;
}

.tm-course-status-full {
  background: #fde5e5;
  color: #a33030;
}

.tm-course-status-confirm {
  background: #eef1f5;
  color: #4f5b68;
}

@media (max-width: 900px) {
  .tm-course-availability-panel {
    padding: 1.5rem;
  }

  .tm-course-availability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .tm-course-availability-panel {
    margin-left: 0;
    margin-right: 0;
    padding: 1.25rem;
    border-radius: 20px;
  }

  .tm-course-availability-grid {
    grid-template-columns: 1fr;
  }

  .tm-course-availability-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .tm-course-status {
    margin-top: 0;
  }
}


/* ==================================================
   11. PARCOURS MUSICAL
   ==================================================

   Bloc pour expliquer le lien avec :
   formation musicale, ateliers, ensembles,
   auditions, projets collectifs.
   ================================================== */

.tm-course-parcours-musical {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-left: 5px solid var(--tm-course-accent);
  border-radius: var(--tm-radius-small);
  background: var(--tm-course-accent-light);
}

.tm-course-parcours-musical p {
  line-height: 1.65;
}


/* ==================================================
   12. INFOS PARENTS / ÉVEIL MUSICAL
   ==================================================

   Bloc spécifique utile pour les pages d’éveil musical.
   Peut aussi être utilisé ailleurs si besoin.
   ================================================== */

.tm-course-info-parents {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-course-accent-light);
  border: 1px solid var(--tm-border);
  border-left: 6px solid var(--tm-course-accent);
}

.tm-course-info-parents h2 {
  margin-top: 0;
  color: var(--tm-course-title);
}

.tm-course-info-parents p {
  line-height: 1.65;
}

/* ==========================================================================
   Bloc Éveil : sessions / disponibilités
   ========================================================================== */

.tm-course-eveil-sessions {
  margin-top: 2rem;
}

.tm-course-eveil-sessions h2 {
  margin-bottom: 0.75rem;
}

.tm-course-eveil-sessions > p {
  max-width: 760px;
  margin-bottom: 1.25rem;
}

.tm-course-eveil-sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.tm-course-eveil-session-card {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(30, 30, 30, 0.08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}

.tm-course-eveil-session-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.tm-course-eveil-session-card h3 {
  margin: 0;
  color: var(--tm-course-title, #5a5a5f);
  font-family: var(--tm-font-title);
  font-size: 1.05rem;
  line-height: 1.2;
}

.tm-course-eveil-session-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

@media (max-width: 620px) {
  .tm-course-eveil-session-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ==================================================
   13. CARTE PROFESSEUR
   ================================================== */

.tm-course-teacher-card {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  box-shadow: var(--tm-shadow);
}

.tm-course-teacher-card img {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  object-fit: cover;
}

.tm-course-teacher-card h2,
.tm-course-teacher-card h3 {
  margin-top: 0;
  color: var(--tm-course-title);
}

.tm-course-teacher-card p {
  margin-bottom: 0;
  line-height: 1.55;
}


/* ==================================================
   14. CARTE PROFESSEUR AVEC IMAGE RECTANGULAIRE
   ==================================================

   Variante utilisée dans les modèles avec photo
   intégrée à gauche du texte.

   Si aucune photo n’est disponible, supprimer seulement :
   <div class="tm-course-teacher-photo">...</div>
   ================================================== */

.tm-course-teacher-card-with-image {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.5rem;
  align-items: center;
}

.tm-course-teacher-photo img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px 14px 140px 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.tm-course-teacher-content h2 {
  margin-bottom: 0.25rem;
}

.tm-course-teacher-content h3 {
  margin-bottom: 0.6rem;
}

.tm-course-teacher-content p {
  margin-bottom: 0;
}

/* ==================================================
   ÉQUIPE PÉDAGOGIQUE
   ==================================================

   Variante utilisée lorsqu’un cours est animé par
   plusieurs professeurs.

   Desktop :
   photo à gauche, texte à droite.

   Mobile :
   photo au-dessus, texte en dessous.
   ================================================== */

.tm-course-team-section {
  margin: 2.5rem 0;
}

.tm-course-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.tm-course-team-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1.25rem;
  border-radius: var(--tm-radius-small);
  background: #ffffff;
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-course-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.tm-course-team-photo img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  object-position: center center;
  border-radius: 14px 14px 110px 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.tm-course-team-content h3 {
  margin: 0 0 0.5rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.1rem;
  line-height: 1.25;
}

.tm-course-team-content p {
  margin: 0;
  line-height: 1.55;
}

@media screen and (max-width: 640px) {
  .tm-course-team-grid {
    grid-template-columns: 1fr;
  }

  .tm-course-team-card {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .tm-course-team-photo img {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================
   INFOS PRATIQUES
   Bloc final de la page Équipe pédagogique.
   ========================================================= */

.tm-team-info {
  margin: 2.75rem 0 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-team-accent-light);
  border-left: 6px solid var(--tm-team-accent);
}

.tm-team-info h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-team-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
}

.tm-team-info p {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-team-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.tm-team-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--tm-team-accent);
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.tm-team-button:hover,
.tm-team-button:focus {
  transform: translateY(-2px);
  background: var(--tm-team-accent-dark);
  color: #ffffff;
  text-decoration: none;
}

.tm-team-button--secondary {
  background: var(--tm-team-accent-dark);
  border-color: var(--tm-team-accent-dark);
}

.tm-team-button--secondary:hover,
.tm-team-button--secondary:focus {
  background: #ffffff;
  color: var(--tm-team-accent-dark);
  border-color: var(--tm-team-accent-dark);
}

@media screen and (max-width: 640px) {
  .tm-team-info {
    padding: 1.2rem;
  }

  .tm-team-button-group {
    flex-direction: column;
  }

  .tm-team-button {
    width: 100%;
  }
}

/* ==================================================
   15. BOUTONS
   ================================================== */

.tm-course-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.tm-course-button {
  display: inline-block;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.tm-course-button:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.tm-course-button-primary {
  background: var(--tm-course-accent);
  color: var(--tm-white);
}

.tm-course-button-primary:hover {
  background: var(--tm-course-accent-dark);
  color: var(--tm-white);
}

.tm-course-button-secondary {
  background: var(--tm-white);
  color: var(--tm-course-title);
  border: 1px solid var(--tm-course-accent);
}

.tm-course-button-secondary:hover {
  background: var(--tm-course-accent-light);
  color: var(--tm-course-title-dark);
}


/* ==================================================
   16. BLOC TARIFS / INSCRIPTION / CONTACT
   ==================================================

   Le dégradé utilise les variables du thème actif :
   --tm-course-gradient-start
   --tm-course-gradient-end

   Par défaut :
   accent-dark vers accent.

   Pour l’éveil :
   corail soutenu vers corail lumineux.
   ================================================== */

.tm-course-cta-section {
  margin: 2.5rem 0;
  padding: 1.75rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-course-gradient-start) 0%,
    var(--tm-course-gradient-end) 100%
  );
  color: #ffffff;
}

.tm-course-cta-section h2,
.tm-course-cta-section h3,
.tm-course-cta-section p,
.tm-course-cta-section li,
.tm-course-cta-section span {
  color: #ffffff;
}

.tm-course-cta-section h2,
.tm-course-cta-section h3 {
  margin-top: 0;
}

.tm-course-cta-section p {
  max-width: 850px;
  line-height: 1.65;
}


/* Bouton principal dans le CTA :
   blanc pour bien ressortir sur le dégradé. */

.tm-course-cta-section .tm-course-button-primary {
  background: #ffffff;
  color: var(--tm-course-title);
}

.tm-course-cta-section .tm-course-button-primary:hover {
  background: var(--tm-course-accent-light);
  color: var(--tm-course-title-dark);
}


/* Bouton secondaire dans le CTA :
   transparent, bordure blanche. */

.tm-course-cta-section .tm-course-button-secondary {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.tm-course-cta-section .tm-course-button-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}



/* ==================================================
   17. CARTES TARIFAIRES PAR QUOTIENT FAMILIAL
   ==================================================

   Bloc optionnel utilisé quand une page affiche
   des tarifs détaillés selon le quotient familial.

   Principe :
   - une carte par tranche de quotient familial ;
   - les formules et montants sont listés dans chaque carte ;
   - la grille s’adapte automatiquement à la largeur disponible ;
   - sur mobile, les cartes passent en une seule colonne.

   Utilise les variables du thème actif :
   instrument, collectif, ensemble ou éveil.
   ================================================== */

.tm-course-price-cards-section {
  margin: 2.5rem 0;
}

.tm-course-price-cards-section h2 {
  margin: 0 0 1rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-course-price-cards-section p {
  max-width: 850px;
  line-height: 1.65;
}

.tm-course-price-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.tm-course-price-card {
  overflow: hidden;
  border-radius: var(--tm-radius);
  background: #ffffff;
  border: 1px solid var(--tm-border);
  border-left: 5px solid var(--tm-course-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.tm-course-price-card-header {
  min-height: 84px;
  padding: 1rem;
  background: var(--tm-course-accent-light);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tm-course-price-card-header strong {
  display: block;
  min-height: 2.9rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  line-height: 1.2;
}

.tm-course-price-card-header span {
  display: block;
  margin-top: 0.25rem;
  color: var(--tm-muted);
  font-size: 0.95rem;
}

.tm-course-price-card-list {
  padding: 0.5rem 1rem 1rem;
}

.tm-course-price-card-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--tm-border);
}

.tm-course-price-card-row:last-child {
  border-bottom: none;
}

.tm-course-price-card-row span {
  line-height: 1.4;
}

.tm-course-price-card-row strong {
  color: var(--tm-course-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.1rem;
  white-space: nowrap;
}

.tm-course-price-note {
  margin-top: 0.85rem;
  color: var(--tm-muted);
  font-size: 0.95rem;
}


/* ==================================================
   CARTES TARIFAIRES - RESPONSIVE MOBILE
   ================================================== */

@media screen and (max-width: 640px) {  
  .tm-course-price-cards-grid {
    grid-template-columns: 1fr;
  }

  .tm-course-price-card-header strong {
    font-size: 1.25rem;
  }

  .tm-course-price-card-row {
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
  }

  .tm-course-price-card-row strong {
    font-size: 1.15rem;
  }
}

/* ==================================================
   18. COURS ASSOCIÉS
   ==================================================

   Liens internes utiles pour :
   - la navigation ;
   - le SEO ;
   - la découverte d’autres cours.
   ================================================== */

.tm-course-related-section {
  margin: 2.5rem 0;
}

.tm-course-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.tm-course-related-card {
  display: block;
  padding: 1.25rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-course-accent-light);
  color: var(--tm-course-title);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--tm-border);
  border-left: 5px solid var(--tm-course-accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.tm-course-related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow);
  background: #ffffff;
  text-decoration: none;
}


/* ==================================================
   19. FAQ SIMPLE
   ==================================================

   Bloc optionnel si une page a besoin d’une FAQ.
   ================================================== */

.tm-course-faq {
  margin: 2.5rem 0;
}

.tm-course-faq h2 {
  margin: 0 0 1rem;
  color: var(--tm-course-title);
}

.tm-course-faq-item {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
}

.tm-course-faq-item h3 {
  margin-top: 0;
  color: var(--tm-course-title);
}

.tm-course-faq-item p {
  margin-bottom: 0;
  line-height: 1.55;
}


/* ==================================================
   20. SÉPARATEUR DOUX
   ================================================== */

.tm-course-separator {
  height: 1px;
  margin: 2.5rem 0;
  background: var(--tm-border);
}


/* ==================================================
   21. ANCIENS THÈMES CONSERVÉS
   ==================================================

   Ces classes sont conservées volontairement.
   Elles peuvent encore servir ponctuellement, mais les
   nouveaux modèles doivent utiliser les thèmes fonctionnels :

   - tm-course-theme-instrument
   - tm-course-theme-collectif
   - tm-course-theme-ensemble
   - tm-course-theme-eveil

   Attention :
   éviter de mélanger ancien thème et nouveau thème
   sur un même bloc.
   ================================================== */


/* Ancien thème violet */

.tm-course-theme-violet {
  --tm-course-accent: #8e297b;
  --tm-course-accent-dark: #6f1f60;
  --tm-course-accent-light: #f8eef6;
  --tm-course-title: #3b2537;
  --tm-course-title-dark: #2a1a27;
}


/* Ancien thème orange */

.tm-course-theme-orange {
  --tm-course-accent: #f26f3a;
  --tm-course-accent-dark: #b73327;
  --tm-course-accent-light: #fff1e8;
  --tm-course-title: #8f261e;
  --tm-course-title-dark: #681c16;
}


/* ==================================================
   22. RESPONSIVE TABLETTE
   ================================================== */

@media screen and (max-width: 900px) {
  .tm-course-summary-grid,
  .tm-course-info-list,
  .tm-course-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tm-course-hero {
    padding: 1.5rem;
  }

  .tm-course-hero h1 {
    font-size: 1.8rem;
  }

  .tm-course-hero-layout {
    grid-template-columns: 1fr;
  }

  .tm-course-hero-media {
    order: -1;
  }

  .tm-course-hero-media img {
    height: 210px;
  }

  .tm-course-pull-up {
    margin-top: -2.5rem;
  }
}


/* ==================================================
   23. RESPONSIVE MOBILE
   ================================================== */

@media screen and (max-width: 640px) {
  .tm-course-page {
    padding: 0 14px;
  }

  .tm-course-summary-grid,
  .tm-course-info-list,
  .tm-course-related-grid {
    grid-template-columns: 1fr;
  }

  .tm-course-hero,
  .tm-course-summary,
  .tm-course-objectives,
  .tm-course-parcours-musical,
  .tm-course-cta-section,
  .tm-course-info-parents {
    padding: 1.2rem;
  }

  .tm-course-hero {
    margin-top: 1rem;
  }

  .tm-course-hero h1 {
    font-size: 1.55rem;
  }

  .tm-course-page .tm-course-section h2,
  .tm-course-page .tm-course-summary h2,
  .tm-course-page .tm-course-objectives h2,
  .tm-course-page .tm-course-info-section h2,
  .tm-course-page .tm-course-parcours-musical h2,
  .tm-course-page .tm-course-teacher-card h2,
  .tm-course-page .tm-course-cta-section h2,
  .tm-course-page .tm-course-related-section h2 {
    font-size: 1.45rem;
  }

  .tm-course-hero p,
  .tm-course-intro,
  .tm-course-section p,
  .tm-course-parcours-musical p,
  .tm-course-cta-section p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .tm-course-summary-item,
  .tm-course-info-card,
  .tm-course-related-card,
  .tm-course-faq-item {
    padding: 1rem;
  }

  .tm-course-button-group {
    flex-direction: column;
  }

  .tm-course-button {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    text-align: center;
  }

  .tm-course-section,
  .tm-course-summary,
  .tm-course-objectives,
  .tm-course-info-section,
  .tm-course-parcours-musical,
  .tm-course-teacher-card,
  .tm-course-cta-section,
  .tm-course-related-section,
  .tm-course-faq {
    margin: 1.75rem 0;
  }

  .tm-course-hero-with-image {
    padding: 1.2rem;
  }

  .tm-course-hero-media img {
    height: 170px;
    border-radius: 12px;
  }

  .tm-course-teacher-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .tm-course-teacher-card-with-image {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .tm-course-teacher-photo img {
    width: 130px;
    height: 130px;
    border-radius: 12px 12px 60px 12px;
  }

  .tm-course-pull-up {
    margin-top: -2rem;
  }
}


/* ==================================================
   24. PAGE INDEX - TOUS LES COURS
   ==================================================

   Page intermédiaire listant l’ensemble de l’offre
   de cours Treillières Musique.

   Logique :
   - réutilise les variables existantes du site ;
   - conserve les couleurs des familles de cours ;
   - propose des cartes simples ou à plusieurs liens ;
   - permet l’ajout optionnel d’images dans les cartes.
   ================================================== */


/* --------------------------------------------------
   24.1 Variables spécifiques à la page index
   -------------------------------------------------- */

.tm-course-index-page {
  --tm-index-eveil: #e45b67;
  --tm-index-eveil-dark: #d84b58;
  --tm-index-eveil-light: #fff1f2;

  --tm-index-instrument: #8e297b;
  --tm-index-instrument-dark: #6f1f60;
  --tm-index-instrument-light: #f8eef6;

  --tm-index-collectif: #f28c28;
  --tm-index-collectif-dark: #c96a12;
  --tm-index-collectif-light: #fff4e8;

  --tm-index-ensemble: #00a7b5;
  --tm-index-ensemble-dark: #24566b;
  --tm-index-ensemble-light: #eefbfc;
}


/* --------------------------------------------------
   24.2 Hero spécifique index
   -------------------------------------------------- */

.tm-course-index-hero {
  background: linear-gradient(135deg, #f8eef6, #ffffff);
}

.tm-course-index-catchline {
  margin: 0 0 0.75rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}


/* --------------------------------------------------
   24.3 En-têtes de sections
   -------------------------------------------------- */

.tm-course-index-section {
  margin: 2.5rem 0;
}

.tm-course-index-section-header {
  max-width: 850px;
  margin-bottom: 1.15rem;
}

.tm-course-index-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-index-section-title, var(--tm-course-title));
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-course-index-section-header p:not(.tm-course-index-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-course-index-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-index-section-accent, var(--tm-course-accent));
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* Couleurs de section */
.tm-course-index-section--eveil {
  --tm-index-section-accent: var(--tm-index-eveil);
  --tm-index-section-title: #344254;
}

.tm-course-index-section--instrument {
  --tm-index-section-accent: var(--tm-index-instrument);
  --tm-index-section-title: #3b2537;
}

.tm-course-index-section--ensemble {
  --tm-index-section-accent: var(--tm-index-ensemble);
  --tm-index-section-title: #244454;
}

.tm-course-index-section--practical {
  --tm-index-section-accent: var(--tm-index-instrument);
  --tm-index-section-title: #3b2537;
}


/* --------------------------------------------------
   24.4 Grille de cartes
   -------------------------------------------------- */

.tm-course-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.tm-course-index-grid--small {
  grid-template-columns: repeat(2, 1fr);
}


/* --------------------------------------------------
   24.5 Cartes
   -------------------------------------------------- */

.tm-course-index-card {
  --tm-index-card-accent: var(--tm-index-instrument);
  --tm-index-card-light: var(--tm-index-instrument-light);
  --tm-index-card-title: #3b2537;

  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-index-card-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.tm-course-index-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow);
  background: var(--tm-index-card-light);
}

.tm-course-index-card-content {
  padding: 1.25rem;
}

.tm-course-index-card h3 {
  margin: 0 0 0.75rem;
  color: var(--tm-index-card-title);
  font-family: var(--tm-font-title);
  font-size: 1.15rem;
  line-height: 1.3;
}


/* --------------------------------------------------
   24.6 Images optionnelles dans les cartes
   -------------------------------------------------- */

.tm-course-index-card-media {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--tm-index-card-light);
}

.tm-course-index-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------
   24.7 Listes de liens dans les cartes
   -------------------------------------------------- */

.tm-course-index-card-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-course-index-card-links li + li {
  margin-top: 0.45rem;
}

.tm-course-index-card a {
  color: var(--tm-text);
  text-decoration: none;
}

.tm-course-index-card a:hover,
.tm-course-index-card a:focus {
  color: var(--tm-index-card-accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.tm-course-index-card a:focus-visible {
  outline: 3px solid var(--tm-index-card-accent);
  outline-offset: 4px;
  border-radius: 8px;
}


/* --------------------------------------------------
   24.8 Cartes à lien unique
   -------------------------------------------------- */

.tm-course-index-card--single {
  min-height: 120px;
}

.tm-course-index-card--single > a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 120px;
  padding: 1.25rem;
  color: var(--tm-index-card-title);
  font-family: var(--tm-font-title);
  text-decoration: none;
}

.tm-course-index-card-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

.tm-course-index-card-action {
  display: inline-flex;
  align-items: center;
  margin-top: 0.9rem;
  color: var(--tm-primary);
  font-family: var(--tm-font-title);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s ease;
}

.tm-course-index-card-action::after {
  content: "›";
  margin-left: 0.45rem;
  font-size: 1.15rem;
  transition: transform 0.25s ease;
}

.tm-course-index-card-link:hover .tm-course-index-card-action,
.tm-course-index-card-link:focus .tm-course-index-card-action {
  color: var(--tm-primary-dark);
}

.tm-course-index-card-link:hover .tm-course-index-card-action::after,
.tm-course-index-card-link:focus .tm-course-index-card-action::after {
  transform: translateX(4px);
}


/* --------------------------------------------------
   24.9 Couleurs des cartes par famille
   -------------------------------------------------- */

.tm-course-index-card--eveil {
  --tm-index-card-accent: var(--tm-index-eveil);
  --tm-index-card-light: var(--tm-index-eveil-light);
  --tm-index-card-title: #344254;
}

.tm-course-index-card--instrument {
  --tm-index-card-accent: var(--tm-index-instrument);
  --tm-index-card-light: var(--tm-index-instrument-light);
  --tm-index-card-title: #3b2537;
}

.tm-course-index-card--collectif {
  --tm-index-card-accent: var(--tm-index-collectif);
  --tm-index-card-light: var(--tm-index-collectif-light);
  --tm-index-card-title: #3f3020;
}

.tm-course-index-card--ensemble {
  --tm-index-card-accent: var(--tm-index-ensemble);
  --tm-index-card-light: var(--tm-index-ensemble-light);
  --tm-index-card-title: #244454;
}


/* --------------------------------------------------
   24.10 Infos pratiques
   -------------------------------------------------- */

.tm-course-index-practical {
  margin-top: 0;
}

.tm-course-index-practical h2 {
  margin-bottom: 0.75rem;
}


/* --------------------------------------------------
   24.11 Responsive tablette
   -------------------------------------------------- */

@media screen and (max-width: 900px) {
  .tm-course-index-grid,
  .tm-course-index-grid--small {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --------------------------------------------------
   24.12 Responsive mobile
   -------------------------------------------------- */

@media screen and (max-width: 640px) {
  .tm-course-index-catchline {
    font-size: 1.1rem;
  }

  .tm-course-index-grid,
  .tm-course-index-grid--small {
    grid-template-columns: 1fr;
  }

  .tm-course-index-card,
  .tm-course-index-card--single,
  .tm-course-index-card--single > a {
    min-height: auto;
  }

  .tm-course-index-card--single > a {
    align-items: center;
  }

  .tm-course-index-section-header h2 {
    font-size: 1.45rem;
  }
}



/* --------------------------------------------------
   Images vignettes / bandeaux dans les cartes
   -------------------------------------------------- */

.tm-course-index-card-media {
  position: relative;
  overflow: hidden;
  height: 100px;
  background: var(--tm-index-card-light);
}

.tm-course-index-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.tm-course-index-section--collectif {
  --tm-index-section-accent: var(--tm-index-collectif);
  --tm-index-section-title: #3f3020;
}



/* ==================================================
   25. PAGES INTERMÉDIAIRES / PAGES DE MENU

   Utilisation :
   - Éveil musical
   - Piano
   - Guitare
   - Chant
   - Ateliers
   - Ensembles musicaux

   Objectif :
   Créer une grille de grandes cartes cliquables avec image,
   plus confortable sur mobile qu’une liste de liens.

   Classes principales :
   - .tm-course-category-page
   - .tm-course-category-hero
   - .tm-course-category-grid
   - .tm-course-category-card

   Important :
   Ces classes sont volontairement séparées des classes
   .tm-course-index-* utilisées pour la page "Tous les cours".
   Cela permet de modifier les pages intermédiaires sans toucher
   à la page catalogue principale.
   ================================================== */


/* --------------------------------------------------
   25.1 Hero spécifique aux pages intermédiaires

   Ce bloc complète .tm-course-hero déjà existant.
   Il garde donc le style général des pages cours :
   fond clair, bordure à gauche, couleurs du thème actif.
   -------------------------------------------------- */

.tm-course-category-hero {
  background: linear-gradient(135deg, var(--tm-course-accent-light), #ffffff);
}

.tm-course-category-catchline {
  margin: 0 0 0.75rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}


/* --------------------------------------------------
   25.2 En-têtes de sections

   Utilisé au-dessus des grilles de cartes.
   -------------------------------------------------- */

.tm-course-category-section {
  margin: 2.5rem 0;
}

.tm-course-category-section-header {
  max-width: 850px;
  margin-bottom: 1.15rem;
}

.tm-course-category-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-course-category-section-header p:not(.tm-course-category-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-course-category-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-course-accent);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* --------------------------------------------------
   25.3 Grille de cartes

   Par défaut :
   - auto-fit permet à la grille de s’adapter au nombre de cartes ;
   - minmax(240px, 1fr) évite les cartes trop étroites ;
   - sur mobile, une règle plus bas force une seule colonne.
   -------------------------------------------------- */

.tm-course-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}


/* --------------------------------------------------
   25.4 Carte cliquable

   Toute la carte est un lien.
   Cela améliore nettement l’usage sur téléphone.

   La couleur vient du thème actif :
   - éveil : corail
   - instrument : violet
   - collectif : orange
   - ensemble : bleu-vert
   -------------------------------------------------- */

.tm-course-category-card {
  overflow: hidden;
  min-height: 100%;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-course-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.tm-course-category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow);
  background: var(--tm-course-accent-light);
  border-color: var(--tm-course-accent);
}

.tm-course-category-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--tm-text);
  text-decoration: none;
}

.tm-course-category-card-link:hover,
.tm-course-category-card-link:focus {
  color: var(--tm-text);
  text-decoration: none;
}

.tm-course-category-card-link:focus-visible {
  outline: 3px solid var(--tm-course-accent);
  outline-offset: 4px;
  border-radius: var(--tm-radius-small);
}


/* --------------------------------------------------
   25.5 Images des cartes des pages intermédiaires

   Ces règles concernent uniquement les pages de menu :
   - Éveil musical
   - Piano
   - Guitare
   - Chant
   - Ateliers
   - Ensembles musicaux

   Elles sont volontairement séparées des images de la page
   "Tous les cours" afin de pouvoir modifier les hauteurs
   ou le rendu des pages intermédiaires sans toucher à la
   page catalogue principale.

   Valeurs retenues :
   - 175px sur desktop
   - 140px sur mobile
   -------------------------------------------------- */

.tm-course-category-card-media {
  overflow: hidden;
  height: 175px;
  background: var(--tm-course-accent-light);
}

.tm-course-category-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------
   25.6 Contenu des cartes

   Chaque carte contient :
   - un titre h3
   - une courte description
   - un repère d’action « Découvrir le cours »

   Toute la carte reste cliquable. Le repère d’action
   indique clairement ce comportement, notamment sur mobile.
   -------------------------------------------------- */

.tm-course-category-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.2rem;
}

.tm-course-category-card-content h3 {
  margin: 0 0 0.45rem;
  color: var(--tm-course-title);
  font-family: var(--tm-font-title);
  font-size: 1.15rem;
  line-height: 1.3;
}

.tm-course-category-card-content p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.5;
}

/* Repère d’action placé en bas de la carte.
   La carte entière reste le lien cliquable. */
.tm-course-category-card-action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1rem;
  color: var(--tm-course-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
}

.tm-course-category-card-action::after {
  content: "›";
  transition: transform 0.2s ease;
}

.tm-course-category-card:hover .tm-course-category-card-action::after,
.tm-course-category-card-link:focus .tm-course-category-card-action::after {
  transform: translateX(3px);
}

.tm-course-category-card:hover .tm-course-category-card-content h3 {
  color: var(--tm-course-accent-dark);
}


/* --------------------------------------------------
   25.7 Bloc infos pratiques

   Complète .tm-course-cta-section déjà existant.
   Le dégradé est géré par le thème actif :
   éveil, instrument, collectif, ensemble, etc.
   -------------------------------------------------- */

.tm-course-category-practical {
  margin-top: 0;
}

.tm-course-category-practical h2 {
  margin-bottom: 0.75rem;
}


/* --------------------------------------------------
   25.8 Responsive tablette
   -------------------------------------------------- */

@media screen and (max-width: 900px) {
  .tm-course-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --------------------------------------------------
   25.9 Responsive mobile
   -------------------------------------------------- */

@media screen and (max-width: 640px) {
  .tm-course-category-catchline {
    font-size: 1.1rem;
  }

  .tm-course-category-grid {
    grid-template-columns: 1fr;
  }

  .tm-course-category-card-media {
    height: 140px;
  }

  .tm-course-category-card-content {
    padding: 1rem;
  }

  .tm-course-category-section-header h2 {
    font-size: 1.45rem;
  }
}



/* =========================================================
   PAGE MENU — L’ÉCOLE DE MUSIQUE
   Identifiant documentaire : TM-ECOLE-MENU

   Page intermédiaire donnant accès à :
   - La nouvelle école
   - L’équipe pédagogique
   - L’association

   Cette page réutilise les composants existants :
   - tm-course-category-page
   - tm-course-category-hero
   - tm-course-category-grid
   - tm-course-category-card
   - tm-course-category-card-action

   Les cartes sont entièrement cliquables.
   ========================================================= */


/* =========================================================
   CONTENEUR SPÉCIFIQUE

   La couleur principale reprend le thème bleu des pages
   consacrées à l’école et aux pratiques collectives.
   ========================================================= */

.tm-school-menu-page {
  --tm-school-menu-accent: #00a7b5;
  --tm-school-menu-accent-dark: #24566b;
  --tm-school-menu-accent-light: #eefbfc;
}


/* =========================================================
   GRILLE DES CARTES

   Trois cartes sur les écrans suffisamment larges.
   Deux colonnes sur tablette et une seule sur mobile.
   ========================================================= */

.tm-school-menu-page .tm-course-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* =========================================================
   VISUELS DES CARTES

   Les vraies images et les placeholders occupent exactement
   la même surface afin de conserver un rendu homogène.

   La hauteur générale reste gérée par les règles communes
   des pages intermédiaires.
   ========================================================= */

.tm-school-menu-page .tm-course-category-card-media {
  position: relative;
  background: var(--tm-school-menu-accent-light);
}

.tm-school-menu-page .tm-course-category-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}


/* Le placeholder remplit complètement la zone du visuel. */

.tm-school-menu-page .tm-course-category-card-media .tm-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0;
  padding: 1rem;
}


/* =========================================================
   CTA PERSONNALISÉS

   Le composant générique tm-link-arrow ajoute la flèche
   et son déplacement au survol de la carte.
   ========================================================= */

.tm-school-menu-page .tm-course-category-card-action {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--tm-school-menu-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
}

.tm-school-menu-page .tm-course-category-card:hover
.tm-course-category-card-action,
.tm-school-menu-page .tm-course-category-card-link:focus
.tm-course-category-card-action {
  color: var(--tm-school-menu-accent);
}


/* =========================================================
   BLOC INFOS PRATIQUES

   Le bloc réutilise le CTA général des pages de cours,
   avec les couleurs du thème bleu.
   ========================================================= */

.tm-school-menu-page .tm-school-menu-practical {
  margin-top: 0;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media screen and (max-width: 900px) {
  .tm-school-menu-page .tm-course-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-school-menu-page .tm-course-category-grid {
    grid-template-columns: 1fr;
  }

  .tm-school-menu-page .tm-course-category-card-action {
    padding-top: 0.8rem;
  }
}





















/* =========================================================
   26. PAGE AGENDA
   Styles spécifiques à la page Agenda de Treillières Musique.
   ========================================================= */

.tm-agenda-page {
  /* Couleurs principales de la page Agenda */
  --tm-agenda-accent: #00a7b5;
  --tm-agenda-accent-dark: #24566b;
  --tm-agenda-accent-light: #eefbfc;

  /* Couleurs pour la section coups de cœur */
  --tm-agenda-heart: #e45b67;
  --tm-agenda-heart-dark: #c94752;
  --tm-agenda-heart-light: #fff1f2;

  /* Hauteur des visuels de cartes */
  --tm-agenda-visual-height: 120px;
  --tm-agenda-visual-height-mobile: 90px;

  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   HERO
   Bloc d’introduction de la page.
   ========================================================= */

.tm-agenda-hero {
  margin: 0 0 2.5rem;
  padding: 2.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(135deg, var(--tm-agenda-accent-light), #ffffff);
  box-shadow: var(--tm-shadow);
}

.tm-agenda-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--tm-agenda-accent-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
}

.tm-agenda-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-agenda-catchline {
  margin: 0 0 0.75rem !important;
  color: var(--tm-agenda-accent-dark) !important;
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}


/* =========================================================
   KICKERS
   Petits libellés en majuscules au-dessus des titres de section.
   Exemple : Treillières Musique, À découvrir.
   ========================================================= */

.tm-agenda-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-agenda-accent);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* =========================================================
   SECTIONS
   Blocs principaux de la page.
   ========================================================= */

.tm-agenda-section {
  margin: 2.75rem 0;
}

.tm-agenda-section-header {
  max-width: 850px;
  margin-bottom: 1.15rem;
}

.tm-agenda-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-agenda-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-agenda-section-header p:not(.tm-agenda-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   SECTION COUPS DE CŒUR
   Variante de couleur pour les événements externes relayés.
   ========================================================= */

.tm-agenda-section--heart .tm-agenda-kicker {
  color: var(--tm-agenda-heart);
}

.tm-agenda-section--heart .tm-agenda-section-header h2 {
  color: var(--tm-agenda-heart-dark);
}


/* =========================================================
   GRILLE DE CARTES
   Organisation responsive des cartes.
   ========================================================= */

.tm-agenda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}


/* =========================================================
   CARTES
   Les cartes sont informatives.
   Elles ne sont pas cliquables et ne réagissent pas au survol.
   Seuls les boutons visibles sont cliquables.
   ========================================================= */

.tm-agenda-card {
  overflow: hidden;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-agenda-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  cursor: default;
}

/* Carte Treillières Musique */
.tm-agenda-card--tm {
  border-top-color: var(--tm-agenda-accent);
}

/* Carte coup de cœur */
.tm-agenda-card--heart {
  border-top-color: var(--tm-agenda-heart);
}


/* =========================================================
   VISUELS DES CARTES
   Pour modifier la hauteur des visuels :
   changer --tm-agenda-visual-height dans .tm-agenda-page.
   ========================================================= */

.tm-agenda-card-media {
  height: var(--tm-agenda-visual-height);
  background: var(--tm-agenda-accent-light);
  overflow: hidden;
}

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


/* =========================================================
   CONTENU DES CARTES
   Date, titre, descriptif, bouton éventuel.
   ========================================================= */

.tm-agenda-card-content {
  padding: 1.2rem;
}

.tm-agenda-date {
  display: inline-block;
  margin: 0 0 0.65rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--tm-agenda-accent-light);
  color: var(--tm-agenda-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
}

.tm-agenda-card--heart .tm-agenda-date {
  background: var(--tm-agenda-heart-light);
  color: var(--tm-agenda-heart-dark);
}

.tm-agenda-card h3 {
  margin: 0 0 0.5rem;
  color: var(--tm-agenda-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.18rem;
  line-height: 1.3;
}

.tm-agenda-card--heart h3 {
  color: var(--tm-agenda-heart-dark);
}

.tm-agenda-card p {
  margin: 0 0 1rem;
  color: var(--tm-muted);
  line-height: 1.55;
}


/* =========================================================
   BOUTONS
   Les boutons sont les seuls éléments interactifs des cartes.
   ========================================================= */

.tm-agenda-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.tm-agenda-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--tm-agenda-accent);
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.tm-agenda-button:hover,
.tm-agenda-button:focus {
  transform: translateY(-2px);
  background: var(--tm-agenda-accent-dark);
  color: #ffffff;
  text-decoration: none;
}

/* Bouton dans les cartes coups de cœur */
.tm-agenda-card--heart .tm-agenda-button {
  background: var(--tm-agenda-heart);
}

.tm-agenda-card--heart .tm-agenda-button:hover,
.tm-agenda-card--heart .tm-agenda-button:focus {
  background: var(--tm-agenda-heart-dark);
}

/* Bouton secondaire, utilisé pour “Découvrir les cours” */
.tm-agenda-button--secondary {
  background: var(--tm-agenda-accent-dark);
  color: #ffffff;
  border-color: var(--tm-agenda-accent-dark);
}

.tm-agenda-button--secondary:hover,
.tm-agenda-button--secondary:focus {
  background: #ffffff;
  color: var(--tm-agenda-accent-dark);
  border-color: var(--tm-agenda-accent-dark);
}


/* =========================================================
   INFOS PRATIQUES
   Bloc de bas de page.
   ========================================================= */

.tm-agenda-info {
  margin: 2.75rem 0 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-agenda-accent-light);
  border-left: 6px solid var(--tm-agenda-accent);
}

.tm-agenda-info h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-agenda-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.45rem;
}

.tm-agenda-info p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   Ajustements mobile.
   Pour modifier la hauteur mobile des visuels :
   changer --tm-agenda-visual-height-mobile dans .tm-agenda-page.
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-agenda-page {
    padding: 0 16px;
  }

  .tm-agenda-hero {
    padding: 1.5rem;
  }

  .tm-agenda-catchline {
    font-size: 1.1rem;
  }

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

  .tm-agenda-card-media {
    height: var(--tm-agenda-visual-height-mobile);
  }

  .tm-agenda-card-content {
    padding: 1rem;
  }

  .tm-agenda-section-header h2 {
    font-size: 1.45rem;
  }
}


/* =========================================================
   27. PAGE L’ÉCOLE DE MUSIQUE
   Page : L’école > La nouvelle école
   ========================================================= */


/* =========================================================
   CONTENEUR GLOBAL DE PAGE
   Variables principales :
   - couleurs
   - hauteurs du visuel hero
   - largeur maximale
   ========================================================= */

.tm-school-page {
  --tm-school-accent: #00a7b5;
  --tm-school-accent-dark: #24566b;
  --tm-school-accent-light: #eefbfc;

  --tm-school-visual-height: 420px;
  --tm-school-visual-height-tablet: 340px;
  --tm-school-visual-height-mobile: 220px;

  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   HERO
   Bloc d’introduction avec titre, accroche, texte,
   boutons et visuel de la nouvelle école.
   ========================================================= */

.tm-school-hero {
  margin: 0 0 2.5rem;
  padding: 2.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(135deg, var(--tm-school-accent-light), #ffffff);
  box-shadow: var(--tm-shadow);
}

.tm-school-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
}

.tm-school-hero p {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-school-catchline {
  margin: 0 0 0.75rem !important;
  color: var(--tm-school-accent-dark) !important;
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}


/* =========================================================
   VISUEL HERO
   Image principale de la nouvelle école.
   La hauteur se règle dans .tm-school-page :
   --tm-school-visual-height
   --tm-school-visual-height-tablet
   --tm-school-visual-height-mobile
   ========================================================= */

.tm-school-hero-media {
  margin-top: 1.75rem;
  height: var(--tm-school-visual-height);
  overflow: hidden;
  border-radius: var(--tm-radius);
  background: var(--tm-school-accent-light);
}

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

/* Classes utiles pour ajuster le cadrage de l’image */
.tm-school-hero-media--center img {
  object-position: center center;
}

.tm-school-hero-media--top img {
  object-position: center top;
}

.tm-school-hero-media--bottom img {
  object-position: center bottom;
}


/* =========================================================
   BOUTONS
   Bouton principal : bleu turquoise
   Bouton secondaire : bleu foncé, avec inversion au survol
   ========================================================= */

.tm-school-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.tm-school-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--tm-school-accent);
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.tm-school-button:hover,
.tm-school-button:focus {
  transform: translateY(-2px);
  background: var(--tm-school-accent-dark);
  color: #ffffff;
  text-decoration: none;
}

.tm-school-button--secondary {
  background: var(--tm-school-accent-dark);
  color: #ffffff;
  border-color: var(--tm-school-accent-dark);
}

.tm-school-button--secondary:hover,
.tm-school-button--secondary:focus {
  background: #ffffff;
  color: var(--tm-school-accent-dark);
  border-color: var(--tm-school-accent-dark);
}


/* =========================================================
   SECTIONS GÉNÉRALES
   Titres, surtitres et textes d’introduction.
   ========================================================= */

.tm-school-section {
  margin: 2.75rem 0;
}

.tm-school-section-header {
  max-width: 850px;
  margin-bottom: 1.15rem;
}

.tm-school-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-school-accent);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tm-school-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-school-section-header p:not(.tm-school-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   BLOC MISE EN AVANT
   Utilisé pour mettre en valeur le texte sur la nouvelle école.
   ========================================================= */

.tm-school-highlight {
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-school-accent-light);
  border-left: 6px solid var(--tm-school-accent);
}

.tm-school-highlight p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   CARTES PRATIQUES MUSICALES
   Cartes de navigation vers les grandes rubriques de cours.
   Ici, toute la carte est cliquable.
   ========================================================= */

.tm-school-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.tm-school-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.2rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-school-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  color: var(--tm-text);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.tm-school-card:hover,
.tm-school-card:focus {
  transform: translateY(-3px);
  box-shadow: var(--tm-shadow);
  border-color: var(--tm-school-accent);
  background: var(--tm-school-accent-light);
  color: var(--tm-text);
  text-decoration: none;
}

.tm-school-card:focus-visible {
  outline: 3px solid var(--tm-school-accent);
  outline-offset: 4px;
}

.tm-school-card h3 {
  margin: 0 0 0.45rem;
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.12rem;
  line-height: 1.3;
}

.tm-school-card p {
  margin: 0 0 1rem;
  color: var(--tm-muted);
  line-height: 1.55;
}

.tm-school-card-action {
  margin-top: auto;
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-weight: 800;
  font-size: 0.92rem;
}


/* =========================================================
   INFOS PRATIQUES
   Fond bleu clair avec deux blocs blancs séparés :
   - Venir à l’école
   - Accès & renseignements
   ========================================================= */

.tm-school-info {
  margin: 2.75rem 0 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-school-accent-light);
  border-left: 6px solid var(--tm-school-accent);
}

.tm-school-info h2 {
  margin: 0 0 1rem;
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.45rem;
}

.tm-school-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.tm-school-info-box {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.25rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.tm-school-info-box h3 {
  margin: 0 0 0.75rem;
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.12rem;
  line-height: 1.3;
}

.tm-school-info-box p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.6;
}


/* =========================================================
   BLOC LOCALISATION
   Picto localisation + adresse.
   Le fond du picto reprend le bleu foncé du CTA secondaire.
   ========================================================= */

.tm-school-location-block {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.tm-school-location-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--tm-radius-small);
  background: var(--tm-school-accent-dark);
  overflow: hidden;
}

.tm-school-location-icon {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.tm-school-address {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.55;
}

.tm-school-address strong {
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
}


/* =========================================================
   ACCESSIBILITÉ PMR
   Badge lisible dans le bloc Accès & renseignements.
   ========================================================= */

.tm-school-accessibility {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--tm-school-accent-light);
  color: var(--tm-school-accent-dark);
  font-family: var(--tm-font-title);
  font-weight: 800;
  line-height: 1.35;
}

.tm-school-info-actions {
  margin-top: auto;
}


/* =========================================================
   RESPONSIVE TABLETTE
   Les deux blocs infos pratiques passent en une colonne.
   ========================================================= */

@media screen and (max-width: 900px) {
  .tm-school-hero-media {
    height: var(--tm-school-visual-height-tablet);
  }

  .tm-school-info-grid {
    grid-template-columns: 1fr;
  }

  .tm-school-info-actions {
    margin-top: 1rem;
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   Ajustements des espacements et tailles.
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-school-page {
    padding: 0 16px;
  }

  .tm-school-hero {
    padding: 1.5rem;
  }

  .tm-school-catchline {
    font-size: 1.1rem;
  }

  .tm-school-hero-media {
    height: var(--tm-school-visual-height-mobile);
  }

  .tm-school-section-header h2 {
    font-size: 1.45rem;
  }

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

  .tm-school-info {
    padding: 1.2rem;
  }

  .tm-school-info-box {
    padding: 1rem;
  }

  .tm-school-location-block {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .tm-school-location-visual {
    width: 60px;
    height: 60px;
  }

  .tm-school-location-icon {
    width: 44px;
    height: 44px;
  }
}











/* =========================================================
   28. PAGE ÉQUIPE PÉDAGOGIQUE

   Présentation des professeurs de Treillières Musique.

   Principes :
   - une carte statique par professeur ;
   - aucun effet de survol sur la carte ou la photo ;
   - seuls les liens vers les cours sont interactifs ;
   - utilisation du composant générique C-06 tm-link-arrow.
   ========================================================= */


/* =========================================================
   CONTENEUR GLOBAL
   ========================================================= */

.tm-team-page {
  --tm-team-accent: #00a7b5;
  --tm-team-accent-dark: #24566b;
  --tm-team-accent-light: #eefbfc;

  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   HERO
   ========================================================= */

.tm-team-hero {
  margin: 0 0 2.5rem;
  padding: 2.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-team-accent-light),
    #ffffff
  );
  border-left: 6px solid var(--tm-team-accent);
  box-shadow: var(--tm-shadow);
}

.tm-team-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--tm-team-accent-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
}

.tm-team-catchline {
  margin: 0 0 0.75rem;
  color: var(--tm-team-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}

.tm-team-hero p:not(.tm-team-catchline) {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   INTRODUCTION DE SECTION
   ========================================================= */

.tm-team-section {
  margin: 2.75rem 0;
}

.tm-team-section-header {
  max-width: 850px;
  margin-bottom: 1.25rem;
}

.tm-team-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-team-accent);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tm-team-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-team-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-team-section-header p:not(.tm-team-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   GRILLE DES PROFESSEURS

   Pour le prototype, une seule carte est affichée.
   La grille pourra ensuite accueillir toutes les cartes.
   ========================================================= */

.tm-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}


/* =========================================================
   CARTE PROFESSEUR

   Carte volontairement statique :
   - aucun déplacement ;
   - aucun changement d’ombre au survol ;
   - aucun effet sur la photo.
   ========================================================= */

.tm-team-card {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  min-height: 100%;
  padding: 1.25rem;
  border-radius: var(--tm-radius);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-team-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   PHOTO DU PROFESSEUR
   ========================================================= */

.tm-team-card-photo {
  overflow: hidden;
  width: 180px;
  aspect-ratio: 4 / 5;
  border-radius: 14px 14px 140px 14px;
  background: var(--tm-team-accent-light);
}

.tm-team-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


/* =========================================================
   CONTENU DE LA CARTE
   ========================================================= */

.tm-team-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}

.tm-team-card h3 {
  margin: 0 0 0.75rem;
  color: var(--tm-team-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-team-card-description {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.6;
}


/* =========================================================
   COURS ENSEIGNÉS
   ========================================================= */

.tm-team-card-courses {
  margin-top: 1.2rem;
}

.tm-team-card-courses-title {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--tm-team-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 0.92rem;
  font-weight: 800;
}

.tm-team-card-courses-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tm-team-card-courses-list a {
  color: var(--tm-team-accent-dark);
}

.tm-team-card-courses-list a:hover,
.tm-team-card-courses-list a:focus {
  color: var(--tm-team-accent);
  text-decoration: none;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media screen and (max-width: 900px) {
  .tm-team-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-team-page {
    padding: 0 16px;
  }

  .tm-team-hero {
    padding: 1.5rem;
  }

  .tm-team-catchline {
    font-size: 1.1rem;
  }

  .tm-team-section-header h2 {
    font-size: 1.45rem;
  }

  .tm-team-card {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }

  .tm-team-card-photo {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 4 / 5;
  }

  .tm-team-card h3 {
    font-size: 1.25rem;
  }
}




/* =========================================================
   29. PAGE L’ASSOCIATION
   Identifiant documentaire : TM-ASSOCIATION

   Présentation du projet associatif de Treillières Musique.

   Principes :
   - valoriser les engagements actuels de l’association ;
   - présenter son fonctionnement bénévole ;
   - mettre en avant l’accessibilité financière et physique ;
   - privilégier le présent plutôt qu’un historique détaillé ;
   - aucune animation sur les cartes informatives ;
   - seuls les boutons et liens explicites sont interactifs.
   ========================================================= */


/* =========================================================
   CONTENEUR GLOBAL
   ========================================================= */

.tm-association-page {
  --tm-association-accent: #00a7b5;
  --tm-association-accent-dark: #24566b;
  --tm-association-accent-light: #eefbfc;

  --tm-association-warm: #f28c28;
  --tm-association-warm-dark: #c96a12;
  --tm-association-warm-light: #fff4e8;

  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   C-01 — HERO
   Introduction de la page Association.
   ========================================================= */

.tm-association-hero {
  margin: 0 0 2.5rem;
  padding: 2.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-association-accent-light),
    #ffffff
  );
  border-left: 6px solid var(--tm-association-accent);
  box-shadow: var(--tm-shadow);
}

.tm-association-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
}

.tm-association-catchline {
  margin: 0 0 0.75rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}

.tm-association-hero p:not(.tm-association-catchline) {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   VISUEL HERO
   Placeholder temporaire en attendant une image associative.
   ========================================================= */

.tm-association-hero-media {
  margin-top: 1.75rem;
  height: 280px;
  overflow: hidden;
  border-radius: var(--tm-radius);
  background: var(--tm-association-accent-light);
}

.tm-association-hero-media .tm-image-placeholder {
  min-height: 100%;
}


/* =========================================================
   STRUCTURE DES SECTIONS
   ========================================================= */

.tm-association-section {
  margin: 2.75rem 0;
}

.tm-association-section-header {
  max-width: 850px;
  margin-bottom: 1.25rem;
}

.tm-association-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-association-accent);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tm-association-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-association-section-header p:not(.tm-association-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   C-05 — CARTES DE VALEURS
   Cartes strictement informatives, sans effet de survol.
   ========================================================= */

.tm-association-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.tm-association-value-card {
  padding: 1.25rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-association-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: default;
}

.tm-association-value-card h3 {
  margin: 0 0 0.55rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.08rem;
  line-height: 1.3;
}

.tm-association-value-card p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.55;
}


/* =========================================================
   NOTRE PROJET ASSOCIATIF
   Texte éditorial avec visuel temporaire.
   ========================================================= */

.tm-association-project {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 1.5rem;
  align-items: stretch;
}

.tm-association-project-content {
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-association-accent-light);
  border-left: 6px solid var(--tm-association-accent);
}

.tm-association-project-content h2 {
  margin: 0 0 0.75rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.6rem;
  line-height: 1.3;
}

.tm-association-project-content p {
  margin: 0 0 1rem;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-association-project-content p:last-child {
  margin-bottom: 0;
}

.tm-association-project-media {
  overflow: hidden;
  min-height: 260px;
  border-radius: var(--tm-radius);
  background: var(--tm-association-accent-light);
}


/* =========================================================
   POURQUOI CHOISIR TREILLIÈRES MUSIQUE
   Informations concrètes et actuelles.
   ========================================================= */

.tm-association-benefits {
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-association-warm-light),
    #ffffff
  );
  border-left: 6px solid var(--tm-association-warm);
}

.tm-association-benefits h2 {
  margin: 0 0 1rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.6rem;
  line-height: 1.3;
}

.tm-association-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.tm-association-benefit {
  padding: 1rem;
  border-radius: var(--tm-radius-small);
  background: #ffffff;
  border: 1px solid var(--tm-border);
}

.tm-association-benefit strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  line-height: 1.35;
}

.tm-association-benefit span {
  display: block;
  color: var(--tm-muted);
  line-height: 1.5;
}


/* =========================================================
   C-08 — CARTES PERSONNES
   Variante : Conseil d’administration

   Organisation :
   - bureau : 3 cartes horizontales principales ;
   - administrateurs : 6 cartes compactes ;
   - aucune carte n’est cliquable ;
   - aucun effet de survol ;
   - grand arrondi en bas à droite conservé sur les photos.
   ========================================================= */


/* =========================================================
   SOUS-TITRES DE LA SECTION
   ========================================================= */

.tm-association-board-subtitle {
  margin: 1.5rem 0 0.85rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 800;
}


/* =========================================================
   LE BUREAU
   Trois cartes principales horizontales.
   ========================================================= */

.tm-association-board-main-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.tm-association-board-main-card {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 100%;
  padding: 1rem;
  border-radius: var(--tm-radius);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-association-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: default;
}

.tm-association-board-main-photo {
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 12px 12px 70px 12px;
  background: var(--tm-association-accent-light);
}

.tm-association-board-main-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.tm-association-board-main-content {
  min-width: 0;
}

.tm-association-board-main-content h3 {
  margin: 0 0 0.2rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.08rem;
  line-height: 1.3;
}

.tm-association-board-role {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--tm-association-accent);
  font-family: var(--tm-font-title);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.3;
}

.tm-association-board-main-content p {
  margin: 0;
  color: var(--tm-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}


/* =========================================================
   LES ADMINISTRATEURS
   Six cartes secondaires compactes.
   ========================================================= */

.tm-association-board-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.tm-association-board-secondary-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 100%;
  padding: 0.85rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-white);
  border: 1px solid var(--tm-border);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.035);
  cursor: default;
}

.tm-association-board-secondary-photo {
  overflow: hidden;
  width: 76px;
  height: 76px;
  border-radius: 10px 10px 48px 10px;
  background: var(--tm-association-accent-light);
}

.tm-association-board-secondary-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.tm-association-board-secondary-content {
  min-width: 0;
}

.tm-association-board-secondary-content h3 {
  margin: 0 0 0.15rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 0.98rem;
  line-height: 1.25;
}

.tm-association-board-secondary-role {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--tm-association-accent);
  font-family: var(--tm-font-title);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

.tm-association-board-secondary-content p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--tm-muted);
  font-size: 0.86rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media screen and (max-width: 900px) {
  .tm-association-board-main-grid {
    grid-template-columns: 1fr;
  }

  .tm-association-board-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-association-board-main-card {
    grid-template-columns: 92px minmax(0, 1fr);
    padding: 0.9rem;
  }

  .tm-association-board-main-photo {
    width: 92px;
    height: 92px;
    border-radius: 10px 10px 58px 10px;
  }

  .tm-association-board-secondary-grid {
    grid-template-columns: 1fr;
  }

  .tm-association-board-secondary-card {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .tm-association-board-secondary-photo {
    width: 68px;
    height: 68px;
    border-radius: 9px 9px 42px 9px;
  }
}


/* =========================================================
   REJOINDRE L’ASSOCIATION
   Bloc éditorial avec placeholder et CTA.
   ========================================================= */

.tm-association-join {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: 1.5rem;
  align-items: stretch;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-association-accent-light);
  border-left: 6px solid var(--tm-association-accent);
}

.tm-association-join-media {
  overflow: hidden;
  min-height: 220px;
  border-radius: var(--tm-radius-small);
}

.tm-association-join-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tm-association-join-content h2 {
  margin: 0 0 0.65rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.6rem;
  line-height: 1.3;
}

.tm-association-join-content p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   C-03 — BOUTONS CTA
   ========================================================= */

.tm-association-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.tm-association-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--tm-association-accent);
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.tm-association-button:hover,
.tm-association-button:focus {
  transform: translateY(-2px);
  background: var(--tm-association-accent-dark);
  color: #ffffff;
  text-decoration: none;
}

.tm-association-button--secondary {
  background: var(--tm-association-accent-dark);
  border-color: var(--tm-association-accent-dark);
}

.tm-association-button--secondary:hover,
.tm-association-button--secondary:focus {
  background: #ffffff;
  color: var(--tm-association-accent-dark);
  border-color: var(--tm-association-accent-dark);
}


/* =========================================================
   C-07 — BLOC INFOS PRATIQUES
   ========================================================= */

.tm-association-info {
  margin: 2.75rem 0 0;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-association-accent-light);
  border-left: 6px solid var(--tm-association-accent);
}

.tm-association-info h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-association-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.45rem;
  line-height: 1.3;
}

.tm-association-info p {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media screen and (max-width: 900px) {
  .tm-association-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-association-project,
  .tm-association-join {
    grid-template-columns: 1fr;
  }

  .tm-association-benefits-grid,
  .tm-association-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-association-project-media,
  .tm-association-join-media {
    min-height: 200px;
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-association-page {
    padding: 0 16px;
  }

  .tm-association-hero {
    padding: 1.5rem;
  }

  .tm-association-catchline {
    font-size: 1.1rem;
  }

  .tm-association-hero-media {
    height: 200px;
  }

  .tm-association-section-header h2 {
    font-size: 1.45rem;
  }

  .tm-association-values-grid,
  .tm-association-benefits-grid,
  .tm-association-board-grid {
    grid-template-columns: 1fr;
  }

  .tm-association-project-content,
  .tm-association-benefits,
  .tm-association-join,
  .tm-association-info {
    padding: 1.2rem;
  }

  .tm-association-board-photo {
    aspect-ratio: 4 / 3;
    border-radius: 0 0 140px 0;
  }

  .tm-association-button-group {
    flex-direction: column;
  }

  .tm-association-button {
    width: 100%;
  }
}














/* =========================================================
   30. PAGE REJOIGNEZ TREILLIÈRES MUSIQUE
   Identifiant documentaire : TM-REJOIGNEZ

   Objectifs :
   - présenter les postes et opportunités disponibles ;
   - accueillir les candidatures spontanées ;
   - valoriser le bénévolat et l’engagement au CA ;
   - préparer l’intégration d’un formulaire OpenTalent.

   Interactions :
   - les cartes informatives ne réagissent pas au survol ;
   - seuls les CTA visibles sont cliquables.
   ========================================================= */


/* =========================================================
   CONTENEUR GLOBAL
   ========================================================= */

.tm-join-page {
  --tm-join-accent: #00a7b5;
  --tm-join-accent-dark: #24566b;
  --tm-join-accent-light: #eefbfc;

  --tm-join-warm: #f28c28;
  --tm-join-warm-dark: #c96a12;
  --tm-join-warm-light: #fff4e8;

  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   C-01 — HERO
   ========================================================= */

.tm-join-hero {
  margin: 0 0 2.5rem;
  padding: 2.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-join-accent-light),
    #ffffff
  );
  border-left: 6px solid var(--tm-join-accent);
  box-shadow: var(--tm-shadow);
}

.tm-join-hero h1 {
  margin: 0 0 0.75rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
}

.tm-join-catchline {
  margin: 0 0 0.75rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}

.tm-join-hero p:not(.tm-join-catchline) {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}

.tm-join-hero-media {
  margin-top: 1.75rem;
  height: 260px;
  overflow: hidden;
  border-radius: var(--tm-radius);
}

.tm-join-hero-media .tm-image-placeholder {
  min-height: 100%;
}


/* =========================================================
   STRUCTURE DES SECTIONS
   ========================================================= */

.tm-join-section {
  margin: 2.75rem 0;
}

.tm-join-section-header {
  max-width: 850px;
  margin-bottom: 1.25rem;
}

.tm-join-kicker {
  margin: 0 0 0.3rem;
  color: var(--tm-join-accent);
  font-family: var(--tm-font-title);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tm-join-section-header h2 {
  margin: 0 0 0.6rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}

.tm-join-section-header p:not(.tm-join-kicker) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   C-05 — CARTES DE VALEURS
   Cartes statiques sans hover.
   ========================================================= */

.tm-join-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.tm-join-value-card {
  padding: 1.2rem;
  border-radius: var(--tm-radius-small);
  background: #ffffff;
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-join-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: default;
}

.tm-join-value-card h3 {
  margin: 0 0 0.5rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.08rem;
  line-height: 1.3;
}

.tm-join-value-card p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.55;
}


/* =========================================================
   C-10 — CARTE OPPORTUNITÉ

   Composant générique utilisable pour :
   - un poste ;
   - une candidature spontanée ;
   - une mission bénévole ;
   - un appel à compétences ;
   - une recherche de musicien.

   La carte n’est pas entièrement cliquable.
   Seul le CTA visible est interactif.
   ========================================================= */

.tm-opportunity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.tm-opportunity-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  min-height: 100%;
  border-radius: var(--tm-radius);
  background: #ffffff;
  border: 1px solid var(--tm-border);
  border-top: 5px solid var(--tm-join-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  cursor: default;
}

.tm-opportunity-card--spontaneous {
  border-top-color: var(--tm-join-warm);
}

.tm-opportunity-card-media {
  height: 150px;
  overflow: hidden;
  background: var(--tm-join-accent-light);
}

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

.tm-opportunity-card-media .tm-image-placeholder {
  min-height: 100%;
  border-radius: 0;
}

.tm-opportunity-card-content {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}

.tm-opportunity-card-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--tm-join-accent-light);
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.tm-opportunity-card--spontaneous .tm-opportunity-card-badge {
  background: var(--tm-join-warm-light);
  color: var(--tm-join-warm-dark);
}

.tm-opportunity-card h3 {
  margin: 0 0 0.55rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.25rem;
  line-height: 1.3;
}

.tm-opportunity-card p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.6;
}

.tm-opportunity-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.tm-opportunity-card-meta li {
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--tm-join-accent-light);
  color: var(--tm-join-accent-dark);
  font-size: 0.82rem;
  font-weight: 700;
}

.tm-opportunity-card-action {
  margin-top: auto;
  padding-top: 1.15rem;
}


/* =========================================================
   C-03 — BOUTONS CTA
   ========================================================= */

.tm-join-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.65rem 1rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--tm-join-accent);
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.tm-join-button:hover,
.tm-join-button:focus {
  transform: translateY(-2px);
  background: var(--tm-join-accent-dark);
  color: #ffffff;
  text-decoration: none;
}

.tm-join-button--secondary {
  background: var(--tm-join-accent-dark);
  border-color: var(--tm-join-accent-dark);
}

.tm-join-button--secondary:hover,
.tm-join-button--secondary:focus {
  background: #ffffff;
  color: var(--tm-join-accent-dark);
}


/* =========================================================
   BÉNÉVOLAT
   Cartes informatives compactes.
   ========================================================= */

.tm-join-volunteer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.tm-join-volunteer-card {
  padding: 1.1rem;
  border-radius: var(--tm-radius-small);
  background: #ffffff;
  border: 1px solid var(--tm-border);
  border-left: 5px solid var(--tm-join-accent);
  cursor: default;
}

.tm-join-volunteer-card h3 {
  margin: 0 0 0.45rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.05rem;
}

.tm-join-volunteer-card p {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.5;
}


/* =========================================================
   CONSEIL D’ADMINISTRATION
   ========================================================= */

.tm-join-board {
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: var(--tm-join-accent-light);
  border-left: 6px solid var(--tm-join-accent);
}

.tm-join-board h2 {
  margin: 0 0 0.65rem;
  color: var(--tm-join-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.55rem;
}

.tm-join-board p {
  max-width: 850px;
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   TOUTE LES RAISONS SONT BONNES POUR NOUS REJOINDRE
   ========================================================= */

.tm-join-listening {
  margin-top: 2.75rem;
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-join-accent-dark),
    var(--tm-join-accent)
  );
  color: #ffffff;
}

.tm-join-listening h2 {
  margin: 0 0 0.6rem;
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-size: 1.55rem;
}

.tm-join-listening p {
  max-width: 850px;
  margin: 0;
  color: #ffffff;
  line-height: 1.65;
}


/* =========================================================
   EMPLACEMENT DU FORMULAIRE OPENTALENT

   Le composant natif OpenTalent sera inséré à cet endroit.
   Cette classe sert uniquement de repère et de conteneur.
   ========================================================= */

.tm-join-form-container {
  margin: 1.25rem 0 0;
}


/* =========================================================
   RESPONSIVE TABLETTE
   ========================================================= */

@media screen and (max-width: 900px) {
  .tm-join-values-grid,
  .tm-join-volunteer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-join-page {
    padding: 0 16px;
  }

  .tm-join-hero {
    padding: 1.5rem;
  }

  .tm-join-catchline {
    font-size: 1.1rem;
  }

  .tm-join-hero-media {
    height: 200px;
  }

  .tm-join-section-header h2 {
    font-size: 1.45rem;
  }

  .tm-join-values-grid,
  .tm-opportunity-grid,
  .tm-join-volunteer-grid {
    grid-template-columns: 1fr;
  }

  .tm-opportunity-card-media {
    height: 140px;
  }

  .tm-join-board,
  .tm-join-form-intro {
    padding: 1.2rem;
  }

  .tm-join-button {
    width: 100%;
  }
}



/* =========================================================
   MESSAGE DE CONFIRMATION DU FORMULAIRE

   Utilisé après l’envoi du formulaire OpenTalent.
   Le bloc doit rester informatif et ne contient aucun lien.
   ========================================================= */

.tm-form-confirmation {
  margin: 1.5rem 0;
  padding: 1.5rem;
  border-left: 6px solid var(--tm-join-accent, #00a7b5);
  border-radius: var(--tm-radius, 16px);
  background: linear-gradient(
    135deg,
    var(--tm-join-accent-light, #eefbfc),
    #ffffff
  );
  color: var(--tm-text, #24343b);
  box-shadow: var(--tm-shadow, 0 6px 18px rgba(0, 0, 0, 0.08));
}

.tm-form-confirmation h2 {
  margin: 0 0 0.7rem;
  color: var(--tm-join-accent-dark, #24566b);
  font-family: var(--tm-font-title);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
}

.tm-form-confirmation p {
  margin: 0;
  color: var(--tm-muted, #5d6a70);
  line-height: 1.65;
}

.tm-form-confirmation-closing {
  margin-top: 0.85rem !important;
  color: var(--tm-join-accent-dark, #24566b) !important;
  font-family: var(--tm-font-title);
  font-weight: 800;
}

@media screen and (max-width: 640px) {
  .tm-form-confirmation {
    padding: 1.2rem;
  }

  .tm-form-confirmation h2 {
    font-size: 1.3rem;
  }
}

/* =========================================================
   31. PAGE FORMULAIRE — REJOIGNEZ-NOUS
   Identifiant documentaire : TM-REJOIGNEZ-FORMULAIRE

   Page technique non indexée, accessible depuis les CTA
   de la page « Rejoignez-nous ».

   Structure :
   - introduction et retour vers la page principale ;
   - formulaire natif OpenTalent ;
   - confirmation gérée par un contenu TYPO3 dédié.
   ========================================================= */


/* =========================================================
   CONTENEUR GLOBAL
   ========================================================= */

.tm-join-form-page, div[id^="formulaire-TM-opportunites-"]  {
  --tm-join-form-accent: #00a7b5;
  --tm-join-form-accent-dark: #24566b;
  --tm-join-form-accent-light: #eefbfc;

  width: 100%;
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.tm-join-form-hero {
  margin: 0 0 1.5rem;
  padding: 2rem;
  border-left: 6px solid var(--tm-join-form-accent);
  border-radius: var(--tm-radius);
  background: linear-gradient(
    135deg,
    var(--tm-join-form-accent-light),
    #ffffff
  );
  box-shadow: var(--tm-shadow);
}

.tm-join-form-hero h1 {
  margin: 0 0 0.7rem;
  color: var(--tm-join-form-accent-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
}

.tm-join-form-catchline {
  margin: 0 0 0.75rem;
  color: var(--tm-join-form-accent-dark);
  font-family: var(--tm-font-title);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.tm-join-form-hero p:not(.tm-join-form-catchline) {
  margin: 0;
  color: var(--tm-muted);
  line-height: 1.65;
}


/* =========================================================
   LIEN DE RETOUR
   Utilise le composant générique C-06 — Lien fléché.
   ========================================================= */

.tm-join-form-back {
  margin-bottom: 1rem;
}

.tm-join-form-back .tm-link-arrow {
  color: var(--tm-join-form-accent-dark);
}

.tm-join-form-back .tm-link-arrow::before {
  content: "‹";
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.tm-join-form-back .tm-link-arrow::after {
  content: none;
}

.tm-join-form-back .tm-link-arrow:hover::before,
.tm-join-form-back .tm-link-arrow:focus::before {
  transform: translateX(-4px);
}


/* =========================================================
   AIDE AVANT LE FORMULAIRE
   ========================================================= */

.tm-join-form-help {
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--tm-radius-small);
  background: var(--tm-join-form-accent-light);
  color: var(--tm-muted);
  line-height: 1.6;
}

.tm-join-form-help strong {
  color: var(--tm-join-form-accent-dark);
}


/* =========================================================
   CONTENEUR DU FORMULAIRE OPENTALENT
   ========================================================= */

.tm-join-form-native {
  margin: 0;
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {
  .tm-join-form-page, div[id^="formulaire-TM-opportunites-"]  {
    padding-right: 16px;
    padding-left: 16px;
  }

  .tm-join-form-hero {
    padding: 1.4rem;
  }

  .tm-join-form-catchline {
    font-size: 1.05rem;
  }

  .tm-join-form-help {
    padding: 0.9rem 1rem;
  }
}




/* =========================================================
   32. FORMULAIRES OPENTALENT
   Composant TMDS : C-12

   Habillage des formulaires TYPO3 / OpenTalent.
   ========================================================= */


/* =========================================================
   32.1 CONTENEUR GÉNÉRAL

   Même largeur maximale que les autres blocs du site.
   ========================================================= */

.frame-type-form_formframework {
  --tm-form-accent: #00a7b5;
  --tm-form-dark: #24566b;
  --tm-form-light: #eefbfc;
  --tm-form-border: #d5e1e5;
  --tm-form-error: #b42318;

  width: calc(100% - 40px);
  max-width: 1140px;
  margin: 1.5rem auto 3rem;
  padding: 0;
  box-sizing: border-box;

  color: var(--tm-text);
  font-family: var(--tm-font-text);
}


/* =========================================================
   32.2 SUPPRESSION DES TITRES TECHNIQUES

   Masque les titres générés au-dessus du formulaire.
   Le Hero « Votre démarche » assure déjà cette fonction.
   ========================================================= */

.frame-type-form_formframework > header {
  display: none;
}

.frame-type-form_formframework form > h1,
.frame-type-form_formframework form > h2,
.frame-type-form_formframework form > h3 {
  display: none;
}


/* =========================================================
   32.3 CARTE DU FORMULAIRE
   ========================================================= */

.frame-type-form_formframework form {
  width: 100%;
  margin: 0;
  padding: 2rem;
  box-sizing: border-box;

  border: 1px solid var(--tm-form-border);
  border-left: 6px solid var(--tm-form-accent);
  border-radius: var(--tm-radius);
  background: #ffffff;
  box-shadow: var(--tm-shadow);
}


/* =========================================================
   32.4 STRUCTURE INTERNE
   ========================================================= */

.frame-type-form_formframework fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.frame-type-form_formframework fieldset + fieldset {
  margin-top: 1.5rem;
}

.frame-type-form_formframework .form-group {
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.frame-type-form_formframework .form-group:last-child {
  margin-bottom: 0;
}

.frame-type-form_formframework .input {
  width: 100%;
}


/* =========================================================
   32.5 LABELS
   ========================================================= */

.frame-type-form_formframework .form-label {
  display: block;
  margin: 0 0 0.45rem;

  color: var(--tm-form-dark);
  font-family: var(--tm-font-text);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
}

.frame-type-form_formframework .required {
  color: var(--tm-form-accent);
  font-weight: 800;
}


/* =========================================================
   32.6 CHAMPS DE FORMULAIRE
   ========================================================= */

.frame-type-form_formframework .form-control {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 50px;
  margin: 0;
  padding: 0.78rem 0.95rem;
  box-sizing: border-box;

  border: 1px solid var(--tm-form-border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--tm-text);

  font-family: var(--tm-font-text);
  font-size: 1rem;
  line-height: 1.45;

  outline: none;
  box-shadow: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.frame-type-form_formframework .form-control::placeholder {
  color: #7c898e;
  opacity: 1;
}

.frame-type-form_formframework .form-control:hover {
  border-color: #a9bec5;
}

.frame-type-form_formframework .form-control:focus {
  border-color: var(--tm-form-accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 167, 181, 0.16);
}


/* =========================================================
   32.7 LISTE DÉROULANTE
   ========================================================= */

.frame-type-form_formframework select.form-control {
  cursor: pointer;
}


/* =========================================================
   32.8 MESSAGE
   ========================================================= */

.frame-type-form_formframework textarea.form-control {
  min-height: 165px;
  resize: vertical;
}


/* =========================================================
   32.9 TEXTES D’AIDE ET DESCRIPTIONS
   ========================================================= */

.frame-type-form_formframework .form-text,
.frame-type-form_formframework .help-block,
.frame-type-form_formframework .help-text,
.frame-type-form_formframework .description,
.frame-type-form_formframework small {
  display: block;
  margin-top: 0.45rem;

  color: var(--tm-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* =========================================================
   32.10 PIÈCE JOINTE
   ========================================================= */

.frame-type-form_formframework input[type="file"].form-control,
.frame-type-form_formframework input[type="file"] {
  min-height: auto;
  padding: 0.6rem;

  border: 1px dashed #aebfc5;
  border-radius: 10px;
  background: var(--tm-form-light);
  color: var(--tm-muted);

  cursor: pointer;
}

.frame-type-form_formframework
input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.6rem 0.9rem;

  border: 0;
  border-radius: 999px;
  background: var(--tm-form-dark);
  color: #ffffff;

  font-family: var(--tm-font-title);
  font-size: 0.88rem;
  font-weight: 700;

  cursor: pointer;
  transition: background-color 0.2s ease;
}

.frame-type-form_formframework
input[type="file"]::file-selector-button:hover {
  background: var(--tm-form-accent);
}


/* =========================================================
   32.11 CASES À COCHER ET BOUTONS RADIO
   ========================================================= */

.frame-type-form_formframework input[type="checkbox"],
.frame-type-form_formframework input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 0.45rem;

  accent-color: var(--tm-form-accent);
  vertical-align: middle;
}


/* =========================================================
   32.12 NAVIGATION ET BOUTONS
   ========================================================= */

.frame-type-form_formframework .form-navigation,
.frame-type-form_formframework .form-actions,
.frame-type-form_formframework .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.frame-type-form_formframework button,
.frame-type-form_formframework .btn,
.frame-type-form_formframework input[type="submit"],
.frame-type-form_formframework input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  min-height: 46px;
  padding: 0.7rem 1.15rem;

  border: 2px solid var(--tm-form-accent);
  border-radius: 999px;
  background: var(--tm-form-accent);
  color: #ffffff;

  font-family: var(--tm-font-title);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.frame-type-form_formframework button:hover,
.frame-type-form_formframework .btn:hover,
.frame-type-form_formframework input[type="submit"]:hover,
.frame-type-form_formframework input[type="button"]:hover {
  transform: translateY(-2px);
  border-color: var(--tm-form-dark);
  background: var(--tm-form-dark);
  color: #ffffff;
}


/* Bouton précédent ou secondaire */

.frame-type-form_formframework .btn-default,
.frame-type-form_formframework .btn-secondary {
  border-color: var(--tm-form-dark);
  background: #ffffff;
  color: var(--tm-form-dark);
}

.frame-type-form_formframework .btn-default:hover,
.frame-type-form_formframework .btn-secondary:hover {
  border-color: var(--tm-form-dark);
  background: var(--tm-form-light);
  color: var(--tm-form-dark);
}


/* =========================================================
   32.13 MESSAGES D’ERREUR
   ========================================================= */

.frame-type-form_formframework .has-error .form-label,
.frame-type-form_formframework .error,
.frame-type-form_formframework .invalid-feedback,
.frame-type-form_formframework .help-block-error {
  color: var(--tm-form-error);
}

.frame-type-form_formframework .has-error .form-control,
.frame-type-form_formframework .form-control.is-invalid {
  border-color: var(--tm-form-error);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}


/* =========================================================
   32.14 RÉCAPITULATIF
   ========================================================= */

.frame-type-form_formframework table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;

  border: 1px solid var(--tm-form-border);
  background: #ffffff;
}

.frame-type-form_formframework th,
.frame-type-form_formframework td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--tm-form-border);

  text-align: left;
  vertical-align: top;
}

.frame-type-form_formframework th {
  width: 35%;
  color: var(--tm-form-dark);
  font-weight: 700;
}

.frame-type-form_formframework tr:last-child th,
.frame-type-form_formframework tr:last-child td {
  border-bottom: 0;
}


/* =========================================================
   32.15 RESPONSIVE
   ========================================================= */

@media screen and (max-width: 640px) {

  .frame-type-form_formframework {
    width: calc(100% - 32px);
    margin-top: 1.25rem;
  }

  .frame-type-form_formframework form {
    padding: 1.2rem;
    border-left-width: 5px;
  }

  .frame-type-form_formframework .form-group {
    margin-bottom: 1.15rem;
  }

  .frame-type-form_formframework .form-navigation,
  .frame-type-form_formframework .form-actions,
  .frame-type-form_formframework .actions {
    flex-direction: column;
  }

  .frame-type-form_formframework button,
  .frame-type-form_formframework .btn,
  .frame-type-form_formframework input[type="submit"],
  .frame-type-form_formframework input[type="button"] {
    width: 100%;
  }

  .frame-type-form_formframework table,
  .frame-type-form_formframework tbody,
  .frame-type-form_formframework tr,
  .frame-type-form_formframework th,
  .frame-type-form_formframework td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .frame-type-form_formframework th {
    padding-bottom: 0.25rem;
    border-bottom: 0;
  }

  .frame-type-form_formframework td {
    padding-top: 0.25rem;
  }
}

/* =========================================================
   32.12.1 BOUTONS GROUPÉS DU FORMULAIRE

   Les boutons restent visuellement distincts.
   Aucun déplacement vertical au survol.
   ========================================================= */

.frame-type-form_formframework .form-navigation,
.frame-type-form_formframework .form-actions,
.frame-type-form_formframework .actions,
.frame-type-form_formframework .btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Annule les marges négatives éventuelles de Bootstrap */

.frame-type-form_formframework .btn-group > .btn,
.frame-type-form_formframework .btn-group > button,
.frame-type-form_formframework .btn-group > input {
  margin: 0 !important;
  border-radius: 999px !important;
}

/* Aucun déplacement vertical au survol */

.frame-type-form_formframework button:hover,
.frame-type-form_formframework .btn:hover,
.frame-type-form_formframework input[type="submit"]:hover,
.frame-type-form_formframework input[type="button"]:hover {
  transform: none;
}



/* =========================================================
   32.16 PAGE DE CONFIRMATION

   Après l’envoi du formulaire :
   - masque l’introduction éditoriale ;
   - conserve uniquement le message de confirmation ;
   - retire le double habillage du formulaire.
   ========================================================= */

body:has(.tm-form-confirmation) .tm-join-form-page {
  display: none;
}

body:has(.tm-form-confirmation)
.frame-type-form_formframework {
  margin-top: 2rem;
}

body:has(.tm-form-confirmation)
.frame-type-form_formframework form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}


/* =========================================================
   ACTIONS DU MESSAGE DE CONFIRMATION
   ========================================================= */

.tm-form-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.tm-form-confirmation__actions .tm-btn {
  margin: 0;
  transform: none;
}

.tm-form-confirmation__actions .tm-btn:hover {
  transform: none;
}

@media screen and (max-width: 640px) {
  .tm-form-confirmation__actions {
    flex-direction: column;
  }

  .tm-form-confirmation__actions .tm-btn {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}


/* =========================================================
   C-13 — MESSAGE DE RÉUSSITE
   Composant réutilisable après validation d’un formulaire.

   Utilisations possibles :
   - Rejoignez-nous
   - Contact
   - Demande d’information
   - Inscription
   ========================================================= */


/* =========================================================
   CONTENEUR GÉNÉRAL
   ========================================================= */

.tm-success {
  width: 100%;
  max-width: 900px;
  margin: 3rem auto;
  padding: 2.5rem 2rem;
  box-sizing: border-box;

  border: 1px solid #d5e1e5;
  border-top: 6px solid #00a7b5;
  border-radius: var(--tm-radius);
  background: #ffffff;
  box-shadow: var(--tm-shadow);

  color: var(--tm-text);
  font-family: var(--tm-font-text);
  text-align: center;
}


/* =========================================================
   ICÔNE DE CONFIRMATION
   ========================================================= */

.tm-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 76px;
  height: 76px;
  margin: 0 auto 1.4rem;

  border-radius: 50%;
  background: #eefbfc;
  color: #00a7b5;

  font-family: var(--tm-font-title);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}


/* =========================================================
   CONTENU
   ========================================================= */

.tm-success__title {
  margin: 0 0 1rem;

  color: #24566b;
  font-family: var(--tm-font-title);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.2;
}

.tm-success__lead {
  max-width: 680px;
  margin: 0 auto 0.75rem;

  color: var(--tm-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.55;
}

.tm-success__text {
  max-width: 680px;
  margin: 0 auto;

  color: var(--tm-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.tm-success__text + .tm-success__text {
  margin-top: 0.35rem;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.tm-success__next {
  margin-top: 2rem;
}

.tm-success__next-title {
  margin: 0 0 1rem;

  color: #24566b;
  font-family: var(--tm-font-title);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}

.tm-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.tm-success__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 0.7rem 1.2rem;

  border: 2px solid #00a7b5;
  border-radius: 999px;
  background: #00a7b5;
  color: #ffffff;

  font-family: var(--tm-font-title);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.tm-success__button:hover,
.tm-success__button:focus-visible {
  border-color: #24566b;
  background: #24566b;
  color: #ffffff;
  text-decoration: none;
}

.tm-success__button--secondary {
  border-color: #24566b;
  background: #ffffff;
  color: #24566b;
}

.tm-success__button--secondary:hover,
.tm-success__button--secondary:focus-visible {
  border-color: #24566b;
  background: #eefbfc;
  color: #24566b;
}


/* =========================================================
   PAGE DE CONFIRMATION

   Masque l’introduction du formulaire une fois
   le message de réussite affiché.
   ========================================================= */

body:has(.tm-success) .tm-join-form-page {
  display: none;
}

body:has(.tm-success) .frame-type-form_formframework {
  max-width: 1140px;
  margin-top: 2rem;
  padding: 0 20px;
}

body:has(.tm-success) .frame-type-form_formframework form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 640px) {

  .tm-success {
    width: calc(100% - 32px);
    margin: 2rem auto;
    padding: 2rem 1.2rem;
  }

  .tm-success__icon {
    width: 66px;
    height: 66px;
    font-size: 1.75rem;
  }

  .tm-success__actions {
    flex-direction: column;
  }

  .tm-success__button {
    width: 100%;
    box-sizing: border-box;
  }
}


/* =========================================================
   33. PAGE CONTACT
   Identifiant TMDS : TM-CONTACT

   Structure :
   1. Hero
   2. Moyens de contact
   3. Venir à l’école
   4. Avant de nous écrire
   5. Introduction du formulaire

   Principes :
   - pictogramme et titre alignés sur une même ligne ;
   - cartes avec destination entièrement cliquables ;
   - carte Téléphone non cliquable sur ordinateur ;
   - lien d’appel disponible uniquement sur mobile ;
   - liens textuels plutôt que boutons dans les cartes ;
   - animation cohérente avec les cartes du site.
   ========================================================= */


/* =========================================================
   33.1 CONTENEUR GÉNÉRAL
   ========================================================= */

.tm-contact-page {
  --tm-contact-accent: #00a7b5;
  --tm-contact-dark: #24566b;
  --tm-contact-light: #eefbfc;
  --tm-contact-border: #d5e1e5;

  width: 100%;
  color: var(--tm-text);
  font-family: var(--tm-font-text);
}

.tm-contact-container {
  width: calc(100% - 40px);
  max-width: 1140px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}


/* =========================================================
   33.2 HERO
   ========================================================= */

.tm-contact-hero {
  margin-bottom: 2rem;
  padding: 2.2rem;

  border-radius: var(--tm-radius);
  background:
    linear-gradient(
      135deg,
      var(--tm-contact-dark),
      var(--tm-contact-accent)
    );
  color: #ffffff;
  box-shadow: var(--tm-shadow);
}

.tm-contact-hero__eyebrow {
  margin: 0 0 0.5rem;

  color: rgba(255, 255, 255, 0.86);
  font-family: var(--tm-font-title);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.tm-contact-hero__title {
  margin: 0 0 0.75rem;

  color: #ffffff;
  font-family: var(--tm-font-title);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
}

.tm-contact-hero__lead {
  max-width: 780px;
  margin: 0;

  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.65;
}


/* =========================================================
   33.3 TITRES DE SECTION
   ========================================================= */

.tm-contact-section {
  margin-top: 2.25rem;
}

.tm-contact-section__header {
  max-width: 760px;
  margin-bottom: 1.3rem;
}

.tm-contact-section__title {
  margin: 0 0 0.55rem;

  color: var(--tm-contact-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.2;
}

.tm-contact-section__intro {
  margin: 0;

  color: var(--tm-muted);
  font-size: 1rem;
  line-height: 1.65;
}


/* =========================================================
   33.4 GRILLE DES MOYENS DE CONTACT
   ========================================================= */

.tm-contact-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}


/* =========================================================
   33.5 CARTES
   ========================================================= */

.tm-contact-card {
  position: relative;

  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.4rem;
  box-sizing: border-box;

  border: 1px solid var(--tm-contact-border);
  border-top: 5px solid var(--tm-contact-accent);
  border-radius: var(--tm-radius);
  background: #ffffff;
  box-shadow: var(--tm-shadow);

  color: var(--tm-text);
}


/* Cartes entièrement cliquables */

.tm-contact-card--link {
  text-decoration: none;
  cursor: pointer;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.tm-contact-card--link:hover,
.tm-contact-card--link:focus-visible {
  transform: translateY(-5px);

  border-color: var(--tm-contact-accent);
  background: #fbfeff;
  box-shadow: 0 16px 32px rgba(36, 86, 107, 0.16);

  color: var(--tm-text);
  text-decoration: none;
  outline: none;
}


/* =========================================================
   33.6 EN-TÊTE DES CARTES

   Le pictogramme et le titre sont placés sur la même ligne.
   ========================================================= */

.tm-contact-card__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.tm-contact-card__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: 11px;
  background: var(--tm-contact-dark);
  color: #ffffff;

  transition: background-color 0.22s ease;
}

.tm-contact-card__icon svg {
  display: block;
  width: 23px;
  height: 23px;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-contact-card__title {
  margin: 0;

  color: var(--tm-contact-dark);
  font-family: var(--tm-font-title);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}


/* Variation du pictogramme au survol */

.tm-contact-card--link:hover .tm-contact-card__icon,
.tm-contact-card--link:focus-visible .tm-contact-card__icon {
  background: var(--tm-contact-accent);
}


/* =========================================================
   33.7 CONTENU DES CARTES
   ========================================================= */

.tm-contact-card__text {
  margin: 0 0 1rem;

  color: var(--tm-muted);
  font-size: 0.96rem;
  line-height: 1.6;
}

.tm-contact-card__details {
  margin: 0 0 1rem;

  color: var(--tm-text);
  font-size: 0.98rem;
  font-style: normal;
  line-height: 1.6;
}

.tm-contact-card__footer {
  margin-top: auto;
  padding-top: 0.4rem;
}


/* =========================================================
   33.8 LIENS DES CARTES

   Style proche des liens utilisés dans le menu
   « École de musique », sans aspect bouton.
   ========================================================= */

.tm-contact-card__link-label,
.tm-contact-phone__call {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;

  color: var(--tm-contact-accent);
  font-family: var(--tm-font-title);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: none;
}

.tm-contact-card__link-label::after,
.tm-contact-phone__call::after {
  content: "›";

  display: inline-block;
  transition: transform 0.2s ease;
}

.tm-contact-card--link:hover .tm-contact-card__link-label::after,
.tm-contact-card--link:focus-visible .tm-contact-card__link-label::after,
.tm-contact-phone__call:hover::after,
.tm-contact-phone__call:focus-visible::after {
  transform: translateX(4px);
}

.tm-contact-card--link:hover .tm-contact-card__link-label,
.tm-contact-card--link:focus-visible .tm-contact-card__link-label,
.tm-contact-phone__call:hover,
.tm-contact-phone__call:focus-visible {
  color: var(--tm-contact-dark);
  text-decoration: none;
}


/* =========================================================
   33.9 TÉLÉPHONE

   Ordinateur :
   - numéro uniquement ;
   - aucune action d’appel.

   Mobile :
   - apparition d’un lien tel: sous le numéro.
   ========================================================= */

.tm-contact-phone__label {
  display: block;
  margin-bottom: 0.2rem;

  color: var(--tm-text);
  font-weight: 700;
}

.tm-contact-phone__number {
  margin: 0;

  color: var(--tm-contact-dark);
  font-family: var(--tm-font-title);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.4;
}

/*
 * Sélecteur plus précis que .tm-contact-phone__call seul.
 * Il évite qu’une autre règle générale réactive le lien
 * sur ordinateur.
 */

.tm-contact-card .tm-contact-phone__call {
  display: none;
}


/* =========================================================
   33.10 BOUTON DU BLOC ITINÉRAIRE
   ========================================================= */

.tm-contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0.65rem 1rem;
  box-sizing: border-box;

  border: 2px solid var(--tm-contact-accent);
  border-radius: 999px;
  background: var(--tm-contact-accent);
  color: #ffffff;

  font-family: var(--tm-font-title);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.tm-contact-button:hover,
.tm-contact-button:focus-visible {
  border-color: var(--tm-contact-dark);
  background: var(--tm-contact-dark);
  color: #ffffff;
  text-decoration: none;
}


/* =========================================================
   33.11 VENIR À L’ÉCOLE
   ========================================================= */

.tm-contact-location {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  overflow: hidden;

  border: 1px solid var(--tm-contact-border);
  border-radius: var(--tm-radius);
  background: #ffffff;
  box-shadow: var(--tm-shadow);
}

.tm-contact-location__media {
  min-height: 320px;
  background: #dce7ea;
}

.tm-contact-location__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.tm-contact-location__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.tm-contact-location__title {
  margin: 0 0 0.9rem;

  color: var(--tm-contact-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
}

.tm-contact-location__address {
  margin: 0 0 1rem;

  color: var(--tm-text);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.65;
}

.tm-contact-location__accessibility {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;

  border-radius: 10px;
  background: var(--tm-contact-light);
  color: var(--tm-contact-dark);

  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}


/* =========================================================
   33.12 AVANT DE NOUS ÉCRIRE
   ========================================================= */

.tm-contact-help {
  padding: 1.4rem 1.5rem;

  border-left: 6px solid var(--tm-contact-accent);
  border-radius: var(--tm-radius);
  background: var(--tm-contact-light);
}

.tm-contact-help__title {
  margin: 0 0 0.65rem;

  color: var(--tm-contact-dark);
  font-family: var(--tm-font-title);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.35;
}

.tm-contact-help__text {
  margin: 0 0 0.75rem;

  color: var(--tm-text);
  font-size: 0.96rem;
  line-height: 1.6;
}

.tm-contact-help__list {
  margin: 0;
  padding-left: 1.2rem;

  color: var(--tm-text);
  font-size: 0.96rem;
  line-height: 1.65;
}

.tm-contact-help__list li + li {
  margin-top: 0.25rem;
}


/* =========================================================
   33.13 INTRODUCTION DU FORMULAIRE
   ========================================================= */

.tm-contact-form-intro {
  margin-top: 2.25rem;
  padding: 1.6rem;

  border: 1px solid var(--tm-contact-border);
  border-radius: var(--tm-radius);
  background: #ffffff;
  box-shadow: var(--tm-shadow);
}

.tm-contact-form-intro__title {
  margin: 0 0 0.6rem;

  color: var(--tm-contact-dark);
  font-family: var(--tm-font-title);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  font-weight: 800;
  line-height: 1.25;
}

.tm-contact-form-intro__text {
  max-width: 760px;
  margin: 0;

  color: var(--tm-muted);
  font-size: 1rem;
  line-height: 1.65;
}


/* =========================================================
   33.14 ANCRE DU FORMULAIRE
   ========================================================= */

#tm-contact-form {
  scroll-margin-top: 2rem;
}


/* =========================================================
   33.15 RESPONSIVE TABLETTE
   ========================================================= */

@media screen and (max-width: 900px) {

  .tm-contact-options {
    grid-template-columns: 1fr;
  }

  .tm-contact-location {
    grid-template-columns: 1fr;
  }

  .tm-contact-location__media,
  .tm-contact-location__image {
    min-height: 260px;
  }
}


/* =========================================================
   33.16 RESPONSIVE MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

  .tm-contact-container {
    width: calc(100% - 32px);
  }

  .tm-contact-hero {
    padding: 1.6rem 1.25rem;
  }

  .tm-contact-card {
    padding: 1.2rem;
  }

  /*
   * Le lien d’appel devient visible uniquement
   * lorsque la largeur correspond à un smartphone.
   */

  .tm-contact-card .tm-contact-phone__call {
    display: inline-flex;
    margin-top: 0.85rem;
  }

  .tm-contact-location__content {
    padding: 1.4rem 1.2rem;
  }

  .tm-contact-help {
    padding: 1.2rem;
  }

  .tm-contact-form-intro {
    padding: 1.25rem;
  }

  .tm-contact-button {
    width: 100%;
  }
}


/* =========================================================
   33.17 RÉDUCTION DES ANIMATIONS

   Respecte le réglage d’accessibilité du visiteur.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .tm-contact-card--link,
  .tm-contact-card__link-label::after,
  .tm-contact-phone__call::after {
    transition: none;
  }

  .tm-contact-card--link:hover,
  .tm-contact-card--link:focus-visible {
    transform: none;
  }
}

/* =========================================================
   33.18 ÉTAT APRÈS ENVOI DU FORMULAIRE

   Lorsque le composant de réussite est affiché :
   - masque la carte « Envoyer un message » ;
   - masque le bloc d’aide ;
   - masque l’introduction du formulaire ;
   - conserve les autres moyens de contact.
   ========================================================= */

body:has(.tm-success)
.tm-contact-card[href="#tm-contact-form"] {
  display: none;
}

body:has(.tm-success)
.tm-contact-help {
  display: none;
}

body:has(.tm-success)
.tm-contact-form-intro {
  display: none;
}

/* =========================================================
   PAGE TECHNIQUE DU FORMULAIRE CONTACT
   Ajustement du premier bloc après le lien de retour.
   ========================================================= */

.tm-contact-page.tm-join-form-page
.tm-join-form-back + .tm-contact-section {
  margin-top: 1.5rem;
}











/*========================
======== HOME ========
========================*/

/* ==========================================================
   TMH-01 | HERO DE LA PAGE D'ACCUEIL
   ----------------------------------------------------------
   Version finale :
   - image sur toute la surface du Hero ;
   - voile sombre horizontal sur ordinateur ;
   - voile vertical renforcé sur mobile ;
   - coins arrondis ;
   - liseret corail sur le côté gauche ;
   - hauteur compacte ;
   - boutons accessibles et responsive.
========================================================== */


/* ----------------------------------------------------------
   01. CONTENEUR PRINCIPAL
---------------------------------------------------------- */

.tmh-hero {
  --tmh-hero-dark: #163f57;
  --tmh-hero-dark-deep: #0b2638;
  --tmh-hero-accent: #ec684b;
  --tmh-hero-accent-hover: #d9563b;
  --tmh-hero-white: #ffffff;
  --tmh-hero-white-soft: rgba(255, 255, 255, 0.9);
  --tmh-hero-border: rgba(255, 255, 255, 0.5);

  position: relative;
  width: min(calc(100% - 2rem), 1240px);
  min-height: 520px;
  margin-right: auto;
  margin-left: auto;

  overflow: hidden;

  color: var(--tmh-hero-white);
  background-color: var(--tmh-hero-dark-deep);

  border-left: 8px solid var(--tmh-hero-accent);
  border-radius: 18px;
}


/* ----------------------------------------------------------
   IMAGE DE FOND
   ----------------------------------------------------------
   Le positionnement absolu et le !important neutralisent
   les règles générales appliquées aux images par OpenTalent.
---------------------------------------------------------- */

.tmh-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
}


.tmh-hero__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  object-fit: cover;
  object-position: center center;
}


/* ----------------------------------------------------------
   03. VOILE SOMBRE
   ----------------------------------------------------------
   Le voile protège la lisibilité du texte à gauche tout en
   laissant la photo visible sur la partie droite.
---------------------------------------------------------- */

.tmh-hero__background::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 26, 39, 0.97) 0%,
      rgba(10, 34, 49, 0.94) 25%,
      rgba(12, 40, 58, 0.78) 46%,
      rgba(12, 40, 58, 0.38) 66%,
      rgba(12, 40, 58, 0.08) 84%,
      rgba(12, 40, 58, 0) 100%
    );
}


/* ----------------------------------------------------------
   04. CONTENEUR INTERNE
---------------------------------------------------------- */

.tmh-hero__inner {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  min-height: 520px;
  padding:
    clamp(3rem, 5vw, 4.5rem)
    clamp(1.5rem, 6vw, 5rem);
}


/* ----------------------------------------------------------
   05. CONTENU ÉDITORIAL
---------------------------------------------------------- */

.tmh-hero__content {
  width: min(100%, 650px);
}


/* ----------------------------------------------------------
   06. SURTITRE
---------------------------------------------------------- */

.tmh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  margin: 0 0 1.15rem;
  padding: 0.45rem 0.85rem;

  color: var(--tmh-hero-white);
  background: rgba(8, 30, 45, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;

  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.055em;
  text-transform: uppercase;

  backdrop-filter: blur(5px);
}


.tmh-hero__eyebrow::before {
  content: "";

  flex: 0 0 auto;

  width: 0.52rem;
  height: 0.52rem;

  background: var(--tmh-hero-accent);
  border-radius: 50%;
}


/* ----------------------------------------------------------
   07. TITRE PRINCIPAL
---------------------------------------------------------- */

.tmh-hero__title {
  max-width: 650px;
  margin: 0;

  color: var(--tmh-hero-white);

  font-size: clamp(2.7rem, 5vw, 4.8rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;

  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.28);
}


/* Chaque ligne du titre est contrôlée individuellement */

.tmh-hero__title-line {
  display: block;
}


.tmh-hero__title-highlight {
  display: block;

  color: var(--tmh-hero-accent);
}


/* ----------------------------------------------------------
   08. TEXTE D'INTRODUCTION
---------------------------------------------------------- */

.tmh-hero__text {
  max-width: 610px;
  margin: 1.45rem 0 0;

  color: var(--tmh-hero-white-soft);

  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.65;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}


/* ----------------------------------------------------------
   09. ZONE DES BOUTONS
---------------------------------------------------------- */

.tmh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;

  margin-top: 1.9rem;
}


/* Styles communs */

.tmh-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;

  min-height: 48px;
  padding: 0.82rem 1.3rem;

  border: 2px solid transparent;
  border-radius: 999px;

  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}


/* Bouton principal */

.tmh-hero__button--primary {
  color: var(--tmh-hero-white);
  background: var(--tmh-hero-accent);
  border-color: var(--tmh-hero-accent);
}


.tmh-hero__button--primary:hover,
.tmh-hero__button--primary:focus-visible {
  color: var(--tmh-hero-white);
  background: var(--tmh-hero-accent-hover);
  border-color: var(--tmh-hero-accent-hover);

  transform: translateY(-2px);
}


/* Bouton secondaire */

.tmh-hero__button--secondary {
  color: var(--tmh-hero-white);
  background: rgba(8, 30, 45, 0.22);
  border-color: var(--tmh-hero-border);

  backdrop-filter: blur(4px);
}


.tmh-hero__button--secondary:hover,
.tmh-hero__button--secondary:focus-visible {
  color: var(--tmh-hero-dark-deep);
  background: var(--tmh-hero-white);
  border-color: var(--tmh-hero-white);

  transform: translateY(-2px);
}


/* Flèche */

.tmh-hero__button-arrow {
  display: inline-block;

  font-size: 1.08em;
  line-height: 1;

  transition: transform 180ms ease;
}


.tmh-hero__button:hover .tmh-hero__button-arrow,
.tmh-hero__button:focus-visible .tmh-hero__button-arrow {
  transform: translateX(3px);
}


/* ----------------------------------------------------------
   10. ACCESSIBILITÉ CLAVIER
---------------------------------------------------------- */

.tmh-hero__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.58);
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   11. TABLETTE
---------------------------------------------------------- */

@media (max-width: 1024px) {

  .tmh-hero {
    width: min(calc(100% - 1.5rem), 1240px);
    min-height: 500px;

    border-left-width: 7px;
    border-radius: 16px;
  }


  .tmh-hero__inner {
    min-height: 500px;
    padding:
      3.5rem
      clamp(1.5rem, 5vw, 3.5rem);
  }


  .tmh-hero__content {
    width: min(100%, 590px);
  }


  .tmh-hero__background::after {
    background:
      linear-gradient(
        90deg,
        rgba(7, 26, 39, 0.97) 0%,
        rgba(10, 34, 49, 0.93) 34%,
        rgba(12, 40, 58, 0.66) 60%,
        rgba(12, 40, 58, 0.2) 86%,
        rgba(12, 40, 58, 0.05) 100%
      );
  }

}


/* ----------------------------------------------------------
   12. MOBILE
   ----------------------------------------------------------
   Sur mobile :
   - le voile devient vertical ;
   - la photo reste en arrière-plan ;
   - le contenu descend vers le bas ;
   - les boutons prennent toute la largeur.
---------------------------------------------------------- */

@media (max-width: 767px) {

  .tmh-hero {
    width: calc(100% - 1rem);
    min-height: 650px;

    border-left-width: 6px;
    border-radius: 14px;
  }


  .tmh-hero__image {
    object-position: 58% center;
  }


  .tmh-hero__background::after {
    background:
      linear-gradient(
        180deg,
        rgba(7, 25, 37, 0.25) 0%,
        rgba(7, 25, 37, 0.42) 24%,
        rgba(7, 25, 37, 0.74) 50%,
        rgba(7, 25, 37, 0.94) 75%,
        rgba(7, 25, 37, 0.99) 100%
      );
  }


  .tmh-hero__inner {
    align-items: flex-end;

    min-height: 650px;
    padding: 3rem 1.25rem 2.5rem;
  }


  .tmh-hero__content {
    width: 100%;
  }


  .tmh-hero__eyebrow {
    margin-bottom: 0.9rem;

    font-size: 0.74rem;
  }


  .tmh-hero__title {
    max-width: 560px;

    font-size: clamp(2.35rem, 11vw, 3.35rem);
    line-height: 1;
  }


  .tmh-hero__text {
    margin-top: 1.1rem;

    font-size: 0.98rem;
    line-height: 1.58;
  }


  .tmh-hero__actions {
    align-items: stretch;

    margin-top: 1.5rem;
  }


  .tmh-hero__button {
    flex: 1 1 100%;

    width: 100%;
  }

}


/* ----------------------------------------------------------
   13. TRÈS PETITS ÉCRANS
---------------------------------------------------------- */

@media (max-width: 420px) {

  .tmh-hero {
    min-height: 670px;
  }


  .tmh-hero__inner {
    min-height: 670px;
    padding-right: 1rem;
    padding-left: 1rem;
  }


  .tmh-hero__title {
    font-size: 2.3rem;
  }


  .tmh-hero__text {
    font-size: 0.94rem;
  }

}


/* ----------------------------------------------------------
   14. RÉDUCTION DES ANIMATIONS
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .tmh-hero__button,
  .tmh-hero__button-arrow {
    transition: none;
  }


  .tmh-hero__button:hover,
  .tmh-hero__button:focus-visible {
    transform: none;
  }

}



/* ==========================================================
   TMH-02 | WELCOME
   ----------------------------------------------------------
   Bloc compact de présentation de Treillières Musique.

   Principes :
   - hauteur contenue ;
   - contenu principal majoritaire ;
   - image d'accompagnement plus discrète ;
   - trois repères avec liseret corail pleine largeur ;
   - composant autonome et déplaçable dans OpenTalent.
========================================================== */


/* ----------------------------------------------------------
   01. SECTION EXTÉRIEURE
---------------------------------------------------------- */

.tmh-welcome {
  --tmh-welcome-dark: #163f57;
  --tmh-welcome-text: #365767;
  --tmh-welcome-accent: #ec684b;
  --tmh-welcome-light: #f4f8fa;
  --tmh-welcome-white: #ffffff;
  --tmh-welcome-border: rgba(22, 63, 87, 0.13);
  --tmh-welcome-shadow: 0 16px 38px rgba(22, 63, 87, 0.1);

  position: relative;

  width: min(calc(100% - 2rem), 1240px);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}


/* ----------------------------------------------------------
   02. CARTE PRINCIPALE
---------------------------------------------------------- */

.tmh-welcome__card {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.7fr);
  align-items: stretch;

  overflow: hidden;

  background: var(--tmh-welcome-white);
  border: 1px solid var(--tmh-welcome-border);
  border-radius: 18px;
  box-shadow: var(--tmh-welcome-shadow);
}


/* ----------------------------------------------------------
   03. CONTENU ÉDITORIAL
---------------------------------------------------------- */

.tmh-welcome__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(2rem, 4vw, 3.25rem)
    clamp(1.5rem, 4vw, 3.5rem);
}


/* ----------------------------------------------------------
   04. SURTITRE
---------------------------------------------------------- */

.tmh-welcome__eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.6rem;

  margin: 0 0 0.75rem;

  color: var(--tmh-welcome-accent);

  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.tmh-welcome__eyebrow::before {
  content: "";

  flex: 0 0 auto;

  width: 1.7rem;
  height: 3px;

  background: var(--tmh-welcome-accent);
  border-radius: 999px;
}


/* ----------------------------------------------------------
   05. TITRE
---------------------------------------------------------- */

.tmh-welcome__title {
  max-width: 700px;
  margin: 0;

  color: var(--tmh-welcome-dark);

  font-size: clamp(1.9rem, 3.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
}


/* ----------------------------------------------------------
   06. TEXTE DE PRÉSENTATION
---------------------------------------------------------- */

.tmh-welcome__text {
  max-width: 760px;
  margin: 1rem 0 0;

  color: var(--tmh-welcome-text);

  font-size: clamp(0.97rem, 1.25vw, 1.07rem);
  line-height: 1.65;
}


.tmh-welcome__text p {
  margin: 0;
}


.tmh-welcome__text p + p {
  margin-top: 0.75rem;
}


/* ----------------------------------------------------------
   07. REPÈRES RAPIDES
---------------------------------------------------------- */

.tmh-welcome__highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;

  margin: 1.6rem 0 0;
  padding: 0;

  list-style: none;
}


/* Carte d'un repère */

.tmh-welcome__highlight {
  position: relative;

  overflow: hidden;

  min-height: 112px;
  padding: 1.15rem 1rem 0.95rem;

  background: var(--tmh-welcome-light);
  border: 1px solid var(--tmh-welcome-border);
  border-radius: 12px;
}


/* Liseret pleine largeur */

.tmh-welcome__highlight::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  height: 4px;

  background: var(--tmh-welcome-accent);
  border-radius: 12px 12px 0 0;
}


/* Titre du repère */

.tmh-welcome__highlight-title {
  display: block;

  color: var(--tmh-welcome-dark);

  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.25;
}


/* Texte du repère */

.tmh-welcome__highlight-text {
  display: block;

  margin-top: 0.35rem;

  color: var(--tmh-welcome-text);

  font-size: 0.84rem;
  line-height: 1.4;
}


/* ----------------------------------------------------------
   08. IMAGE D'ACCOMPAGNEMENT
---------------------------------------------------------- */

.tmh-welcome__media {
  position: relative;

  min-height: 320px;
  overflow: hidden;

  background: var(--tmh-welcome-dark);
}


.tmh-welcome__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  object-fit: cover;
  object-position: center;
}


/* Léger voile pour intégrer l'image à la carte */

.tmh-welcome__media::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(22, 63, 87, 0) 60%,
      rgba(22, 63, 87, 0.16) 100%
    );
}


/* ----------------------------------------------------------
   09. TABLETTE
---------------------------------------------------------- */

@media (max-width: 1024px) {

  .tmh-welcome {
    width: min(calc(100% - 1.5rem), 1240px);
  }


  .tmh-welcome__card {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.65fr);

    border-radius: 16px;
  }


  .tmh-welcome__content {
    padding:
      2.5rem
      clamp(1.5rem, 4vw, 2.75rem);
  }


  .tmh-welcome__highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }


  .tmh-welcome__media {
    min-height: 340px;
  }

}


/* ----------------------------------------------------------
   10. PETITE TABLETTE
---------------------------------------------------------- */

@media (max-width: 850px) {

  .tmh-welcome__card {
    grid-template-columns: minmax(0, 1fr) 260px;
  }


  .tmh-welcome__highlights {
    grid-template-columns: 1fr;
  }


  .tmh-welcome__highlight {
    min-height: 0;
  }

}


/* ----------------------------------------------------------
   11. MOBILE
---------------------------------------------------------- */

@media (max-width: 767px) {

  .tmh-welcome {
    width: calc(100% - 1rem);
    margin-top: 2rem;
  }


  .tmh-welcome__card {
    display: flex;
    flex-direction: column;

    border-radius: 14px;
  }


  .tmh-welcome__content {
    order: 2;

    padding: 2rem 1.25rem 2.25rem;
  }


  .tmh-welcome__media {
    order: 1;

    min-height: 0;
    aspect-ratio: 16 / 8;
  }


  .tmh-welcome__title {
    font-size: clamp(1.9rem, 8vw, 2.55rem);
  }


  .tmh-welcome__text {
    margin-top: 0.9rem;

    font-size: 0.98rem;
    line-height: 1.6;
  }


  .tmh-welcome__highlights {
    grid-template-columns: 1fr;
    gap: 0.65rem;

    margin-top: 1.4rem;
  }


  .tmh-welcome__highlight {
    min-height: 0;
    padding: 1.05rem 1rem 0.9rem;
  }

}


/* ----------------------------------------------------------
   12. TRÈS PETITS ÉCRANS
---------------------------------------------------------- */

@media (max-width: 420px) {

  .tmh-welcome__content {
    padding-right: 1rem;
    padding-left: 1rem;
  }


  .tmh-welcome__media {
    aspect-ratio: 4 / 3;
  }

}



/* ==========================================================
   TMH-04 | EXPLORER NOS UNIVERS
   ----------------------------------------------------------
   Bloc principal de navigation vers l'offre de l'école.

   Organisation desktop :
   - une grande carte principale à gauche ;
   - une carte horizontale en haut à droite ;
   - deux petites cartes en bas à droite.

   Organisation tablette :
   - grille de deux colonnes.

   Organisation mobile :
   - une seule colonne.

   Principes :
   - aucune icône décorative ;
   - toute la carte est cliquable ;
   - CTA circulaire avec flèche ;
   - images facilement remplaçables ;
   - couleurs pilotées par des variantes CSS.
========================================================== */


/* ----------------------------------------------------------
   01. SECTION EXTÉRIEURE
---------------------------------------------------------- */

.tmh-universes {
  --tmh-universes-dark: #123e57;
  --tmh-universes-text: #486371;
  --tmh-universes-white: #ffffff;
  --tmh-universes-background: #f5f8fa;
  --tmh-universes-border: rgba(18, 62, 87, 0.12);
  --tmh-universes-shadow: 0 16px 38px rgba(18, 62, 87, 0.11);
  --tmh-universes-shadow-hover: 0 23px 48px rgba(18, 62, 87, 0.18);

  width: min(calc(100% - 2rem), 1240px);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
}


/* ----------------------------------------------------------
   02. EN-TÊTE DU COMPOSANT
---------------------------------------------------------- */

.tmh-universes__header {
  max-width: 920px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);

  text-align: center;
}


/* Surtitre */

.tmh-universes__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;

  margin: 0 0 0.85rem;

  color: #ec684b;

  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}


.tmh-universes__eyebrow::before,
.tmh-universes__eyebrow::after {
  content: "";

  width: 1.8rem;
  height: 3px;

  background: currentColor;
  border-radius: 999px;
}


/* Titre */

.tmh-universes__title {
  margin: 0;

  color: var(--tmh-universes-dark);

  font-size: clamp(2rem, 4vw, 3.45rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}


/* Introduction */

.tmh-universes__intro {
  max-width: 720px;
  margin: 1rem auto 0;

  color: var(--tmh-universes-text);

  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.6;
}


/* ----------------------------------------------------------
   03. GRILLE PRINCIPALE
---------------------------------------------------------- */

.tmh-universes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;

  min-height: 680px;
}


/* Position de la grande carte */

.tmh-universes__card--main {
  grid-row: 1 / 3;
}


/* Sous-grille des deux petites cartes */

.tmh-universes__secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}


/* ----------------------------------------------------------
   04. STRUCTURE COMMUNE DES CARTES
---------------------------------------------------------- */

.tmh-universes__card {
  --tmh-universes-accent: #1f7be5;

  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  overflow: hidden;

  color: inherit;
  text-decoration: none;

  background: var(--tmh-universes-white);
  border: 1px solid var(--tmh-universes-border);
  border-radius: 17px;
  box-shadow: var(--tmh-universes-shadow);

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}


/* Liseret supérieur */

.tmh-universes__card::before {
  content: "";

  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;

  height: 5px;

  background: var(--tmh-universes-accent);
}


/* Survol de la carte */

.tmh-universes__card:hover,
.tmh-universes__card:focus-visible {
  color: inherit;
  text-decoration: none;

  border-color: color-mix(
    in srgb,
    var(--tmh-universes-accent) 38%,
    transparent
  );
  box-shadow: var(--tmh-universes-shadow-hover);

  transform: translateY(-5px);
}


/* Focus clavier */

.tmh-universes__card:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--tmh-universes-accent) 38%,
      transparent
    );
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   05. VARIANTES DE COULEUR
---------------------------------------------------------- */

/* Tous les cours */

.tmh-universes__card--courses {
  --tmh-universes-accent: #247ce5;
}


/* Éveil musical */

.tmh-universes__card--early {
  --tmh-universes-accent: #ec684b;
}


/* Ateliers */

.tmh-universes__card--workshops {
  --tmh-universes-accent: #9a42df;
}


/* Ensembles */

.tmh-universes__card--ensembles {
  --tmh-universes-accent: #124f91;
}


/* ----------------------------------------------------------
   06. IMAGES
---------------------------------------------------------- */

.tmh-universes__media {
  position: relative;

  flex: 0 0 auto;
  overflow: hidden;

  background: var(--tmh-universes-background);
}


/* Grande image */

.tmh-universes__card--main .tmh-universes__media {
  min-height: 430px;
}


/* Image de la carte horizontale */

.tmh-universes__card--wide .tmh-universes__media {
  min-height: 185px;
}


/* Images des petites cartes */

.tmh-universes__card--small .tmh-universes__media {
  min-height: 185px;
}


/* Image commune */

.tmh-universes__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  object-fit: cover;

  transition: transform 500ms cubic-bezier(0.2, 0.65, 0.3, 1);
}


/* Zoom discret au survol */

.tmh-universes__card:hover .tmh-universes__image,
.tmh-universes__card:focus-visible .tmh-universes__image {
  transform: scale(1.035);
}


/* ----------------------------------------------------------
   07. CONTENU DES CARTES
---------------------------------------------------------- */

.tmh-universes__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;

  flex: 1;

  padding: 1.5rem;
}


/* Grande carte */

.tmh-universes__card--main .tmh-universes__content {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}


/* Cartes secondaires */

.tmh-universes__card--small .tmh-universes__content {
  align-items: start;

  padding: 1.35rem;
}


/* Conteneur éditorial */

.tmh-universes__copy {
  min-width: 0;
}


/* Titre */

.tmh-universes__card-title {
  margin: 0;

  color: var(--tmh-universes-dark);

  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}


/* Titre plus affirmé pour la carte principale */

.tmh-universes__card--main .tmh-universes__card-title {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
}


/* Titre des petites cartes */

.tmh-universes__card--small .tmh-universes__card-title {
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
}


/* Description */

.tmh-universes__card-text {
  max-width: 580px;
  margin: 0.55rem 0 0;

  color: var(--tmh-universes-text);

  font-size: 0.98rem;
  line-height: 1.5;
}


/* Description de la grande carte */

.tmh-universes__card--main .tmh-universes__card-text {
  max-width: 500px;

  font-size: clamp(1rem, 1.4vw, 1.08rem);
}


/* Description des petites cartes */

.tmh-universes__card--small .tmh-universes__card-text {
  font-size: 0.91rem;
  line-height: 1.45;
}


/* ----------------------------------------------------------
   08. CTA CIRCULAIRE
---------------------------------------------------------- */

.tmh-universes__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 3.25rem;
  height: 3.25rem;

  color: var(--tmh-universes-white);

  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1;

  background: var(--tmh-universes-accent);
  border-radius: 50%;
  box-shadow:
    0 9px 20px
    color-mix(
      in srgb,
      var(--tmh-universes-accent) 30%,
      transparent
    );

  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}


/* Flèche créée sans pictogramme externe */

.tmh-universes__arrow::before {
  content: "›";

  display: block;

  transform: translateY(-1px);
}


/* Petite version */

.tmh-universes__card--small .tmh-universes__arrow {
  align-self: end;

  width: 2.7rem;
  height: 2.7rem;

  font-size: 1.4rem;
}


/* Animation du CTA */

.tmh-universes__card:hover .tmh-universes__arrow,
.tmh-universes__card:focus-visible .tmh-universes__arrow {
  box-shadow:
    0 12px 25px
    color-mix(
      in srgb,
      var(--tmh-universes-accent) 40%,
      transparent
    );

  transform: translateX(4px);
}


/* ----------------------------------------------------------
   09. TABLETTE
---------------------------------------------------------- */

@media (max-width: 1024px) {

  .tmh-universes {
    width: min(calc(100% - 1.5rem), 1240px);
  }


  .tmh-universes__grid {
    grid-template-rows: auto;

    min-height: 0;
  }


  .tmh-universes__card--main {
    grid-row: auto;
  }


  .tmh-universes__card--main .tmh-universes__media,
  .tmh-universes__card--wide .tmh-universes__media {
    min-height: 300px;
  }


  .tmh-universes__secondary-grid {
    grid-column: 1 / 3;
  }


  .tmh-universes__card--small .tmh-universes__media {
    min-height: 220px;
  }

}


/* ----------------------------------------------------------
   10. PETITE TABLETTE
---------------------------------------------------------- */

@media (max-width: 820px) {

  .tmh-universes__grid {
    grid-template-columns: 1fr;
  }


  .tmh-universes__secondary-grid {
    grid-column: auto;

    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  .tmh-universes__card--main .tmh-universes__media,
  .tmh-universes__card--wide .tmh-universes__media {
    min-height: 340px;
  }

}


/* ----------------------------------------------------------
   11. MOBILE
---------------------------------------------------------- */

@media (max-width: 620px) {

  .tmh-universes {
    width: calc(100% - 1rem);
    margin-top: 3.5rem;
  }


  .tmh-universes__header {
    margin-bottom: 1.75rem;
  }


  .tmh-universes__eyebrow {
    gap: 0.65rem;

    font-size: 0.75rem;
  }


  .tmh-universes__eyebrow::before,
  .tmh-universes__eyebrow::after {
    width: 1.25rem;
  }


  .tmh-universes__grid,
  .tmh-universes__secondary-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }


  .tmh-universes__card {
    border-radius: 14px;
  }


  .tmh-universes__card--main .tmh-universes__media,
  .tmh-universes__card--wide .tmh-universes__media,
  .tmh-universes__card--small .tmh-universes__media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }


  .tmh-universes__content,
  .tmh-universes__card--main .tmh-universes__content,
  .tmh-universes__card--small .tmh-universes__content {
    align-items: center;

    padding: 1.3rem 1.2rem 1.4rem;
  }


  .tmh-universes__card--small .tmh-universes__arrow {
    align-self: auto;
  }


  .tmh-universes__card-title,
  .tmh-universes__card--main .tmh-universes__card-title,
  .tmh-universes__card--small .tmh-universes__card-title {
    font-size: 1.45rem;
  }


  .tmh-universes__card-text,
  .tmh-universes__card--main .tmh-universes__card-text,
  .tmh-universes__card--small .tmh-universes__card-text {
    font-size: 0.94rem;
  }


  .tmh-universes__arrow,
  .tmh-universes__card--small .tmh-universes__arrow {
    width: 2.9rem;
    height: 2.9rem;

    font-size: 1.45rem;
  }

}


/* ----------------------------------------------------------
   12. RÉDUCTION DES ANIMATIONS
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .tmh-universes__card,
  .tmh-universes__image,
  .tmh-universes__arrow {
    transition: none;
  }


  .tmh-universes__card:hover,
  .tmh-universes__card:focus-visible,
  .tmh-universes__card:hover .tmh-universes__image,
  .tmh-universes__card:focus-visible .tmh-universes__image,
  .tmh-universes__card:hover .tmh-universes__arrow,
  .tmh-universes__card:focus-visible .tmh-universes__arrow {
    transform: none;
  }

}

/* ==========================================================
   TMH-05 | ÉVÉNEMENT À LA UNE
   ----------------------------------------------------------
   Composant dynamique destiné à mettre en avant un événement
   prioritaire sur la page d'accueil.

   Version affinée :
   - image légèrement moins large ;
   - contenu plus généreux ;
   - ajout du label "Rencontrez-nous" ;
   - CTA circulaire conservé ;
   - carte entièrement cliquable.
========================================================== */


/* ----------------------------------------------------------
   01. SECTION EXTÉRIEURE
---------------------------------------------------------- */

.tmh-event {
  --tmh-event-dark: #123e57;
  --tmh-event-text: #456270;
  --tmh-event-accent: #ec684b;
  --tmh-event-accent-light: #fff0eb;
  --tmh-event-white: #ffffff;
  --tmh-event-background: #f5f8fa;
  --tmh-event-border: rgba(18, 62, 87, 0.12);
  --tmh-event-shadow: 0 18px 42px rgba(18, 62, 87, 0.12);
  --tmh-event-shadow-hover: 0 25px 52px rgba(18, 62, 87, 0.18);

  width: min(calc(100% - 2rem), 1240px);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
}


/* ----------------------------------------------------------
   02. EN-TÊTE DU COMPOSANT
---------------------------------------------------------- */

.tmh-event__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}


/* Surtitre */

.tmh-event__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;

  margin: 0 0 0.65rem;

  color: var(--tmh-event-accent);

  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}


.tmh-event__eyebrow::before {
  content: "";

  width: 1.8rem;
  height: 3px;

  background: currentColor;
  border-radius: 999px;
}


/* Titre du composant */

.tmh-event__section-title {
  margin: 0;

  color: var(--tmh-event-dark);

  font-size: clamp(1.9rem, 3.5vw, 2.85rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
}


/* ----------------------------------------------------------
   03. CARTE PRINCIPALE
---------------------------------------------------------- */

.tmh-event__card {
  position: relative;

  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;

  min-height: 410px;
  overflow: hidden;

  color: inherit;
  text-decoration: none;

  background: var(--tmh-event-white);
  border: 1px solid var(--tmh-event-border);
  border-radius: 18px;
  box-shadow: var(--tmh-event-shadow);

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}


/* Liseret supérieur */

.tmh-event__card::before {
  content: "";

  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;

  height: 5px;

  background: var(--tmh-event-accent);
}


/* Survol */

.tmh-event__card:hover,
.tmh-event__card:focus-visible {
  color: inherit;
  text-decoration: none;

  border-color: rgba(236, 104, 75, 0.4);
  box-shadow: var(--tmh-event-shadow-hover);

  transform: translateY(-5px);
}


/* Focus clavier */

.tmh-event__card:focus-visible {
  outline: 3px solid rgba(236, 104, 75, 0.35);
  outline-offset: 4px;
}


/* ----------------------------------------------------------
   04. VISUEL
---------------------------------------------------------- */

.tmh-event__media {
  position: relative;

  min-height: 410px;
  overflow: hidden;

  background: #58a5b0;
}


/* Image */

.tmh-event__image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  object-fit: cover;
  object-position: center;

  transition: transform 500ms cubic-bezier(0.2, 0.65, 0.3, 1);
}


/* Zoom discret */

.tmh-event__card:hover .tmh-event__image,
.tmh-event__card:focus-visible .tmh-event__image {
  transform: scale(1.025);
}


/* ----------------------------------------------------------
   05. CONTENU
---------------------------------------------------------- */

.tmh-event__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(2.5rem, 4.5vw, 3.5rem)
    clamp(2rem, 4.5vw, 3.75rem);
}


/* ----------------------------------------------------------
   06. LABEL INTERNE
---------------------------------------------------------- */

.tmh-event__kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.55rem;

  margin: 0 0 0.8rem;

  color: var(--tmh-event-accent);

  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


.tmh-event__kicker::before {
  content: "";

  width: 1.35rem;
  height: 3px;

  background: currentColor;
  border-radius: 999px;
}


/* ----------------------------------------------------------
   07. DATE
---------------------------------------------------------- */

.tmh-event__date {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.65rem;

  margin: 0 0 1rem;
  padding: 0.55rem 0.9rem;

  color: var(--tmh-event-accent);

  font-size: 0.87rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;

  background: var(--tmh-event-accent-light);
  border-radius: 999px;
}


/* ----------------------------------------------------------
   08. TITRE DE L'ÉVÉNEMENT
---------------------------------------------------------- */

.tmh-event__title {
  max-width: 680px;
  margin: 0;

  color: var(--tmh-event-dark);

  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
}


/* ----------------------------------------------------------
   09. INFORMATIONS PRATIQUES
---------------------------------------------------------- */

.tmh-event__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.2rem;

  margin: 0.95rem 0 0;
  padding: 0;

  color: var(--tmh-event-dark);

  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;

  list-style: none;
}


.tmh-event__detail {
  position: relative;
}


/* Séparateur entre les informations */

.tmh-event__detail + .tmh-event__detail::before {
  content: "•";

  margin-right: 1.2rem;

  color: var(--tmh-event-accent);
}


/* ----------------------------------------------------------
   10. TEXTE
---------------------------------------------------------- */

.tmh-event__text {
  max-width: 650px;
  margin: 1.1rem 0 0;

  color: var(--tmh-event-text);

  font-size: clamp(0.98rem, 1.4vw, 1.06rem);
  line-height: 1.6;
}


/* ----------------------------------------------------------
   11. ZONE D'ACTION
---------------------------------------------------------- */

.tmh-event__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;

  margin-top: 1.75rem;
}


/* Texte du lien */

.tmh-event__link-label {
  color: var(--tmh-event-dark);

  font-size: 0.97rem;
  font-weight: 800;
  line-height: 1.3;
}


/* CTA circulaire */

.tmh-event__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 3.35rem;
  height: 3.35rem;

  color: var(--tmh-event-white);

  font-size: 1.65rem;
  line-height: 1;

  background: var(--tmh-event-accent);
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(236, 104, 75, 0.3);

  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}


.tmh-event__arrow::before {
  content: "›";

  display: block;

  transform: translateY(-1px);
}


/* Animation du CTA */

.tmh-event__card:hover .tmh-event__arrow,
.tmh-event__card:focus-visible .tmh-event__arrow {
  box-shadow: 0 13px 27px rgba(236, 104, 75, 0.4);

  transform: translate(3px, -3px);
}


/* ----------------------------------------------------------
   12. TABLETTE
---------------------------------------------------------- */

@media (max-width: 960px) {

  .tmh-event {
    width: min(calc(100% - 1.5rem), 1240px);
  }


  .tmh-event__card {
    grid-template-columns: minmax(270px, 0.85fr) minmax(0, 1.15fr);

    min-height: 380px;
  }


  .tmh-event__media {
    min-height: 380px;
  }


  .tmh-event__content {
    padding: 2.5rem;
  }

}


/* ----------------------------------------------------------
   13. MOBILE
---------------------------------------------------------- */

@media (max-width: 767px) {

  .tmh-event {
    width: calc(100% - 1rem);
    margin-top: 3.5rem;
  }


  .tmh-event__card {
    display: flex;
    flex-direction: column;

    min-height: 0;

    border-radius: 14px;
  }


  .tmh-event__media {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }


  .tmh-event__content {
    padding: 2rem 1.25rem 2.15rem;
  }


  .tmh-event__details {
    display: grid;
    gap: 0.4rem;
  }


  .tmh-event__detail + .tmh-event__detail::before {
    content: none;

    margin: 0;
  }


  .tmh-event__action {
    margin-top: 1.5rem;
  }


  .tmh-event__arrow {
    width: 3rem;
    height: 3rem;

    font-size: 1.45rem;
  }

}


/* ----------------------------------------------------------
   14. TRÈS PETITS ÉCRANS
---------------------------------------------------------- */

@media (max-width: 420px) {

  .tmh-event__title {
    font-size: 2rem;
  }


  .tmh-event__link-label {
    max-width: 190px;
  }

}


/* ----------------------------------------------------------
   15. RÉDUCTION DES ANIMATIONS
---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .tmh-event__card,
  .tmh-event__image,
  .tmh-event__arrow {
    transition: none;
  }


  .tmh-event__card:hover,
  .tmh-event__card:focus-visible,
  .tmh-event__card:hover .tmh-event__image,
  .tmh-event__card:focus-visible .tmh-event__image,
  .tmh-event__card:hover .tmh-event__arrow,
  .tmh-event__card:focus-visible .tmh-event__arrow {
    transform: none;
  }

}

/* ==========================================================
   TMH-03 • PRÉINSCRIPTIONS
   Bloc d'appel à l'action de la page d'accueil
========================================================== */

.tmh-registration{
    position:relative;
    overflow:hidden;
    margin:0;
    padding:clamp(2.5rem,5vw,4.5rem);
    border-radius:24px;
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(255,255,255,.11) 0,
            rgba(255,255,255,0) 32%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(255,255,255,.09) 0,
            rgba(255,255,255,0) 34%
        ),
        linear-gradient(
            135deg,
            #0c3f78 0%,
            #155f9f 52%,
            #2b91c2 100%
        );
    color:#fff;
    box-shadow:0 18px 44px rgba(9,44,83,.16);
    max-width:1105px;
    margin-right:auto;
    margin-left:auto;
}

/* Motif décoratif discret */
.tmh-registration::before{
    content:"";
    position:absolute;
    top:-90px;
    right:-90px;
    width:260px;
    height:260px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    pointer-events:none;
}

.tmh-registration::after{
    content:"";
    position:absolute;
    bottom:-120px;
    left:-100px;
    width:300px;
    height:300px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    pointer-events:none;
}

/* Conteneur interne */
.tmh-registration__inner{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1120px;
    margin:0 auto;
}

/* Introduction */
.tmh-registration__header{
    max-width:950px;
    margin:0 auto;
    text-align:center;
}

.tmh-registration__eyebrow{
    margin:0 0 .65rem;
    color:#ffd59a;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.11em;
    line-height:1.2;
    text-transform:uppercase;
}

.tmh-registration__title{
    margin:0 0 1.15rem;
    color:#fff;
    font-size:clamp(2rem,4vw,3.15rem);
    line-height:1.08;
}

.tmh-registration__lead{
    margin:0 0 .85rem;
    color:#fff;
    font-size:clamp(1.05rem,2vw,1.22rem);
    font-weight:700;
    line-height:1.55;
    max-width:950px;
    margin-right:auto;
    margin-left:auto;
}

.tmh-registration__text{
    max-width:780px;
    margin:0 auto;
    color:rgba(255,255,255,.92);
    font-size:1.02rem;
    line-height:1.7;
}

/* Boutons principaux */
.tmh-registration__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.9rem;
    margin:2rem 0 0;
}

.tmh-registration__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    padding:.85rem 1.45rem;
    border:2px solid transparent;
    border-radius:999px;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.tmh-registration__button:hover,
.tmh-registration__button:focus-visible{
    transform:translateY(-2px);
    text-decoration:none;
}

.tmh-registration__button--primary{
    background:#ef7d4d;
    color:#fff;
    box-shadow:0 10px 24px rgba(66,29,13,.20);
}

.tmh-registration__button--primary:hover,
.tmh-registration__button--primary:focus-visible{
    background:#fff;
    color:#0c4e87;
}

.tmh-registration__button--secondary{
    border-color:rgba(255,255,255,.78);
    background:rgba(255,255,255,.08);
    color:#fff;
}

.tmh-registration__button--secondary:hover,
.tmh-registration__button--secondary:focus-visible{
    border-color:#fff;
    background:#fff;
    color:#0c4e87;
}

/* Séparateurs */
.tmh-registration__separator{
    height:1px;
    margin:clamp(2.2rem,5vw,3.4rem) 0;
    border:0;
    background:rgba(255,255,255,.18);
}

/* Titre de la partie étapes */
.tmh-registration__steps-title{
    margin:0 0 1.7rem;
    color:#fff;
    font-size:clamp(1.4rem,2.5vw,1.9rem);
    line-height:1.25;
    text-align:center;
}

/* Grille des étapes */
.tmh-registration__steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.35rem;
}

/* Carte d'étape */
.tmh-registration__step{
    position:relative;
    overflow:hidden;
    min-height:100%;
    padding:1.65rem 1.55rem 1.55rem;
    border:1px solid rgba(255,255,255,.16);
    border-radius:18px;
    background:rgba(255,255,255,.10);
    box-shadow:0 10px 25px rgba(8,36,68,.08);
    backdrop-filter:blur(8px);
}

/* Filet corail, signature graphique récurrente */
.tmh-registration__step::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#ef7d4d;
}

.tmh-registration__step-title{
    margin:0 0 .75rem;
    color:#fff;
    font-size:1.14rem;
    line-height:1.3;
}

.tmh-registration__step-text{
    margin:0;
    color:rgba(255,255,255,.90);
    line-height:1.65;
}

/* Partie basse */
.tmh-registration__footer{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.35rem;
}

/* Bloc secondaire */
.tmh-registration__help{
    padding:1.45rem 1.5rem;
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    background:rgba(4,38,72,.17);
    display:block;

    text-decoration:none;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.tmh-registration__help-title{
    margin:0 0 .55rem;
    color:#fff;
    font-size:1.12rem;
    line-height:1.3;
}

.tmh-registration__help-text{
    margin:0 0 .85rem;
    color:rgba(255,255,255,.90);
    line-height:1.6;
}

.tmh-registration__help:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.30);
  box-shadow:0 12px 26px rgba(8,36,68,.18);

}

.tmh-registration__help:hover
.tmh-registration__help-title,
.tmh-registration__help:hover
.tmh-registration__help-text,
.tmh-registration__help:hover
.tmh-registration__link{
  color:#fff;
}

.tmh-registration__help:focus-visible{
  outline:3px solid rgba(255,255,255,.5);
  outline-offset:4px;

}


/* Lien secondaire */
.tmh-registration__link{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    color:#ffd59a;
    font-weight:800;
    text-decoration:none;
}

.tmh-registration__link::after{
    content:"›";
    transition:transform .2s ease;
}

.tmh-registration__link:hover,
.tmh-registration__link:focus-visible{
    color:#fff;
    text-decoration:none;
}

.tmh-registration__link:hover::after,
.tmh-registration__link:focus-visible::after{
    transform:translateX(4px);
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:900px){

    .tmh-registration__steps{
        grid-template-columns:1fr;
    }

    .tmh-registration__footer{
        grid-template-columns:1fr;
    }

}

@media (max-width:600px){

    .tmh-registration{
        padding:2.25rem 1.2rem;
        border-radius:18px;
    }

    .tmh-registration__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .tmh-registration__button{
        width:100%;
    }

    .tmh-registration__step,
    .tmh-registration__help{
        padding-right:1.25rem;
        padding-left:1.25rem;
    }

}























/* =========================================================
   VISUELS TEMPORAIRES GÉNÉRIQUES
   À utiliser lorsqu’une image n’est pas encore disponible.

   Utilisation :
   <div class="tm-image-placeholder tm-image-placeholder--medium tm-image-placeholder--ensemble">
     Texte du visuel
   </div>

   Pour remplacer par une vraie image :
   supprimer le placeholder et ajouter une balise <img>.
   ========================================================= */

.tm-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  padding: 1rem;
  border-radius: inherit;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 32%),
    linear-gradient(135deg, #111111, #2a2a2a);
  color: #ffffff;
  font-family: var(--tm-font-title);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

/* Variante sobre */
.tm-image-placeholder--soft {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.10), transparent 32%),
    linear-gradient(135deg, #222222, #3a3a3a);
}

/* Variante instrument / violet */
.tm-image-placeholder--instrument {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 32%),
    linear-gradient(135deg, #2a1626, #5a234f);
}

/* Variante éveil / corail */
.tm-image-placeholder--eveil {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 32%),
    linear-gradient(135deg, #3a171b, #d84b58);
}

/* Variante ensemble / bleu */
.tm-image-placeholder--ensemble {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.16), transparent 32%),
    linear-gradient(135deg, #102f38, #24566b);
}

/* Variante coup de cœur / rose */
.tm-image-placeholder--heart {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 32%),
    linear-gradient(135deg, #1f1014, #3a1b23);
}

/* Tailles disponibles */
.tm-image-placeholder--small {
  min-height: 75px;
  font-size: 0.82rem;
}

.tm-image-placeholder--medium {
  min-height: 120px;
}

.tm-image-placeholder--large {
  min-height: 220px;
  font-size: 1.1rem;
}