/* =========================================================
   SLIDE 7 · Le panneau CEO
   Ouvert au clic sur la carte de Mohamed. Comme sur le slide 2,
   l'ouverture se fait au clic et non au survol : en projection, le
   pointeur n'est pas forcément sur l'écran.
   Le contenu vient du CV 2026 — rien d'inventé.
   ========================================================= */

/* --- La carte du CEO se signale comme cliquable --- */
.member--ceo { cursor: pointer; }
.member--ceo .member__photo {
  transition: box-shadow var(--dur-mid) var(--ease-out);
}
.member--ceo:is(:hover, :focus-visible) .member__photo {
  box-shadow: 0 0 0 2px var(--gold);
}

.member__more {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 5px;
  margin-left: 4px;
  font-family: var(--font-label);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.8;
  white-space: nowrap;
}
.member__more::after {
  content: '→';
  transition: transform var(--dur-fast) var(--ease-out);
}
.member--ceo:is(:hover, :focus-visible) .member__more { opacity: 1; }
.member--ceo:is(:hover, :focus-visible) .member__more::after { transform: translateX(3px); }

/* ---------------------------------------------------------
   Le panneau
   Il recouvre le slide plutôt que de pousser son contenu : la
   composition dessous ne bouge pas, elle se retire simplement en
   arrière-plan.
   --------------------------------------------------------- */

.ceo {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 44px var(--gutter);
  background: rgba(20, 12, 2, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
}
.ceo[hidden] { display: none; }
.ceo.is-open { opacity: 1; }

.ceo__card {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 34px 38px 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(168deg, var(--dark-raised) 0%, var(--dark) 72%);
  border: var(--hairline) solid rgba(212, 162, 68, 0.34);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  translate: 0 16px;
  scale: 0.985;
  transition: translate var(--dur-slow) var(--ease-out), scale var(--dur-slow) var(--ease-out);
}
.ceo.is-open .ceo__card { translate: 0 0; scale: 1; }

.ceo__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 21px;
  line-height: 1;
  color: var(--dark-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ceo__close:hover { background: rgba(245, 235, 217, 0.12); color: var(--dark-ink); }

/* --- En-tête --- */
.ceo__head {
  display: grid;
  grid-template-columns: 152px 1fr;
  gap: 28px;
  align-items: start;
}

.ceo__photo {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--hairline) solid rgba(212, 162, 68, 0.34);
}
.ceo__photo img { width: 100%; height: 100%; object-fit: cover; }

.ceo__eyebrow {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-light);
}
.ceo__name {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.05;
  color: var(--dark-ink);
}
.ceo__role {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-light);
}
.ceo__sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--dark-muted);
}
.ceo__bio {
  margin-top: 12px;
  font-family: var(--font-intent);
  font-size: 17px;
  line-height: 1.4;
  color: var(--dark-ink);
}

/* --- Les quatre repères chiffrés --- */
.ceo__figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
  padding: 18px 0;
  border-top: var(--hairline) solid rgba(212, 162, 68, 0.22);
  border-bottom: var(--hairline) solid rgba(212, 162, 68, 0.22);
}
.ceo__figures li { display: flex; flex-direction: column; gap: 3px; }
.ceo__figures b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--gold-light);
}
.ceo__figures sup { font-size: 0.5em; }
.ceo__figures span { font-size: 12px; line-height: 1.3; color: var(--dark-muted); }

/* --- Les deux colonnes --- */
.ceo__cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  margin-top: 20px;
}

.ceo__label {
  font-family: var(--font-label);
  font-size: 9px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 10px;
}
.ceo__label--gap { margin-top: 18px; }

.ceo__list { display: flex; flex-direction: column; gap: 7px; }
.ceo__list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--dark-muted);
}
.ceo__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.ceo__list b { color: var(--dark-ink); font-weight: 600; }

.ceo__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ceo__chips li {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 235, 217, 0.07);
  border: var(--hairline) solid rgba(212, 162, 68, 0.24);
  font-size: 11px;
  color: var(--dark-ink);
}

.ceo__award, .ceo__edu {
  font-size: 13px;
  line-height: 1.45;
  color: var(--dark-muted);
}
.ceo__award b, .ceo__edu b { color: var(--dark-ink); font-weight: 600; }

/* --- Le pied : ce qui relie ce parcours au slide 6 --- */
.ceo__foot {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: rgba(212, 162, 68, 0.10);
  border-left: 3px solid var(--gold);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--dark-muted);
}
.ceo__foot b { color: var(--gold-light); font-weight: 600; }

/* ---------------------------------------------------------
   Les freelances : une ligne, pas un rond
   Ils sont nombreux et changeants — un sixième rond aurait promis
   un visage là où il n'y en a pas un seul.
   --------------------------------------------------------- */

.team__network {
  margin-top: 26px;
  padding-top: 18px;
  border-top: var(--hairline) solid var(--gold-a24);
  font-size: 15px;
  line-height: 1.5;
  color: var(--dark-muted);
}
.team__network b {
  font-weight: 500;
  color: var(--dark-ink);
}

/* L'étiquette ouvre la ligne comme les autres libellés du deck : une
   petite capitale dorée, puis la phrase. */
.team__network-label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}

@media (prefers-reduced-motion: reduce) {
  .ceo, .ceo__card { transition: none; }
}