/*
    New mentor-profile template (see "Profil Anthony 4.html" reference
    bundle). Scoped entirely under .mp-page so it can sit alongside
    tutor-detail-page.css (still loaded on this same page - similar-tutors,
    the action/favourite component, the guest-register modal, the mobile
    sticky card and the book-session-button component all still depend on
    its .tp-* and .am-* classes and are intentionally NOT rebuilt here,
    see tutor-detail.blade.php's own comments). Design tokens
    (colors/fonts/radii/shadows/spacing) below were read directly off the
    reference bundle's own computed styles, not guessed.
*/

.mp-page {
  font-family: "Capriola", sans-serif;
  color: #191817;
  font-size: 17px;
  line-height: 1.75;
}
/* Les titres de la fiche mentor passent à la police d'affichage du site.
   Ils portaient « Bricolage Grotesque », héritée du gabarit d'origine :
   cette page parlait une typographie que le reste de Mentorni n'emploie
   nulle part ailleurs. */
.mp-page h2,
.mp-page h3 {
  font-family: "Capriola", sans-serif;
}

/* ---------- Layout ----------
   Not a two-column grid: in the reference bundle the card is a
   position:fixed element that floats independently of the content
   column (see the aside investigation) - centered vertically in the
   VIEWPORT via top:50%/translateY(-50%), pinned to the right edge via a
   viewport-relative formula, not a grid/flex sibling of the content.
   Content therefore just flows as a single, capped-width column on the
   left; the card (.mp-sidebar-card, below) positions itself
   independently and visually sits to its right.

   max-width bumped from 700 to 860: at 700 the gap between the content
   column and the fixed card was noticeably wider than the reference's
   own proportions (confirmed by direct comparison against it). */
.mp-page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 24px 0;
}
.mp-content {
  max-width: 860px;
  min-width: 0;
  margin-top: 120px;
}
.mp-section {
  padding: 64px 0;
  border-bottom: 1px solid #eceae7;
  max-width: 680px;
}
.mp-section:last-of-type {
  border-bottom: none;
}
/* .mp-section-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 300;
  font-size: 100px;
  line-height: 1;
  color: #eceae7;
  margin: 0 0 8px;
} */
.mp-section h2 {
  font-weight: 700;
  font-size: 44px;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
/* Le nom du mentor, en tête de « À propos ».
   Il porte sa propre classe parce que `.mp-section h2` habille les huit
   titres de section (« Ce que j'enseigne », « Ma méthode »…) : les réduire
   tous à 21 px aurait effacé la structure de la page. C'est la phrase
   d'accroche qui prend le poids, le nom passe au-dessus en discret. */
.mp-section h2.mp-name {
  font-weight: 400;
  font-size: 21px;
}
.mp-section p.mp-lede {
  font-size: 42px;
  line-height: 1.4;
  margin: 0 0 28px;
  max-width: 62ch;
  font-weight: bold;
}
.mp-section p {
  line-height: 1.75;
}

/* ---------- Sidebar (fixed, two-state card) ----------
   Reproduces the reference bundle's real mechanics (see the aside
   investigation): position:fixed, permanently vertically centered in the
   viewport, pinned to the right edge via the exact same viewport-relative
   formula the reference uses. It never moves with scroll; it only
   changes SHAPE between two states, toggled by .is-open (added/removed
   by initFixedCard() in mentor-profile-page.js when scrollY crosses
   140px, matching the reference's own threshold):

   - Closed (default): photo only, full height (432px), fully rounded.
   - Open: photo shrinks to 324px, the photo wrapper's bottom corners
     square off, and the name/role/meta/CTA block - hidden at 0 height in
     the closed state - expands in via a CSS Grid grid-template-rows
     0fr->1fr trick (not display/max-height - matches the reference's own
     technique, which is what makes the block's real height available to
     animate toward without knowing it up front). */
.mp-sidebar-card {
  position: fixed;
  top: 50%;
  right: max(44px, -596px + 51vw);
  transform: translateY(-50%);
  width: 352px;
  max-height: calc(100vh - 40px);
  overflow: auto;
  z-index: 40;
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(25, 24, 23, 0.18);
  background: #fff;
}
.mp-sidebar-top {
  background: #fff;
  padding: 14px;
  border-radius: 28px;
  transition: border-radius 0.4s ease;
}
.mp-sidebar-card.is-open .mp-sidebar-top {
  border-radius: 28px 28px 0 0;
}
.mp-sidebar-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 432px;
  transition: height 0.55s cubic-bezier(0.22, 0.9, 0.3, 1);
  isolation: isolate;
}
.mp-sidebar-card.is-open .mp-sidebar-photo {
  height: 324px;
}
.mp-sidebar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mp-sidebar-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows 0.55s cubic-bezier(0.22, 0.9, 0.3, 1),
    opacity 0.45s ease;
}
.mp-sidebar-card.is-open .mp-sidebar-reveal {
  grid-template-rows: 1fr;
  opacity: 1;
}
.mp-sidebar-reveal-inner {
  min-height: 0;
}

/* Name/role block, meta+CTA block: 26px side padding (wider than the
   photo's own 14px) - read directly off the reference's own inline
   styles, not guessed. */
.mp-sidebar-name-block {
  padding: 2px 5px 5px;
}
/* Le nom au centre, et la note juste dessous. Le nom était calé à gauche et
   la note vivait plus bas, dans une colonne à côté de la durée et du tarif :
   trois nombres alignés dont aucun ne ressortait. */
.mp-sidebar-name-block { text-align: center; }
/* `inline-flex` : le sceau se pose SUR LA LIGNE du nom, et non dessous.
   Le bloc reste centré parce que le conteneur l'est — un `flex` plein
   l'aurait étiré sur toute la largeur et décentré. */
.mp-sidebar-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #121212;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ==========================================================================
   LE SCEAU DU MENTOR — son niveau, à côté de son nom
   --------------------------------------------------------------------------
   Il tenait en pastille noire posée SUR la photo : « MENTOR VÉRIFIÉ ✓ », et
   rien pour les trois autres niveaux. Plus rien n'est posé sur la photo,
   hors le cœur et le partage.

   Une seule icône par mentor — la plus haute atteinte. Ce que chaque niveau
   garantit se lit dans l'infobulle, au survol de la PASTILLE seule : au
   survol de la carte, elle recouvrirait le bouton « Réserver ».
   ========================================================================== */

.mp-sceau {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Le curseur ordinaire, et non `help` : le point d'interrogation qu'il
     dessine annonce une aide à demander, alors que l'infobulle s'ouvre
     toute seule. `pointer` serait pire encore — il promettrait qu'un clic
     fait quelque chose, et rien ne se passe au clic. */
  cursor: default;
  transition: transform .26s cubic-bezier(.34, 1.56, .64, 1);
}

/* La ligature a besoin de sa fonte : `layouts/frontend-app` charge Material
   Symbols Rounded, mais aucune feuille publique ne la POSE — sans cette
   règle, « workspace_premium » s'afficherait en toutes lettres dans le
   rond. C'est déjà arrivé sur cette page, avec « videocam ».

   Trois endroits s'en servent, et la règle est écrite une fois : le sceau,
   le renvoi de « Ma méthode » vers les questions fréquentes, et le bloc qui
   les suit. Les trois reprennent une ligature demandée par une maquette ;
   la taille, elle, appartient à chacun. */
.mp-sceau .ico,
.mp-step-lien .ico,
.mp-faq-apres .ico {
  font-family: "Material Symbols Rounded";
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.mp-sceau .ico { font-size: 17px; }

.mp-sceau:hover,
.mp-sceau:focus-visible { transform: scale(1.14); }

.mp-sceau--nonverifie { background: #E7E2DE; color: #4A4950; }
.mp-sceau--verifie    { background: linear-gradient(38deg, #1E9E63 0%, #12724A 60%); color: #fff; }
.mp-sceau--premium    { background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); color: #1C1C1E; }
.mp-sceau--super      { background: linear-gradient(38deg, #FFD98E 0%, #E0A93C 60%); color: #33270D; }

/* L'infobulle prend la largeur du bloc carte, et se pose 10 px sous le bas
   de la pastille. Ce bas est MESURÉ par le script : le nom peut passer sur
   deux lignes, et la pastille descend alors avec lui. Le repli à 120px sert
   le temps de la première mesure, et si le script ne tourne pas. */
.mp-sceau-bulle {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(var(--mp-sceau-bas, 120px) + 10px);
  z-index: 60;
  padding: 16px 18px;
  border-radius: 22px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
  /* Elle ne prend jamais la souris : sinon elle s'interposerait entre le
     curseur et ce qu'elle recouvre, et le survol se perdrait sur son bord. */
  pointer-events: none;

  /* `display: none` au repos, et pas seulement `opacity: 0`.
     ---------------------------------------------------------------------
     La carte est en `overflow: auto`. Une boîte en position absolue calée
     sur elle compte dans sa zone de défilement MÊME transparente : elle
     ajoutait 141 px sous un contenu de 460, et la carte affichait une barre
     de défilement — mesuré, `scrollHeight` 601 contre 460 sans elle. C'est
     aussi pourquoi elle échappait au découpage du volet replié.

     `allow-discrete` et `@starting-style` gardent malgré tout l'animation :
     le navigateur pose `display: block` d'abord, joue l'apparition ensuite,
     et attend la fin du repli pour reprendre `display: none`. Là où ils ne
     sont pas compris, l'infobulle paraît d'un coup — sans barre de
     défilement pour autant. */
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease,
              transform .3s cubic-bezier(.34, 1.56, .64, 1),
              display .3s allow-discrete;
}

/* Le survol de la PASTILLE, pas de la carte. `:has()` porte la règle sur la
   carte parce que l'infobulle n'est ni enfant ni voisine de la pastille —
   elle ne peut pas l'être, le bloc du nom découpe ce qui déborde. */
.mp-sidebar-card:has(.mp-sceau:hover) .mp-sceau-bulle,
.mp-sidebar-card:has(.mp-sceau:focus-visible) .mp-sceau-bulle {
  display: block;
  opacity: 1;
  transform: none;
}

/* L'état de DÉPART de l'apparition. Sans lui, une boîte qui passe de
   `display: none` à `display: block` n'a pas d'état d'avant : l'opacité
   sauterait à 1 au lieu de monter. */
@starting-style {
  .mp-sidebar-card:has(.mp-sceau:hover) .mp-sceau-bulle,
  .mp-sidebar-card:has(.mp-sceau:focus-visible) .mp-sceau-bulle {
    opacity: 0;
    transform: translateY(6px);
  }
}

.mp-sceau-bulle--nonverifie { background: #2A272F; color: #fff; }
.mp-sceau-bulle--verifie    { background: linear-gradient(38deg, #1E9E63 0%, #12724A 60%); color: #fff; }
/* Dégradé plus soutenu que celui de la pastille : le texte est en blanc, et
   il ne se lirait pas sur le rose clair de l'icône. */
.mp-sceau-bulle--premium    { background: linear-gradient(38deg, #FF8C8C 0%, #C0392B 54%); color: #fff; }
.mp-sceau-bulle--super      { background: linear-gradient(38deg, #FFD98E 0%, #E0A93C 60%); color: #33270D; }

@media (prefers-reduced-motion: reduce) {
  .mp-sceau, .mp-sceau-bulle { transition: none; }
}
.mp-sidebar-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #191817;
}
/* L'étoile en or, la seule couleur de la ligne : c'est elle qu'on cherche. */
.mp-sidebar-star {
  font-size: 20px;
  line-height: 1;
  color: #ffb503;
}
.mp-sidebar-score {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}
/* Le nombre d'avis EST un lien — souligné, donc, sinon rien ne le dit. */
.mp-sidebar-reviews-link {
  color: #191817;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.mp-sidebar-reviews-link:hover { color: #FF6363; }

/* La matière choisie, et ce qu'elle coûte. Le nom au centre, puis deux
   lignes « intitulé à gauche, valeur à droite ». */
.mp-sidebar-subject { margin-bottom: 16px; }
.mp-sidebar-subject-name {
  display: block;
  margin-bottom: 5px;
  text-align: center;
  font-family: "Capriola", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.5;
  text-wrap: balance;
}
.mp-sidebar-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mp-sidebar-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.mp-sidebar-row-label {
  font-size: 14px;
  font-weight: 600;
  color: #191817;
}
.mp-sidebar-row-value {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mp-sidebar-role {
  color: #6e6a64;
  font-size: 12.5px;
  margin: 4px 0 0;
}

/* "Stitched ticket" divider: a dashed line inset 14px from each edge with
   a small punched-circle notch at both ends, reproduced from the
   reference's own 3-part structure (line + 2 absolutely-positioned
   circles) rather than a plain <hr>. */
.mp-sidebar-divider {
  position: relative;
  height: 10px;
  background: #fff;
}
.mp-sidebar-divider::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  border-top: 2px dashed #e0dbd4;
}
.mp-sidebar-divider-notch {
  position: absolute;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fbf9f7;
}
.mp-sidebar-divider-notch.left {
  left: -12px;
}
.mp-sidebar-divider-notch.right {
  right: -12px;
}

.mp-sidebar-bottom-block {
  background: #fff;
  border-radius: 0 0 28px 28px;
  padding: 14px 20px 20px;
}

/* Photo shine sweep - reproduced verbatim from the reference bundle's own
   .tutor-shine (pure CSS, no JS), renamed to avoid colliding with
   anything sitewide. */
.mp-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mp-shine::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 34%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.18) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.18) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(5px);
  transform: translateX(-180%) rotate(18deg);
  animation: mpSweep 2.8s cubic-bezier(0.45, 0.05, 0.35, 0.95) infinite;
  z-index: 1;
}
@keyframes mpSweep {
  0% {
    transform: translateX(-180%) rotate(18deg);
  }
  100% {
    transform: translateX(480%) rotate(18deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mp-shine::after {
    animation: none;
  }
}

/* 3-column meta row - value/label pairs with border-left dividers between
   columns, read directly off the reference's own flex/border structure. */
.mp-sidebar-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.mp-sidebar-meta-col {
  flex: 1;
  min-width: 0;
}
.mp-sidebar-meta-col + .mp-sidebar-meta-col {
  border-left: 1px solid #eceae7;
  padding-left: 16px;
}
.mp-sidebar-meta-value {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
}
.mp-sidebar-meta-label {
  font-size: 10.5px;
  color: #6e6a64;
  margin-top: 2px;
}

/* Reskin the existing <livewire:pages.tutor.action.action> buttons to
   match this page's look - same "page-scoped override, never touch the
   global class" convention tutor-detail-page.css already uses for
   .tp-pricing-cta. Contact/message stays disabled inside that component
   (unrelated to this migration).

   The reference's own card has no favourite button at all (confirmed via
   direct inspection - only "Réserver un cours"); favourite is a real,
   required feature on this page though (role-gated, tested), so rather
   than drop it, it's placed as a compact icon button beside Réserver
   instead of matching the reference's button-less look exactly. */
.mp-sidebar-cta {
  padding: 0;
}
.mp-sidebar-cta > div {
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* « Réserver » prend toute la largeur : « Contacter » et le cœur
     passent à la ligne suivante et s'y partagent la place. */
  flex-wrap: wrap;
}
.mp-sidebar-cta .aside-book-btn {
  flex: 1 0 100%;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(38deg, #ffbcbc 0%, #ff6363 54.0541%);
  border-radius: 100px;
  padding: 14px;
  font-family: 'Capriola';
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 99, 99, 0.3);
  text-decoration: none;
}
.mp-sidebar-cta .am-likebtn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  background: #fff;
  color: #191817;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-50%, 50%);
}
.mp-sidebar-cta .am-likebtn.active {
  background: #ff6464;
  color: #fff;
}
/* Le cœur en blanc une fois le mentor mis en favori.
   La règle vise le bouton actif et non `.am-icon-heart-01` en général :
   la police d'icônes pose elle-même une couleur sur chaque glyphe, et la
   dégriser globalement en blanc rendrait tous les autres cœurs du site
   invisibles sur fond clair. */
.mp-sidebar-cta .am-likebtn.active .am-icon-heart-01::before {
  color: #fff;
}

/* ---------- 01 About ---------- */
.mp-about-grid .short-description,
.mp-about-grid .full-description {
  color: #6e6a64;
}
/* Mobile/desktop pair for the bio + mobile-only photo (see
   tutor-detail.blade.php's own comment): .mp-mobile-only defaults to
   hidden and only shows inside this file's one existing breakpoint
   (@media max-width:1100px, below); .mp-desktop-only is the mirror,
   hidden there instead. Kept as plain toggles, not display:none on one
   arm only, so neither can accidentally show both at once. */
.mp-mobile-only {
  display: none;
}
.mp-about-mobile-photo {
  justify-content: center;
  margin: 20px 0;
}
.mp-about-mobile-photo img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 20px rgba(25, 24, 23, 0.12);
}
.mp-stats {
  display: flex;
  justify-content: space-around;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 32px;
}

@media (max-width: 640px) {
  .mp-stats {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
  }
}
.mp-stat-value {
  font-weight: 700;
  font-size: 32px;
}
.mp-stat-label {
  font-size: 13px;
  color: #6e6a64;
  margin-top: 4px;
}

/* ---------- 02 Video ---------- */
/* Fixed 16:9 box regardless of the uploaded video's own native dimensions
   - without this, video.js sizes itself off the video file's real
   width/height (or its own 300x150 default before metadata loads), so
   the box could come out a different size/ratio per tutor. Forcing the
   player to fill this fixed-ratio wrapper makes it behave like a normal
   fixed-size image. */
.mp-video-wrap {
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  position: relative;
}
.mp-video-wrap .video-js {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.mp-video-wrap .video-js video,
.mp-video-wrap .video-js .vjs-tech {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-video-caption {
  margin-top: 14px;
  color: #6e6a64;
  font-size: 14px;
}

/* ==========================================================================
   04 — MA MÉTHODE   (clone de mew_dash/ma-methode.html)

   Une séance se lit comme une suite : un fil vertical relie les étapes, la
   pastille le chevauche, et la DERNIÈRE est noire — c'est l'arrivée.

   Le fil disparaît quand il n'y a qu'une étape : cinq annonces sur neuf
   n'en ont qu'une, et il y dessinait un moignon sous une carte seule.

   Nunito, comme la maquette : Capriola n'a qu'une graisse, et les 700 à 900
   d'ici y seraient fabriquées par le navigateur.
   ========================================================================== */

#mp-method {
  font-family: Nunito, system-ui, sans-serif;
}

/* Un panneau par sujet, celui de la carte active seulement. Les étapes
   viennent de l'annonce (UserSubjectGroupSubject.method_steps) : toutes sont
   rendues côté serveur, et mentor-profile-page.js bascule les panneaux au
   même clic que les cartes de la section 03 — sans aller-retour Livewire,
   contrairement à la grille des disponibilités qui interroge de vrais
   créneaux. */
.mp-method-subject { display: none; }
.mp-method-subject.is-active { display: block; }

.mp-flow {
  position: relative;
  padding-left: 58px;
}

.mp-flow::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 10px;
  bottom: 34px;
  width: 2px;
  border-radius: 44px;
  background: linear-gradient(180deg, #FF6363 0%, #FFD3D3 65%, #F0EBE7 100%);
}

.mp-flow--seule::before { display: none; }

.mp-step {
  position: relative;
  padding: 0 0 18px;
}

.mp-step:last-child { padding-bottom: 0; }

/* La pastille chevauche le fil, et l'anneau blanc le coupe proprement
   derrière elle : la progression se lit d'un coup d'œil. */
.mp-step-pastille {
  position: absolute;
  left: -58px;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #FFF1F1;
  color: #C0392B;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 5px #fff;
}

.mp-step--debut .mp-step-pastille {
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
}

.mp-step--fin .mp-step-pastille {
  background: #1C1C1E;
  color: #fff;
}

.mp-step-pastille svg { width: 22px; height: 22px; }

/* Le rang de la dernière étape reste dans le document pour qui écoute la
   page : le drapeau dit « arrivée » à l'œil, et rien à l'oreille. */
.mp-step-lu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mp-step-carte {
  padding: 16px 18px;
  border-radius: 22px;
  background: #F9F7F5;
  transition: background .2s ease, transform .2s cubic-bezier(.22, .9, .24, 1);
}

.mp-step:hover .mp-step-carte {
  background: #F5F0EF;
  transform: translateY(-2px);
}

.mp-step--fin .mp-step-carte {
  background: #0B0B0C;
  color: #fff;
}

.mp-step--fin:hover .mp-step-carte { background: #17161A; }

.mp-step-titre {
  display: block;
  font-size: 18.5px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.25;
  text-wrap: pretty;
}

.mp-step-carte .mp-method-texte {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: #5F5E64;
  text-wrap: pretty;
}

.mp-step--fin .mp-step-carte .mp-method-texte { color: rgba(255, 255, 255, .76); }

/* Sur la carte noire, la couleur d'accent et le gras du mentor doivent
   rester lisibles : les règles générales les posent pour un fond clair. */
.mp-step--fin .mp-method-texte em { color: #FF8C8C; }
.mp-step--fin .mp-method-texte b,
.mp-step--fin .mp-method-texte strong { color: #fff; }
.mp-step--fin .mp-method-texte li::marker { color: #FF8C8C; }

.mp-step-lien {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  height: 46px;
  padding: 0 18px;
  border-radius: 44px;
  background: #fff;
  color: #1C1C1E;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.22, .9, .24, 1), background .18s ease;
}

.mp-step-lien svg { flex: none; width: 19px; height: 19px; color: #C0392B; }
.mp-step-lien .ico { flex: none; font-size: 19px; color: #C0392B; }
.mp-step-lien:hover { transform: translateY(-2px); background: #FFF1F1; color: #1C1C1E; }
.mp-step-lien-fleche { transition: transform .2s cubic-bezier(.22, .9, .24, 1); }
.mp-step-lien:hover .mp-step-lien-fleche { transform: translateX(3px); }

/* Sous 520px la colonne n'a plus la place d'un fil : la pastille repasse
   dans le flux, au-dessus de sa carte. */
@media (max-width: 520px) {
  .mp-flow { padding-left: 0; }
  .mp-flow::before { display: none; }
  .mp-step-pastille {
    position: static;
    margin-bottom: 11px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-step-carte,
  .mp-step-lien,
  .mp-step-lien-fleche { transition: none; }
}

/* ---------- 03 Subjects ---------- */
/* Single-open accordion. Row-mates stretch to equal height when one
   expands (grid's default align-items:stretch) - an explicit deviation
   from the reference bundle's own behavior (which left the collapsed
   neighbor short) per direct request. */
.mp-subjects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mp-subject-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 20px;
  padding: 26px 28px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  font-family: "Capriola", sans-serif;
  background: #fff;
  color: #191817;
  border: 1.5px solid #eceae7;
}
.mp-subject-card.is-active {
  background: #191817;
  color: #fff;
  border-color: #191817;
}
.mp-subject-head {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.mp-subject-arrow {
  color: #ff6363;
  transition: transform 0.25s;
  transform: rotate(0deg);
  flex: none;
}
.mp-subject-card.is-active .mp-subject-arrow {
  transform: rotate(90deg);
}
.mp-subject-desc {
  display: block;
  overflow: hidden;
  transition: max-height 0.35s, opacity 0.3s, margin 0.3s;
  font-size: 15px;
  line-height: 1.65;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}
.mp-subject-card.is-active .mp-subject-desc {
  max-height: 140px;
  opacity: 1;
  margin-top: 12px;
  color: #c9c5bf;
}

/* ---------- 06 Parcours & diplômes — tabbed Education/Work experience/
   Certifications (explicit redesign request, replacing the old single
   merged/date-sorted .mp-timeline-*) ---------- */
.mp-resume-tabs {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.mp-resume-tab {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 14px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: #a4a09a;
  cursor: pointer;
  position: relative;
}
.mp-resume-tab:hover {
  color: #191817;
}
.mp-resume-tab.is-active {
  color: #191817;
}
.mp-resume-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #ff6363;
}
/* Sits right under the tab bar, spanning the full row (not per-tab) —
   the underline above is the per-tab active indicator, this is the
   constant baseline the reference shows beneath the whole bar. */
.mp-resume-divider {
  height: 1px;
  background: #eceae7;
  margin-bottom: 8px;
}

.mp-resume-panel {
  display: none;
}
.mp-resume-panel.is-active {
  display: block;
}

.mp-resume-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 10px 0;
  align-items: baseline;
}
.mp-resume-item:first-child {
  border-top: none;
  padding-top: 24px;
}
.mp-resume-date {
  font-weight: 700;
  font-size: 14px;
  color: #6e6a64;
  font-family: "Bricolage Grotesque", sans-serif;
}
.mp-resume-title {
  font-weight: 700;
  margin: 0 0 3px;
  font-size: 15.5px;
  color: #191817;
}
.mp-resume-sub {
  color: #6e6a64;
  font-size: 13.5px;
  margin: 0 0 8px;
}
.mp-resume-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1f9254;
  font-weight: 700;
  font-size: 13px;
}
.mp-resume-badge svg {
  width: 15px;
  height: 15px;
  color: #1f9254;
  flex: none;
}
.mp-resume-empty {
  padding: 24px 0;
  color: #6e6a64;
  font-size: 14.5px;
  margin: 0;
}

/* ---------- 05 Availability — real weekly Matin/Après-midi/Soir grid ----------
   Aggregated across every subject (see BookingService::getWeeklyAvailabilityBlocks()),
   with Précédent/Suivant week navigation — cell size/radius/coral-vs-light-
   grey coloring/legend layout intentionally match this project's earlier
   static mockup of this same section, now backed by real data. */
.mp-avail-widget {
  transition: opacity 0.15s ease;
}
.mp-avail-widget.mp-avail-is-loading {
  opacity: 0.5;
}
.mp-avail-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  justify-content: space-between;
}
.mp-avail-hint {
  color: #6e6a64;
  font-size: 15px;
  margin: 0 0 24px;
}
.mp-avail-hint strong {
  color: #191817;
}
.mp-avail-week-label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  min-width: 160px;
}
.mp-avail-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #eceae7;
  background: #fff;
  color: #191817;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mp-avail-nav-btn:hover:not(:disabled) {
  background: #f4f2ef;
}
.mp-avail-nav-btn:disabled {
  cursor: not-allowed;
}
.mp-avail-nav-btn:disabled svg path {
  stroke: #cfccc6;
}
.mp-avail-scroll {
  overflow-x: auto;
}
.mp-avail-grid {
  display: grid;
  grid-template-columns: 110px repeat(7, 1fr);
  gap: 10px;
  min-width: 620px;
}
.mp-avail-col-label {
  text-align: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.mp-avail-row-label {
  font-size: 14px;
  color: #6e6a64;
  align-self: center;
}
.mp-avail-cell {
  display: block;
  height: 46px;
  border-radius: 12px;
  background: #f4f2ef;
  text-decoration: none;
  transition: background 0.2s ease;
}
.mp-avail-cell.is-available {
  background: #ff6363;
  cursor: pointer;
}
.mp-avail-cell.is-available:hover {
  background: #ff4c4c;
}
.mp-avail-legend {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  font-size: 14px;
  color: #6e6a64;
  align-items: center;
  flex-wrap: wrap;
}
.mp-avail-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mp-avail-tz {
  margin-left: auto;
}
.mp-avail-dot {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #f4f2ef;
  display: inline-block;
}
.mp-avail-dot.is-available {
  background: #ff6363;
}

/* Availability skeleton (Livewire lazy placeholder) - box sizes only,
   mirrors the .mp-avail-nav-btn/.mp-avail-week-label/.mp-avail-col-label/
   .mp-avail-row-label/.mp-avail-cell/.mp-avail-dot dimensions above so
   there's no layout shift once TutorAvailabilityGrid mounts; the grey
   background + shimmer itself comes from the shared skeleton-wave
   utility in main.css (~line 504), same convention as the reviews
   skeleton. */
.mp-skel-avail-nav-btn {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.mp-skel-avail-week-label {
  display: block;
  width: 140px;
  height: 15px;
  border-radius: 4px;
}
.mp-skel-avail-hint {
  display: block;
  width: 220px;
  height: 15px;
  border-radius: 4px;
  margin: 0 0 24px;
}
.mp-skel-avail-col-label {
  display: block;
  width: 34px;
  height: 14px;
  border-radius: 4px;
  margin: 0 auto;
}
.mp-skel-avail-row-label {
  display: block;
  width: 74px;
  height: 13px;
  border-radius: 4px;
  align-self: center;
}
.mp-skel-avail-cell {
  display: block;
  height: 46px;
  border-radius: 12px;
}
.mp-skel-avail-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
}
.mp-skel-avail-legend-label {
  display: inline-block;
  width: 70px;
  height: 13px;
  border-radius: 4px;
}

/* ==========================================================================
   07 — AVIS   (clone de mew_dash/avis-mentor.html)

   Une synthèse sombre en tête, les cartes en dessous, un seul bouton pour
   déplier ou replier. Deux affirmations de la maquette ne sont pas reprises
   — voir la vue du composant, qui dit lesquelles et pourquoi.

   La fonte : Nunito, comme la maquette. Capriola, posée sur `body` par
   main.css, n'existe qu'en 400 ; toutes les graisses de ce bloc (700 à 900)
   y seraient fabriquées par le navigateur — plus lourdes, plus larges, et
   invisibles à la mesure. Les deux pages qui chargent cette feuille
   chargent aussi Nunito.
   ========================================================================== */

.mp-avis {
  font-family: Nunito, system-ui, sans-serif;
  color: #1C1C1E;
}

.mp-avis-ico {
  flex: none;
  width: 1em;
  height: 1em;
  font-size: 18px;
  display: inline-block;
  vertical-align: -.18em;
}

/* ---------- la synthèse ---------- */
.mp-avis-synthese {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding: 22px 24px;
  border-radius: 30px;
  background: #0B0B0C;
  color: #fff;
}

.mp-avis-score {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}

.mp-avis-score > b {
  flex: none;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mp-avis-score > b i {
  font-style: normal;
  font-size: 22px;
  font-weight: 800;
  color: rgba(255, 255, 255, .6);
}

.mp-avis-etoiles {
  flex: none;
  display: inline-flex;
  gap: 2px;
  color: #FF8C8C;
}

.mp-avis-synthese .mp-avis-etoiles .mp-avis-ico { font-size: 19px; }
.mp-avis-synthese .mp-avis-ico--eteinte { color: rgba(255, 255, 255, .26); }

/* `flex: 1 1 160px` : le compte passe à la ligne plutôt que de se serrer
   contre les étoiles quand la colonne se rétrécit. */
.mp-avis-compte {
  flex: 1 1 160px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
}

/* D'où viennent ces avis. Cette phrase était cachée derrière un ⓘ ; elle est
   la raison pour laquelle un visiteur croit ce qu'il lit au-dessus, et elle
   reste donc ouverte. */
.mp-avis-garantie {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  gap: 11px;
  padding-top: 16px;
  border-top: 1.5px solid rgba(255, 255, 255, .12);
}

.mp-avis-garantie .mp-avis-ico { font-size: 20px; color: #FF8C8C; margin-top: 1px; }

.mp-avis-garantie > span {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
}

/* ---------- les cartes ---------- */
.mp-avis-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.mp-avis-carte {
  padding: 20px;
  border-radius: 26px;
  background: #fff;
  /* En ombre interne plutôt qu'en bordure : le trait ne s'ajoute pas à la
     largeur, les cartes restent alignées avec la synthèse au pixel près. */
  box-shadow: inset 0 0 0 1.5px #F0EBE7;
  animation: mpAvisMonte .34s cubic-bezier(.22, .9, .24, 1) both;
  animation-delay: calc(var(--mp-avis-rang, 0) * .04s);
}

@keyframes mpAvisMonte {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.mp-avis-carte-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* La boîte porte la taille, pas l'image : faute de photo, ce sont les
   initiales en SVG qui la remplissent (components/lernen/avatar), et une
   règle qui ne visait que `img` les laissait sans dimension. */
.mp-avis-photo {
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}

.mp-avis-photo img,
.mp-avis-photo svg,
.mp-avis-photo .ph {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.mp-avis-qui {
  flex: 1 1 130px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-avis-qui b {
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: -.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-avis-meta {
  font-size: 13.5px;
  font-weight: 700;
  color: #5F5E64;
}

.mp-avis-pastille {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 44px;
  background: #FFF5F5;
}

.mp-avis-pastille .mp-avis-etoiles { color: #FF6363; }
.mp-avis-pastille .mp-avis-ico { font-size: 16px; }
.mp-avis-pastille .mp-avis-ico--eteinte { color: #E8D5D5; }

.mp-avis-pastille b {
  font-size: 14px;
  font-weight: 900;
  color: #C0392B;
  font-variant-numeric: tabular-nums;
}

/* Le texte porte le poids ; pas de guillemets décoratifs. */
.mp-avis-texte {
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: #1C1C1E;
  text-wrap: pretty;
}

/* Un avis d'un mot ne remplit pas un paragraphe : on l'affiche grand. */
.mp-avis-texte--court {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* L'avis garde ses retours à la ligne : ce que la personne a séparé reste
   séparé. Le premier paragraphe ne reprend pas la marge du bloc. */
.mp-avis-texte p { margin: 0; }
.mp-avis-texte p + p { margin-top: 10px; }

/* Replié EN LIGNES, pas en caractères : la coupe tombe entre deux lignes et
   jamais en plein mot, et le texte garde sa mise en page dans les deux
   états — ce qu'un `Str::limit` sur la chaîne ne permet pas.

   `-webkit-line-clamp` : non préfixé nulle part, mais reconnu par tous les
   navigateurs visés. Sans lui, le bloc s'affiche entier — le bouton
   « Afficher plus » est alors inutile, jamais trompeur. */
.mp-avis-texte--replie {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.mp-avis-suite {
  display: inline-block;
  margin-top: 8px;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: #E14A4A;
  cursor: pointer;
}

.mp-avis-suite:hover { color: #FF6363; }

.mp-avis-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.mp-avis-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 44px;
  background: #E4EBE9;
  color: #186B44;
  font-size: 13px;
  font-weight: 800;
}

.mp-avis-etiquette .mp-avis-ico { font-size: 15px; }

/* La réponse du mentor : un bloc encastré, pas un filet de couleur. */
.mp-avis-reponse {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #F9F7F5;
}

.mp-avis-reponse-photo {
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.mp-avis-reponse-photo img,
.mp-avis-reponse-photo svg,
.mp-avis-reponse-photo .ph {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

.mp-avis-reponse-corps { flex: 1; min-width: 0; }

.mp-avis-reponse-corps b {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.015em;
}

.mp-avis-reponse-corps b .mp-avis-ico { font-size: 16px; color: #C0392B; }

/* Le texte de la réponse est un BLOC, depuis qu'elle garde ses retours à la
   ligne : l'habillage passe donc du paragraphe à son enveloppe, et les
   paragraphes n'y portent que leur écart entre eux.

   Ce qui suit visait `p` directement. Une seconde règle `margin: 0` posée
   plus haut dans la feuille était silencieusement écrasée par celle-ci —
   même spécificité, et c'est la dernière qui gagne. */
.mp-avis-reponse-texte {
  margin-top: 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #5F5E64;
  text-wrap: pretty;
}

.mp-avis-reponse-texte p { margin: 0; }
.mp-avis-reponse-texte p + p { margin-top: 8px; }

/* ---------- aucun avis ---------- */
.mp-avis-vide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border-radius: 26px;
  background: #F9F7F5;
}

.mp-avis-vide .mp-avis-ico { font-size: 26px; color: #FF6363; }

.mp-avis-vide span {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: #5F5E64;
  text-wrap: pretty;
}

/* ---------- voir plus / replier ---------- */
.mp-avis-plus {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 44px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  box-shadow: 0 12px 24px -14px rgba(255, 99, 99, .8);
  color: #fff;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22, .9, .24, 1), box-shadow .18s ease;
}

.mp-avis-plus .mp-avis-ico { font-size: 20px; color: #fff; }
.mp-avis-plus .mp-avis-ico--haut { transform: rotate(180deg); }
.mp-avis-plus:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .mp-avis-carte { animation: none; }
  .mp-avis-plus { transition: none; }
}

/* Squelette des avis (l'attente de Livewire `lazy`) — des tailles de boîte
   seulement : le gris et le miroitement viennent de la liste d'utilitaires
   partagée de main.css, comme pour tous les autres squelettes du site.

   SAUF dans la synthèse : elle est sur fond noir, où ce gris-sur-blanc
   ferait quatre taches claires. Ces quatre-là portent donc leur propre
   fond, tiré du blanc de la carte. */
.mp-skel-avis-note,
.mp-skel-avis-etoiles,
.mp-skel-avis-compte,
.mp-skel-avis-garantie {
  display: block;
  border-radius: 6px;
  background: rgba(255, 255, 255, .14);
}
.mp-skel-avis-note   { flex: none; width: 104px; height: 44px; }
.mp-skel-avis-etoiles { flex: none; width: 104px; height: 19px; border-radius: 4px; }
.mp-skel-avis-compte { flex: 1 1 160px; max-width: 220px; height: 15px; border-radius: 4px; }
.mp-skel-avis-garantie { flex: 1; height: 40px; border-radius: 8px; }

.mp-skel-avatar {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.mp-skel-name {
  display: block;
  width: 130px;
  height: 15px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.mp-skel-date {
  display: block;
  width: 80px;
  height: 12px;
  border-radius: 4px;
}
.mp-skel-review-stars {
  flex: none;
  display: block;
  width: 124px;
  height: 32px;
  border-radius: 44px;
}
.mp-skel-text-line {
  display: block;
  width: 100%;
  height: 14px;
  border-radius: 4px;
  margin-top: 10px;
}
.mp-skel-text-line--80 {
  width: 80%;
}
.mp-skel-text-line--60 {
  width: 60%;
}

/* ==========================================================================
   08 — QUESTIONS FRÉQUENTES   (clone de mew_dash/faq-mentor.html)

   Une carte par question, numérotée, qui change de teinte en s'ouvrant :
   le pli se voit, sans filet gris anonyme. La réponse se déplie sur une
   hauteur MESURÉE — l'ancienne règle plafonnait à 480px et coupait net
   toute réponse plus longue, alors que le formulaire en autorise 600
   caractères et des listes.

   Le bloc noir qui suivait la maquette (« Écris à Steven, il répond avant
   la réservation » + bouton) n'est pas repris tel quel : un apprenant n'a
   aucun moyen d'écrire à un mentor avant de réserver — sa boîte de
   réception a été supprimée, et la conversation vit dans le salon de
   chaque séance. Le bloc dit donc ce qui existe vraiment, et ne porte
   aucun bouton qui n'irait nulle part.

   Nunito, comme la maquette : Capriola n'a qu'une graisse, et toutes les
   graisses d'ici (700 à 900) y seraient fabriquées par le navigateur.
   ========================================================================== */

#mp-faq {
  padding-bottom: 0;
  font-family: Nunito, system-ui, sans-serif;
}

.mp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-faq-item {
  border-radius: 24px;
  background: #fff;
  /* En ombre interne plutôt qu'en bordure : le trait ne s'ajoute pas à la
     largeur, les cartes restent alignées quand l'une s'ouvre et change de
     couleur de trait. */
  box-shadow: inset 0 0 0 1.5px #F0EBE7;
  overflow: hidden;
  transition: box-shadow .22s ease, background .22s ease;
}

.mp-faq-item.is-open {
  background: #F9F7F5;
  box-shadow: inset 0 0 0 1.5px #FFD3D3;
}

.mp-faq-btn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mp-faq-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: #F5F0EF;
  color: #5F5E64;
  font-size: 13.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease;
}

.mp-faq-item.is-open .mp-faq-num {
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
}

/* La question n'est jamais tronquée : elle passe à la ligne. */
.mp-faq-q {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.4;
  color: #1C1C1E;
  text-wrap: pretty;
}

.mp-faq-chevron {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F5F0EF;
  color: #1C1C1E;
  transition: background .2s ease, color .2s ease, transform .28s cubic-bezier(.22, .9, .24, 1);
}

.mp-faq-chevron svg { width: 21px; height: 21px; }
.mp-faq-btn:hover .mp-faq-chevron { background: #FFF1F1; color: #C0392B; }

.mp-faq-item.is-open .mp-faq-chevron {
  background: #1C1C1E;
  color: #fff;
  transform: rotate(180deg);
}

/* Dépliage animé : la hauteur est relevée sur le contenu par le script.
   Un `max-height` en dur couperait les réponses longues — c'est ce que
   faisait la règle précédente, plafonnée à 480px. */
.mp-faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .34s cubic-bezier(.22, .9, .24, 1), opacity .24s ease;
}

.mp-faq-item.is-open .mp-faq-answer { opacity: 1; }

/* Aligné sous la question, pas sous le numéro : la réponse se lit dans la
   colonne du texte qu'elle prolonge. */
.mp-faq-corps {
  padding: 0 18px 20px 64px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #5F5E64;
  text-wrap: pretty;
}

.mp-faq-corps p { margin: 0; }
.mp-faq-corps p + p { margin-top: 12px; }

/* Ce qui reste quand la question n'est pas dans la liste. */
.mp-faq-apres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 26px;
  background: #0B0B0C;
  color: #fff;
}

.mp-faq-apres .ico { flex: none; font-size: 23px; color: #FF8C8C; }

.mp-faq-apres span {
  flex: 1 1 190px;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  text-wrap: pretty;
}

@media (max-width: 520px) {
  .mp-faq-corps { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-faq-item,
  .mp-faq-num,
  .mp-faq-chevron,
  .mp-faq-answer { transition: none; }
}

/* ---------- Reading progress bar ----------
   Reproduces the reference bundle's own fixed top-of-viewport progress
   bar - a separate element from the sidebar card, driven by the same
   scroll listener (initFixedCard() in mentor-profile-page.js sets its
   width inline on every scroll tick). */
.mp-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  z-index: 100;
  background: linear-gradient(38deg, #ffbcbc 0%, #ff6363 54.0541%);
  transition: width 0.15s linear;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mp-page-wrap {
    padding-top: 32px;
  }
  .mp-content {
    max-width: none;
    margin-top: 80px;
  }
  /* Matches the reference bundle's own breakpoint (1100px): below it the
       fixed card is replaced entirely by the mobile sticky card
       (_mobile-sticky-card.blade.php, tutor-detail-page.css). */
  .mp-sidebar-card {
    display: none;
  }
  /* Bio: swap to the ~120-char mobile version + its own show-more, and
     show the mobile-only photo between it and .mp-stats — see
     tutor-detail.blade.php's own comment on section 01. */
  .mp-desktop-only {
    display: none;
  }
  .mp-mobile-only {
    display: block;
  }
  .mp-about-mobile-photo {
    display: flex;
  }
  .mp-section {
    padding: 44px 0;
  }
  .mp-section-num {
    font-size: 52px;
  }
  .mp-section h2 {
    font-size: 40px;
  }
  .mp-subjects-grid {
    grid-template-columns: 1fr;
  }
  .mp-avail-grid {
    font-size: 11px;
    grid-template-columns: 54px repeat(7, 1fr);
  }
}

/* =============================================================
   Icône du bouton « Réserver » de la colonne latérale
   (livewire/pages/tutor/action/action.blade.php) : un calendrier
   dont la coche se trace au survol.

   Tout est scopé à .aside-book-btn : `.btn-icon`, `.cal-body` et
   `.cal-check` sont des noms trop génériques pour être posés à la
   racine sur une page qui tourne aussi sous Bootstrap.
   ============================================================= */
.aside-book-btn .btn-icon {
  display: flex;
  flex: none;
}
.aside-book-btn .btn-icon svg {
  width: 20px;
  height: 20px;
  /* obligatoire : le tracé de la coche déborde de sa boîte pendant
     l'animation */
  overflow: visible;
}
.aside-book-btn .cal-body {
  transition: transform .3s ease;
}
.aside-book-btn .cal-check {
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  transition: stroke-dashoffset .35s .05s ease;
}
.aside-book-btn:hover .cal-body {
  transform: translateY(-1px);
}
.aside-book-btn:hover .cal-check {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .aside-book-btn .cal-body,
  .aside-book-btn .cal-check {
    transition: none;
  }
  .aside-book-btn .cal-check {
    stroke-dashoffset: 0;
  }
}

/* --------------------------------------------------------------------------
   Tarif de la matière — ajouté après coup.

   Le mentor fixe un prix par matière à l'étape « tarif » de son annonce, et
   ce prix décidait bien du montant payé ; il n'apparaissait simplement sur
   aucune fiche publique en dehors de la carte collante du téléphone. Il
   reste visible carte fermée comme carte ouverte, contrairement à
   .mp-subject-desc : c'est le premier chiffre qu'un apprenant cherche, il ne
   doit pas falloir cliquer pour l'obtenir.
   -------------------------------------------------------------------------- */
.mp-subject-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.mp-subject-rate {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 17px;
}
.mp-subject-free {
  display: inline-flex;
  align-items: center;
  border-radius: 44px;
  padding: 4px 12px;
  background: #eaf7f0;
  color: #1f7a4d;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
/* Carte ouverte, le fond passe au noir : la pastille verte pâle devient
   illisible, on inverse le contraste plutôt que de la faire disparaître. */
.mp-subject-card.is-active .mp-subject-free {
  background: rgba(63, 191, 127, 0.18);
  color: #6fe3a8;
}


/* ==========================================================================
   LIEUX DU COURS

   Une pastille par lieu réellement proposé : chez le mentor, chez
   l'apprenant ou en lieu public, en visio. Le dessin suit celui que Waleed
   a montré — un contour fin, un pictogramme, le lieu en gras, et le
   complément (« depuis Ariana ») en gris pâle, plus discret que ce qu'il
   précise.
   ========================================================================== */


/* ==========================================================================
   L'ACCROCHE, LES LIEUX, LE TEXTE ET LE PARTAGE
   --------------------------------------------------------------------------
   Reprise des maquettes mew_dash/lieux-du-cours.html, texte.html et
   partager.html. Les classes sont préfixées `mp-` : les noms de la maquette
   (`.place`, `.chip`, `.prose`, `.sheet`, `.net`) sont bien trop communs pour
   cohabiter avec la feuille du site, et on a déjà vu ici une classe générique
   repeindre une moitié de page qui ne lui appartenait pas.

   Les icônes sont des SVG dessinés dans le gabarit, pas des ligatures : cette
   page ne charge pas Material Symbols, et « videocam » s'y est déjà imprimé
   en toutes lettres.
   ========================================================================== */

/* ---------- L'accroche ---------- */
.mp-page .mp-lede {
  display: block;
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.18;
  color: #1C1C1E;
  text-wrap: pretty;
}

/* Le mot que le mentor a entouré de <em> — la seule mise en couleur qu'on lui
   offre, et l'assistant lui en donne la recette. */
.mp-page .mp-lede em { font-style: normal; color: #FF6363; }
.mp-page .mp-lede sup { font-size: .55em; }

/* ---------- Lieux du cours ---------- */
.mp-places { margin-top: clamp(26px, 3.4vw, 40px); }

.mp-places-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.mp-places-head b {
  flex: 1 1 190px;
  min-width: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #1C1C1E;
}

.mp-places-hint {
  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 700;
  color: #5F5E64;
}

.mp-places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* Un seul lieu ne s'étire pas sur toute la largeur : une offre unique aurait
   l'air plus grosse que trois. */
.mp-places-grid.mp-places--1 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.mp-places-grid.mp-places--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-places-grid.mp-places--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .mp-places-grid.mp-places--2,
  .mp-places-grid.mp-places--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.mp-place {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 20px 40px -34px rgba(60, 30, 25, .95);
  transition: transform .3s cubic-bezier(.22, .9, .24, 1), box-shadow .3s ease;
}

/* Le halo corail se lève au survol SANS repeindre le texte : un calque
   au-dessus, pas une couleur de fond qui emporterait le contraste. */
.mp-place::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.22, .9, .24, 1);
  pointer-events: none;
}

.mp-place:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgba(255, 99, 99, .7); }
.mp-place:hover::after { opacity: .08; }

.mp-place-top { display: flex; align-items: center; gap: 13px; }

.mp-place-tile {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: 18px;
  background: #FFF1F1;
  color: #C0392B;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La couleur vient du dégradé DANS le SVG, pas d'ici : `color` ne
   servirait plus qu'au repli si la définition venait à manquer. */
.mp-place-tile svg { width: 26px; height: 26px; }

.mp-place-name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: #1C1C1E;
  text-wrap: pretty;
}

.mp-place-sub {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: #5F5E64;
  text-wrap: pretty;
}

.mp-place-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }

.mp-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 13px;
  border-radius: 44px;
  background: #F5F0EF;
  color: #5F5E64;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-wrap: pretty;
}

.mp-place-chip svg { flex: 0 0 auto; width: 15px; height: 15px; }
.mp-place-chip span { min-width: 0; }

/* « En ligne » ouvre la liste, en noir : c'est le lieu qui n'engage aucun
   trajet, et il doit se distinguer du premier coup d'œil. */
.mp-place.is-lead { background: #0B0B0C; }
.mp-place.is-lead .mp-place-name { color: #fff; }
.mp-place.is-lead .mp-place-sub { color: rgba(255, 255, 255, .74); }
/* La tuile de la carte noire garde son fond translucide ; sa couleur ne sert
   plus, le dégradé du SVG la remplace. */
.mp-place.is-lead .mp-place-tile { background: rgba(255, 255, 255, .12); }
.mp-place.is-lead .mp-place-chip { background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .88); }
.mp-place.is-lead::after { opacity: 0; }
.mp-place.is-lead:hover::after { opacity: .16; }

.mp-place-flag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 44px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.mp-place-flag svg { width: 14px; height: 14px; }

/* ---------- Le texte du mentor ----------
   Nunito sur les DEUX sections de texte, comme la maquette. Capriola — la
   fonte du site, posée sur `body` — n'a qu'une graisse : 400. Les 600 et 900
   demandés ici étaient donc fabriqués par le navigateur, qui épaissit le
   tracé lui-même ; le texte sortait lourd et étalé au lieu d'être un peu
   plus appuyé. Le titre reste en Capriola, comme dans la maquette. */
.mp-prose-block,
.mp-course-about {
  font-family: "Nunito", system-ui, sans-serif;
}

.mp-prose-block { margin-top: clamp(34px, 4.5vw, 56px); }

.mp-prose-title {
  margin: 0;
  font-family: "Capriola", Georgia, serif;
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 400;
  letter-spacing: -.03em;
  color: #1C1C1E;
}

.mp-prose { position: relative; margin-top: 18px; }

.mp-prose-lede {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.32;
  color: #1C1C1E;
  text-wrap: pretty;
}

.mp-prose-lede em { font-style: normal; color: #FF6363; }

/* Les paragraphes du mentor sont sa mise en page. Ils étaient effacés, et une
   présentation en quatre paragraphes arrivait en un seul pavé.
   Ce sont de vrais <p> — plus de `white-space: pre-line`, qui doublait les
   espaces entre deux blocs déjà séparés par une marge. */
.mp-prose-text {
  max-width: 62ch;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.68;
  color: #3A3940;
  text-wrap: pretty;
}

.mp-prose-text p,
.mp-prose-text ul,
.mp-prose-text ol { margin: 0 0 1.1em; }

.mp-prose-text > :last-child { margin-bottom: 0; }

/* Les listes du mentor. Le retrait est posé ici plutôt que laissé au
   navigateur : le reset du site met `padding: 0` sur `ul`, et les puces
   sortaient alors de la colonne, collées au bord gauche. */
.mp-prose-text ul,
.mp-prose-text ol { padding-left: 1.35em; }

.mp-prose-text ul { list-style: disc; }
.mp-prose-text ol { list-style: decimal; }
.mp-prose-text li { margin-bottom: .35em; }
.mp-prose-text li::marker { color: #C0392B; }

.mp-prose-text em { font-style: normal; color: #FF6363; }
.mp-prose-text b, .mp-prose-text strong { font-weight: 900; color: #1C1C1E; }

.mp-prose-clip {
  position: relative;
  overflow: hidden;
  max-height: 330px;
  transition: max-height .45s cubic-bezier(.22, .9, .24, 1);
}

.mp-prose-clip.is-open { max-height: 4000px; }

.mp-prose-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.mp-prose-clip.is-open .mp-prose-fade { opacity: 0; }

/* Ni voile ni bouton si le texte ne dépasse pas — mesuré à l'écran, pas
   deviné à un nombre de caractères. */
.mp-prose:not(.is-truncated) .mp-prose-fade,
.mp-prose:not(.is-truncated) .mp-prose-more { display: none; }

.mp-prose-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  height: 48px;
  padding: 0 20px;
  border: 1.5px solid #E4DFDB;
  border-radius: 44px;
  background: #fff;
  color: #1C1C1E;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.22, .9, .24, 1);
}

.mp-prose-more:hover { border-color: #FFC9C9; background: #FFF8F7; transform: translateY(-2px); }
.mp-prose-more svg { width: 21px; height: 21px; color: #C0392B; transition: transform .24s cubic-bezier(.22, .9, .24, 1); }
.mp-prose-more.is-open svg { transform: rotate(180deg); }

/* ---------- À propos du cours ---------- */
.mp-course-about {
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(30px, 4vw, 46px);
  border-top: 1.5px solid #F0EBE7;
}

.mp-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.mp-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 12px 19px;
  border: 1.5px solid #E4DFDB;
  border-radius: 44px;
  background: #fff;
  color: #1C1C1E;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.015em;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.22, .9, .24, 1);
}

.mp-pill:hover { border-color: #FFC9C9; background: #FFF8F7; transform: translateY(-1px); }
.mp-pill svg { flex: 0 0 auto; width: 20px; height: 20px; }
.mp-pill-note { font-weight: 700; color: #6E6D72; font-variant-numeric: tabular-nums; }
.mp-pill--btn { cursor: pointer; }

.mp-pill-langs { position: relative; display: inline-flex; }

.mp-langs-bubble {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 6;
  width: min(340px, calc(100vw - 48px));
  padding: 16px;
  border-radius: 22px;
  background: #0B0B0C;
  color: #fff;
  box-shadow: 0 26px 50px -22px rgba(11, 11, 12, .6);
  animation: mpPopIn .2s cubic-bezier(.22, .9, .24, 1) both;
}

@keyframes mpPopIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.mp-langs-bubble::before {
  content: "";
  position: absolute;
  left: 26px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: #0B0B0C;
  transform: rotate(45deg);
  border-radius: 3px;
}

.mp-langs-bubble b {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .75);
}

.mp-langs-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.mp-langs-list span {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 44px;
  background: rgba(255, 255, 255, .14);
  font-size: 13.5px;
  font-weight: 800;
}

/* ---------- Partager ---------- */
/* Aligné sur le cœur, mesuré à l'écran : le cœur est posé par le composant
   d'action, dans un autre conteneur, donc aucune règle ne les tient ensemble
   — seule la mesure le fait.

   Et il paraît AVEC lui, pas avant : le cœur vit dans `.mp-sidebar-reveal`,
   qui ne s'ouvre qu'au défilement. Posé sur la photo, le partage s'affichait
   dès le haut de page, seul sur une carte qui ne montrait encore rien
   d'autre — on proposait de faire suivre une fiche avant de l'avoir lue.
   `display: none` et non `visibility` : un bouton invisible mais atteignable
   au clavier serait pire que visible. */
.mp-share-btn {
  /* Une seule déclaration `display` : le bloc en portait deux, `none` puis
     `flex`, et la seconde gagnait — le bouton restait visible en haut de
     page malgré la règle censée le cacher. L'alignement du contenu n'a
     besoin de rien tant que le bouton est masqué ; il revient avec `flex`
     à l'ouverture de la carte. */
  display: none;
  position: absolute;
  top: 62px;
  right: 6px;
  z-index: 3;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #191817;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(11, 11, 12, .5);
  transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.22, .9, .24, 1);
}

.mp-sidebar-card.is-open .mp-share-btn {
  display: flex;
  animation: mpShareIn .26s cubic-bezier(.22, .9, .24, 1) both;
}

@keyframes mpShareIn {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: none; }
}

.mp-share-btn svg { width: 19px; height: 19px; }
.mp-share-btn:hover { background: #FF6363; color: #fff; transform: translateY(-2px); }

.mp-share[hidden] { display: none; }

.mp-share {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 32px);
}

.mp-share-veil { position: absolute; inset: 0; background: rgba(11, 11, 12, .55); }

.mp-share-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(11, 11, 12, .6);
  animation: mpSheetIn .32s cubic-bezier(.22, .9, .24, 1) both;
}

@keyframes mpSheetIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

.mp-share-head { display: flex; align-items: center; gap: 12px; }

.mp-share-head b {
  flex: 1;
  min-width: 0;
  font-family: "Capriola", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.03em;
  color: #1C1C1E;
}

.mp-share-x {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #F7F4F2;
  color: #1C1C1E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.mp-share-x svg { width: 23px; height: 23px; }
.mp-share-x:hover { background: #FFF5F5; color: #FF6363; transform: rotate(90deg); }

.mp-share-preview {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 24px;
  background: #F9F7F5;
}

.mp-share-avatar {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  object-fit: cover;
  background: repeating-linear-gradient(45deg, #EFE0DB 0 8px, #E6D4CE 8px 16px);
}

.mp-share-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-share-txt b { font-size: 17px; font-weight: 900; letter-spacing: -.025em; color: #1C1C1E; }
.mp-share-role { font-size: 14px; font-weight: 800; color: #C0392B; }

.mp-share-line {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #5F5E64;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-share-linkrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 7px 7px 7px 16px;
  border: 1.5px solid #E4DFDB;
  border-radius: 44px;
}

.mp-share-url {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #5F5E64;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-share-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 44px;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(255, 99, 99, .85);
  transition: transform .18s cubic-bezier(.22, .9, .24, 1);
}

.mp-share-copy svg { width: 19px; height: 19px; }
.mp-share-copy:hover { transform: translateY(-2px); }
.mp-share-copy.is-done { background: #1C1C1E; box-shadow: none; }

.mp-share-label {
  display: block;
  margin: 20px 0 11px;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #5F5E64;
}

.mp-share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }

.mp-share-net {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  color: #1C1C1E;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.015em;
  transition: transform .2s cubic-bezier(.22, .9, .24, 1);
}

.mp-share-net:hover { transform: translateY(-3px); color: #1C1C1E; }

.mp-share-bubble {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  background: #F5F0EF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}

.mp-share-net:hover .mp-share-bubble { background: #FFF1F1; }
.mp-share-bubble svg { width: 26px; height: 26px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .mp-place, .mp-place::after, .mp-prose-clip, .mp-prose-more, .mp-prose-more svg,
  .mp-share-sheet, .mp-share-copy, .mp-share-net, .mp-share-btn, .mp-pill,
  .mp-sidebar-card.is-open .mp-share-btn {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Les textes mis en forme par le mentor ----------
   Le déroulé d'une séance et les réponses de la FAQ passent par le même
   éditeur que sa présentation : ils peuvent porter des paragraphes, du gras,
   de la couleur et des listes. Sans ces règles, une liste sortait sans puce
   et collée au bord — le reset du site met `padding: 0` sur `ul`. */
.mp-method-texte p,
.mp-faq-corps p,
.mp-method-texte ul,
.mp-faq-corps ul,
.mp-method-texte ol,
.mp-faq-corps ol { margin: 0 0 .8em; }

.mp-method-texte > :last-child,
.mp-faq-corps > :last-child { margin-bottom: 0; }

.mp-method-texte ul, .mp-faq-corps ul,
.mp-method-texte ol, .mp-faq-corps ol { padding-left: 1.3em; }

.mp-method-texte ul, .mp-faq-corps ul { list-style: disc; }
.mp-method-texte ol, .mp-faq-corps ol { list-style: decimal; }
.mp-method-texte li, .mp-faq-corps li { margin-bottom: .3em; }
.mp-method-texte li::marker, .mp-faq-corps li::marker { color: #C0392B; }

.mp-method-texte em, .mp-faq-corps em { font-style: normal; color: #FF6363; }
.mp-method-texte b, .mp-faq-corps b,
.mp-method-texte strong, .mp-faq-corps strong { font-weight: 900; color: #1C1C1E; }

/* ==========================================================================
   EN SAVOIR PLUS SUR … — l'entretien du mentor
   --------------------------------------------------------------------------
   Reprise de mew_dash/interview-mentor.html. Une question à la fois, un rail
   pour sauter où l'on veut, et la réponse bornée EN LIGNES plutôt qu'en
   pixels : la coupe tombe ainsi entre deux lignes et jamais en plein mot.
   ========================================================================== */

/* La largeur vient de `.container`, la même classe que « Mentors similaires »
   juste en dessous : les deux sections s'alignent à tous les paliers de
   fenêtre, ce qu'une largeur en dur n'aurait tenu qu'à un seul. */
.mp-itv {
  margin-top: clamp(40px, 6vw, 72px);
  font-family: "Nunito", system-ui, sans-serif;
}

.mp-itv h2 {
  margin: 0 0 16px;
  font-family: "Capriola", Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 400;
  letter-spacing: -.03em;
  color: #1C1C1E;
}

/* Le rail : on saute où on veut, et on voit combien il en reste. */
.mp-itv-rail {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.mp-itv-rail::-webkit-scrollbar { height: 0; }

.mp-itv-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 8px;
  border: 0;
  box-shadow: inset 0 0 0 1.5px #EDE7E3;
  border-radius: 44px;
  background: #fff;
  color: #5F5E64;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22, .9, .24, 1);
}

.mp-itv-n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F5F0EF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: background .2s ease, color .2s ease;
}

.mp-itv-lbl { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-itv-tab:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #FFD3D3; }

.mp-itv-tab.is-on,
.mp-itv-tab.is-on:hover {
  color: #fff;
  background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%);
  box-shadow: 0 12px 24px -14px rgba(255, 99, 99, .8);
}

.mp-itv-tab.is-on .mp-itv-n { background: rgba(255, 255, 255, .26); color: #fff; }
.mp-itv-tab.is-seen .mp-itv-n { background: #FFF1F1; color: #C0392B; }

/* La carte grandit avec la réponse : jamais de texte coupé. */
.mp-itv-card {
  position: relative;
  margin-top: 6px;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 24px 46px -36px rgba(60, 30, 25, .95);
}

.mp-itv-panneau[hidden] { display: none; }

.mp-itv-q {
  display: block;
  font-size: clamp(21px, 2.7vw, 30px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.2;
  color: #1C1C1E;
  text-wrap: pretty;
}

.mp-itv-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 12px;
  background: #FFF1F1;
  color: #C0392B;
  vertical-align: -6px;
}

.mp-itv-mark svg { width: 19px; height: 19px; }

.mp-itv-body { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 30px); margin-top: 20px; align-items: flex-start; }

/* La colonne du texte : la réponse ET son bouton. Le bouton posé après la
   rangée se retrouvait tout en bas quand l'image dépassait le texte —
   séparé de la phrase qu'il prolonge par la hauteur de la photo. */
.mp-itv-col { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.mp-itv-answer { width: 100%; min-width: 0; }

.mp-itv-answer p,
.mp-itv-answer ul,
.mp-itv-answer ol { margin: 0 0 14px; font-size: 16.5px; font-weight: 700; line-height: 1.62; color: #3A3941; text-wrap: pretty; }

.mp-itv-answer > :last-child { margin-bottom: 0; }
.mp-itv-answer ul, .mp-itv-answer ol { padding-left: 1.3em; }
.mp-itv-answer ul { list-style: disc; }
.mp-itv-answer ol { list-style: decimal; }
.mp-itv-answer li::marker { color: #C0392B; }
.mp-itv-answer em { font-style: normal; color: #FF6363; }
.mp-itv-answer b, .mp-itv-answer strong { font-weight: 900; color: #1C1C1E; }

/* Replié : borné en LIGNES et non en pixels — la coupe tombe entre deux
   lignes, jamais au milieu d'un mot. */
.mp-itv-answer.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-itv-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid #EDE7E3;
  border-radius: 44px;
  background: #fff;
  color: #1C1C1E;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, transform .18s cubic-bezier(.22, .9, .24, 1);
}

.mp-itv-more:hover { background: #FFF5F5; transform: translateY(-2px); }
.mp-itv-more svg { width: 20px; height: 20px; color: #FF6363; transition: transform .22s cubic-bezier(.22, .9, .24, 1); }
.mp-itv-more.is-open svg { transform: rotate(180deg); }

.mp-itv-shot { flex: 0 1 380px; min-width: 0; }
.mp-itv-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 26px; display: block; }
.mp-itv-caption { display: block; margin-top: 9px; font-size: 13.5px; font-weight: 700; color: #5F5E64; text-wrap: pretty; }

/* Le changement de question glisse dans le SENS de la navigation : on sent
   qu'on avance ou qu'on revient. */
.mp-itv-body.slide-next { animation: mpItvNext .38s cubic-bezier(.22, .9, .24, 1) both; }
.mp-itv-body.slide-prev { animation: mpItvPrev .38s cubic-bezier(.22, .9, .24, 1) both; }

@keyframes mpItvNext { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes mpItvPrev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.mp-itv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1.5px solid #F2EFEC;
}

.mp-itv-counter { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; }
.mp-itv-counter b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; color: #1C1C1E; }
.mp-itv-track { width: 92px; height: 5px; border-radius: 44px; background: #F2EFEC; overflow: hidden; }
.mp-itv-track i { display: block; height: 100%; border-radius: 44px; background: linear-gradient(38deg, #FFBCBC 0%, #FF6363 54%); transition: width .42s cubic-bezier(.22, .9, .24, 1); }
.mp-itv-tot { font-size: 15px; font-weight: 800; color: #8A8A8F; font-variant-numeric: tabular-nums; }
.mp-itv-spacer { flex: 1; }
.mp-itv-arrows { flex: 0 0 auto; display: flex; gap: 9px; }

.mp-itv-arrow {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: #F5F0EF;
  color: #1C1C1E;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s cubic-bezier(.22, .9, .24, 1);
}

.mp-itv-arrow svg { width: 23px; height: 23px; }
.mp-itv-arrow:hover:not(:disabled) { background: #FFF1F1; color: #C0392B; transform: translateY(-2px); }
.mp-itv-arrow:disabled { opacity: .4; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .mp-itv-body.slide-next, .mp-itv-body.slide-prev { animation: none; }
  .mp-itv-tab, .mp-itv-more, .mp-itv-arrow { transition-duration: .01ms !important; }
}