/*
    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%;
  left: 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;
  right: 14px;
  left: 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: right;
  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;
  right: 14px;
  left: 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 {
  right: -12px;
}
.mp-sidebar-divider-notch.right {
  left: -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%;
  right: 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-right: 1px solid #eceae7;
  padding-right: 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;
  left: 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-right: 58px;
}

.mp-flow::before {
  content: "";
  position: absolute;
  right: 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;
  right: -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-right: 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: right;
  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;
  right: 0;
  left: 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-right: 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: right;
  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 64px 20px 18px;
  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-right: 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;
  right: 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-right: 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;
  right: 0;
  left: 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: right;
  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;
  right: 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;
  right: 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;
  left: 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 16px 7px 7px;
  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-right: 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 8px 0 14px;
  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-left: 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-right: 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; }
}

/* =============================================================
   HÉROS DE TÉLÉPHONE  (.mp-mhero, partials/mp-mobile-hero.blade.php)

   Sur bureau la photo est dans la carte latérale flottante ; sous
   1100 px cette carte disparaît et la page s'ouvrait sur du texte.
   Ce bloc remet un visage en premier : photo d'un bord à l'autre,
   commandes flottantes, puis une carte blanche qui remonte par-dessus
   son bas pour porter le nom, la note et trois chiffres.

   Couleurs, polices et libellés sont ceux de la page — #ff6363 pour la
   marque, #191817 pour le texte, #6e6a64 pour le second plan, Capriola
   partout. Seule la disposition est nouvelle.

   Masqués par défaut : ils ne doivent jamais apparaître sur bureau, où
   la carte latérale fait déjà ce travail.

   LES DEUX, ET PAS SEULEMENT LE PREMIER. `.mp-mhero-barre` est la SŒUR
   de `.mp-mhero`, pas son enfant — elle est posée après lui pour se
   caler en `position: fixed` sur l'écran sans dépendre d'un ancêtre
   positionné. Le `display: none` du héros ne l'atteignait donc pas, et
   comme TOUS ses styles vivent dans le bloc `@media (max-width: 820px)`,
   elle s'affichait sur bureau entièrement nue : la photo à sa taille
   d'origine, le texte brut, et « favorite » écrit en toutes lettres à la
   place de l'icône.
   ============================================================= */
.mp-mhero,
.mp-mhero-barre {
  display: none;
}

@media (max-width: 820px) {

  .mp-mhero {
    display: block;
    /* La photo va d'un bord à l'autre de l'écran alors qu'elle vit dans
       une colonne qui porte des marges : on annule ces marges ici plutôt
       que de sortir le bloc du flux. `100vw` compte la barre de
       défilement, absente sur téléphone — d'où `100%` en repli sur les
       navigateurs de bureau étroits, qui, eux, l'affichent. */
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    /* -32 px annule exactement le `padding-top` que `.mp-page-wrap`
       porte à cette largeur : le bloc part du bord haut du contenu.

       LE `padding-top` REND SA BANDE À L'EN-TÊTE FLOTTANT. Celui-ci
       (`.nvg-root`) est en `position: fixed` : il ne pousse rien, donc
       une photo qui monterait jusqu'en haut lui passerait dessous — et
       comme un portrait a son visage dans le tiers haut, c'est le VISAGE
       qui se retrouvait couvert par la barre du menu. Aucun réglage
       d'`object-position` ne peut rattraper ça : il déplace l'image dans
       son cadre, pas le cadre sous la barre.

       La valeur n'est pas écrite en dur : `--mp-entete` est posée au
       chargement par mentor-profile-page.js, qui MESURE la barre.

       LE REPLI VAUT 68 px, ET C'EST IMPORTANT. Il valait 108 — la
       hauteur de la barre AILLEURS sur le site, pas ici : sur cette page
       elle perd son `padding` et tombe à 68. Entre la première peinture
       et l'exécution du script, le héros partait donc 40 px trop bas
       puis remontait d'un coup : c'est le sursaut visible au chargement.
       68 px n'est pas un pari — la barre y est faite d'un rond de 44 px
       entre 12 px de rembourrage, sans rien qui dépende d'une police ou
       d'une mesure. Le script ne fait plus que confirmer. */
    margin-top: -32px;
    /* La photo reprend TOUTE LA LARGEUR, et commence exactement au bas
       de la barre du menu — laquelle ne porte plus aucune marge sur cette
       page. Les deux se touchent sans liseré : c'est ce qui donne la
       lecture « en-tête d'application » de la maquette de référence.

       Aucune valeur en dur ici non plus : `--mp-entete` est la hauteur
       MESURÉE de la barre (mentor-profile-page.js). Elle vient justement
       de passer de 92 à 68 px quand la barre a perdu son `padding` — le
       héros s'est recalé tout seul. */
    padding-top: var(--mp-entete, 68px);
    margin-bottom: 8px;
  }

  /* ---- La rangée ----
     La photo occupe toute la largeur ; les deux boutons flottent sur son
     coin haut-droit, comme dans la maquette de référence. La cale qui
     recentrait la photo entre deux bandes n'a plus d'objet. */
  .mp-mhero-rang {
    position: relative;
  }
  .mp-mhero-cale {
    display: none;
  }
  .mp-mhero-actions {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Au-dessus de la photo, jamais dessous. */
    z-index: 2;
  }

  /* CARRÉE, sur toute la largeur. Une hauteur en `vh` donnait un cadre
     dont les proportions changeaient d'un téléphone à l'autre : très
     allongé sur un grand écran, presque carré sur un petit, et le
     cadrage du visage variait avec. Un rapport 1:1 donne le même cadre
     partout, et c'est le rapport dans lequel les photos de profil sont
     déjà prises. */
  /* Carrée ET pleine largeur : sur un écran de 390 px elle fait 390×390.
     Plus de coins arrondis — une photo qui touche les bords de l'écran
     et qui garde ses angles ronds laisse voir la page par quatre
     encoches, ce qui se lit comme un défaut, pas comme une intention. */
  .mp-mhero-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f3efeb;
  }
  .mp-mhero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Un portrait se cadre sur le haut : centré, on coupe le menton. */
    object-position: center 22%;
    display: block;
  }

  /* Les deux commandes flottantes. Fond BLANC OPAQUE, pas un flou :
     `backdrop-filter` est retiré au doigt par mobile-allege.css, et un
     blanc à 20 % sans flou laisserait passer la photo sous l'icône. */
  .mp-mhero-btn {
    /* Les marges latérales sont parties dans la bande de la colonne :
       le bouton n'est plus qu'un rond de 42 px centré dedans. */
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #191817;
    box-shadow: 0 4px 14px rgba(25, 24, 23, 0.18);
    cursor: pointer;
    padding: 0;
    transition: transform .18s ease, background .18s ease, color .18s ease;
  }
  .mp-mhero-btn:active {
    transform: scale(0.92);
  }
  .mp-mhero-btn .ico {
    font-family: "Material Symbols Rounded";
    font-size: 22px;
    line-height: 1;
  }

  /* Le cœur : contour tant que le mentor n'est pas en favori, plein et
     rouge une fois qu'il l'est. `FILL` est un axe de la fonte — c'est la
     MÊME glyphe qui se remplit, pas une seconde icône. */
  .mp-mhero-coeur .ico {
    font-variation-settings: 'FILL' 0;
    transition: font-variation-settings .2s ease, color .2s ease;
  }
  .mp-mhero-coeur.est-favori {
    color: #ff6363;
  }
  .mp-mhero-coeur.est-favori .ico {
    font-variation-settings: 'FILL' 1;
  }
  .mp-mhero-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  /* ---- La carte blanche ---- */
  .mp-mhero-carte {
    position: relative;
    /* Elle chevauche le bas de la photo : c'est ce chevauchement qui
       fait lire les deux comme un seul bloc. */
    /* Elle ne chevauche plus la photo. Le chevauchement fonctionnait
       quand la photo faisait toute la largeur : la carte mordait dessus
       et les deux se lisaient comme un seul bloc. Sur une photo de
       190 px flanquée de deux boutons, une carte pleine largeur qui
       remonte lui couvrirait le bas du visage. */
    /* Elle remonte SUR la photo. Ce chevauchement est ce qui fait lire
       la photo et la carte comme un seul bloc plutôt que comme deux
       éléments empilés — il n'avait été retiré que le temps où la photo
       était petite et flanquée de boutons, où il lui aurait couvert le
       bas du visage. */
    /* Elle remonte de 20 px SUR la photo, et ses coins hauts sont
       arrondis : c'est ce chevauchement qui fait lire la carte comme une
       feuille glissée par-dessus l'image, et c'est la seule chose qui
       rende l'arrondi visible — un rayon sur une boîte transparente ne se
       voit pas.
       Le blanc ne crée plus de couture depuis que `.scx-hero-bg` est
       retiré sur cette page : tout ce qui suit est du même blanc. */
    margin-top: -20px;
    padding: 22px 20px 20px;
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 24px 24px 0 0;
    text-align: center;
  }

  /* Quand le mentor n'a pas encore d'avis, `.mp-mhero-note` n'est pas
     rendue du tout : le nom doit alors garder lui-même l'écart qu'elle
     apportait. */
  .mp-mhero-nom:last-of-type {
    margin-bottom: 16px;
  }
  .mp-mhero-nom {
    font-family: "Capriola", sans-serif;
    /* Capriola n'a QU'UNE graisse : tout au-delà de 400 est un faux gras
       tracé par le navigateur. On ne monte donc pas le poids, on monte
       la taille. */
    font-weight: 400;
    font-size: 26px;
    /* La fonte fait 1,25 em de haut : en dessous, les lettres débordent
       de leur ligne. */
    line-height: 1.25;
    color: #191817;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .mp-mhero-note {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #6e6a64;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  .mp-mhero-etoile {
    color: #f5a623;
    font-size: 17px;
  }
  .mp-mhero-score {
    color: #191817;
  }
  .mp-mhero-lien-avis {
    color: #6e6a64;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ---- Les trois chiffres, dans un cadre arrondi ---- */
  .mp-mhero-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #eceae7;
    border-radius: 999px;
    padding: 12px 6px;
  }
  .mp-mhero-chiffre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
  }
  /* Les séparateurs sont des bordures entre cellules, pas des éléments :
     rien à rendre, et la dernière colonne n'en porte pas. */
  .mp-mhero-chiffre + .mp-mhero-chiffre {
    border-right: 1px solid #eceae7;
  }
  .mp-mhero-chiffre b {
    font-family: "Capriola", sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.25;
    color: #191817;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .mp-mhero-chiffre span {
    font-size: 13px;
    line-height: 1.4;
    color: #6e6a64;
  }

  /* ---- Ce que le héros remplace ----
     Le nom et la photo étaient déjà là, plus bas. Les laisser en ferait
     des doublons à deux écrans d'intervalle. */
  .mp-page .mp-name {
    display: none;
  }
  .mp-about-mobile-photo {
    display: none;
  }
  /* La section « À propos » commençait par un grand blanc réservé au nom
     qu'on vient de masquer. */
  .mp-page #mp-about {
    padding-top: 0;
  }
  /* 80 px auparavant : cette marge dégageait le contenu de la carte
     latérale flottante, qui n'existe plus à cette largeur. Sous le héros
     elle ne sépare plus rien.
     À 0 avec les deux réglages voisins (`#mp-about` et le bas de la carte
     du nom), le bouton « Réserver » vient se poser juste au-dessus de
     « À propos » au lieu de flotter entre les deux. */
  .mp-page .mp-content {
    margin-top: 0;
  }
}

/* =============================================================
   LA BARRE DU MENU, COLLÉE EN HAUT ET À DROITE
   — fiche mentor, téléphone uniquement.

   `.nvg-root` est la barre de TOUT le site : elle vit hors de `.mp-page`,
   en enfant direct de `<body>`, et cette feuille ne peut donc pas
   l'atteindre par son préfixe habituel. `body:has(.mp-page)` sert de
   crochet : la règle ne s'applique qu'aux pages qui portent une fiche
   mentor, sans avoir à poser une classe sur le `<body>` depuis le
   gabarit.

   Elle retire TOUT le `padding` que scrollix-header.css lui donne
   (24 px en haut, 24 px de chaque côté) : la barre touche le bord haut et
   les deux bords latéraux de l'écran. Ne retirer que le haut et la droite
   laissait un liseré de 24 px à gauche, par lequel le panneau coloré
   ressortait — visible sur un vrai téléphone, pas au jugé.

   CE QUI SUIT TOUT SEUL : la barre perd 24 px de hauteur, et le héros de
   cette page se recale sans rien de plus — il lit `--mp-entete`, que
   mentor-profile-page.js MESURE au chargement au lieu de la supposer.
   ============================================================= */
/* 820 px et non 760 : c'est la borne du héros lui-même. Entre les deux,
   la barre gardait son `padding` (92 px de haut) pendant que le héros
   supposait 68 — la photo démarrait 24 px trop bas sur cette bande de
   largeurs. Les deux règles doivent basculer au même endroit. */
@media (max-width: 820px) {
  body:has(.mp-page) .nvg-root {
    padding: 0;
  }

  /* Plus d'angles arrondis : la barre touche les trois bords de l'écran,
     et un arrondi dans un coin qui n'existe plus laisse juste voir la
     page par une encoche. */
  body:has(.mp-page) .nvg-card {
    border-radius: 0;
  }

  /* 12 px auparavant. La barre ayant perdu le `padding` qui l'écartait de
     l'écran, le menu et la loupe se retrouvaient à 12 px du bord au lieu
     de 36 : trop près pour le pouce, et trop serré à l'œil. */
  body:has(.mp-page) .nvg-m-toprow {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* LE PANNEAU COLORÉ, D'UN BORD À L'AUTRE ET SANS ARRONDI.
     `.scx-hero-bg` est encarté de 10 px et arrondi de 20 px en haut. Tant
     que le héros était lui aussi encarté, les deux se superposaient. Depuis
     que la photo va d'un bord à l'autre, ce panneau dépasse de 10 px de
     chaque côté SOUS elle : on voyait donc un liseré clair reprendre après
     la photo, avec un coin arrondi à sa naissance — le « border-radius en
     haut de la section du titre ». */
  /* LE PANNEAU CRÈME NE SERT PLUS À RIEN ICI, et il gênait.
     Il couvre le haut de la page sur 770 px. Or au-dessus de sa ligne de
     flottaison il est entièrement caché : la barre du menu (68 px, fond
     blanc plein) puis la photo (390 px, opaque, pleine largeur) le
     recouvrent sans un trou. Il ne se voyait donc QUE sous la photo — et
     c'est ce qui interdisait de rendre son fond à la carte du nom : tout
     blanc opaque posé dessus créait une couture à l'endroit exact où il
     réapparaissait.
     Retiré, la page est d'un blanc uniforme sous la photo, et la carte du
     nom peut redevenir une vraie surface avec ses coins arrondis. */
  body:has(.mp-page) .scx-hero-bg {
    display: none;
  }

  /* L'ASSISTANT IA, RETIRÉ DE CETTE PAGE SUR TÉLÉPHONE.
     Sa pastille flotte en bas à droite, exactement là où la carte de
     réservation vient se poser au défilement : elle passait par-dessus le
     bouton « Réserver », c'est-à-dire par-dessus la seule action que
     cette page existe pour proposer.
     Masquée seulement ici et seulement au téléphone — elle reste sur le
     reste du site et sur le bureau, où rien ne lui dispute ce coin. */
  body:has(.mp-page) .bai-dock {
    display: none;
  }

  /* Le message flottant se place juste sous la barre : elle vient de
     raccourcir de 24 px, il doit remonter d'autant. */
  body:has(.mp-page) .toast-container {
    top: 78px;
  }
}

/* =============================================================
   L'INFOBULLE DU SCEAU, AU DOIGT (héros de téléphone).

   Sur bureau elle s'ouvre au survol, en position absolue calée sur la
   carte latérale, dont la hauteur est MESURÉE par le script parce que
   le nom peut passer sur deux lignes.

   Ici, rien de tout ça : le survol n'existe pas au doigt, donc elle
   s'ouvre à la pression, et elle reste DANS LE FLUX — elle s'insère
   entre le nom et la note, et pousse le reste vers le bas. Une bulle en
   position absolue aurait recouvert la note et les trois chiffres, sur
   un écran où il n'y a pas la place de la poser ailleurs.

   Les couleurs viennent des modificateurs déjà écrits pour le bureau
   (`.mp-sceau-bulle--verifie` et consorts) : un seul jeu de couleurs
   pour les quatre niveaux, pas deux à tenir d'accord.
   ============================================================= */
@media (max-width: 820px) {
  /* Le sceau est un `<button>` ici : il faut lui retirer l'habillage que
     le navigateur met sur les boutons, que le `<span>` du bureau n'avait
     pas. Et le curseur redevient une main — au doigt comme à la souris,
     une pression fait maintenant quelque chose. */
  .mp-mhero-sceau {
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Repliée par défaut, dépliée par la classe. Pas d'animation de
     hauteur : la technique habituelle (`grid-template-rows: 0fr → 1fr`)
     a été essayée et le `1fr` résolvait à 0 px dans ce contexte —
     mesuré, la bulle restait invisible alors que la classe était bien
     posée. Une bascule franche marche partout ; l'apparition en douceur
     reste sur l'opacité, qui, elle, ne dépend d'aucune résolution de
     piste. */
  .mp-mhero-bulle {
    display: none;
    margin: 0 0 14px;
  }
  .mp-mhero-bulle.est-ouverte {
    display: block;
  }

  .mp-mhero-bulle-texte {
    display: block;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
    text-wrap: pretty;
  }
}

/* =============================================================
   RÉSERVER — dans le flux, puis épinglé en bas.
   (partials/mp-mobile-hero.blade.php, téléphone uniquement)

   Le même bouton existe deux fois : une fois sous les trois chiffres du
   héros, une fois dans une barre fixe qui ne se montre qu'une fois le
   premier sorti de l'écran. Deux exemplaires et non un seul déplacé :
   c'est un simple lien, sans état à tenir, et un élément qui passe de
   `static` à `fixed` fait sauter la page de sa propre hauteur au moment
   de la bascule.

   Cette barre REMPLACE `.tp-mobile-sticky-card`, masquée plus bas sur
   cette page : deux barres flottantes proposant la même action auraient
   fini l'une sur l'autre.
   ============================================================= */
@media (max-width: 820px) {

  .mp-mhero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(-38deg, #ffbcbc 0%, #ff6363 54.0541%);
    color: #fff;
    font-family: "Capriola", sans-serif;
    /* Capriola n'a qu'une graisse : au-delà de 400 le navigateur dessine
       un faux gras. */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 99, 99, 0.35);
  }
  .mp-mhero-cta:active {
    transform: scale(0.985);
  }

  /* ---- La barre épinglée ---- */
  .mp-mhero-barre {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    /* La barre elle-même ne peint RIEN : elle ne fait que réserver la
       place en bas d'écran. C'est la carte à l'intérieur qui porte le
       fond, les coins et l'ombre — comme dans la maquette, où elle
       flotte encartée des bords plutôt que collée à eux.

       10 px EN BAS, ET PAS `env(safe-area-inset-bottom)`.
       Cette variable vaut 0 sur un écran d'ordinateur et une trentaine de
       pixels sur un iPhone à barre gestuelle : la boîte touchait donc le
       bas dans mon banc d'essai et flottait à 45 px du bord sur un vrai
       téléphone — l'écart signalé. La réserve était de la prudence mal
       placée : la barre du système se superpose au contenu, elle ne le
       masque pas, et la maquette de référence pose sa carte tout aussi
       bas. 10 px n'y suffisaient cependant pas : la carte arrivait au ras
       du bord et ses DEUX COINS ARRONDIS DU BAS se retrouvaient coupés —
       un arrondi n'existe que s'il a la place de se voir. */
    padding: 0 12px 20px;
    background: transparent;
    pointer-events: none;

    /* VISIBLE DÈS LE CHARGEMENT. Elle ne se montrait qu'une fois un
       bouton du flux dépassé ; ce bouton n'existe plus, celui-ci le
       remplace et doit donc être là d'emblée. Ce qui apparaît au
       défilement, ce n'est plus la boîte, c'est la ligne d'informations
       à l'intérieur. */
    display: block;
  }
  .mp-mhero-barre-carte {
    pointer-events: auto;
    padding: 14px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 34px rgba(25, 24, 23, 0.18);
  }

  /* LA LIGNE D'INFORMATIONS — repliée tant que le héros est à l'écran.
     Tant qu'on voit le visage, la note et le tarif en haut de la page,
     les répéter à 40 px de là n'apprend rien. Elle se déplie quand ils
     sortent par le haut : la boîte reprend alors ce que l'écran vient de
     perdre.

     `max-height` et non une hauteur automatique : `height: auto` ne
     s'anime pas, et la piste `grid-template-rows: 0fr → 1fr` — l'autre
     technique habituelle — résolvait ici à 0 px, mesuré. 96 px est un
     plafond, pas une hauteur : la ligne en fait 46, le reste ne coûte
     qu'un peu de vitesse au début du dépliage. */
  .mp-mhero-barre-haut {
    display: flex;
    align-items: center;
    gap: 12px;
    max-height: 0;
    margin-bottom: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .32s cubic-bezier(.22, .9, .24, 1),
                margin-bottom .32s cubic-bezier(.22, .9, .24, 1),
                opacity .22s ease;
  }
  .mp-mhero-barre.montre-infos .mp-mhero-barre-haut {
    max-height: 96px;
    margin-bottom: 12px;
    opacity: 1;
  }
  .mp-mhero-barre-photo {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
  }
  .mp-mhero-barre-infos {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }
  .mp-mhero-barre-note,
  .mp-mhero-barre-prix {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    color: #6e6a64;
  }
  .mp-mhero-barre-note b,
  .mp-mhero-barre-prix b {
    font-family: "Capriola", sans-serif;
    font-weight: 400;
    color: #191817;
  }
  .mp-mhero-barre-prix b {
    font-size: 17px;
  }

  /* Le cœur de la barre n'est pas un rond blanc posé sur une photo, comme
     celui du héros : il est sur du blanc. Il perd donc son fond et son
     ombre, et ne garde que son dessin. */
  .mp-mhero-barre-coeur {
    flex: none;
    background: none;
    box-shadow: none;
  }

  /* L'écart entre la ligne d'infos et le bouton est porté par la ligne
     (son `margin-bottom`), PAS par le bouton : sinon il resterait là une
     fois la ligne repliée, et la boîte garderait 12 px de vide en haut
     sans rien au-dessus. */
  .mp-mhero-barre .mp-mhero-cta {
    margin-top: 0;
  }

  /* L'ANCIENNE CARTE FLOTTANTE, retirée de cette page.
     Elle proposait la même réservation, avec la photo et le nom du mentor
     en plus — sur un écran où la barre ci-dessus dit déjà le prix et où
     le visage est deux écrans plus haut. Les deux se seraient superposées
     au même endroit. */
  .tp-mobile-sticky-card {
    display: none !important;
  }
}

/* =============================================================
   L'ACCROCHE, PLUS SAGE SUR TÉLÉPHONE.

   Deux règles se disputent sa taille : `.mp-page .mp-lede` la donne en
   `clamp(26px, 3.8vw, 42px)`, et `.mp-section p.mp-lede` la fixe à 42 px.
   C'est la seconde qui gagne — elle ajoute un sélecteur d'élément (`p`),
   donc une spécificité plus haute — et le `clamp`, qui aurait justement
   réduit la taille sur un petit écran, ne s'applique jamais. L'accroche
   sortait donc à 42 px sur un écran de 390.

   On reprend le même sélecteur, plus bas dans la feuille : à spécificité
   égale, c'est l'ordre qui tranche.
   ============================================================= */
@media (max-width: 820px) {
  .mp-section p.mp-lede {
    font-size: 36px;
  }
}

/* =============================================================
   MENTORS SIMILAIRES — CARROUSEL
   (livewire/components/similar-tutors.blade.php)

   Une piste qui défile horizontalement, avec accrochage. Tout est
   natif : `overflow-x: auto` + `scroll-snap-type` donnent le
   défilement au doigt, l'inertie du système et l'arrêt en face d'une
   carte, sans une ligne de script.

   Préfixe `msim-` : cette section vivait sur des classes `.tp-*`
   partagées avec le reste de tutor-detail-page.css. Un nom à elle lui
   évite de recevoir — ou d'imposer — des styles qui ne la concernent
   pas.
   ============================================================= */
/* Le `padding` vertical n'est pas décoratif : les cartes portent une
   ombre, et une piste en `overflow: hidden` la découperait au ras. */
.msim-piste {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 10px 0 24px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Pas de barre de défilement visible : sur une piste d'images elle
     coupe le bas des cartes. Le geste reste le même. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* La piste sort des marges de la colonne pour que la première carte
     commence au bord du texte et que la dernière puisse glisser jusqu'au
     bord de l'écran — sinon le carrousel a l'air de buter. */
  scroll-padding-inline: 0;
}
.msim-piste::-webkit-scrollbar {
  display: none;
}

.msim-carte {
  flex: 0 0 auto;
  width: 224px;
  scroll-snap-align: start;
  /* Répété ICI et pas seulement sur la piste : une règle du site repose
     `list-style` sur les `li` eux-mêmes, et celle de la liste ne la bat
     pas. Sans ça, une puce noire flotte au-dessus de chaque carte. */
  list-style: none;
}
/* CHAQUE CARTE EST UNE BOÎTE BLANCHE, pas une photo posée sur la page.
   C'est la différence de fond avec la première version : le fond blanc,
   l'ombre et le rembourrage relient la photo à sa note et à son tarif.
   Sans eux, trois éléments flottaient côte à côte sans rien qui dise
   qu'ils parlent du même mentor. */
.msim-lien {
  display: block;
  /* AUCUN REMBOURRAGE. La carte en portait 8 px, ce qui dessinait un
     liseré blanc tout autour de la photo. Dans la maquette la photo
     touche le haut et les deux côtés : le blanc n'apparaît qu'EN DESSOUS,
     sous la note et les pastilles. C'est le pied qui porte l'écart. */
  padding: 0;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 26px rgba(25, 24, 23, 0.10);
  color: inherit;
  text-decoration: none;
}

.msim-photo {
  position: relative;
  /* Carrée : c'est le rapport dans lequel les photos de profil sont
     déjà prises et stockées, donc celui qui recadre le moins. */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Le MÊME rayon que la carte. Ses coins hauts se superposent
     exactement à ceux de la carte — on ne voit qu'un seul arrondi — et
     ses coins bas se détachent sur le blanc du pied. */
  border-radius: 22px;
  background: #f3efeb;
}
.msim-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.msim-voile {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to bottom, rgba(25, 24, 23, 0) 0%, rgba(25, 24, 23, 0.62) 100%);
  pointer-events: none;
}
.msim-identite {
  position: absolute;
  inset: auto 14px 12px 14px;
  color: #fff;
}
.msim-nom {
  margin: 0;
  font-family: "Capriola", sans-serif;
  /* Capriola n'a qu'une graisse : au-delà de 400 le navigateur dessine un
     faux gras. */
  font-weight: 400;
  font-size: 19px;
  /* La fonte fait 1,25 em de haut : en dessous, les lettres débordent. */
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msim-lieu {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msim-pied {
  padding: 12px 12px 14px;
}
.msim-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #6e6a64;
}
.msim-note b {
  font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #191817;
}
.msim-etoile {
  color: #f5a623;
  font-size: 15px;
}
.msim-niveau .ico {
  font-family: "Material Symbols Rounded";
  font-size: 17px;
  line-height: 1;
}
.msim-niveau--mentor  { color: #4A4950; }
.msim-niveau--verifie { color: #12724A; }
.msim-niveau--premium { color: #FF6363; }
.msim-niveau--super   { color: #E0A93C; }

/* Les pastilles : le tarif, et la première séance quand le mentor
   l'offre. Ce sont les deux seules choses de la carte qui décident ;
   elles ne doivent pas se lire comme le reste de la ligne.
   `flex-wrap` parce que deux pastilles ne tiennent pas toujours sur la
   largeur d'une carte — elles passent alors l'une sous l'autre plutôt
   que de déborder. */
.msim-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.msim-tarif,
.msim-offerte {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 99, 99, 0.12);
  color: #FF6363;
  font-family: "Capriola", sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
}
/* Le tarif tient sur une ligne, toujours — c'est trois ou quatre
   caractères. « 1re séance offerte » non : sur une carte de 119 px il
   dépasserait. On le laisse donc passer à la ligne DANS sa pastille
   plutôt que déborder de la carte. */
.msim-tarif {
  white-space: nowrap;
}

@media (max-width: 820px) {
  /* EN POURCENTAGE, ET PAS EN PIXELS. Mesuré : la colonne fait 303 px de
     large sur un écran de 390 — 32 px de marge de page plus 12 px de
     gouttière Bootstrap de chaque côté. Deux cartes de 196 px n'y
     tenaient donc pas, et on n'en voyait qu'une et demie.
     39 % donne DEUX CARTES ENTIÈRES PLUS UN TIERS de la troisième, ce
     qui est le cadrage de la maquette. Le calcul, pour une colonne de
     largeur L et un écart g : 2w + 2g + w/3 = L, donc w = (L - 2g) × 3/7.
     À 303 px mesurés et 12 px d'écart : 119 px, soit 39 % — et c'est ce
     rapport qu'on écrit, pour qu'il tienne à toutes les largeurs.
     Le plancher évite qu'elles deviennent illisibles sur les écrans les
     plus étroits. */
  .msim-carte {
    width: 39%;
    min-width: 112px;
  }
  .msim-piste {
    gap: 12px;
  }
  /* (retiré) La piste sortait des marges de la colonne pour que la
     dernière carte puisse glisser jusqu'au bord de l'écran. Le prix en
     était que la PREMIÈRE ne s'alignait plus sur le titre « Mentors
     similaires » ni sur le reste du texte de la page — un décalage qui
     se voit bien plus qu'un demi-centimètre gagné en fin de course.
     La piste reste donc dans la colonne, comme tout le reste. */
}