/* À propos — la composition « bande » avec le bas en cellules, VALIDÉE par Theo le 18/09. html[data-aprov="bande"] est posé par le script, qui retire aussi les réglages de l'ancienne version
   (equipev, tete, chiffres, legende, apropos, recit) : seules les règles de base de la page et celles-ci s'appliquent.
   Le contenu est celui validé le 14/09 : le récit tient lieu de titre (h2 masqué), l'introduction, cinq portraits, trois chiffres, trois valeurs sans pictogramme.
   La tête reprend celle des autres sections (récit à gauche, introduction à droite). Les cinq portraits forment une seule bande d'un bord à l'autre de l'écran, en grand, serrés les uns contre
   les autres, comme la bande du hero ; le prénom et le poste sont posés sur la photo, en étiquette. Dessous, collée à la bande, une table à filets d'un bord à l'autre : la rangée des chiffres,
   teintée, puis celle des valeurs, dans le dessin des bénéfices.
   Essayés le même jour et retirés (l'historique git les garde) : rangées, mosaïque, équerre, liste, décalé, et les bas « deux colonnes » et « bandeau noir ». */
html[data-aprov="bande"] .apropos { --x: max(var(--marge), calc((100vw - 1540px) / 2 + var(--marge))); }
html[data-aprov="bande"] .apropos h2, html[data-aprov="bande"] .apropos .valeur .picto { display: none; }
html[data-aprov="bande"] .apropos .recit { display: block; margin: 0; max-width: none; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.15; letter-spacing: -0.02em; text-wrap: wrap; }
html[data-aprov="bande"] .apropos .tete p { margin: 0; max-width: 44ch; }

@media (min-width: 1101px) {
  html[data-aprov="bande"] .apropos :is(.tete, .corps-apropos, .faits) { display: contents; }
  html[data-aprov="bande"] .apropos .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  html[data-aprov="bande"] .apropos .recit { grid-column: 1 / 8; grid-row: 1; }
  html[data-aprov="bande"] .apropos .tete p { grid-column: 9 / 13; grid-row: 1; align-self: end; margin-bottom: 6px; }

  /* La bande de portraits */
  html[data-aprov="bande"] .apropos .equipe { grid-column: 1 / -1; grid-row: 2; width: 100vw; margin: 72px 0 0 calc(50% - 50vw); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--trait); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
  /* L'étiquette : une seule, en deux étages collés, en bas à gauche de la photo : le prénom en clair sur encre pleine, lisible sur toutes les photos (deux pastilles crème disparaissaient sur les t-shirts
     blancs), le poste dessous sur crème avec un filet et l'angle bas droit arrondi des boutons du site. La photo et les deux étages partagent la grille de la carte : aucun décalage au pixel à régler. */
  html[data-aprov="bande"] .apropos .membre { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 0; }
  html[data-aprov="bande"] .apropos .membre .photo { grid-column: 1; grid-row: 1 / 4; aspect-ratio: 4 / 5; border-radius: 0; }
  html[data-aprov="bande"] .apropos .membre b, html[data-aprov="bande"] .apropos .membre > span:not(.photo) { grid-column: 1; justify-self: start; z-index: 2; margin-left: 16px; max-width: calc(100% - 32px); box-sizing: border-box; line-height: 1.25; }
  html[data-aprov="bande"] .apropos .membre b { grid-row: 2; padding: 6px 11px 6px; font-size: 15px; font-weight: 450; letter-spacing: 0; background: var(--on-light); color: #f6f4ec; }
  html[data-aprov="bande"] .apropos .membre > span:not(.photo) { grid-row: 3; margin-bottom: 16px; padding: 6px 12px 7px 11px; font-size: 13px; color: var(--on-light); background: var(--fond); border: 1px solid var(--trait); border-top: 0; border-radius: 0 0 9px 0; }

  /* Le bas en cellules, collé sous la bande */
  html[data-aprov="bande"] .apropos :is(.chiffres, .valeurs) { grid-column: 1 / -1; box-sizing: border-box; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0 var(--x); gap: 0; border-bottom: 1px solid var(--trait); }
  html[data-aprov="bande"] .apropos .chiffres { grid-row: 3; } html[data-aprov="bande"] .apropos .valeurs { grid-row: 4; }
  html[data-aprov="bande"] .apropos :is(.chiffre, .valeur) { border-top: 0; border-right: 1px solid var(--trait); padding: 36px 32px 40px; }
  html[data-aprov="bande"] .apropos :is(.chiffre, .valeur):first-child { border-left: 1px solid var(--trait); }
  html[data-aprov="bande"] .apropos .chiffre { background: var(--surface); }
  html[data-aprov="bande"] .apropos .valeur { padding: 32px 32px 40px; transition: background var(--m-vite, 220ms) ease; }
  html[data-aprov="bande"] .apropos .valeur:hover { background: var(--surface); }
  /* Les filets verticaux des valeurs continuent sous la rangée et descendent jusqu'à la section du bas, à travers la marge de 120 px (Theo, 25/09 : « faire une version avec grille
     qui poussent vers section du bas »), comme les filets des bénéfices, mais pleins jusqu'au bord du dernier appel au lieu de s'effacer. Seuls les deux filets intérieurs descendent,
     entre les trois valeurs ; ceux des deux extrémités s'arrêtent à la rangée (Theo, 25/09 : « pas les deux des deux extrémités en bas »). Chaque filet reprend exactement la bordure
     droite de sa cellule (right: -1px) et fait 121 px : la marge du bas et le filet horizontal de la rangée, qu'il croise.
     Clé aprovfilets=avant dans l'adresse pour revoir la rangée fermée par son seul filet du bas. */
  html[data-aprov="bande"]:not([data-aprov-filets="avant"]) .apropos .valeur { position: relative; }
  html[data-aprov="bande"]:not([data-aprov-filets="avant"]) .apropos .valeur:not(:last-child)::after { content: ""; position: absolute; top: 100%; right: -1px; width: 1px; height: 121px; background: var(--trait); pointer-events: none; }
}

/* Tablette et mobile : une colonne. Le récit, l'introduction, les portraits deux par deux avec leur légende dessous, puis les chiffres et les valeurs. */
@media (max-width: 1100px) {
  html[data-aprov="bande"] .apropos .in { display: flex; flex-direction: column; }
  html[data-aprov="bande"] .apropos :is(.tete, .corps-apropos) { display: contents; }
  html[data-aprov="bande"] .apropos .recit { order: -1; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.2; margin-bottom: 20px; }
  html[data-aprov="bande"] .apropos .tete p { order: 0; margin-bottom: 36px; }
  html[data-aprov="bande"] .apropos .equipe { order: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  html[data-aprov="bande"] .apropos .membre .photo { border-radius: 0; }
  html[data-aprov="bande"] .apropos .faits { order: 2; display: grid; gap: 48px; margin-top: 56px; }
  html[data-aprov="bande"] .apropos :is(.chiffres, .valeurs) { grid-template-columns: 1fr; gap: 24px; }
  /* Les filets au-dessus des chiffres et des valeurs vont d'un bord à l'autre de l'écran, le texte reste dans les marges (Theo, 25/09 : « pousse les lignes bords à bords sur tablette mobile »).
     Le trait est un pseudo-élément large comme l'écran, la section coupe le débord (overflow-x: clip). */
  html[data-aprov="bande"] .apropos :is(.chiffre, .valeur) { position: relative; border-top: 0; }
  html[data-aprov="bande"] .apropos :is(.chiffre, .valeur)::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--trait); pointer-events: none; }
}