/* ==========================================================================
   Cartes
   ========================================================================== */

.card-grid {
  display: grid;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

/* Formations, une par ligne. Les textes sont longs, la lecture prime sur la grille. */
.card-grid-stack {
  grid-template-columns: 1fr;
}

.card-grid-stack .prose {
  max-width: 68ch;
}

/* Une formation se lit comme une fiche, l’étiquette et le titre en marge, le texte à côté. */
.card-body.training-body {
  display: grid;
  gap: 22px;
  width: 100%;
}

.training-head {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 12px;
}

.training-main {
  min-width: 0;
}

.card-body .prose p {
  margin-bottom: 16px;
}

.card-body .prose p:last-child {
  margin-bottom: 0;
}

@media (min-width: 980px) {
  .card-body.training-body {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
}

.card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  transition: background 240ms ease;
}

/* Le survol allume la fiche entière, la zone cliquable doit donc l'être aussi.
   Seules les fiches qui mènent à une seule page portent card-linked, leur lien
   s'étire dessus. Une fiche formation, qui porte un bouton externe et parfois
   une vidéo, garde son survol pour elle. */
.card-linked {
  position: relative;
  cursor: pointer;
}

/* Le contour est un outline et non une ombre intérieure : il se dessine après les
   enfants, la vignette de la fiche ne peut donc pas le recouvrir sur trois de ses
   quatre côtés. Le décalage négatif le ramène à l'intérieur, sur le filet de la
   grille, la fiche ne bouge pas d'un pixel. */
.card-linked:hover,
.card-linked:focus-within {
  background: var(--surface-hover);
  outline: 1px solid var(--control-line);
  outline-offset: -1px;
}

.card-linked .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card img,
.card-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  padding: 28px 26px 30px;
}

.card-body h2,
.card-body h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.card-body p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.card-body .text-link,
.card-body .button {
  margin-top: auto;
}

.card-meta {
  color: var(--green-dark);
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.card-body .video-band {
  width: 100%;
  margin-top: 6px;
}

.status {
  align-self: start;
  padding: 5px 12px;
  border: 1px solid currentcolor;
  font-family: var(--font-label);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.status-available {
  color: var(--green-dark);
}

.status-coming_soon {
  color: #8f3f16;
}

/* ==========================================================================
   Illustrations de thème, en attendant les photos du cabinet
   ========================================================================== */

/* L'illustration est portée par --theme-art, jamais par background-image :
   une vignette doit la montrer en entier quel que soit son format, alors qu'un
   bandeau ne s'en sert que comme texture. Le dégradé remplit le cadre, le
   dessin se contente d'y tenir. */
.card-media,
.theme-panel,
.expertise-media {
  background-image: var(--theme-art, none), linear-gradient(135deg, #e9f4ee, #cde6d9);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain, cover;
}

.theme-panel {
  min-height: 340px;
}

/* Le panneau d’illustration suit la hauteur du texte, la fiche reste équilibrée. */
.feature-band > .theme-panel {
  align-self: stretch;
}

.theme-osteopathie-pediatrique {
  --theme-art: url("../img/theme-osteopathie-pediatrique.svg");
}

.theme-osteopathie-du-sport {
  --theme-art: url("../img/theme-osteopathie-du-sport.svg");
}

.theme-osteopathie-emotionnelle {
  --theme-art: url("../img/theme-osteopathie-emotionnelle.svg");
}

.theme-osteopathie-des-personnes-agees {
  --theme-art: url("../img/theme-osteopathie-des-personnes-agees.svg");
}

.theme-machoire-et-occlusion {
  --theme-art: url("../img/theme-machoire-et-occlusion.svg");
}

.theme-dos-et-rachis {
  --theme-art: url("../img/theme-dos-et-rachis.svg");
}

.theme-osteopathie-biodynamique {
  --theme-art: url("../img/theme-osteopathie-biodynamique.svg");
}

.theme-femme-enceinte {
  --theme-art: url("../img/theme-femme-enceinte.svg");
}

.theme-formation {
  background-image: url("../img/theme-formation.svg");
}

.band.theme-formation {
  background-size: cover;
  background-position: center;
}

.feature-band {
  display: grid;
  gap: clamp(30px, 5vw, 76px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
}

.reasons {
  margin: 0 0 32px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  background: var(--green-soft);
}

.reasons h2 {
  max-width: none;
  margin: 0 0 12px;
  font-size: 1.35rem;
}

.reasons ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reasons li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
}

.reasons li::before {
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--green-dark);
}

.feature-band img {
  width: 100%;
  object-fit: cover;
}

.video-band {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--green-dark);
}

/* Le cadre suit le format de la source. Une vidéo portrait déposée depuis le
   back office s'inscrirait sinon sur toute la hauteur de la colonne. */
.video-band video {
  width: 100%;
  height: auto;
  max-height: min(70svh, 620px);
  object-fit: contain;
}


/* Les chiffres d'une formation, resserrés : ils vivent dans une colonne de fiche
   et non sur la largeur d'une page. */
/* Trois colonnes, pas un auto-fit : six chiffres se rangeaient en cinq plus un
   orphelin. Trois plus trois se lit d'un bloc. */
.training-facts {
  gap: 18px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.training-facts .figure {
  padding-right: 22px;
}

/* La base de calcul se lit avec les chiffres, pas avec le paragraphe suivant.
   Sélecteur porté à la même spécificité que .card-body p, qui remet toutes les
   marges basses à zéro dans une fiche. */
.card-body .training-note {
  margin: 10px 0 28px;
  color: var(--muted);
  font-size: 0.86rem;
  font-style: italic;
}

.training-contact {
  margin: 20px 0 0;
}