/* ==========================================================================
   Praticiens
   ========================================================================== */

/* Un bloc d’équipe par cabinet. Le filet qui sépare deux cabinets doit être plus
   fort que celui qui sépare deux praticiens, sinon l’œil groupe par personne et
   les cabinets ne se lisent plus. */
.office-team + .office-team {
  margin-top: clamp(46px, 6vw, 78px);
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--green-dark);
}

.office-team-name {
  margin-bottom: 26px;
  color: var(--green-dark);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* À l’intérieur d’un cabinet, les fiches se séparent d’un filet discret. */
.office-team .person {
  border-top-color: var(--hairline);
}

.person h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 400;
}

/* auto-fill, pour qu’une petite équipe reste alignée à gauche au lieu de s’étirer. */
.people-grid {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* Un filet par carte se coupe à chaque gouttière : posés sous la grille de la
   semaine, ces segments se lisaient comme un trait cassé. Un seul filet en tête,
   les cartes se séparent par leur avatar et leur gouttière. */
.people-grid-wide {
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.people-grid-wide .person {
  padding-top: 0;
  border-top: 0;
}

.person {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--green-dark);
}

.person img,
.person .monogram {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.person .monogram {
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--green-dark);
  font-family: var(--font-display);
  font-size: 1.7rem;
}

.person h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 400;
}

.person p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Qualifié par son élément pour tenir tête à .card-body p et .section-head p, qui
   remettent la couleur au gris. people.css se charge après elles, la même
   spécificité suffit donc, sans !important. */
p.person-role {
  color: var(--green);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.person-days {
  display: grid;
  gap: 4px;
  font-family: var(--font-label);
  font-size: 0.76rem;
}

.person-days strong {
  color: var(--green-dark);
}

/* ==========================================================================
   Portrait et parcours
   ========================================================================== */

.portrait {
  display: grid;
  gap: clamp(28px, 4vw, 72px);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  margin-bottom: clamp(56px, 7vw, 104px);
}

.portrait-media {
  display: grid;
  gap: 20px;
  align-content: start;
}

.portrait-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.monogram-large {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  background: var(--tint);
  color: var(--green-dark);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 5rem);
}

.portrait-body h2 {
  margin-bottom: 6px;
}

.portrait-body .text-link {
  margin-top: 18px;
}

/* Les filets viennent des colonnes elles mêmes et non d'un fond posé derrière une
   gouttière d'un pixel : quand la dernière rangée est incomplète, ce fond teintait
   la case restée vide. */
.timeline-grid {
  display: grid;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeline {
  padding: 32px 28px 34px;
  border-left: 1px solid var(--hairline);
}

/* Une colonne a besoin à gauche de la même respiration qu'à droite. La première
   de chaque rangée n'a pas de filet, elle reste alignée sur la gouttière de la
   page. Savoir laquelle ouvre une rangée suppose de connaître le nombre de
   colonnes, d'où le compte déclaré ici et repris dans responsive.css plutôt
   qu'un auto-fit. */
.timeline:nth-child(2n + 1) {
  padding-left: 0;
  border-left: 0;
}

.timeline:nth-child(n + 3) {
  border-top: 1px solid var(--hairline);
}

/* Le parcours clinique compte trois fois plus d'entrées que les diplômes. Rangé
   en colonne, c'est lui seul qui fixait la hauteur du bloc et laissait le reste
   vide à côté : il passe sous les autres, sur toute la largeur, et sa liste se
   répartit. Le second nth-child ne le déplace que s'il y a bien trois groupes. */
.timeline:last-child:nth-child(n + 3) {
  grid-column: 1 / -1;
  padding-left: 0;
  border-left: 0;
}

/* Une grille et non des colonnes : le multi-colonnes remplit la première de haut
   en bas, si bien que la première ligne lue affichait 1998, 2003 puis 2026. La
   grille place ligne par ligne, dans le sens où on lit. */
.timeline:last-child:nth-child(n + 3) ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 36px;
}

.timeline h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--green);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

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

.timeline li {
  display: grid;
  gap: 3px;
}

.timeline-year {
  color: var(--green-dark);
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
}

.timeline-title {
  font-size: 1.02rem;
  font-weight: 600;
}

.timeline-detail {
  color: var(--muted);
  font-size: 0.94rem;
}

/* ==========================================================================
   Gestes filmés au cabinet
   ========================================================================== */

/* Trois colonnes au plus : ce sont des démonstrations, elles gagnent à être vues,
   et une dernière rangée de deux se lit mieux qu'un orphelin. */
.gesture-grid {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.gesture {
  display: grid;
  gap: 12px;
  margin: 0;
}

/* Le cadre impose le format, la vidéo le remplit : un clip portrait se recadre
   au lieu d'étirer sa ligne. */
.gesture video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--green-dark);
}

.gesture figcaption {
  color: var(--green-dark);
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}