/*
 * Page « Conseil d'administration » — styles.
 *
 * Repris de la maquette (Conseil d'administration.html), chargés UNIQUEMENT sur le
 * gabarit template-conseil-administration.php (voir inc/enqueue.php). Tout est scopé
 * sous « .ca-page » : plusieurs classes (.wrap, .eyebrow, .reveal, et TOUTE la
 * famille .av* des cartes de portrait) sont partagées avec la page « Notre équipe » et
 * ne doivent pas fuir vers l'en-tête, le pied de page ou les autres gabarits. La police
 * « Anton » est fournie globalement par style.css (@font-face) → non redéclarée ici.
 *
 * Écarts assumés par rapport à la maquette (rendu identique, feuille de style sans
 * code mort ni style en ligne) :
 *   • la maquette scopait ses styles de base sous « .contact-page » (sa feuille avait
 *     été copiée depuis la page Contact) : le gabarit pose « .ca-page », qui porte le
 *     même habillage ;
 *   • .av-li svg était déclaré deux fois (17 px puis 15 px) : seule la valeur
 *     effective (15 px) est reprise ;
 *   • .av-name était à 16 px en feuille de style et à 18 px en style en ligne sur
 *     chaque carte : la valeur effective (18 px) est portée par la feuille ;
 *   • .av-back .bk-role habillait un élément que le balisage ne contient pas (le dos
 *     de la carte ne porte que la citation) : la règle n'est pas reprise ;
 *   • .av-flip reçoit « position: relative », que la maquette n'avait pas : son
 *     « perspective » suffisait à ancrer le liseré de survol (.av-ring) et l'icône
 *     LinkedIn, tous deux en position absolue, car une perspective non nulle crée déjà
 *     un bloc conteneur. La déclaration rend cet ancrage explicite — et le préserve si
 *     la bascule 3D est un jour retirée, sans quoi le liseré encadrerait toute la
 *     grille et l'icône filerait dans le coin de la section. C'est la valeur que porte
 *     déjà la même famille de cartes sur « Notre équipe » ;
 *   • les deux cartes de fin avaient 44 px de padding vertical en feuille de style et
 *     43 px en style en ligne sur la première : les deux cartes sont à 44 px ;
 *   • le fond blanc et les 26 px latéraux du bloc de fin étaient en style en ligne :
 *     ils sont portés par la règle .ca-close ;
 *   • la couleur d'accent d'une carte de portrait (dos de la carte + icône LinkedIn)
 *     arrive par la variable CSS --av-accent posée sur la carte, au lieu de deux
 *     styles en ligne par membre (voir mdm_conseil_accent) ;
 *   • html{scroll-behavior:smooth} n'est pas repris : la page n'a aucune ancre interne
 *     et le « retour en haut » défile déjà en douceur depuis le script ;
 *   • les blocs « .reveal » sont révélés d'office quand JavaScript est absent
 *     (@media scripting: none) et l'apparition est aussi neutralisée en
 *     « mouvement réduit » : aucun contenu ne peut rester invisible.
 *
 * @package medecins-du-monde
 */

/* ============================================================================
 * Base
 * ========================================================================= */

.ca-page,
.ca-page *,
.ca-page *::before,
.ca-page *::after {
  box-sizing: border-box;
}
.ca-page {
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #eef2f7;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.ca-page h1,
.ca-page h2,
.ca-page h3 {
  margin: 0;
  font-weight: 400;
}
.ca-page p {
  margin: 0;
}
.ca-page a {
  text-decoration: none;
  color: inherit;
}
.ca-page button {
  font-family: inherit;
  cursor: pointer;
}
.ca-page .wrap {
  padding: 0 26px;
}

/* Barre de progression de lecture (pilotée par assets/js/conseil-administration.js). */
.ca-page .ca-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: #e9511c;
  z-index: 3000;
}

/* Étiquette inclinée du bandeau. */
.ca-page .eyebrow {
  display: inline-block;
  padding: 8px 16px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  background: #e9511c;
  border-radius: 5px;
  color: #fff;
  font-size: 28px;
  line-height: normal;
  white-space: nowrap;
  transform: rotate(-4.14deg);
  margin-bottom: 22px;
}

/* ============================================================================
 * Animations d'apparition
 *
 * « .hr » anime à l'arrivée sur la page (bandeau) ; « .reveal » attend le
 * défilement, la classe « in » étant posée par le script.
 * ========================================================================= */

@keyframes mdm-ca-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ca-page .hr {
  animation: mdm-ca-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
.ca-page .hr2 {
  animation-delay: .12s;
}
.ca-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.ca-page .reveal.in {
  opacity: 1;
  transform: none;
}

/* Sans JavaScript, aucun bloc ne doit rester invisible. */
@media (scripting: none) {
  .ca-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
 * Bandeau
 * ========================================================================= */

.ca-page .ca-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 56px;
  text-align: center;
  background: #055da8;
}
/*
 * La pastille sort du flux et se cale sur le haut du titre, comme les étiquettes de
 * section de l'accueil. Le bandeau étant centré, la ligne qui la porte est étirée d'un
 * bord à l'autre (left/right : 0) et la pastille se centre dedans par « text-align » —
 * un translateX serait écrasé par l'animation d'apparition, qui anime « transform ».
 * Les 33 px que la ligne occupait dans le flux sont rendus au titre par la marge de
 * .ca-hero-head.
 */
.ca-page .ca-hero-head {
  position: relative;
  margin-top: 33px;
}
.ca-page .ca-hero-eyebrow {
  position: absolute;
  top: -59px;
  left: 0;
  right: 0;
  z-index: 2;
}
.ca-page .ca-hero .eyebrow {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.ca-page .ca-hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  /* Plancher à 42px : « 7vw » vaut exactement 42px à 600px de large, la borne basse
     n'entre donc en jeu que sous le point de bascule mobile, sans rupture de taille. */
  font-size: clamp(42px, 7vw, 110px);
  line-height: .9;
  letter-spacing: -.01em;
  color: #fff;
}
.ca-page .ca-hero h1 .hl {
  color: #bddfec;
}
.ca-page .ca-lead {
  font-size: 16px;
  line-height: 1.75;
  color: #dbe8f5;
  margin: 22px auto 0;
  max-width: 760px;
  text-align: center;
}

/* ============================================================================
 * Président du conseil
 * ========================================================================= */

/* Le dégagement sous la carte du président se cumulait avec celui du haut de la section
   « .board » (56 + 48 = 104px) : les deux sont ramenés à 28px, soit 56px au total. */
.ca-page .pres {
  padding: 56px 0 28px;
}
.ca-page .pres-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e2e9f2;
}
.ca-page .pres-photo {
  position: relative;
  min-height: 400px;
  background: #dceaf5;
  overflow: hidden;
  order: 2;
}
.ca-page .pres-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ca-page .pres-body {
  order: 1;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 6px solid #e9511c;
}
.ca-page .pres-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .08em;
  color: #e9511c;
  margin-bottom: 18px;
}
.ca-page .pres-name {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(32px, 4vw, 58px);
  line-height: .94;
  letter-spacing: -.01em;
  color: #1d1a55;
  margin-bottom: 10px;
}
.ca-page .pres-role {
  font-size: 14px;
  font-weight: 600;
  color: #8a90ad;
  margin-bottom: 22px;
}
.ca-page .pres-bio {
  font-size: 15px;
  line-height: 1.8;
  color: #5b6078;
  max-width: 620px;
  padding-top: 20px;
  border-top: 1px solid #eef2f8;
}

/* ============================================================================
 * Administratrices et administrateurs
 *
 * Le fond bleu très clair de la section déborde en pleine largeur (::before), la
 * grille restant dans la gouttière du gabarit.
 * ========================================================================= */

.ca-page .board {
  position: relative;
  padding: 28px 0 40px;
}
/* Fond pleine largeur, et NON « 100vw » : une largeur de fenêtre comprend la barre de
   défilement, que le thème affiche en permanence (html : « overflow-y: scroll » +
   gouttière de 12px). La bande dépassait donc de ~8px, d'où une barre de défilement
   horizontale permanente. Ici « .board » CONTIENT « .wrap » (l'inverse de « .tsec » sur
   « Notre équipe », qui est dans le .wrap) : la section couvre déjà toute la largeur
   utile, le fond n'a donc aucun débordement à rattraper. */
.ca-page .board::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #eef6fb;
  z-index: 0;
}
.ca-page .board > * {
  position: relative;
  z-index: 1;
}
.ca-page .board-head {
  max-width: 720px;
  margin: 0 auto 34px;
  text-align: center;
}
.ca-page .board-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1;
  color: #1d1a55;
  margin-bottom: 12px;
}
.ca-page .board-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #5b6078;
}

/* --- La grille de portraits ---------------------------------------------- */

.ca-page .avwall {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}
.ca-page .av {
  width: 200px;
  text-align: center;
}
.ca-page .av-flip {
  position: relative;
  width: 200px;
  height: 210px;
  margin: 0 auto 14px;
  perspective: 1000px;
}
.ca-page .av-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  transform-style: preserve-3d;
}
.ca-page .av:hover .av-inner,
.ca-page .av:focus-within .av-inner {
  transform: rotateY(180deg);
}
.ca-page .av-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ca-page .av-front {
  background: #dceaf5;
}
.ca-page .av-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ca-page .av-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: var(--av-accent, #055da8);
}
.ca-page .av-back .bk-bio {
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  font-style: italic;
}
.ca-page .av-ring {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px solid transparent;
  transition: border-color .3s;
  pointer-events: none;
}
.ca-page .av:hover .av-ring {
  border-color: #055da8;
}
.ca-page .av-name {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.05;
  color: #1d1a55;
  margin-bottom: 4px;
}
.ca-page .av-role {
  font-size: 14px;
  color: #8a90ad;
  font-weight: 600;
  line-height: 1.35;
}
/* Icône LinkedIn : posée sur le coin de la carte, au-dessus de la bascule. */
.ca-page .av-li {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, .92);
  color: var(--av-accent, #055da8);
  transition: background-color .25s, transform .25s;
}
.ca-page .av-li:hover {
  transform: translateY(-2px);
}
.ca-page .av-li svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ============================================================================
 * Bloc de fin : les deux cartes d'appel à l'action
 * ========================================================================= */

.ca-page .ca-close {
  padding: 64px 26px 90px;
  background: #fff;
}
.ca-page .ca-cta {
  margin: 56px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ca-page .ca-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.ca-page .ca-card:hover {
  transform: translateY(-6px);
}
.ca-page .ca-card.a {
  background: #1d1a55;
  color: #fff;
}
.ca-page .ca-card.b {
  background: #055da8;
  color: #fff;
}
.ca-page .ca-card .k {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .09em;
  margin-bottom: 12px;
}
.ca-page .ca-card.a .k {
  color: #ff7a45;
}
.ca-page .ca-card.b .k {
  color: #bddfec;
}
.ca-page .ca-card h3 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: .98;
  color: #fff;
  margin-bottom: 12px;
}
.ca-page .ca-card p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 26px;
  max-width: 400px;
}
.ca-page .ca-card.a p {
  color: #c4cde3;
}
.ca-page .ca-card.b p {
  color: #dbe8f5;
}
.ca-page .ca-card-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 14px 26px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .03em;
  margin-top: auto;
  background: #fff;
  transition: background-color .3s, color .3s;
}
.ca-page .ca-card.a .ca-card-btn {
  color: #1d1a55;
}
.ca-page .ca-card.b .ca-card-btn {
  color: #055da8;
}
.ca-page .ca-card-btn img {
  width: 14px;
  transition: transform .3s;
}
.ca-page .ca-card-btn:hover img {
  transform: translateX(4px);
}


/* ============================================================================
 * Offset de l'en-tête
 *
 * Le thème rend le <header> du site en position:fixed (overlay). Sur ce gabarit —
 * comme sur Notre équipe / Nos partenaires / Contact — on le remet dans le flux
 * (sticky) pour que le bandeau bleu s'affiche SOUS lui.
 * ========================================================================= */

body.page-template-template-conseil-administration header {
  position: sticky;
}

/* ============================================================================
 * Adaptations
 * ========================================================================= */

@media (max-width: 1279px) {
  .ca-page .eyebrow {
    font-size: 18px;
    line-height: 27px;
  }
  .ca-page .ca-hero-eyebrow {
    top: -42px;
  }
}

@media (max-width: 820px) {
  .ca-page .pres-card {
    grid-template-columns: 1fr;
  }
  .ca-page .pres-photo {
    min-height: 280px;
    order: 1;
  }
  .ca-page .pres-body {
    order: 2;
    padding: 34px 26px;
    border-left: none;
    border-top: 6px solid #e9511c;
  }
}

@media (max-width: 767px) {
  .ca-page .eyebrow {
    font-size: 14px;
    line-height: 21px;
  }
  .ca-page .ca-hero-eyebrow {
    top: -35px;
  }
}

@media (max-width: 600px) {
  .ca-page .wrap {
    padding: 0 18px;
  }
  .ca-page .ca-hero {
    padding: 56px 0 44px;
  }
  .ca-page .avwall {
    gap: 20px;
  }
  .ca-page .av,
  .ca-page .av-flip {
    width: 150px;
  }
  .ca-page .av-flip {
    height: 168px;
  }
  /*
   * Bloc de fin en mobile, tel que le rendait la maquette — écrit ici explicitement
   * plutôt que laissé à un accident de cascade : .ca-close y porte les deux classes
   * « wrap ca-close », et la gouttière mobile de .wrap (déclarée plus loin, à
   * spécificité égale) écrasait donc ses paddings verticaux, tandis que ses 26 px
   * latéraux, posés en style en ligne, y résistaient. L'espace au-dessus des cartes
   * vient de la marge de .ca-cta (56 px), celui du dessous de la marge haute du pied de
   * page (42 px, style.css).
   */
  .ca-page .ca-close {
    padding: 0 26px;
  }
  /*
   * Les deux cartes de fin passent en carrousel horizontal : tiré de -18 px dans une
   * gouttière de 26 px, il laisse 8 px de chaque côté, comme dans la maquette.
   */
  .ca-page .ca-cta {
    display: flex;
    grid-template-columns: none;
    margin-left: -18px;
    margin-right: -18px;
    padding: 0 18px 8px;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ca-page .ca-cta::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .ca-page .ca-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-page .hr,
  .ca-page .reveal,
  .ca-page .reveal.in {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ca-page .av-inner,
  .ca-page .av:hover .av-inner,
  .ca-page .av:focus-within .av-inner {
    transition: none;
  }
}

@media (min-width: 1700px) {
  .ca-page .wrap {
    padding: 0 1.8057vw;
  }
  .ca-page .ca-progress {
    height: 0.2778vw;
  }
  .ca-page .eyebrow {
    padding: 0.5556vw 1.1112vw;
    border-radius: 0.3472vw;
    font-size: 1.9446vw;
    margin-bottom: 1.5279vw;
  }
  .ca-page .reveal {
    transform: translateY(1.5279vw);
  }
  .ca-page .ca-hero {
    padding: 5.5559vw 0 3.8891vw;
  }
  .ca-page .ca-hero-head {
    margin-top: 2.2918vw;
  }
  .ca-page .ca-hero-eyebrow {
    top: -4.0975vw;
  }
  .ca-page .ca-hero h1 {
    font-size: clamp(2.9168vw, 7vw, 7.6394vw);
  }
  .ca-page .ca-lead {
    font-size: 1.1112vw;
    margin: 1.5279vw auto 0;
    max-width: 52.781vw;
  }
  .ca-page .pres {
    padding: 3.8891vw 0 1.9446vw;
  }
  .ca-page .pres-card {
    grid-template-columns: 1fr 26.3905vw;
    border: 0.0694vw solid #e2e9f2;
  }
  .ca-page .pres-photo {
    min-height: 27.7795vw;
  }
  .ca-page .pres-body {
    padding: 3.8891vw 3.6113vw;
    border-left: 0.4167vw solid #e9511c;
  }
  .ca-page .pres-eyebrow {
    font-size: 0.9723vw;
    margin-bottom: 1.2501vw;
  }
  .ca-page .pres-name {
    font-size: clamp(2.2224vw, 4vw, 4.028vw);
    margin-bottom: 0.6945vw;
  }
  .ca-page .pres-role {
    font-size: 0.9723vw;
    margin-bottom: 1.5279vw;
  }
  .ca-page .pres-bio {
    font-size: 1.0417vw;
    max-width: 43.0582vw;
    padding-top: 1.389vw;
    border-top: 0.0694vw solid #eef2f8;
  }
  .ca-page .board {
    padding: 1.9446vw 0 2.7779vw;
  }
  .ca-page .board-head {
    max-width: 50.003vw;
    margin: 0 auto 2.3613vw;
  }
  .ca-page .board-title {
    font-size: clamp(1.5279vw, 2.6vw, 2.3613vw);
    margin-bottom: 0.8334vw;
  }
  .ca-page .board-desc {
    font-size: 0.9723vw;
  }
  .ca-page .avwall {
    gap: 2.0835vw;
  }
  .ca-page .av {
    width: 13.8897vw;
  }
  .ca-page .av-flip {
    width: 13.8897vw;
    height: 14.5842vw;
    margin: 0 auto 0.9723vw;
    perspective: 69.4486vw;
  }
  .ca-page .av-face {
    border-radius: 1.1112vw;
  }
  .ca-page .av-back {
    gap: 0.8334vw;
    padding: 1.389vw;
  }
  .ca-page .av-back .bk-bio {
    font-size: 0.9723vw;
  }
  .ca-page .av-ring {
    inset: -0.2778vw;
    border-radius: 1.389vw;
    border: 0.1389vw solid transparent;
  }
  .ca-page .av-name {
    font-size: 1.2501vw;
    margin-bottom: 0.2778vw;
  }
  .ca-page .av-role {
    font-size: 0.9723vw;
  }
  .ca-page .av-li {
    top: 0.6945vw;
    right: 0.6945vw;
    width: 2.3613vw;
    height: 2.3613vw;
    border-radius: 0.625vw;
  }
  .ca-page .av-li:hover {
    transform: translateY(-0.1389vw);
  }
  .ca-page .av-li svg {
    width: 1.0417vw;
    height: 1.0417vw;
  }
  .ca-page .ca-close {
    padding: 4.4447vw 1.8057vw 6.2504vw;
  }
  .ca-page .ca-cta {
    margin: 3.8891vw 0 0;
    gap: 0.9723vw;
  }
  .ca-page .ca-card {
    border-radius: 1.2501vw;
    padding: 3.0557vw 2.9168vw;
  }
  .ca-page .ca-card:hover {
    transform: translateY(-0.4167vw);
  }
  .ca-page .ca-card .k {
    font-size: 0.9723vw;
    margin-bottom: 0.8334vw;
  }
  .ca-page .ca-card h3 {
    font-size: clamp(1.6668vw, 2.6vw, 2.2224vw);
    margin-bottom: 0.8334vw;
  }
  .ca-page .ca-card p {
    font-size: 1.0417vw;
    margin-bottom: 1.8057vw;
    max-width: 27.7795vw;
  }
  .ca-page .ca-card-btn {
    gap: 0.6945vw;
    border-radius: 0.4167vw;
    padding: 0.9723vw 1.8057vw;
    font-size: 0.9723vw;
  }
  .ca-page .ca-card-btn img {
    width: 0.9723vw;
  }
  .ca-page .ca-card-btn:hover img {
    transform: translateX(0.2778vw);
  }
}