/* Everything the équipe page needs beyond the theme: the member cards'
 * sector badges and contact lines, the "Conseils d'administration"
 * accordions, and the junction with the call to action below them.
 *
 * Loaded on every public page, not just the two équipe URLs. That is not a
 * convenience: the theme swaps only <main> on a page change and never the
 * <head>, so a stylesheet the équipe page asks for on its own is simply
 * absent when you arrive there through an internal link, and the section
 * renders with the theme's defaults. Every selector below is scoped to
 * markup that exists only on that page, so carrying the file elsewhere
 * costs a small cached request and changes nothing.
 *
 * The section is built from the theme's own parts: o-round-section for the
 * rounded colour block, c-section-text for the heading, and c-accordion +
 * c-circle-btn for each conseil. frontend.min.js already drives those
 * accordions, so nothing here re-implements them — this file only adjusts
 * what the theme's accordion never had to handle, because its own use is a
 * FAQ: a column of text, not a grid of member cards.
 */

/* Sector badges under a member's name, and the spacing between the contact
 * lines below them. These lived in an inline <style> that lib/team-render.js
 * appended to the head; they are here now so the page needs no injected
 * head content at all. */
.c-member-card__teams {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0;
}

.c-member-card__team-tag {
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(6, 44, 82, 0.08);
  color: #062c52;
}

/* The theme's card has room for exactly one contact line and pushes it to
   the bottom with margin-top:auto. A second line inherits that auto and
   would sit flush against the first, so only the first keeps it. */
.c-member-card__inner-link + .c-member-card__inner-link {
  margin-top: 0.25rem;
}


/* The theme narrows .c-accordion__content-inner to eight columns and pushes
 * it right, which is what a paragraph of answer text wants and a four-up
 * card grid does not. Give the grid the full width of the accordion. */
.c-accordions-mb .c-accordion__content-inner {
  max-width: none;
  padding-right: 0;
  margin-left: 0;
}

/* Align the cards with the title above them rather than with the panel's
   outer edge, so the block reads as one column. */
.c-accordions-mb .c-accordion__content-inner > .c-members-list {
  padding-left: var(--_padding-h);
  padding-right: var(--_padding-h);
}

.c-accordions-mb .c-accordion__content-inner > .c-members-list {
  /* The theme's first-child rule sets 1rem. The highlight band behind the
     header extends below it by the accordion's vertical padding, so the
     cards need to clear that too. */
  margin-top: 3.8rem;
  margin-bottom: 1.2rem;
  /* Rows size to their content: a board with four cards should not stretch
     them to the height of the tallest row in a seven-card board. */
  grid-auto-rows: auto;
}

/* The yellow sheet that fades in on hover and while open is sized for a
 * FAQ answer — .c-accordion::before is the full height of the accordion,
 * which for a row holding seven member cards swallows the whole block and
 * buries the blue. Move it onto the header's own ::before, which the theme
 * already sizes to exactly the header row plus the accordion's vertical
 * padding, so the highlight stays a band behind the title. Same colour and
 * same corner radius as the theme's. */
.c-accordions-mb .c-accordion::before {
  display: none;
}

/* isolation, not luck: a z-index of -1 only stays in front of the section's
 * blue if some ancestor opens a stacking context. On desktop one happens to
 * exist, because GSAP leaves a transform on the row from data-anim-slide-up
 * — but that animation is skipped on phones, and the band fell behind the
 * section background there. Give the header its own context so the band
 * paints above the section and below the title either way. */
.c-accordions-mb .c-accordion__header {
  isolation: isolate;
}

.c-accordions-mb .c-accordion__header::before {
  z-index: -1;
  background-color: #f9ba00;
  border-radius: calc(26 / var(--base-px, 18) * 1rem);
  opacity: 0;
  transition: opacity var(--_trans);
}

html:not(.is-touch-device) .c-accordions-mb .c-accordion:hover .c-accordion__header::before,
.c-accordions-mb .c-accordion.--opened .c-accordion__header::before {
  opacity: 1;
}

/* The title takes the FAQ's question column, seven grid columns starting a
 * third of the way in, which leaves a board name stranded mid-row. Let it
 * start at the edge and take the space it needs; the count sits after it. */
.c-accordions-mb .c-accordion__header-title {
  width: auto;
  flex: 1 1 auto;
  padding-left: var(--_padding-h);
  padding-right: 2rem;
}

.c-accordions-mb .c-accordion__header-number {
  width: auto;
  flex: 0 0 auto;
  align-self: center;
  padding-left: 0;
  padding-right: 2rem;
  white-space: nowrap;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

html:not(.is-touch-device) .c-accordions-mb .c-accordion:hover .c-accordion__header-number,
.c-accordions-mb .c-accordion.--opened .c-accordion__header-number {
  color: #062c52;
}

/* .c-accordion positions ::before and .c-accordion__header::before against
 * their own box. The theme's stylesheet leaves that to the markup, which
 * sets it per block; here it has to be stated. */
.c-accordions-mb .c-accordion,
.c-accordions-mb .c-accordion__header,
.c-accordions-mb .c-accordion__header-ctrl {
  position: relative;
}

/* On blue, the theme's dark-blue hairline between rows disappears. */
.c-accordions-mb .c-accordion {
  --_border-color: rgba(248, 245, 239, 0.35);
  /* The theme's 1.2rem inset suits a row with no background. Here the
     highlight is a filled pill with rounded ends, and the title and button
     sat close enough to those corners to look cramped. */
  --_padding-h: 2.6rem;
}

@media screen and (max-width: 749px) {
  /* The theme turns the header into a reversed column and pins the number
     to the top-left corner — geometry that belongs to its number-first FAQ
     markup. Here the name stacks over its count, and the open/close button
     sits centred against the right edge. */
  .c-accordions-mb .c-accordion__header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-right: 4rem;
  }

  .c-accordions-mb .c-accordion__header-title {
    width: auto;
    flex: 1 1 100%;
    padding-right: 0;
  }

  .c-accordions-mb .c-accordion__header-number {
    position: static;
    width: auto;
    flex: 1 1 100%;
    align-self: auto;
    padding-left: var(--_padding-h);
    padding-right: 0;
    padding-top: 0.35em;
  }

  .c-accordions-mb .c-accordion__header-ctrl {
    position: absolute;
    top: 50%;
    right: 0;
    width: auto;
    align-self: auto;
    transform: translateY(-50%);
  }

  .c-accordions-mb .c-accordion__content-inner > .c-members-list {
    margin-top: 2.4rem;
  }
}

/* Give the call to action below this section its own rounded top back.
 *
 * .o-round-section.-top::before is the in-flow band that gives a fully
 * rounded section room for its top corners. The theme also has
 * .o-round-section + .c-cta-mb::before, which repurposes that same
 * pseudo-element into an absolutely positioned strip filling the gap a
 * preceding round section leaves with its negative bottom margin. Equal
 * specificity, so the adjacency rule wins on source order and the cap is
 * lost.
 *
 * Everywhere else on the site the two never meet: a .c-cta-mb that follows
 * an o-round-section is authored without -top, and a -top one follows a
 * plain section. This section is the first o-round-section to sit in front
 * of the CTA, which turned its cap into a square-cornered yellow bar lying
 * on the blue. Undo the repositioning and the band goes back where -top
 * puts it; height, colour and corner radius were never overridden.
 *
 * The sibling margins stay as they are: -var(--br-lg) here against
 * +var(--br-lg) there cancel out, which is what leaves the two rounded
 * blocks stacked flush instead of overlapping. */
.o-round-section + section.c-cta-mb.-top::before {
  position: relative;
  bottom: auto;
}

/* Sur téléphone, une carte par ligne : chacune à sa propre hauteur.
 *
 * Le thème pose `grid-auto-rows: 1fr` sur la liste des membres, ce qui aligne
 * toutes les cartes sur la hauteur de la plus grande. En quatre colonnes,
 * c'est voulu : les cartes d'une même rangée se terminent au même niveau et
 * les courriels s'alignent, aidés par le `margin-top: auto` que le thème met
 * sur la ligne de contact pour la pousser en bas.
 *
 * Sous 750 px la grille passe à une seule colonne (mesuré : 4 colonnes à
 * 1440, 3 à 1024, 2 à 800, 1 à 749). Chaque carte est alors seule sur sa
 * rangée, et l'égalisation n'aligne plus rien du tout — elle étire les
 * cartes courtes à la hauteur de la plus longue, et le `margin-top: auto`
 * ouvre un trou entre le secteur et le courriel. Mesuré à 390 px : toutes
 * les cartes à 171 px, avec 20 px de vide sous les fiches à titre court et
 * aucun sous les autres. D'où l'aspect irrégulier.
 *
 * Une carte seule sur sa ligne se dimensionne d'après son contenu. */
@media screen and (max-width: 749px) {
  .c-members-section .c-members-list,
  .c-accordions-mb .c-accordion__content-inner > .c-members-list {
    grid-auto-rows: auto;
  }
}

/* Empêcher les fiches de pousser la page vers la droite.
 *
 * La grille du thème est `repeat(3, 1fr)` entre 750 et 1199 px. Or `1fr`
 * vaut `minmax(auto, 1fr)`, et ce `auto` a pour plancher la largeur
 * min-content de la colonne : une adresse comme
 * karyne_l_bellemare@serviceespoir.com n'a presque aucun point de coupure,
 * donc elle impose sa largeur entière à sa colonne. Mesuré à 1024 px :
 * trois colonnes de 364 + 355 + 338 px, plus les gouttières, soit 1100 px
 * dans un conteneur de 954 — d'où une centaine de pixels de défilement
 * horizontal entre 800 et 1200 px, et des fiches coupées à droite.
 *
 * `min-width: 0` sur les fiches lève ce plancher : la colonne reprend sa
 * part égale. Il faut alors dire au texte de se couper, sinon c'est lui qui
 * dépasse de la fiche au lieu de la fiche qui dépasse de la page.
 *
 * Le défaut est celui du thème, pas de la page équipe — il se produirait
 * partout où une fiche porte un nom ou une adresse longs. Le correctif est
 * ici parce que c'est là que ces fiches existent. */
.c-members-list > * {
  min-width: 0;
}

.c-member-card__inner-title,
.c-member-card__inner-description,
.c-member-card__inner-link,
.c-member-card__inner-link a {
  overflow-wrap: break-word;
}
