/* TransMemo - mise au format maison du bloc editorial SEO.
   Aucune modification du contenu : uniquement de la presentation.
   Charge apres seo-accessibilite.css, dont il conserve les regles d'accessibilite. */

.tm-seo{
  padding:92px 0;
  background:#fff;
  border-top:1px solid var(--tmx-line);
  color:var(--tmx-ink);
  font-size:16.5px;
  line-height:1.72;
  overflow-wrap:break-word;
}

/* Colonne de gauche : etiquette de section, comme le reste du site */
.tm-seo__inner{
  max-inline-size:none;
  width:min(1280px,calc(100% - 64px));
  margin-inline:auto;
  display:grid;
  grid-template-columns:.42fr 1.58fr;
  gap:72px;
  align-items:start;
}
.tm-seo__inner>*{grid-column:2;min-width:0}
.tm-seo__inner::before{
  content:"Guide des horaires";
  grid-column:1;
  position:sticky;
  top:110px;
  padding-top:15px;
  border-top:2px solid var(--tmx-blue);
  color:var(--tmx-blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* Titres */
.tm-seo h1{
  margin:0 0 20px;
  color:var(--tmx-ink);
  font-size:clamp(34px,4vw,54px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:780;
}
.tm-seo h1+p{
  max-width:790px;
  color:var(--tmx-muted);
  font-size:18px;
  line-height:1.75;
}
.tm-seo h2{
  margin:56px 0 14px;
  color:var(--tmx-ink);
  font-size:clamp(23px,2.3vw,31px);
  line-height:1.18;
  letter-spacing:-.035em;
  font-weight:760;
}
.tm-seo h2::before{
  content:"";
  display:block;
  width:34px;height:3px;
  margin-bottom:18px;
  border-radius:2px;
  background:var(--tmx-blue);
}
.tm-seo h3{
  margin:34px 0 10px;
  color:var(--tmx-ink);
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.02em;
  font-weight:800;
}
.tm-seo p{max-width:78ch;margin:0 0 16px;color:var(--tmx-muted)}

/* Liens dans le texte : rouge de marque, plus le bleu emprunte */
.tm-seo a{
  color:var(--tmx-blue);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(227,6,19,.35);
  text-underline-offset:3px;
  font-weight:600;
  transition:text-decoration-color .2s ease,color .2s ease;
}
.tm-seo a:hover{color:var(--tmx-red-dark,#c40410);text-decoration-color:currentColor}

/* Encadre "Trouvez les horaires de votre commune" */
.tm-seo #horaires-prioritaires{
  margin:44px 0 8px;
  padding:clamp(22px,3vw,36px);
  background:var(--tmx-paper);
  border:1px solid var(--tmx-line);
  border-radius:14px;
}
.tm-seo #horaires-prioritaires h2{margin-top:0}
.tm-seo #horaires-prioritaires>p:last-child{margin-bottom:0}

/* Cartes de liens vers les communes et etablissements */
.tm-local-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr));
  gap:10px;
  margin:6px 0 26px;
  padding:0;
  list-style:none;
}
.tm-local-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 17px;
  background:#fff;
  border:1px solid var(--tmx-line);
  border-radius:9px;
  color:var(--tmx-ink);
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-decoration:none;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .2s ease;
}
.tm-local-links a::after{
  content:"→";
  flex:none;
  color:var(--tmx-blue);
  font-size:15px;
  transition:transform .25s cubic-bezier(.22,1,.36,1);
}
.tm-local-links a:hover{
  border-color:#f0b7bb;
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(17,24,32,.07);
}
.tm-local-links a:hover::after{transform:translateX(4px)}

/* Bouton final */
.tm-seo .tm-seo__cta{
  margin-top:26px;
  padding:17px 28px;
  background:var(--tmx-orange);
  color:#fff;
  border-radius:7px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  text-decoration:none;
  transition:box-shadow .25s ease,filter .25s ease;
}
.tm-seo .tm-seo__cta:hover{box-shadow:0 10px 24px rgba(227,6,19,.28);filter:saturate(1.05)}

/* Accessibilite : on garde l'anneau de focus, aux couleurs de la marque */
.tm-seo a:focus-visible,.tm-local-links a:focus-visible{
  outline:3px solid var(--tmx-blue);
  outline-offset:3px;
  box-shadow:0 0 0 3px #fff;
}

@media (max-width:1000px){
  .tm-seo{padding:70px 0}
  .tm-seo__inner{grid-template-columns:1fr;gap:30px;width:min(1280px,calc(100% - 36px))}
  .tm-seo__inner>*{grid-column:1}
  .tm-seo__inner::before{position:static;top:auto}
}
@media (max-width:600px){
  .tm-seo{padding:58px 0}
  .tm-seo h2{margin-top:44px}
}