/* ------------------------------------------------------------------
   HexaFlow — études de cas (/etudes-de-cas et ses pages)
   Les blocs qui suivent sont ceux de la page Trustee
   (prod/trustee/trustee-landing/assets/styles.css), recopiés tels quels :
   mêmes classes, mêmes valeurs. Ne pas les retoucher ici. Les écarts
   vont dans « Propre à HexaFlow », en fin de fichier.
   ------------------------------------------------------------------ */

:root {
  --ink: #111111;
  --ink-2: #3d3d3d;
  --muted: #6b6b6b;
  --faint: #8a8a8a;
  --line: #e7e6e2;
  --line-strong: #d6d5d0;
  --paper: #ffffff;
  --tint: #f6f6f4;
  --tint-2: #efefec;
  --brand: #705ff1;
  --brand-pink: #e670c2;
  --ok: #1f9d6c;

  --radius-xl: 28px;
  --radius-l: 18px;
  --radius-m: 12px;
  --radius-pill: 999px;

  --shadow-window: 0 30px 80px -20px rgba(0, 0, 0, .35), 0 12px 30px -12px rgba(0, 0, 0, .25);
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .18);

  --container: 1180px;
  --font: var(--corps), system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Règles globales de Trustee, limitées à cette page. :where() les laisse
   à une spécificité nulle : toute classe passe devant, comme chez Trustee
   où elles portent sur les éléments. Pas de scroll-behavior : le site
   lisse déjà la molette en JavaScript, les deux se battraient. */
.page-etudes {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
:where(.page-etudes) img { display: block; max-width: 100%; height: auto; }
:where(.page-etudes) a { color: inherit; text-decoration: none; }
:where(.page-etudes) :is(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.page-etudes) :is(ul, ol) { padding: 0; list-style: none; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
@media (max-width: 640px) { .container { width: min(100% - 32px, var(--container)); } }

/* ------------------------------ Typo ------------------------------ */

.hero__title {
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 22ch;
}

.h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  text-wrap: balance;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
  text-wrap: pretty;
}

.hero__lede { max-width: 56ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.eyebrow--onDark { color: rgba(255, 255, 255, .6); }

/* ------------------------------ Boutons ------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--radius-m);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a2a2a; }
.btn--light { background: var(--tint); color: var(--ink); border-color: var(--line); }
.btn--light:hover { background: var(--tint-2); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn__arrow { transition: transform .15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ------------------------------ Hero ------------------------------ */

.hero { padding: 72px 0 0; }
.hero .eyebrow { margin-bottom: 22px; }
.hero__lede { margin-top: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__actions--center { justify-content: center; }

/* Cadre peint : la toile derrière, la fenêtre du produit devant. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #6f7f96;
  isolation: isolate;
}
.frame__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  z-index: 0;
  transform: scale(1.02);
}
.frame--hero {
  margin-top: 64px;
  height: clamp(320px, 54vw, 700px);
}
.frame__window {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-window);
  background: #fff;
  z-index: 1;
}
.frame__window--hero { top: 72px; }
.frame__window img { width: 100%; }

/* ------------------------------ Faits ------------------------------ */

.facts { padding: 56px 0 24px; }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; }
.fact + .fact { border-left: 1px solid var(--line); padding-left: 24px; }
.fact__num {
  font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fact__label { font-size: 14px; color: var(--muted); max-width: 22ch; text-wrap: pretty; }
@media (max-width: 860px) {
  .facts__grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .fact + .fact { border-left: 0; padding-left: 0; }
  .fact:nth-child(even) { border-left: 1px solid var(--line); padding-left: 24px; }
}

/* ------------------------------ Sections ------------------------------ */

.section { padding: 112px 0; }
.section--tint { background: var(--tint); }
@media (max-width: 720px) { .section { padding: 72px 0; } }

.section__head {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end;
  margin-bottom: 44px;
}
@media (max-width: 860px) { .section__head { grid-template-columns: 1fr; gap: 16px; } }

/* Lecture des pièces */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: start; }
.split__lead .lede { margin-top: 20px; }
.points { display: flex; flex-direction: column; gap: 30px; padding-top: 6px; }
.point { display: grid; grid-template-columns: 36px 1fr; gap: 16px; }
.point__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.point__icon svg { width: 20px; height: 20px; }
.point h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.point p { font-size: 15px; color: var(--muted); max-width: 44ch; text-wrap: pretty; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* Cadre de la section lecture : même composition que le hero. */
.frame--feature {
  margin-top: 56px;
  height: clamp(340px, 50vw, 640px);
}
.frame--feature .frame__art { object-position: 50% 45%; }

/* Fonctionnement : quatre étapes en ligne, puis l'écran du CRG en scène. */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line);
}
.steps li { display: flex; flex-direction: column; gap: 8px; }
.steps__num {
  font-size: 13px; font-weight: 500; color: var(--faint);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.steps h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.steps p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.frame--steps {
  margin-top: 56px;
  height: clamp(320px, 54vw, 700px);
}
.frame--steps .frame__art { object-position: 50% 30%; }

/* Onglets : une barre, un écran complet. */
.tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 22px;
}
.tab {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 18px;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab__num { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .6; }
.tab[aria-selected="true"] .tab__num { opacity: .7; }
/* Sur mobile, pas de sélecteur : les onglets se lisent à la suite, chacun
   avec son écran. */
@media (max-width: 720px) {
  .showcase { gap: 44px; }
  .showcase__panel { animation: none; }
  .showcase__text { margin-bottom: 14px; min-height: 0; }
}
.showcase__text {
  font-size: 16px; color: var(--muted); max-width: 70ch; text-wrap: pretty;
  margin-bottom: 22px; min-height: 1.5em;
}
.showcase__text strong { color: var(--ink); font-weight: 500; }
/* Les onglets se lisent à la suite, chacun avec son écran : rien à cliquer. */
.showcase { display: flex; flex-direction: column; gap: 64px; }
.showcase__panel { animation: showcase-in .35s ease both; }
@keyframes showcase-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .showcase__panel { animation: none; } }
.frame--tab {
  height: clamp(300px, 50vw, 620px);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(230, 112, 194, .30), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, rgba(49, 215, 201, .22), transparent 70%),
    linear-gradient(160deg, #e9e5ff 0%, #f1ecff 55%, #fbe9f5 100%);
}
.frame__window--tab { top: 56px; width: 88%; }

/* ------------------------------ Mobile ------------------------------
   En fin de fichier : ces règles doivent passer après celles des cadres
   (.frame--feature, .frame--steps, .frame--tab), écrites plus haut. */
@media (max-width: 720px) {
  .hero { padding-top: 48px; }
  .frame { border-radius: 20px; }
  .frame--hero, .frame--feature, .frame--steps, .frame--tab {
    height: auto; aspect-ratio: 4 / 3; margin-top: 36px;
  }
  /* Sur un petit écran, la fenêtre est agrandie et ancrée à gauche : on voit
     la barre latérale et le début du contenu, lisibles, plutôt qu'un écran
     entier réduit à la taille d'un timbre. */
  .frame__window, .frame__window--hero, .frame__window--tab {
    left: 6%; transform: none; width: 150%; top: 28px;
    border-radius: 10px 0 0 0;
  }
  /* Le hero est carré : plus de hauteur pour que la boucle du dépôt soit
     visible en entier. La fenêtre garde le même cadrage que les autres. */
  .frame--hero { aspect-ratio: 1 / 1; }
}

/* ------------------------------ Propre à HexaFlow ------------------------------ */

/* La barre du site est fixe, 58px de haut ; celle de Trustee est dans le
   flux. Le héros descend d'autant. */
.hero { padding-top: calc(72px + 58px); }
@media (max-width: 720px) { .hero { padding-top: calc(48px + 58px); } }

/* Chaque section porte son fond : la barre du site le lit pour passer en
   clair au-dessus. */
.hero, .facts, .section { background: var(--paper); }
.section--tint { background: var(--tint); }

/* Une étude de cas se lit comme un document : une fiche, puis des
   chapitres. Mêmes filets, mêmes corps, mêmes gris que les faits et les
   étapes de Trustee. */
.fiche {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px;
  margin-top: 48px; border-top: 1px solid var(--line);
}
.fiche > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.fiche dt { font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: 4px; }
.fiche dd { font-size: 15px; color: var(--ink); text-wrap: pretty; }
@media (max-width: 860px) { .fiche { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fiche { grid-template-columns: 1fr; } }

.chapitre { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.chapitre__num { display: block; font-size: 13px; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.chapitre__texte > p { font-size: 17px; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.chapitre__texte > p + p { margin-top: 14px; }
.chapitre__texte a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
@media (max-width: 860px) { .chapitre { grid-template-columns: 1fr; gap: 20px; } }

.liste { margin-top: 32px; border-top: 1px solid var(--line); }
.liste > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.liste dt { font-size: 15px; font-weight: 500; }
.liste dd { font-size: 15px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 560px) { .liste > div { grid-template-columns: 1fr; gap: 4px; } }

/* Les écrans, en figures : le cadre des onglets de Trustee (.frame--tab),
   une photo MBMO à la place du dégradé, une légende dessous. */
.figures { display: flex; flex-direction: column; gap: 56px; margin-top: 64px; }
.figures figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.figures figcaption b { color: var(--ink); font-weight: 500; }
.frame--plein img { width: 100%; height: 100%; object-fit: cover; }
.figures__note { font-size: 13px; color: var(--faint); }

.parole { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.parole blockquote { font-size: 17px; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.parole figcaption { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.parole figcaption img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }

/* L'entreprise : trois photos, une grande et deux empilées, puis ses
   chiffres dans les faits de Trustee. */
.photos {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
  height: clamp(320px, 46vw, 600px); margin-top: 56px;
}
.photos img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-l); }
.photos img:first-child { grid-row: 1 / 3; border-radius: var(--radius-xl); }
.facts--entreprise { padding: 40px 0 0; }
@media (max-width: 720px) {
  .photos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .photos img { aspect-ratio: 4 / 3; height: auto; }
  .photos img:first-child { grid-row: auto; grid-column: 1 / 3; }
}

/* Le premier écran d'une étude, sur sa toile, comme le héros de Trustee. */
.frame--ouverture { margin-top: 56px; height: clamp(320px, 54vw, 700px); }

/* La liste des études de cas : un bloc par client, séparé par un filet. */
.cas { padding: 72px 0; border-top: 1px solid var(--line); }
.cas:first-child { border-top: 0; padding-top: 16px; }
.cas__tete { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; }
.cas__tete .lede { margin-top: 0; }
.cas__secteur { font-size: 13px; font-weight: 500; color: var(--faint); margin-bottom: 12px; }
.cas__images {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-top: 40px;
}
.cas__images > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xl); }
.cas__bas { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.cas .facts__grid { flex: 1; border-bottom: 0; padding-bottom: 0; }
@media (max-width: 860px) {
  .cas__tete { grid-template-columns: 1fr; gap: 16px; }
  .cas__images { grid-template-columns: 1fr; height: auto; }
  .cas__images > img { aspect-ratio: 16 / 9; height: auto; }
  .cas__images .frame { height: auto; aspect-ratio: 4 / 3; }
  .cas__bas { flex-direction: column; align-items: stretch; }
}
@media (max-width: 720px) {
  .cas__images .frame__window { left: 6%; transform: none; width: 150%; top: 28px; border-radius: 10px 0 0 0; }
}

/* Trois écrans de téléphone sur la toile, posés comme la fenêtre de
   Trustee : même ombre, coins de téléphone. */
.telephones {
  position: absolute; inset: 56px 0 0; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start; gap: 3%;
}
.telephones img {
  width: 22%; height: auto; border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-window); background: #fff;
}
@media (max-width: 720px) {
  .frame--telephones { aspect-ratio: 4 / 3; }
  .telephones { inset: 24px 0 0; }
  .telephones img { width: 29%; border-radius: 14px 14px 0 0; }
}

/* Écrans entiers : chez Trustee la fenêtre sort du cadre par le bas et
   ses coins inférieurs sont coupés droit. Ici l'écran tient en entier dans
   la toile, marge tout autour, quatre coins arrondis. Le cadre prend la
   hauteur de l'écran. */
.frame--hero, .frame--tab, .frame--ouverture, .cas__images .frame { height: auto; aspect-ratio: auto; }
.frame .frame__window, .frame .frame__window--hero, .frame .frame__window--tab {
  position: relative; top: auto; left: auto; transform: none;
  width: 86%; margin: 64px auto; border-radius: 14px;
}
.frame--tab .frame__window--tab { margin: 56px auto; width: 88%; }
.cas__images .frame .frame__window { margin: 44px auto; width: 86%; }
.telephones { position: relative; inset: auto; padding: 56px 0; }
.telephones img { border-radius: 28px; }
@media (max-width: 720px) {
  .frame--hero, .frame--tab, .frame--ouverture, .frame--telephones, .cas__images .frame { height: auto; aspect-ratio: auto; }
  .frame .frame__window, .frame .frame__window--hero, .frame .frame__window--tab,
  .frame--tab .frame__window--tab, .cas__images .frame .frame__window {
    width: 90%; margin: 24px auto; border-radius: 10px;
  }
  .telephones { padding: 24px 0; }
  .telephones img { border-radius: 14px; }
}

/* La liste : tout le bloc est un lien. Au survol, les images avancent un
   peu, le titre se souligne, la flèche glisse. */
.cas__lien { display: block; color: inherit; }
.cas__titre { display: inline-flex; align-items: baseline; gap: 14px; }
.cas__fleche { font-size: .7em; color: var(--faint); transition: transform .2s ease, color .2s ease; }
.cas__images { overflow: hidden; }
.cas__images > img, .cas__images .frame { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.cas__lien:hover .cas__images > img, .cas__lien:hover .cas__images .frame { transform: scale(1.015); }
.cas__lien:hover .cas__titre span:first-child { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cas__lien:hover .cas__fleche { transform: translateX(6px); color: var(--ink); }
.cas__lire {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 15px; font-weight: 500; color: var(--ink);
}
.cas__lire-fleche { transition: transform .2s ease; }
.cas__lien:hover .cas__lire { text-decoration: underline; text-underline-offset: 4px; }
.cas__lien:hover .cas__lire-fleche { transform: translateX(4px); }
.cas__lien:focus-visible { outline-offset: 8px; border-radius: var(--radius-xl); }
@media (prefers-reduced-motion: reduce) {
  .cas__images > img, .cas__images .frame, .cas__fleche { transition: none; }
}

/* Résultats : les faits de Trustee, sur trois colonnes. */
.facts__grid--3 { grid-template-columns: repeat(3, 1fr); margin-top: 36px; }
@media (max-width: 860px) { .facts__grid--3 { grid-template-columns: 1fr; } .facts__grid--3 .fact:nth-child(n) { border-left: 0; padding-left: 0; } }

@media (max-width: 720px) {
  .frame--plein { aspect-ratio: 1024 / 500; }
  .figures { gap: 40px; margin-top: 44px; }
}