/* Copyright (c) 2026 LB IT Cloud SAS. All rights reserved.
   Proprietary source of the LB IT Cloud website. See LICENSE.

   Lifted out of a-propos.html, for the same reason as contact.css: what the browser
   renders comes from files this origin served, and the policy forbids the alternative.

   WHAT IS *NOT* HERE, ON PURPOSE. The activity cards and the figures band reuse
   `.cards` / `.card` / `.ico` and `.facts` / `.fact` from site.css, untouched — including
   the nth-child rule that cycles the four accents by POSITION. A second set of card rules
   is a second card design, and it drifts from the home page's the first time either is
   edited. Only the two things site.css has no vocabulary for are defined below: a person,
   and a list of skills.

   THERE IS NO CLOSING "PARLONS-EN" BAND, and that is a decision rather than an omission.
   site.css says its `.callout` and `.mail` rules went with the home page's closing band on
   31/08/2026 at Julien's word, and warns in as many words that leaving them behind would let
   the next person re-adopt a reversed decision without knowing it. This page ends on the two
   profiles; Contact is in the header, on every page, which is the arrangement he asked for. */

/* ---------------------------------------------------------------------------
   THE TWO PROFILES.

   A rule down the left edge, in the accent the position gives it — the treatment
   site.css names when it lists the four accents ("the rule down the side of a
   profile") and the reason the palette exists at all: Julien, 31/08/2026, *« un
   petit peu plus de couleurs, même si c'est très léger et nuancé »*. Colour on the
   edge and in the initials, never on the name or the prose.
   --------------------------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 40px; }

/* Square and ruled since 09/10/2026 (direction « Signalétique »): a profile is a sheet to
   read, not a tag to pick. */
.person {
  background: var(--panel); border: 1px solid var(--line);
  padding: 26px 28px; border-left: 3px solid var(--a1);
  transition: border-color .15s, box-shadow .15s;
}
.person:hover { box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .person { transition: none; } }
/* Same cadence as `.cards .card`, so a third person lands on the third accent
   without anybody choosing a colour in the markup. */
.people .person:nth-child(4n+2) { border-left-color: var(--a2); }
.people .person:nth-child(4n+3) { border-left-color: var(--a3); }
.people .person:nth-child(4n+4) { border-left-color: var(--a4); }

.phead { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; }

/* INITIALS, NOT A PHOTOGRAPH. Two letters cost no file, need no `img-src` beyond what
   the policy already allows, and cannot become the one orphaned image that the
   "shows every image it keeps" check reports. The day two portraits exist they drop
   into img/ and replace this block — the markup around it does not move.

   Cut like a tag rather than round, the site's one shape for a small mark: a pastel fill
   and no border, since a clipped border loses its diagonal (see THE CHAMFER in site.css). */
.avatar {
  --cut: 10px;
  flex: none; width: 54px; height: 54px;
  background: var(--a1-soft); color: var(--a1);
  display: flex; align-items: center; justify-content: center;
  font: 760 22px/1 var(--display); font-stretch: 72%; letter-spacing: .02em;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
@supports (corner-shape: bevel) {
  .avatar { clip-path: none; border-radius: var(--cut) 0 var(--cut) 0; corner-shape: bevel; }
}
.people .person:nth-child(4n+2) .avatar { background: var(--a2-soft); color: var(--a2); }
.people .person:nth-child(4n+3) .avatar { background: var(--a3-soft); color: var(--a3); }
.people .person:nth-child(4n+4) .avatar { background: var(--a4-soft); color: var(--a4); }

.pname { font-size: 23px; font-weight: 760; font-stretch: 72%; letter-spacing: -.005em; line-height: 1.15; }
.prole { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.pbio { font-size: 14.5px; color: var(--ink-2); }
.pbio + .pbio { margin-top: 11px; }

/* The skills, as small square labels in the reference face — pills until 09/10/2026. Quiet by
   design: they are a list of nouns, and a list of nouns that shouts reads as a CV rather than
   as a company page. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tag {
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2);
  background: var(--ground-2); border: 1px solid var(--line);
  padding: 4px 8px;
}

@media (max-width: 900px) {
  .person { padding: 22px 20px; }
}

/* ---------------------------------------------------------------------------
   CONTENT ADDED ON 11/10/2026, in this page's own vocabulary.
   --------------------------------------------------------------------------- */
/* A portrait in the avatar's place (img/team/), cut like it. */
img.avatar { display: block; object-fit: cover; }

/* THE COMPANY'S DATA SHEET, read like the specification on the home page's plate: the label in
   the condensed capitals, the value in the reference face, a hairline between the lines — on a
   square, ruled sheet like the profiles. Five across on a desk, two by two on a tablet, one under
   the other on a phone. */
.fiche {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 30px 0 0;
  background: var(--panel); border: 1px solid var(--line); padding: 6px 22px;
}
.fiche div { padding: 12px 14px 12px 0; min-width: 0; }
.fiche div + div { border-left: 1px solid var(--line); padding-left: 14px; }
.fiche dt { font: 500 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.fiche dd { margin: 4px 0 0; font: 500 14px/1.4 var(--body); color: var(--ink); }
.fiche dd a { color: var(--brand); }
@media (max-width: 900px) {
  .fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fiche div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* THE LANDMARKS: three months in a row, each under a rule in the accent its position gives it,
   the month in the reference face. One under the other below 820 px. */
.reperes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.reperes li { border-top: 3px solid var(--a1); padding-top: 12px; min-width: 0; }
.reperes li:nth-child(4n+2) { border-top-color: var(--a2); }
.reperes li:nth-child(4n+3) { border-top-color: var(--a3); }
.rdate { display: block; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.reperes h3 { margin-top: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.005em; }
.reperes p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 820px) {
  .reperes { grid-template-columns: minmax(0, 1fr); }
}

/* The profile's LinkedIn, under the skills: the link of the home page's cards. */
.plink { margin-top: 16px; }
.plink a { font-weight: 600; font-size: 14px; text-decoration: none; }
.plink a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* THE LAST LINE: a title, a sentence, two buttons — centred, on the plain ground. */
.apnext { text-align: center; }
.apnext h2.title { margin: 0 auto; }
.apnext .lead { margin-left: auto; margin-right: auto; }
.apcta { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }