/* Athletik — adaptations ajoutees au rendu fige de la maquette.
   La maquette est dessinee pour le bureau : toutes ses mesures sont en style
   inline. On les surcharge ici (d'ou les !important) pour les ecrans etroits,
   et on remet en place les etats que le JS de la maquette gerait. */

html, body { overflow-x: hidden; }
img { max-width: 100%; }

/* ---------- Entete : bascule large / etroite (page d'accueil) ---------- */
[data-entete="large"] { display: contents; }
[data-entete="etroit"] { display: none; }

@media (max-width: 1039px) {
  [data-entete="large"] { display: none; }
  [data-entete="etroit"] { display: contents; }
}

[data-tiroir] a { border-bottom: 1px solid #E6E4DF; }
[data-tiroir] a:last-child { border-bottom: 0; }

/* ---------- Pages articles : nav de l'entete trop large sur mobile ------ */
@media (max-width: 980px) {
  header nav { display: none !important; }
  nav[data-r="toc"] { display: none !important; }
}

/* ---------- Grilles ---------- */
@media (max-width: 980px) {
  .r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  .r-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Respiration ---------- */
@media (max-width: 980px) {
  .r-pad { padding-block: 72px !important; }
  .r-gap { gap: 32px !important; }
}

@media (max-width: 640px) {
  .r-pad { padding-block: 52px !important; }
  .r-gap { gap: 20px !important; }
}

/* ---------- Typographie ---------- */
@media (max-width: 860px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 20px !important; }
  .r-lead { font-size: 17px !important; }
}

@media (max-width: 560px) {
  h1 { font-size: 31px !important; }
  h2 { font-size: 24px !important; }
  .r-lead { font-size: 16px !important; }
}

/* ---------- Pied de page ---------- */
@media (max-width: 980px) {
  footer > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  footer > div { grid-template-columns: 1fr !important; }
}

/* ---------- Apparition au defilement (equivalent du JS de la maquette) --- */
[data-anim] { transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
[data-anim-hidden] { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { transition: none; }
  [data-anim-hidden] { opacity: 1; transform: none; }
}

/* ---------- Bouton « Nous ecrire » de la carte Coaching ---------- */
.lien-ecrire {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 18px;
  border: 1px solid var(--action-secondary-border, #E6E4DF);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: var(--font-core, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-700, #1E3674);
  text-decoration: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .15s ease-out;
}

.lien-ecrire:hover,
.lien-ecrire:focus-visible {
  border-color: var(--navy-700, #1E3674);
  background: var(--navy-050, #EEF1F8);
  color: var(--navy-700, #1E3674);
  transform: translateY(-1px);
}


/* ---------- Cartes a pastille ronde ----------
   « Nos domaines d'expertise » et « Nos accompagnements » : la maquette colle
   la pastille et le texte a gauche ; ici tout est centre dans la carte.
   :has() n'est pas compris par les navigateurs tres anciens, qui gardent
   simplement l'alignement a gauche : la page reste lisible. */
.pastille-centree { align-self: center; }

article:has(> .pastille-centree) { text-align: center; }

article:has(> .pastille-centree) > div { justify-content: center; }

article:has(> .pastille-centree) .lien-ecrire { align-self: center; }