/**
 * Organigramme.
 *
 * Des lignes de membres : un portrait rond, le nom, la fonction, la
 * discipline. Le modèle est un document IMPRIMÉ fourni par le client,
 * d'où les proportions relevées ci-dessous — mesurées sur ce document,
 * large de 1240 px.
 *
 * Ce qui en est repris : quatre cellules d'égale largeur, l'air pris
 * DANS la cellule et non entre elles, et une ligne incomplète centrée.
 * Ce qui ne l'est pas : le fond coloré, écarté par le client, et les
 * corps de texte — une affiche se lit à bout de bras et une page à
 * cinquante centimètres ; le document met un corps 24 là où le site en
 * met 18, et c'est l'échelle du site qui vaut ici, comme pour le titre.
 */

.organigramme {
  margin-block: var(--e-section);

  /*
   * L'écart entre deux lignes est une LONGUEUR, et c'est voulu : un
   * pourcentage d'écart entre lignes se mesure sur la HAUTEUR du
   * conteneur, et une hauteur libre vaut zéro pour ce calcul — la
   * règle n'aurait rien fait.
   *
   * Le document donne 87 px entre la dernière ligne de texte et le
   * portrait suivant, pour une cellule de 289,5 : 30 %. Nos cellules
   * font 278, ce qui met l'équivalent à 83 px — d'où 5 rem, et non les
   * 4 rem d'abord posés, qui serraient les lignes d'un quart. Mesuré
   * après coup : 64 px au lieu des 83 attendus.
   */
  --organigramme-saut: 5rem;
}

/*
 * Le titre est celui des sections du site : capitales, marine, calé à
 * gauche et encadré de deux pastilles. Sa géométrie est déclarée avec
 * celle du carrousel, dans « motifs.css » — un seul endroit pour un
 * seul dessin. Le document, lui, le centre ; c'est une composition
 * d'imprimé, et le client a tranché pour la langue du site.
 */

/* ---------------------------------------------------------------
 * La ligne
 *
 * Mesures du document : les centres des quatre colonnes tombent à
 * 185,5 — 473 — 764,5 — 1054, soit un pas constant de 289,5 dans un
 * bloc de 1158. Quatre cellules égales, donc, et AUCUNE gouttière
 * entre elles : le portrait n'occupe que 217 des 289,5, et c'est ce
 * retrait qui fait l'air. Une ligne incomplète se centre — le
 * président est seul sur la sienne, à 620, le milieu exact du bloc.
 * --------------------------------------------------------------- */

.organigramme__ligne {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--organigramme-saut);
  margin: 0;
  padding: 0;
  list-style: none;
}

.organigramme__ligne + .organigramme__ligne {
  margin-top: var(--organigramme-saut);
}

/*
 * Quatre de front, puis deux, puis un : les ruptures du site, celles
 * des accès rapides.
 *
 * La CELLULE suit la largeur disponible, mais son CONTENU ne la suit
 * pas au-delà de 22 rem. À deux de front, la cellule atteint 513 px :
 * le portrait, lui, est plafonné, et le texte s'étalait sur toute la
 * largeur, si bien que le membre paraissait flotter dans son coin. En
 * plafonnant le CONTENU plutôt que la cellule, on garde la garantie
 * d'exactement deux par ligne — un plafond posé sur la cellule la
 * ferait rentrer à trois dès que le bloc dépasserait 1056 — et le
 * groupe portrait + textes retrouve l'aplomb qu'il a à quatre.
 */
.organigramme__membre {
  flex: 0 0 25%;
  text-align: center;
}

.organigramme__membre > * {
  max-width: 22rem;
  margin-inline: auto;
}

@media (max-width: 84.999rem) {
  .organigramme__membre { flex-basis: 50%; }
}

/*
 * Un seul par ligne, et pas sur toute la largeur. Le plafond de 22 rem
 * est aussi ce qui garantit l'unité par ligne : la cellule déclarée à
 * 100 % est ramenée à 352 px, et deux n'y tiendraient que si le bloc
 * dépassait 704. Mesuré au banc : 615 px de bloc à 759 de fenêtre, et
 * 618 à 763 — la marge est confortable, mais c'est une coïncidence de
 * gabarit, pas une garantie. Si la composition s'élargit un jour, c'est
 * ici qu'il faudra revenir.
 */
@media (max-width: 47.999rem) {
  .organigramme__membre {
    flex-basis: 100%;
    max-width: 22rem;
  }
}

/* ---------------------------------------------------------------
 * Le portrait
 *
 * 217 sur 289,5, soit 75 % de la cellule. Le pourcentage se mesure
 * bien ici sur la cellule : l'image n'est pas l'élément flexible, elle
 * est DANS lui, et son bloc conteneur est donc la cellule et non la
 * ligne entière.
 *
 * Les photos fournies ne sont ni carrées ni cadrées de la même façon.
 * « object-fit: cover » les recadre sur le centre plutôt que de les
 * déformer : un visage étiré se voit tout de suite, un cadrage un peu
 * large ne se voit pas.
 * --------------------------------------------------------------- */

.organigramme__portrait {
  display: block;

  /*
   * 75 % de la cellule, MAIS JAMAIS PLUS DE 13 rem.
   *
   * Sans ce plafond, les portraits grossissaient en même temps que
   * l'écran rétrécissait : à quatre de front la cellule fait 278 et le
   * disque 208 ; à deux de front elle fait 488 et le disque montait à
   * 366. Des visages plus gros sur un écran plus petit, et surtout
   * trois tailles de portrait pour les mêmes personnes selon la
   * fenêtre. 13 rem valent exactement les 208 du cas le plus large :
   * le disque ne dépasse donc jamais sa taille de pleine page, et le
   * surplus de cellule devient de l'air.
   */
  width: min(75%, 13rem);
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: cover;

  /*
   * Le filet marine ferme le disque. Les photos sont prises sur un fond
   * clair et presque uniforme : sans trait, le bord haut du portrait se
   * dissout dans le blanc de la page et le rond n'en est plus un. Un
   * pixel suffit — au-delà, le trait se voit avant le visage.
   */
  border: 1px solid var(--couleur-titre);
  border-radius: var(--rayon-rond, 50%);
  background-color: var(--c-gris-10);
}

/*
 * Un membre sans photo garde sa place : le disque vide tient la ligne
 * pendant la saisie, au lieu de faire remonter les noms et de laisser
 * croire à un défaut de mise en page.
 */
.organigramme__portrait--vide { border-style: dashed; border-color: var(--couleur-filet); }

/* ---------------------------------------------------------------
 * Le nom, la fonction, la discipline
 *
 * Le document donne un interligne constant de 32 px et une respiration
 * d'environ 8 entre les trois blocs ; le rapport est gardé. L'écart du
 * portrait au nom vaut 29 sur 289,5 — un pourcentage vertical se
 * mesurant sur la LARGEUR du bloc conteneur, 10 % le disent exactement.
 * --------------------------------------------------------------- */

/*
 * « auto » SUR LES CÔTÉS, ET PAS 0.
 *
 * Le plafond de 22 rem est posé plus haut avec « margin-inline: auto »,
 * qui centre le bloc dans sa cellule. Les trois règles ci-dessous
 * écrivaient leur marge en raccourci — « margin: 10% 0 0 » — et un
 * raccourci écrase TOUT, y compris la moitié qu'il ne mentionne pas :
 * les marges latérales repassaient à zéro et le texte se collait à
 * gauche de sa cellule, pendant que le portrait, lui, restait centré.
 *
 * Invisible à quatre de front, où la cellule fait 278 et le plafond de
 * 352 ne mord jamais. Invisible à un par ligne, où la cellule EST
 * plafonnée à 352. Visible à deux de front seulement, cellule de 513
 * contre un texte de 352 : 80 px de décalage, relevés sur la page.
 */
.organigramme__nom {
  margin: 10% auto 0;
  font-size: var(--t-corps-grand);
  font-weight: var(--graisse-forte);
  line-height: 1.35;
  color: var(--couleur-titre);
}

.organigramme__fonction,
.organigramme__activite {
  margin: 0.3rem auto 0;
  font-size: var(--t-corps);
  line-height: 1.35;
}

.organigramme__activite { font-style: italic; }