/* Section équipe / à propos, versions de placement (test du 14/09). Une ligne dans Cmd+G, bloc « À propos », clé equipev= dans l'adresse (absente au défaut).
   Theo (14/09) : pas d'animation pour l'instant, on fige la structure et l'UI. Ne restent que la bande (l'actuelle) et Récit, dont la structure lui plaît ; mais les
   trois valeurs en bas avec leurs pictos ne le convainquent pas. Trois nouvelles versions partent donc du même squelette et changent la place et le traitement
   des valeurs, sans picto. Les versions ne s'appliquent qu'au-dessus de 1100 px ; en dessous, la section reste la bande, dont les règles mobiles existent déjà.
   — Récit : le récit du virage en très grand à la place du titre, le paragraphe dessous, les chiffres empilés à droite ; la planche contact bord à bord d'écran
     (cinq portraits collés à filets, nom sur la photo) ; les valeurs en trois colonnes à pictos en bas.
   — Récit · liste : les valeurs remontent sous le paragraphe, en liste à filets sur deux colonnes (titre, phrase), sans picto ; la planche contact ferme la section.
   — Récit · cellules : la planche contact, puis une rangée de trois cellules à filets bord à bord d'écran juste dessous, une valeur par cellule, numérotée 01 02 03,
     sans picto ; le vocabulaire des cellules du hero.
   — Récit · chiffres en bande : les valeurs prennent la colonne de droite, en liste à filets sans picto ; les trois chiffres passent en bande sur toute la largeur du
     contenu, entre le texte et la planche contact, qui ferme la section. */

@media (min-width: 1101px) {
  /* ================= Socle commun aux quatre Récit ================= */
  html[data-equipev^="recit"] .apropos .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: 24px; row-gap: 0; align-items: start; }
  html[data-equipev^="recit"] .apropos .tete, html[data-equipev^="recit"] .apropos .corps-apropos, html[data-equipev^="recit"] .apropos .faits { display: contents; }
  html[data-equipev^="recit"] .apropos h2 { display: none; }
  html[data-equipev^="recit"] .apropos .corps-apropos .recit { display: block !important; grid-area: 1 / 1 / 2 / 8; margin: 0 0 40px; font-size: clamp(30px, 2.7vw, 42px); line-height: 1.15; letter-spacing: -0.02em; max-width: none; }
  html[data-equipev^="recit"] .apropos .tete p { grid-area: 2 / 1 / 3 / 7; justify-self: start; margin: 0 0 96px; }
  /* la colonne de droite : chiffres empilés (ou valeurs, dans la version chiffres en bande) */
  html[data-equipev^="recit"] .apropos .chiffres { grid-area: 1 / 9 / 3 / 13; display: grid; grid-template-columns: 1fr; gap: 0; align-content: start; }
  html[data-equipev^="recit"] .apropos .chiffre { padding: 20px 0 24px; }
  html[data-equipev^="recit"] .apropos .chiffre:last-child { border-bottom: 1px solid var(--trait); }
  html[data-equipev^="recit"] .apropos .chiffre b { font-size: clamp(40px, 3.4vw, 56px); }
  /* la planche contact : cinq portraits collés, bord à bord d'écran, à filets */
  html[data-equipev^="recit"] .apropos .equipe { grid-area: 3 / 1 / 4 / 13; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; width: 100vw; margin: 0 0 96px calc(50% - 50vw); background: var(--trait); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
  html[data-equipev^="recit"] .apropos .membre { position: relative; display: block; background: var(--fond); overflow: hidden; }
  html[data-equipev^="recit"] .apropos .membre .photo { aspect-ratio: 4 / 5; border-radius: 0; }
  html[data-equipev^="recit"] .apropos .membre::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: linear-gradient(to bottom, rgba(251,251,248,0), rgba(251,251,248,0.94) 70%); z-index: 5; pointer-events: none; }
  html[data-equipev^="recit"] .apropos .membre b, html[data-equipev^="recit"] .apropos .membre > span:not(.photo) { position: absolute; left: 24px; right: 24px; z-index: 6; }
  html[data-equipev^="recit"] .apropos .membre b { bottom: 44px; font-size: 22px; }
  html[data-equipev^="recit"] .apropos .membre > span:not(.photo) { bottom: 22px; font-size: 13px; }
  html[data-equipev^="recit"] .apropos .valeurs { grid-area: 4 / 1 / 5 / 13; }

  /* ================= Récit · liste : les valeurs sous le paragraphe, la planche ferme ================= */
  html[data-equipev="recit-liste"] .apropos .tete p { margin-bottom: 56px; }
  html[data-equipev="recit-liste"] .apropos .valeurs { grid-area: 3 / 1 / 4 / 8; grid-template-columns: 1fr; gap: 0; margin-bottom: 96px; }
  html[data-equipev="recit-liste"] .apropos .valeur { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); column-gap: 32px; align-items: baseline; padding: 20px 0 22px; }
  html[data-equipev="recit-liste"] .apropos .valeur:last-child { border-bottom: 1px solid var(--trait); }
  html[data-equipev="recit-liste"] .apropos .valeur .picto { display: none; }
  html[data-equipev="recit-liste"] .apropos .valeur b { font-size: 19px; line-height: 1.35; }
  html[data-equipev="recit-liste"] .apropos .valeur p { margin: 0; font-size: 16px; max-width: none; }
  html[data-equipev="recit-liste"] .apropos .chiffres { grid-row: 1 / 4; }
  html[data-equipev="recit-liste"] .apropos .equipe { grid-area: 4 / 1 / 5 / 13; margin-bottom: 0; }

  /* ================= Récit · cellules : une rangée de trois cellules à filets sous la planche ================= */
  html[data-equipev="recit-cellules"] .apropos .equipe { margin-bottom: 0; border-bottom: 0; }
  html[data-equipev="recit-cellules"] .apropos .valeurs { --x: max(var(--marge), calc((100vw - 1540px) / 2 + var(--marge))); grid-area: 4 / 1 / 5 / 13; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 var(--x); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); counter-reset: valeur; }
  html[data-equipev="recit-cellules"] .apropos .valeur { counter-increment: valeur; position: relative; grid-template-columns: 1fr; gap: 8px; padding: 28px 32px 32px 0; margin-right: 32px; border-top: 0; border-right: 1px solid var(--trait); }
  html[data-equipev="recit-cellules"] .apropos .valeur:nth-child(n + 2) { padding-left: 0; }
  html[data-equipev="recit-cellules"] .apropos .valeur:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  html[data-equipev="recit-cellules"] .apropos .valeur .picto { display: none; }
  html[data-equipev="recit-cellules"] .apropos .valeur::before { content: counter(valeur, decimal-leading-zero); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
  html[data-equipev="recit-cellules"] .apropos .valeur b { font-size: 19px; }
  html[data-equipev="recit-cellules"] .apropos .valeur p { font-size: 15px; max-width: 40ch; }

  /* ================= Récit · chiffres en bande : les valeurs à droite, les chiffres sur toute la largeur, la planche ferme ================= */
  html[data-equipev="recit-bande"] .apropos .valeurs { grid-area: 1 / 9 / 3 / 13; grid-template-columns: 1fr; gap: 0; align-content: start; }
  html[data-equipev="recit-bande"] .apropos .valeur { padding: 18px 0 20px; gap: 6px; }
  html[data-equipev="recit-bande"] .apropos .valeur:last-child { border-bottom: 1px solid var(--trait); }
  html[data-equipev="recit-bande"] .apropos .valeur .picto { display: none; }
  html[data-equipev="recit-bande"] .apropos .valeur b { font-size: 19px; }
  html[data-equipev="recit-bande"] .apropos .valeur p { font-size: 15px; max-width: none; }
  html[data-equipev="recit-bande"] .apropos .chiffres { grid-area: 3 / 1 / 4 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 96px; }
  html[data-equipev="recit-bande"] .apropos .chiffre { padding: 24px 0 0; border-bottom: 0; }
  html[data-equipev="recit-bande"] .apropos .chiffre:last-child { border-bottom: 0; }
  html[data-equipev="recit-bande"] .apropos .chiffre b { font-size: clamp(44px, 4vw, 64px); }
  html[data-equipev="recit-bande"] .apropos .equipe { grid-area: 4 / 1 / 5 / 13; margin-bottom: 0; }

  /* ================= Récit · cadre : la maquette Figma de Theo (14/09). La planche reste dans la largeur du contenu, cinq cellules à filets verticaux ; dessous, une rangée
     de trois cellules à filets pour les valeurs, sans picto ; les deux filets latéraux du cadre descendent jusqu'au bas de la section. Style des photos inchangé. ================= */
  html[data-equipev="recit-cadre"] .apropos .equipe { width: auto; margin: 0; background: var(--trait); border: 1px solid var(--trait); border-bottom: 0; gap: 1px; }
  html[data-equipev="recit-cadre"] .apropos .valeurs { position: relative; grid-area: 4 / 1 / 5 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
  html[data-equipev="recit-cadre"] .apropos .valeur { display: grid; gap: 10px; align-content: start; padding: 36px 36px 40px; border-top: 0; background: var(--fond); }
  html[data-equipev="recit-cadre"] .apropos .valeur .picto { display: none; }
  /* cellules de 272 px : le nom et le rôle prennent un peu moins de marge et le rôle passe en 12 px pour tenir sur une ligne */
  html[data-equipev="recit-cadre"] .apropos .membre b, html[data-equipev="recit-cadre"] .apropos .membre > span:not(.photo) { left: 20px; right: 14px; }
  html[data-equipev="recit-cadre"] .apropos .membre b { bottom: 40px; font-size: 21px; }
  html[data-equipev="recit-cadre"] .apropos .membre > span:not(.photo) { bottom: 20px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-equipev="recit-cadre"] .apropos .valeur b { font-size: 20px; }
  html[data-equipev="recit-cadre"] .apropos .valeur p { font-size: 16px; max-width: 46ch; }
  /* les filets latéraux qui continuent sous le cadre, sur toute la marge basse de la section (120 px) */
  html[data-equipev="recit-cadre"] .apropos .valeurs::before, html[data-equipev="recit-cadre"] .apropos .valeurs::after { content: ""; position: absolute; top: 100%; width: 1px; height: 120px; background: var(--trait); }
  html[data-equipev="recit-cadre"] .apropos .valeurs::before { left: -1px; }
  html[data-equipev="recit-cadre"] .apropos .valeurs::after { right: -1px; }
  /* et le filet du bas des valeurs court d'un bord à l'autre de l'écran, au-delà du cadre (Theo, 14/09) : posé sur .in, à la hauteur du bas des valeurs (marge basse de 120 px) */
  html[data-equipev="recit-cadre"] .apropos .in { position: relative; }
  html[data-equipev="recit-cadre"] .apropos .valeurs { border-bottom: 0; }
  html[data-equipev="recit-cadre"] .apropos .in::after { content: ""; position: absolute; left: 50%; bottom: 120px; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--trait); pointer-events: none; }
}

/* ================= Récit · cadre en dessous de 1100 px (15/09, Theo : « la section est pas actualisée en mobile »). Même contenu et même ordre que le desktop,
   en une colonne : le récit en grand, le paragraphe, les trois chiffres empilés à filets, puis le cadre : les cinq portraits sur deux colonnes à filets, Anaïs
   sur toute la largeur avec le nom à droite de la photo, et dessous les trois valeurs en cellules empilées dans le même cadre. Sans picto, sans H2.
   Les règles mobiles génériques de proposition.html (html[data-apropos] …, en !important) sont plus faibles en spécificité et chargées avant. ================= */
@media (max-width: 1100px) {
  html[data-equipev="recit-cadre"] .apropos .in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
  html[data-equipev="recit-cadre"] .apropos .tete, html[data-equipev="recit-cadre"] .apropos .corps-apropos { display: contents; }
  html[data-equipev="recit-cadre"] .apropos .faits { display: contents !important; }
  html[data-equipev="recit-cadre"] .apropos h2 { display: none; }
  html[data-equipev="recit-cadre"] .apropos .corps-apropos .recit { display: block !important; order: 1; margin: 0 0 20px; font-size: clamp(24px, 6.4vw, 30px); line-height: 1.2; letter-spacing: -0.015em; max-width: none; }
  html[data-equipev="recit-cadre"] .apropos .tete p { order: 2; margin: 0 0 40px; justify-self: start; }
  html[data-equipev="recit-cadre"] .apropos .chiffres { order: 3; display: grid; grid-template-columns: 1fr !important; gap: 0 !important; margin: 0 0 40px; }
  html[data-equipev="recit-cadre"] .apropos .chiffre { padding: 18px 0 22px; gap: 8px; }
  html[data-equipev="recit-cadre"] .apropos .chiffre:last-child { border-bottom: 1px solid var(--trait); }
  html[data-equipev="recit-cadre"] .apropos .chiffre b { font-size: 40px; }
  /* le cadre des portraits */
  html[data-equipev="recit-cadre"] .apropos .equipe { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1px !important; width: auto !important; margin: 0 !important; background: var(--trait); border: 1px solid var(--trait) !important; border-bottom: 0 !important; }
  html[data-equipev="recit-cadre"] .apropos .membre { position: relative; display: block; background: var(--fond); overflow: hidden; padding: 0 !important; border: 0 !important; }
  html[data-equipev="recit-cadre"] .apropos .membre .photo { aspect-ratio: 4 / 5; border-radius: 0; }
  html[data-equipev="recit-cadre"] .apropos .membre::after { display: none; }
  html[data-equipev="recit-cadre"] .apropos .membre b, html[data-equipev="recit-cadre"] .apropos .membre > span:not(.photo) { position: static; left: auto; right: auto; bottom: auto; }
  /* spécificité relevée (.corps-apropos .equipe) pour passer devant equipe-legende.css, chargée après */
  html[data-equipev="recit-cadre"] .apropos .corps-apropos .equipe .membre b { padding: 14px 16px 0; font-size: 18px; }
  html[data-equipev="recit-cadre"] .apropos .corps-apropos .equipe .membre > span:not(.photo) { padding: 2px 16px 18px; font-size: 12px; white-space: normal; overflow: visible; }
  /* le cinquième portrait prend la rangée : la photo à gauche, à la largeur des autres, le nom et le rôle à droite, en bas */
  html[data-equipev="recit-cadre"] .apropos .membre:nth-child(5) { grid-column: 1 / -1 !important; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto 1fr; gap: 0; }
  html[data-equipev="recit-cadre"] .apropos .membre:nth-child(5) .photo { grid-column: 1; grid-row: 1 / 4; }
  html[data-equipev="recit-cadre"] .apropos .corps-apropos .equipe .membre:nth-child(5) b { grid-column: 2; grid-row: 1; align-self: end; padding: 0 16px 0; }
  html[data-equipev="recit-cadre"] .apropos .corps-apropos .equipe .membre:nth-child(5) > span:not(.photo) { grid-column: 2; grid-row: 2; padding-bottom: 0; }
  /* les valeurs, cellules empilées dans le même cadre */
  html[data-equipev="recit-cadre"] .apropos .valeurs { order: 5; position: static; display: grid; grid-template-columns: 1fr !important; gap: 1px !important; margin: 0; background: var(--trait); border: 1px solid var(--trait); }
  html[data-equipev="recit-cadre"] .apropos .valeur { display: grid; gap: 8px; align-content: start; padding: 22px 16px 26px; border-top: 0; background: var(--fond); }
  html[data-equipev="recit-cadre"] .apropos .valeur .picto { display: none; }
  html[data-equipev="recit-cadre"] .apropos .valeur b { font-size: 18px; }
  html[data-equipev="recit-cadre"] .apropos .valeur p { font-size: 15px; max-width: none; }
  html[data-equipev="recit-cadre"] .apropos .valeurs::before, html[data-equipev="recit-cadre"] .apropos .valeurs::after, html[data-equipev="recit-cadre"] .apropos .in::after { display: none; }
}

/* ================= Planche des portraits, autres traitements que les cinq cellules collées (Theo, 16/09 : « peut-être pas coller les portraits comme ça »).
   Premier tour (cartes espacées, quinconce, silhouettes) écarté par Theo le 16/09 : trop proche de la grille. Second tour, trois directions différentes, sur le squelette
   Récit · cadre ; la planche seule change, les valeurs quittent le cadre et reprennent trois colonnes à filet haut. Ligne « Planche » dans Cmd+G (bloc À propos),
   clé planche= : cadre (défaut) · fondateur · groupe · liste. Au-dessus de 1100 px seulement, le mobile garde le cadre. ================= */
.apropos .legende-groupe { display: none; }
@media (min-width: 1101px) {
  /* socle des planches libres (fondateur, groupe, liste ; le cadre et l'affiné n'en font pas partie) : plus de cadre ni de fond de filets, les valeurs en colonnes. :is() garde une spécificité basse, les règles de chaque planche passent devant. */
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .equipe { background: transparent; border: 0; gap: 24px; margin-bottom: 80px; align-items: start; }
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .membre { background: transparent; overflow: visible; }
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .corps-apropos .equipe .membre b { padding: 16px 0 0; font-size: 20px; }
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .corps-apropos .equipe .membre > span:not(.photo) { padding: 2px 0 0; font-size: 13px; white-space: normal; overflow: visible; }
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .valeurs { background: transparent; border: 0; gap: 40px; }
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .valeur { padding: 24px 0 0; border-top: 1px solid var(--trait); background: transparent; }
  html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .valeurs::before, html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .valeurs::after, html[data-equipev="recit-cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .in::after { display: none; }

  /* ---- Cadre · affiné (Theo, 16/09 : « ou juste une version UI améliorée de celle-ci ») : même structure, l'interface soignée.
     Un filet traverse aussi les photos pour que les cinq cellules se lisent d'un bloc, les cellules respirent un peu plus, et au survol la photo reprend ses couleurs.
     Les numéros 01 à 05 du premier jet ont été retirés (Theo, 16/09 : « j'aime pas vraiment le fait d'ajouter des numéros »). Le cadre, les rails et le filet bas ne changent pas.
     Deux déclinaisons de couleur, réglées dans proposition.html via le module des portraits : teintes (tuiles kaki clair / sauge / crème, photo naturelle) et bichromie
     (tuiles kaki / sauge / olive, photo en gris multiplié sur la couleur). ---- */
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .membre .photo { border-bottom: 1px solid var(--trait); }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .membre + .membre .photo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgba(22,21,16,0.10); z-index: 3; pointer-events: none; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .membre .photo img { transition: filter 0.5s ease; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .membre:hover .photo img { filter: none !important; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .in .corps-apropos .equipe .membre b { padding: 22px 20px 0 24px; font-size: 21px; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .in .corps-apropos .equipe .membre > span:not(.photo) { padding: 4px 24px 26px; font-size: 13px; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .valeur { padding: 30px 32px 36px 24px; gap: 8px; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .valeur b { font-size: 20px; }
  html[data-equipev="recit-cadre"][data-planche="affine"] .apropos .valeur p { font-size: 16px; }

  /* ---- Fondateur : Théo en grand à gauche sur deux rangées, les quatre autres en grille de deux par deux à droite. La hiérarchie du studio : l'interlocuteur, puis l'équipe. ---- */
  html[data-equipev="recit-cadre"][data-planche="fondateur"] .apropos .in .equipe { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px 24px; align-items: stretch; }
  html[data-equipev="recit-cadre"][data-planche="fondateur"] .apropos .membre { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-content: start; }
  html[data-equipev="recit-cadre"][data-planche="fondateur"] .apropos .membre:first-child { grid-column: 1; grid-row: 1 / 3; }
  html[data-equipev="recit-cadre"][data-planche="fondateur"] .apropos .membre:first-child .photo { aspect-ratio: auto; min-height: 0; height: 100%; }
  html[data-equipev="recit-cadre"][data-planche="fondateur"] .apropos .membre .photo { border-radius: 6px; }
  html[data-equipev="recit-cadre"][data-planche="fondateur"] .apropos .in .corps-apropos .equipe .membre:first-child b { font-size: 26px; }

  /* ---- Groupe : une seule grande tuile crème, les cinq détourages composés en photo de groupe (deux en retrait derrière, Théo devant au centre), la légende sur une ligne dessous. ---- */
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .in .equipe { display: block; position: relative; height: clamp(440px, 38vw, 580px); border-radius: 6px; overflow: hidden; background: #ebe9e0; background-image: linear-gradient(to right, rgba(22,21,16,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(22,21,16,0.07) 1px, transparent 1px); background-size: calc(100% / 20) calc(100% / 20); background-position: -1px -1px; margin-bottom: 0; }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre { position: absolute; bottom: 0; width: 30%; }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre .photo { background: transparent !important; background-image: none !important; border-radius: 0; }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre .photo canvas, html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre .photo .verre, html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre .photo .grain { display: none; }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .in .corps-apropos .equipe .membre b, html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .in .corps-apropos .equipe .membre > span:not(.photo) { display: none; }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre:nth-child(1) { left: 35%; width: 32%; z-index: 5; }               /* Théo, devant, au centre */
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre:nth-child(2) { left: 14%; width: 29%; bottom: 7%; z-index: 2; }  /* Luana, en retrait à gauche */
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre:nth-child(3) { left: 1%; width: 30%; z-index: 4; }                /* Max, devant à gauche */
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre:nth-child(4) { left: 57%; width: 29%; bottom: 7%; z-index: 2; }  /* Lilou, en retrait à droite */
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .membre:nth-child(5) { left: 70%; width: 30%; z-index: 4; }               /* Anaïs, devant à droite */
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .legende-groupe { display: flex; flex-wrap: wrap; gap: 6px 28px; grid-area: 4 / 1 / 5 / 13; margin: 20px 0 80px; font-size: 14px; line-height: 1.4; color: var(--muted); }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .valeurs { grid-area: 5 / 1 / 6 / 13; }
  html[data-equipev="recit-cadre"][data-planche="groupe"] .apropos .legende-groupe b { font-weight: 450; color: var(--on-light); }

  /* ---- Liste : une seule grande photo à gauche, et à droite les cinq noms en liste à filets (nom, rôle). Le survol d'une ligne change la photo ; sans survol, elle tourne. ---- */
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .equipe { grid-template-columns: minmax(0, 4fr) 64px minmax(0, 3fr) minmax(0, 5fr); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre { display: contents; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre .photo { grid-column: 1; grid-row: 1 / 6; border-radius: 6px; opacity: 0; transition: opacity 0.45s ease; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre[data-actif] .photo { opacity: 1; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .corps-apropos .equipe .membre b, html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .corps-apropos .equipe .membre > span:not(.photo) { display: flex; align-items: center; margin: 0; padding: 0 16px 0 0; border-top: 1px solid var(--trait); color: rgba(22,21,16,0.45); cursor: default; transition: color 0.3s; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .corps-apropos .equipe .membre b { grid-column: 3; font-size: 24px; font-weight: 400; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .corps-apropos .equipe .membre > span:not(.photo) { grid-column: 4; font-size: 15px; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(1) b, html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(1) > span:not(.photo) { grid-row: 1; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(2) b, html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(2) > span:not(.photo) { grid-row: 2; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(3) b, html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(3) > span:not(.photo) { grid-row: 3; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(4) b, html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(4) > span:not(.photo) { grid-row: 4; }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(5) b, html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .membre:nth-child(5) > span:not(.photo) { grid-row: 5; border-bottom: 1px solid var(--trait); }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .corps-apropos .equipe .membre[data-actif] b { color: var(--on-light); }
  html[data-equipev="recit-cadre"][data-planche="liste"] .apropos .in .corps-apropos .equipe .membre[data-actif] > span:not(.photo) { color: var(--muted); }
}

/* ================= Tête de la section à propos, autres agencements (Theo, 16/09 : « deux autres agencements UI de cette partie »). Clé tete= (ligne du panneau retirée) :
   bande, RETENU par Theo le 16/09 et défaut sans clé · colonne (l'ancien défaut, récit à gauche, chiffres empilés à droite) · bande (récit sur toute la largeur, paragraphe dessous, les trois chiffres en bande à filet haut entre le texte
   et la planche) · cadre (récit à gauche et paragraphe à droite calés en bas, les trois chiffres deviennent la première rangée du cadre, trois cellules au-dessus des
   portraits). Au-dessus de 1100 px, sur le squelette Récit · cadre. ================= */
@media (min-width: 1101px) {
  /* ---- Bande ---- */
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .corps-apropos .recit { grid-area: 1 / 1 / 2 / 11; margin-bottom: 40px; }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .tete p { grid-area: 2 / 1 / 3 / 7; margin-bottom: 72px; }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .chiffres { grid-area: 3 / 1 / 4 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 96px; }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .chiffre { padding: 24px 0 0; border-top: 1px solid var(--trait); }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .chiffre:last-child { border-bottom: 0; }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .chiffre b { font-size: clamp(44px, 4vw, 64px); }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .equipe { grid-area: 4 / 1 / 5 / 13; }
  html[data-equipev="recit-cadre"][data-tete="bande"] .apropos .valeurs { grid-area: 5 / 1 / 6 / 13; }
  html[data-equipev="recit-cadre"][data-tete="bande"][data-planche="groupe"] .apropos .legende-groupe { grid-area: 5 / 1 / 6 / 13; }
  html[data-equipev="recit-cadre"][data-tete="bande"][data-planche="groupe"] .apropos .valeurs { grid-area: 6 / 1 / 7 / 13; }

  /* ---- Cadre ---- */
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .corps-apropos .recit { grid-area: 1 / 1 / 2 / 8; margin-bottom: 0; }
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .tete p { grid-area: 1 / 9 / 2 / 13; align-self: end; margin: 0 0 6px; }
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .chiffres { grid-area: 2 / 1 / 3 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 96px; background: var(--trait); border: 1px solid var(--trait); border-bottom: 0; }
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .chiffre { padding: 28px 24px 32px; gap: 10px; border-top: 0; background: var(--fond); }
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .chiffre:last-child { border-bottom: 0; }
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .chiffre b { font-size: clamp(40px, 3.4vw, 52px); }
  html[data-equipev="recit-cadre"][data-tete="cadre"] .apropos .chiffre span { max-width: 30ch; }
  /* avec les planches libres (fondateur, groupe, liste), le cadre des chiffres se ferme seul */
  html[data-equipev="recit-cadre"][data-tete="cadre"]:is([data-planche="fondateur"], [data-planche="groupe"], [data-planche="liste"]) .apropos .chiffres { border-bottom: 1px solid var(--trait); margin-bottom: 64px; }
}

/* ================= Style des chiffres (Theo, 16/09 : « pousser un poil plus le style des stats »). Sur la bande retenue, trois traitements, ligne « Chiffres » dans Cmd+G,
   clé chiffres= (ligne du panneau retirée) : cellules, GARDÉ par Theo le 16/09 et défaut sans clé (trois cellules à filets, le vocabulaire du cadre en dessous) · filet (l'ancien : filet haut, valeur en grand, libellé gris) · accent (une courte barre
   terre brûlée au lieu du filet, le signe ou l'unité en terre brûlée) · tuiles (chaque chiffre dans une tuile crème tramée à six cases, comme les portraits).
   Le compteur de zéro à la valeur a été retiré (Theo, 16/09) : chiffres fixes. Le libellé ne change pas.
   Sélecteurs avec .in pour passer devant la règle de la tête en bande (html[data-equipev][data-tete] .apropos .chiffre), de même spécificité sinon. ================= */
/* les deux spans de la valeur (nombre, reste) ne doivent pas prendre le style du libellé (.chiffre span, 16 px gris) : spécificité supérieure, l'ordre de chargement ne compte pas */
.apropos .chiffre b > span { display: inline; font-size: inherit; line-height: inherit; color: inherit; max-width: none; }
.apropos .chiffre b > .u { font-size: 0.72em; letter-spacing: -0.02em; }
/* ---- Cellules ---- */
html[data-chiffres="cellules"] .apropos .in .chiffres { gap: 1px !important; background: var(--trait); border: 1px solid var(--trait); }
html[data-chiffres="cellules"] .apropos .in .chiffre { padding: 30px 28px 34px; border-top: 0; background: var(--fond); gap: 12px; }
html[data-chiffres="cellules"] .apropos .in .chiffre:last-child { border-bottom: 0; }
html[data-chiffres="cellules"] .apropos .in .chiffre > span { max-width: 30ch; }
/* ---- Accent ---- */
html[data-chiffres="accent"] .apropos .in .chiffre { position: relative; padding-top: 28px; border-top: 0; gap: 12px; }
html[data-chiffres="accent"] .apropos .in .chiffre::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 3px; background: var(--brule); }
html[data-chiffres="accent"] .apropos .in .chiffre:last-child { border-bottom: 0; }
html[data-chiffres="accent"] .apropos .in .chiffre b > .u { color: var(--brule); }
/* ---- Tuiles ---- */
html[data-chiffres="tuiles"] .apropos .in .chiffres { gap: 24px !important; }
html[data-chiffres="tuiles"] .apropos .in .chiffre { padding: 28px 28px 26px; border-top: 0; border-radius: 4px; background: #ebe9e0; background-image: linear-gradient(to right, rgba(22,21,16,0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(22,21,16,0.07) 1px, transparent 1px); background-size: calc(100% / 6) calc(100% / 6); background-position: -1px -1px; gap: 40px; grid-template-rows: auto 1fr; align-content: space-between; min-height: 200px; }
html[data-chiffres="tuiles"] .apropos .in .chiffre:last-child { border-bottom: 0; }
html[data-chiffres="tuiles"] .apropos .in .chiffre > span { align-self: end; max-width: 28ch; color: rgba(22,21,16,0.62); }