/* ==========================================================================
   AU VENT DANS LES BRANCHES — Page Équipe et partenaires
   --------------------------------------------------------------------------
   Ce fichier ne sert QUE sur equipe-partenaires.html.
   Le bloc titre, la vague et les sous-titres à petite fleur viennent de
   page-generaliste.css, qui est chargé avant celui-ci.
   ========================================================================== */


/* ==========================================================================
   BANDEAU PHOTO
   --------------------------------------------------------------------------
   Bande pleine largeur posée juste sous le header.
   « cover » recadre l'image dans la bande au lieu de la déformer ; la hauteur
   suit la largeur de l'écran, entre un minimum et un maximum. Le cadrage est
   remonté à 30 % de la hauteur : c'est là que sont les visages.
   ========================================================================== */

/* La vague du bloc titre est un aplat crème qui remonte 200 px au-dessus de
   sa section (voir .titre-page__forme dans page-generaliste.css). Sur les
   autres pages elle est invisible, car il n'y a que du crème au-dessus.
   Ici elle recouvrait le bas de la photo : on fait donc passer le bandeau
   par-dessus. Le bord haut de la vague se retrouve caché sous la photo,
   ce qui est exactement l'effet recherché. */
.bandeau-equipe {
  position: relative;
  z-index: 1;
}

/* L'image est déjà au format d'un bandeau (3 pour 1) : on la laisse à ses
   proportions plutôt que d'imposer une hauteur, qui obligerait à la
   recadrer. Elle est ainsi toujours entière, à toutes les tailles d'écran. */
.bandeau-equipe img {
  width: 100%;
  height: auto;
}


/* ==========================================================================
   BLOC TITRE
   --------------------------------------------------------------------------
   Le bloc vient de page-generaliste.css. Seul ajustement propre à cette
   page : elle a deux paragraphes d'introduction au lieu d'un, il leur faut
   donc un espace entre eux (la règle commune les met à zéro).
   ========================================================================== */

.titre-page__intro + .titre-page__intro {
  margin-top: var(--espace-s);
}


/* ==========================================================================
   ZONE DE CONTENU
   --------------------------------------------------------------------------
   Fond blanc, comme les autres pages généralistes : c'est ce contraste avec
   le crème du bloc titre qui détache le haut de la page, et c'est là-dessus
   que la vague vient se poser.
   ========================================================================== */

.equipe {
  background-color: var(--blanc);
  /* Le retrait du haut doit rester supérieur au plongeon de la vague (24 px)
     pour qu'elle ne morde pas sur la première carte. */
  padding-block: var(--espace-l) var(--espace-l);
}

/* Section qui en suit une autre de même fond : pas de retrait en haut,
   celui de la section précédente suffit. */
.equipe--suite {
  padding-top: 0;
}

.membres {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}


/* ==========================================================================
   CARTE D'UNE PERSONNE
   --------------------------------------------------------------------------
   Même habillage que la carte intervenante des pages de cours : fond crème
   et fin liseré jaune. Rien de nouveau dans la charte.
   ========================================================================== */

.membre {
  background-color: var(--fond);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
  /* Empêche le fond de dépasser des angles arrondis quand la carte est
     ouverte. */
  overflow: hidden;
}

/* Le titre ne sert qu'à porter le bouton : il ne doit apporter ni marge ni
   taille de police propre. */
.membre__entete {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* --- La barre cliquable ---
   C'est un vrai <button> : il est atteignable au clavier et annoncé comme
   dépliable par les lecteurs d'écran (aria-expanded dans le HTML).
   On neutralise donc l'apparence par défaut d'un bouton. */
.membre__bouton {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  width: 100%;
  padding: var(--espace-s);
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Les cartes des partenaires ne se déplient pas encore : elles n'ont pas de
   bouton, mais doivent garder exactement la même mise en page. */
.membre__entete-simple {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  padding: var(--espace-s);
}

.membre__bouton:hover .membre__nom,
.membre__bouton:focus-visible .membre__nom {
  text-decoration: underline;
}


/* --- Portrait rond ---
   Même pastille que sur les pages de cours : le portrait est agrandi
   au-delà du cercle car le fichier comporte une marge transparente autour
   du sujet ; le débordement est masqué par l'overflow. */
.membre__portrait {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--jaune-deco) 35%, transparent);
}

.membre__portrait img {
  width: 122%;
  max-width: none;
}

/* Portrait pas encore fourni : la pastille reste vide. */
.membre__portrait--vide {
  background-color: color-mix(in srgb, var(--jaune-deco) 20%, transparent);
}


/* --- Nom, rôle et pratiques ---
   « auto » sur la marge droite pousse le + à l'extrémité de la carte. */
.membre__identite {
  display: flex;
  flex-direction: column;
  margin-right: auto;
}

.membre__nom {
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.3;
}

.membre__role {
  font-weight: var(--semigras);
  font-size: 0.95rem;
  line-height: 1.5;
}

.membre__pratiques {
  font-size: 0.9rem;
  line-height: 1.5;
}


/* --- Le + / − ---
   Dessiné en CSS avec deux barres : la barre verticale disparaît quand la
   carte est ouverte, il ne reste que le trait horizontal du −.
   Aucune image à charger, et le signe suit la couleur de la charte. */
.membre__signe {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-inline: var(--espace-xs);
}

.membre__signe::before,
.membre__signe::after {
  content: "";
  position: absolute;
  background-color: var(--cta);
}

.membre__signe::before {
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
}

.membre__signe::after {
  top: 0;
  bottom: 0;
  left: 10px;
  width: 2px;
  transition: transform 0.2s ease;
}

/* « scaleY(0) » écrase la barre verticale depuis son centre : le + devient
   un − sans que rien ne bouge autour. */
.membre__bouton[aria-expanded="true"] .membre__signe::after {
  transform: scaleY(0);
}


/* ==========================================================================
   PANNEAU DÉPLIÉ
   --------------------------------------------------------------------------
   Il est masqué par l'attribut « hidden » du HTML, que le JavaScript retire
   à l'ouverture. Avantage : sans JavaScript, le panneau reste simplement
   fermé, et rien n'est cassé.
   ========================================================================== */

/* Fermé par défaut : c'est le CSS qui porte l'état, plus l'attribut « hidden ».
   Le panneau est donc masqué dès l'analyse du fichier, sans attendre le
   JavaScript — aucun contenu ne clignote au chargement. */
.membre__panneau {
  display: none;
  padding: 0 var(--espace-s) var(--espace-m);
}

.membre__panneau.est-ouvert {
  display: block;
  animation: deplier 0.28s ease both;
}

/* Bio à gauche, contacts à droite, séparés par un filet vertical. */
.membre__grille {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--espace-m);
  /* Aligné sur le texte du nom, pas sur le portrait : le décalage reprend la
     largeur de la pastille plus l'écart qui la sépare du texte. */
  padding-left: calc(76px + var(--espace-s));
  padding-top: var(--espace-s);
  border-top: 1px solid color-mix(in srgb, var(--jaune-deco) 60%, transparent);
}

/* Le filet vertical est porté par la bio et non plus par les contacts :
   ceux-ci sont désormais un encart bordé, qui aurait fait double trait. */
.membre__bio {
  padding-right: var(--espace-m);
  border-right: 1px solid color-mix(in srgb, var(--jaune-deco) 60%, transparent);
}

.membre__bio p:last-child {
  margin-bottom: 0;
}

/* Intertitres de la présentation. Quicksand 600, comme les accroches de la
   charte : pas de nouvelle police ni de nouvelle couleur, seulement un
   niveau de lecture supplémentaire dans un texte long. */
.membre__sous-titre {
  margin: var(--espace-s) 0 var(--espace-xs);
  font-family: var(--titres);
  font-weight: var(--semigras);
  font-size: 1.05rem;
  line-height: 1.4;
}

/* Le premier intertitre est déjà séparé du reste par le filet horizontal
   de l'en-tête : il n'a pas besoin de marge au-dessus. */
.membre__bio > .membre__sous-titre:first-child {
  margin-top: 0;
}


/* --- Encart des informations pratiques ---
   Fond blanc sur le crème de la carte, fin liseré jaune et angles arrondis :
   le même habillage que les autres encarts du site. « center » lui laisse sa
   hauteur naturelle — étiré sur toute la colonne, il serait à moitié vide dès
   que la présentation est longue — et le centre en face du texte de gauche.
   Sur mobile la grille n'a qu'une colonne : la règle n'y change rien. */
.membre__contact {
  align-self: center;
  padding: var(--espace-m);
  background-color: var(--blanc);
  border: 1px solid var(--jaune-deco);
  border-radius: var(--rayon);
  font-size: 0.95rem;
}

/* Le bouton est centré dans son encart plutôt que collé au bord gauche.
   « fit-content » lui garde la largeur de son libellé : sans lui, « flex »
   l'étirerait sur toute la largeur du bloc. */
.membre__contact > .bouton {
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

/* La ligne « Retrouvez les cours de… » : l'icône reste en haut si le texte
   passe sur deux lignes. */
.membre__planning {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-xs);
}

/* Filet de séparation entre le renvoi vers le planning et les coordonnées :
   deux informations de nature différente dans le même encart. */
.membre__contacts {
  list-style: none;
  margin: var(--espace-m) 0 0;
  padding: var(--espace-m) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--jaune-deco) 60%, transparent);
}

.membre__contacts li {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-xs);
  /* Une adresse e-mail longue doit pouvoir se couper plutôt que d'élargir
     la colonne. */
  overflow-wrap: anywhere;
}

.membre__icone {
  width: 24px;
  flex-shrink: 0;
}


/* ==========================================================================
   MENTION SOUS LES PARTENAIRES
   ========================================================================== */

.mention-independants {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: var(--espace-m);
  margin-bottom: 0;
  font-size: 0.9rem;
}

.mention-independants__feuille {
  width: 28px;
  flex-shrink: 0;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablette : la bio et les contacts s'empilent ---
   Sur une colonne de moins de 300 px, les contacts devenaient illisibles.
   Le filet vertical devient alors un filet horizontal. */
@media (max-width: 900px) {

  .membre__grille {
    grid-template-columns: 1fr;
    gap: var(--espace-m);
  }

  /* Les deux blocs sont maintenant l'un sous l'autre : le filet vertical
     n'a plus lieu d'être, et l'encart se suffit à lui-même pour marquer la
     séparation. */
  .membre__bio {
    padding-right: 0;
    border-right: 0;
  }
}

/* --- Mobile --- */
@media (max-width: 600px) {

  /* Portrait plus petit : à 76 px, le nom et les pratiques n'avaient plus
     assez de place et se coupaient en trop de lignes. */
  .membre__portrait {
    width: 60px;
    height: 60px;
  }

  .membre__bouton,
  .membre__entete-simple {
    gap: var(--espace-xs);
    padding: var(--espace-s) var(--espace-xs);
  }

  .membre__signe {
    margin-inline: 0 var(--espace-xs);
  }

  /* Le texte du panneau repart du bord de la carte : conserver le décalage
     du portrait ferait des lignes beaucoup trop courtes. */
  .membre__panneau {
    padding: 0 var(--espace-s) var(--espace-s);
  }

  .membre__grille {
    padding-left: 0;
  }

  /* Marges intérieures réduites : à 32 px, l'encart ne laissait plus assez
     de largeur à une adresse e-mail longue. */
  .membre__contact {
    padding: var(--espace-s);
  }

  .membre__contacts {
    margin-top: var(--espace-s);
    padding-top: var(--espace-s);
  }

  .membre__pratiques {
    font-size: 0.85rem;
  }
}