/* ==========================================================================
   Section "Qui suis-je"

   Squelette emprunte au bloc de presentation du modele : un en-tete de
   section aligne a gauche, puis un unique grand panneau qui occupe toute la
   largeur du conteneur centre. La ou le modele pose une video pleine boite, on
   pose le portrait a fleur du panneau, sans retrait, et le recit occupe la
   colonne de droite.

   Habillage Numbers : panneau creme, rayon large, titres et declarations en
   graisse 400 ou 500 avec interlettrage negatif, jamais de graisse 700.

   Toutes les classes sont prefixees .apropos pour ne pas entrer en collision
   avec les feuilles des autres sections.
   ========================================================================== */

/* Le panneau vit sur fond blanc : c'est lui qui porte le creme. Si la section
   voisine est deja creme, basculer .apropos en .section--creme et le fond du
   panneau en blanc, sans rien changer d'autre.
   Pas de retrait sur le panneau : le portrait doit toucher trois de ses bords,
   c'est tout le sujet de la composition. Le retrait est porte par le recit. */
.apropos__panneau {
  display: grid;
  /* Colonne portrait fixe. Au-dela de 420px le visage prend le pas sur le
     texte et le bloc bascule en galerie photo. */
  grid-template-columns: 420px 1fr;
  align-items: stretch;
  background-color: var(--cream);
  border-radius: var(--r-2xl);
  /* Indispensable : sans cela les angles carres de l'image debordent du rayon
     du panneau. */
  overflow: hidden;
}

/* ------------------------------------------------------- colonne portrait */

.apropos__media {
  /* Repli de securite si l'image tarde a charger : la colonne garde sa place
     et le panneau ne saute pas. */
  min-height: 460px;
  background-color: var(--trait);
}

/* Le fichier source est nettement plus haut que large (1010 x 1372) et le
   sujet y est centre.
   Sur deux colonnes la boite est plus haute que large, donc plus etroite que
   la source : le rognage se fait lateralement et la hauteur est montree en
   entier. Seule la composante horizontale de object-position agit ici, elle
   reste a 50 % puisque le sujet est centre. La composante verticale ne sert
   qu'aux points de rupture, ou la boite devient une banniere. */
.apropos__portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---------------------------------------------------------- colonne recit */

.apropos__recit {
  display: flex;
  flex-direction: column;
  /* Centre verticalement : le recit est plus court que le portrait, la marge
     restante se repartit en haut et en bas plutot que de s'accumuler sous le
     dernier paragraphe. */
  justify-content: center;
  gap: var(--sp-5);
  padding: 48px 56px;
}

/* Premiere phrase traitee comme une declaration, un cran sous le titre de
   section. Graisse 400 et interlettrage negatif : c'est ce couple qui donne le
   ton, jamais du gras. */
.apropos__accroche {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  line-height: 34px;
  letter-spacing: -0.5px;
  color: var(--ink-strong);
}

.apropos__paragraphe {
  font-size: var(--t-corps);
  line-height: var(--t-corps-lh);
  color: var(--ink-soft);
  /* Le recit fait 688px de large a 1440, soit environ 81 caracteres par ligne,
     au-dela du confort de lecture. L'unite ch se mesure sur le chiffre zero
     (10,7px ici) alors qu'un caractere courant de texte francais en fait
     environ 8,5 : 58ch valent donc 622px, soit 73 caracteres.
     Le filet de la signature, lui, garde la largeur pleine de la colonne :
     c'est ce decalage qui donne au bloc son appui. */
  max-width: 58ch;
}

/* ------------------------------------------------------------- signature */

/* Nom, fonction et lien LinkedIn en pied de colonne, separes du recit par un
   filet. Le lien LinkedIn de l'original est conserve tel quel. */
.apropos__signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--trait-fort);
}

.apropos__nom {
  font-family: var(--font-sans);
  font-size: var(--t-carte);
  font-weight: 500;
  line-height: var(--t-carte-lh);
  letter-spacing: var(--t-carte-ls);
  color: var(--ink-strong);
}

.apropos__role {
  font-size: var(--t-petit);
  line-height: var(--t-petit-lh);
  color: var(--grey-texte);
}

/* Pilule LinkedIn. Volontairement plus basse que .bouton (48px), qui ferait
   concurrence au bouton d'appel a l'action de la page, mais pas en dessous de
   44px : c'est le plancher d'une cible tactile. 40px, la valeur precedente,
   etait 4px trop bas. */
.apropos__linkedin {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-pill);
  background-color: var(--white);
  font-size: var(--t-petit);
  font-weight: 500;
  line-height: 1;
  color: var(--ink-strong);
  text-decoration: none;
  transition: border-color var(--transition) ease,
              background-color var(--transition) ease,
              color var(--transition) ease;
}

.apropos__linkedin:hover {
  border-color: var(--ink);
  background-color: var(--ink);
  color: var(--white);
}

.apropos__linkedin-icone {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transition: filter var(--transition) ease;
}

/* Le PNG LinkedIn est bleu sur fond blanc : sur la pilule survolee, qui passe
   en encre, on le desature et on l'eclaircit pour qu'il reste lisible. */
.apropos__linkedin:hover .apropos__linkedin-icone {
  filter: grayscale(1) brightness(2.4);
}

/* ==========================================================================
   Points de rupture
   ========================================================================== */

@media screen and (max-width: 991px) {
  .apropos__panneau {
    grid-template-columns: 300px 1fr;
  }

  .apropos__media {
    min-height: 420px;
  }

  .apropos__recit {
    padding: 36px 32px;
  }

  .apropos__accroche {
    font-size: 21px;
    line-height: 30px;
    letter-spacing: -0.42px;
  }
}

@media screen and (max-width: 767px) {
  /* Une seule colonne : le portrait devient une banniere en tete de panneau.
     Le format 4/3 est le plus large qu'on puisse rogner dans une source carree
     en gardant la tete entiere. Un 3/2 coupait la barbe entre 480 et 767px.
     Le cadrage est remonte a 30 % de la bande rognee : le sujet occupe la
     moitie haute de la source, la marge doit donc rester sous le menton. */
  .apropos__panneau {
    grid-template-columns: 100%;
  }

  .apropos__media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .apropos__portrait {
    object-position: 50% 30%;
  }

  .apropos__recit {
    padding: 28px;
  }

  /* En pleine largeur la colonne fait moins de 730px : la mesure de lecture
     n'a plus a etre bridee, elle l'est deja par la fenetre. */
  .apropos__paragraphe {
    max-width: none;
  }

  .apropos__accroche {
    font-size: 19px;
    line-height: 28px;
    letter-spacing: -0.38px;
  }
}

@media screen and (max-width: 479px) {
  .apropos__panneau {
    border-radius: var(--r-xl);
  }

  .apropos__recit {
    padding: 22px 20px;
    gap: var(--sp-4);
  }

  .apropos__accroche {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.36px;
  }

  /* Plus de place pour deux blocs cote a cote : la pilule passe sous le nom. */
  .apropos__signature {
    justify-content: flex-start;
  }
}