/* ==========================================================================
   MAC SA — Page d'accueil · compositions bloc par bloc
   Uteek Digital · v0.1 · 21/10/2026

   S'appuie sur macsa-design-system.css (tokens, composants, états).
   Ce fichier ne contient que la mise en scène propre à chaque bloc.
   Mobile d'abord ; paliers : 480, 768, 1024, 1280, 1440.

   Sommaire
   0. Réglages de page, utilitaires (emplacements photo, cadrages, icônes)
   1. En-tête et menu
   2. Hero
   3. Bandeau MAC Markets
   4. Expertises
   5. Solutions d'investissement
   6. Chiffres clés
   7. Références
   8. Profils clients
   9. Actualités
   10. Outils et application
   11. Rappel CTA
   12. Pied de page et barre mobile
   13. Apparitions et mouvement réduit
   ========================================================================== */


/* 0. Réglages de page
   ========================================================================== */
:root {
  /* Respiration entre blocs resserrée pour l'accueil : 48 → 72 px
     (au lieu de 64 → 112 px dans le design system) */
  --mac-section-y: clamp(3rem, 2.4rem + 2.5vw, 4.5rem);
  /* Échelle typographique resserrée pour l'accueil (-20 à -25 % sur les titres) */
  --mac-fs-h2:   clamp(1.75rem, 1.5rem + 0.9vw, 2.375rem);   /* 28 → 38 */
  --mac-fs-lead: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);   /* 16 → 17 */
  --home-header-h: 4.25rem;
  /* Échelles propres à la page d'accueil, de 375 px à 1440 px */
  --home-fs-hero:      clamp(2.25rem, 1.6rem + 2.8vw, 4rem);          /* 36 → 64 */
  --home-fs-giant:     clamp(6rem, 3.359rem + 11.268vw, 13.5rem);     /* 96 → 216 */
  --home-fs-statement: clamp(2.25rem, 1.854rem + 1.69vw, 3.375rem);   /* 36 → 54 */
  --home-fs-cta:       clamp(2rem, 1.5rem + 1.7vw, 3rem);             /* 32 → 48 */
  --home-fs-xp:        clamp(1.5rem, 1.25rem + 1vw, 2.25rem);         /* 24 → 36 */
  /* Débord jusqu'au bord de l'écran depuis le conteneur */
  --wrap:  min(100vw - 2 * var(--mac-gutter), var(--mac-container));
  --bleed: calc((100vw - var(--wrap)) / 2);
}

@media (min-width: 1024px) {
  :root { --home-header-h: 5rem; }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--home-header-h) + 1rem);
}

body {
  overflow-x: clip;
}

main > section {
  position: relative;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  top: -6rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-white);
  text-decoration: none;
  background: var(--mac-marine-900);
}

.skip:focus {
  top: 0.75rem;
}

.ico {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Emplacement photo : trame de graphique, clairement signalé */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--mac-marine-800);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 3rem 3rem;
}

.ph__label {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--mac-brume-300);
}

.ph__label b {
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mac-white);
}

/* Photos : étalonnage commun, légèrement désaturé, pour unifier des sources diverses */
.photo {
  display: block;
  width: 100%;
  /* Les attributs width/height ne servent qu'au ratio de réservation :
     c'est l'aspect-ratio du cadre qui fixe la hauteur affichée */
  height: auto;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.03);
}

.photo--fill {
  position: absolute;
  inset: 0;
  height: 100%;
  transition: transform 900ms var(--mac-ease-out);
}

/* Valeur manquante dans un texte : [SOURCE], [DATE], [TÉLÉPHONE] */
.ph-text {
  padding: 0 0.25rem;
  border: 1px dashed currentColor;
  border-radius: 2px;
}

/* En-tête de section commun : titre à gauche, introduction (et lien) à droite */
.sec-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.sec-head__main .mac-h2 {
  max-width: 14em;
}

.sec-head__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.sec-head__lead {
  max-width: 32rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mac-slate-700);
}

.sec-head__lead strong {
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
}

@media (min-width: 1024px) {
  .sec-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: end;
  }

  .sec-head__main {
    grid-column: 1 / 7;
  }

  .sec-head__main--wide {
    grid-column: 1 / 10;
  }

  .sec-head__main--wide .mac-h2 {
    max-width: 22em;
  }

  .sec-head__side {
    grid-column: 8 / -1;
  }
}

/* En-tête empilé : titre sur toute la ligne, sous-titre juste en dessous.
   Classe double pour l'emporter sur les grilles propres à chaque bloc. */
/* L'en-tête prend la largeur du titre ; le sous-titre ne compte pas dans
   ce calcul (contain: inline-size) : il s'arrête donc à la dernière lettre
   du titre et passe à la ligne au-delà. */
.head-stack.head-stack {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.head-stack.head-stack .mac-h2 {
  max-width: none;
}

.head-stack.head-stack .mac-section-head__intro,
.head-stack.head-stack .cases__lead,
.head-stack.head-stack .find__lead,
.head-stack.head-stack .sec-head__side,
.head-stack.head-stack .press__lead {
  max-width: none;
  margin-top: 0.875rem;
  contain: inline-size;
}

.head-stack.head-stack .sec-head__lead {
  max-width: none;
}

/* Rangée d'en-tête : titre et sous-titre à gauche, bouton aligné en bas à droite */
.head-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Desktop : sur une seule rangée ; un titre très long se replie pour laisser
   la place au bouton plutôt que de le renvoyer à la ligne */
@media (min-width: 1024px) {
  .head-row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.head-row > .head-stack.head-stack {
  flex: 0 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.head-row__cta {
  flex: none;
}

/* Titre presse trop long pour une ligne à côté du bouton : coupure fixe sur
   deux lignes, que le sous-titre suit (largeur max = celle du titre) */
@media (min-width: 1024px) {
  .head-stack.head-stack.press__head .mac-h2 {
    max-width: 22em;
    text-wrap: wrap;
  }
}

.head-stack.head-stack > .mac-btn {
  margin-top: 1rem;
}

/* Cadrages : quatre coins de visée, comme sur une épreuve */
.marks {
  position: absolute;
  inset: 0.875rem;
  z-index: 3;
  pointer-events: none;
}

.marks i {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  border: 0 solid rgb(255 255 255 / 0.7);
}

.marks i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.marks i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.marks i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.marks i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Commutateur Particulier / Institutionnel */
.seg {
  position: relative;
  display: inline-flex;
  padding: 3px;
  background: var(--mac-white);
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
}

.seg button {
  position: relative;
  z-index: 1;
  min-height: 2.125rem;
  padding: 0 0.75rem;
  font-family: var(--mac-font-text);
  font-size: 0.78125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-slate-700);
  background: transparent;
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  transition: color var(--mac-dur-base) var(--mac-ease-out);
}

/* Sans JavaScript, le bouton actif porte son propre fond */
.seg button[aria-pressed="true"] {
  color: var(--mac-white);
  background: var(--mac-marine-900);
}

.seg.is-ready button[aria-pressed="true"] {
  background: transparent;
}

.seg__ink {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--seg-w, 0);
  background: var(--mac-marine-900);
  border-radius: 1px;
  transform: translateX(var(--seg-x, 0));
}

.seg.is-animated .seg__ink {
  transition: transform 350ms var(--mac-ease-out), width 350ms var(--mac-ease-out);
}

.seg--dark {
  background: transparent;
  border-color: var(--mac-marine-700);
}

.seg--dark button {
  color: var(--mac-brume-300);
}

.seg--dark button[aria-pressed="true"] {
  color: var(--mac-marine-900);
  background: var(--mac-white);
}

.seg--dark .seg__ink {
  background: var(--mac-white);
}


/* 1. En-tête — l'instrument de lecture
   ========================================================================== */
.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mac-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mac-dur-base) var(--mac-ease-out);
}

.hd.is-scrolled {
  border-bottom-color: var(--mac-filet);
}

/* Ligne 1 : bandeau nuit des réglages visiteur (desktop uniquement) */
.hd__top {
  display: none;
}

.hd__top-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 2.75rem;
}

.hd__who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hd__who-label,
.hd__seal {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-brume-300);
}

.hd__seal i {
  margin: 0 0.5rem;
  font-style: normal;
  color: var(--mac-or-500);
}

.seg--xs {
  padding: 2px;
}

.seg--xs button {
  min-height: 1.75rem;
  padding: 0 0.75rem;
  font-size: 0.75rem;
}

.seg--xs .seg__ink {
  top: 2px;
  bottom: 2px;
}

.hd__utils {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hd__util {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0;
  font-family: var(--mac-font-text);
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-white);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--mac-dur-base) var(--mac-ease-out);
}

.hd__util:hover {
  color: var(--mac-or-300);
}

.hd__util .ico {
  width: 1rem;
  height: 1rem;
  color: var(--mac-or-500);
}

.hd__util + .hd__util {
  padding-left: 1.5rem;
  border-left: 1px solid var(--mac-marine-700);
  min-height: 1rem;
}

.hd__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--home-header-h);
  transition: height var(--mac-dur-slow) var(--mac-ease-out);
}

.hd.is-scrolled .hd__bar {
  height: calc(var(--home-header-h) - 0.75rem);
}

.hd__logo {
  display: flex;
  flex: none;
}

.hd__logo img {
  width: auto;
  height: 1.875rem;
}

.hd__nav,
.hd__client,
.hd__open,
.hd__lang {
  display: none;
}

.hd__spacer {
  flex: 1;
}

.hd__client-icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mac-marine-900);
  border: 1px solid var(--mac-marine-900);
  border-radius: var(--mac-radius-1);
}

.hd__client {
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-size: var(--mac-fs-small);
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
  text-decoration: none;
  background-image: linear-gradient(var(--mac-or-500), var(--mac-or-500));
  background-repeat: no-repeat;
  background-position: 0.5rem calc(100% - 0.625rem);
  background-size: 0 1px;
  transition: background-size var(--mac-dur-slow) var(--mac-ease-out);
}

.hd__client:hover {
  background-size: calc(100% - 1rem) 1px;
}

.hd__client .ico {
  width: 1rem;
  height: 1rem;
}

.hd__lang {
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  font-family: var(--mac-font-text);
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
  background: none;
  border: 0;
  cursor: pointer;
}

.hd__lang .ico {
  width: 1rem;
  height: 1rem;
}

/* Burger à deux traits inégaux : le second s'allonge au survol */
.hd__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0.4375rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6875rem;
  background: transparent;
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
  cursor: pointer;
}

.hd__burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--mac-marine-900);
  transition: width var(--mac-dur-base) var(--mac-ease-out);
}

.hd__burger span:last-child {
  width: 60%;
}

.hd__burger:hover span:last-child {
  width: 100%;
}

/* Ligne de lecture : 1 px doré qui mesure l'avancée dans la page */
.hd__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--mac-or-500);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

.hd__nav {
  position: relative;
  margin-left: 2rem;
}

.hd__nav ul {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hd__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.78125rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mac-marine-900);
  text-decoration: none;
}

/* Filet doré qui glisse d'un lien à l'autre */
.hd__ink {
  position: absolute;
  left: 0;
  bottom: 0.5rem;
  width: var(--ink-w, 0);
  height: 1px;
  background: var(--mac-or-500);
  opacity: var(--ink-o, 0);
  transform: translateX(var(--ink-x, 0));
  transition:
    transform 400ms var(--mac-ease-out),
    width 400ms var(--mac-ease-out),
    opacity var(--mac-dur-base) var(--mac-ease-out);
}

@media (min-width: 768px) {
  .hd__logo img { height: 2rem; }
  .hd__client-icon { display: none; }
  .hd__client,
  .hd__lang { display: inline-flex; }
  .hd__open { display: inline-flex; }
}

/* Desktop : deux lignes. Les réglages montent dans le bandeau nuit,
   la ligne blanche ne garde que logo, navigation et bouton or. */
@media (min-width: 1024px) {
  .hd__top {
    display: block;
    max-height: 2.75rem;
    overflow: hidden;
    background: var(--mac-marine-950);
    transition: max-height var(--mac-dur-slow) var(--mac-ease-out);
  }

  .hd.is-scrolled .hd__top {
    max-height: 0;
  }

  .hd__nav { display: block; margin-left: 3rem; }
  .hd__nav ul { gap: 2.25rem; }
  .hd__nav a { font-size: 0.8125rem; }
  .hd__burger,
  .hd__client,
  .hd__client-icon,
  .hd__lang { display: none; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hd__seal { display: none; }
}

/* Menu plein écran (mobile et tablette) */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
}

.menu[open] {
  display: flex;
  flex-direction: column;
  animation: menu-in 400ms var(--mac-ease-out);
}

.menu::backdrop {
  background: rgb(6 24 44 / 0.5);
}

@keyframes menu-in {
  from { opacity: 0; translate: 0 -0.5rem; }
}

.menu__top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: var(--home-header-h);
  border-bottom: 1px solid var(--mac-marine-700);
}

.menu__top img {
  width: auto;
  height: 1.875rem;
}

.menu__close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mac-white);
  background: none;
  border: 1px solid var(--mac-marine-700);
  border-radius: var(--mac-radius-1);
  cursor: pointer;
}

.menu__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2rem;
  padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
}

.menu__nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.125rem 0;
  font-family: var(--mac-font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: var(--mac-fw-light);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--mac-white);
  text-decoration: none;
  border-bottom: 1px solid var(--mac-marine-700);
}

.menu__num {
  font-family: var(--mac-font-text);
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.1em;
  color: var(--mac-or-300);
  font-variant-numeric: tabular-nums;
}

.menu__profile {
  align-self: flex-start;
}

.menu__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: auto;
}

@media (min-width: 1024px) {
  .menu[open] { display: none; }
}


/* 2. Hero — la ligne d'horizon
   ========================================================================== */
.hero {
  overflow: clip;
  padding-bottom: var(--mac-space-7);
}

.hero__grid {
  display: grid;
}

.hero__window {
  position: relative;
  order: -1;
  margin-inline: calc(-1 * var(--mac-gutter));
  aspect-ratio: 4 / 3;
}

/* La photo est découpée par la courbe montante du logo MAC SA */
.hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: url(#mac-curve);
}

.hero__curve {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: curve-draw 1.8s 0.3s var(--mac-ease-out) both;
}

.hero__curve path {
  fill: none;
  stroke: var(--mac-or-500);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@keyframes curve-draw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(-2px -2px -2px -2px); }
}

/* Changement de pays : un volet qui balaie de droite à gauche */
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.1s var(--mac-ease-in-out);
}

.hero__slide.is-active {
  z-index: 2;
  clip-path: inset(0);
}

.hero__slide.is-prev {
  z-index: 1;
  clip-path: inset(0);
}

.hero__slide > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__slide > .ph,
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cadrage : le sujet de chaque ville reste dans la partie libérée par la courbe */
.hero__img--tn { object-position: 60% 50%; }
.hero__img--dz { object-position: 50% 45%; }
.hero__img--ci { object-position: 60% 62%; }

.hero__slide.is-active img {
  animation: hero-zoom 9s linear both;
}

@keyframes hero-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.ph--hero .ph__label {
  left: 45%;
  bottom: 3.75rem;
  max-width: 20rem;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(6 24 44 / 0.85) 0%, rgb(6 24 44 / 0) 35%);
}

.hero__index {
  position: absolute;
  z-index: 5;
  left: var(--mac-gutter);
  right: var(--mac-gutter);
  bottom: 0.875rem;
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.hero__tab {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0 0;
  font-family: var(--mac-font-text);
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--mac-white);
  background: none;
  border: 0;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--mac-dur-base) var(--mac-ease-out);
}

.hero__tab:hover,
.hero__tab.is-active {
  opacity: 1;
}

.hero__tab-num {
  margin-right: 0.5rem;
  color: var(--mac-or-300);
  font-variant-numeric: tabular-nums;
}

.hero__bar {
  display: block;
  height: 2px;
  margin-top: 0.625rem;
  overflow: hidden;
  background: rgb(255 255 255 / 0.28);
}

.hero__bar i {
  display: block;
  height: 100%;
  background: var(--mac-or-500);
  transform: scaleX(0);
  transform-origin: left center;
}

.hero__tab.is-active .hero__bar i {
  animation: hero-bar var(--slide-dur, 6s) linear forwards;
}

.hero.is-paused .hero__tab.is-active .hero__bar i {
  animation-play-state: paused;
}

.hero.is-stopped .hero__tab.is-active .hero__bar i {
  animation: none;
  transform: scaleX(1);
}

@keyframes hero-bar {
  to { transform: scaleX(1); }
}

.hero__pause {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--mac-white);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: var(--mac-radius-1);
  cursor: pointer;
}

.hero__pause .ico {
  width: 0.875rem;
  height: 0.875rem;
}

.hero__pause .ico--play,
.hero.is-stopped .hero__pause .ico--pause {
  display: none;
}

.hero.is-stopped .hero__pause .ico--play {
  display: block;
}

/* Sur petit écran, seul l'onglet actif affiche son nom */
@media (max-width: 479px) {
  .hero__tab:not(.is-active) {
    flex: 0 0 2.25rem;
  }
  .hero__tab:not(.is-active) .hero__tab-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-top: 2rem;
}

.hero__title {
  max-width: 11.5em;
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: var(--home-fs-hero);
  font-weight: var(--mac-fw-light);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--mac-white);
  text-wrap: balance;
}

.hero__title b {
  font-weight: var(--mac-fw-medium);
}

.hero__lead {
  max-width: 34rem;
  margin: 0;
  font-size: var(--mac-fs-lead);
  line-height: 1.6;
  color: var(--mac-brume-300);
}

.hero__eyebrow {
  transition: opacity var(--mac-dur-base) var(--mac-ease-out);
}

.hero__eyebrow.is-swapping {
  opacity: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.hero__actions .mac-btn {
  flex: 1 1 100%;
}

@media (min-width: 480px) {
  .hero__actions .mac-btn { flex: 0 0 auto; }
}

@media (min-width: 640px) {
  .hero__window { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
  .hero {
    padding-bottom: 0;
  }

  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    /* En-tête (2 lignes) + hero : la réglette MAC Markets affleure sous la ligne de flottaison */
    min-height: clamp(36rem, calc(100svh - var(--home-header-h) - 2.75rem - 4.5rem), 50rem);
  }

  /* La fenêtre photo part de la 5e colonne (juste après les boutons)
     et sort jusqu'au bord droit ; la courbe masque la zone du texte */
  .hero__window {
    order: 0;
    grid-column: 5 / -1;
    grid-row: 1;
    margin: 0 calc(-1 * var(--bleed)) 0 0;
    aspect-ratio: auto;
  }

  /* Le titre déborde sur la photo : grille cassée volontairement */
  .hero__copy {
    position: relative;
    z-index: 6;
    grid-column: 1 / 9;
    grid-row: 1;
    align-self: center;
    padding: 3.5rem 0 7.5rem;
  }

  /* La courbe remonte jusqu'au bord haut : un voile nuit garde les onglets pays lisibles */
  .hero__veil {
    background: linear-gradient(180deg, rgb(6 24 44 / 0.75) 0%, rgb(6 24 44 / 0) 22%);
  }

  .hero__index {
    top: 1.75rem;
    bottom: auto;
    left: 2rem;
    right: calc(var(--bleed) - 0.5rem);
  }

  .ph--hero .ph__label {
    left: 52%;
    right: calc(var(--bleed) + 1.5rem);
    bottom: 5.5rem;
  }
}

@media (min-width: 1280px) {
  .strip__cell { padding-inline: 1.75rem; }
  .strip__cta { padding-right: 0; }
}


/* 3. Bandeau MAC Markets — la réglette de cote
   ========================================================================== */
.strip {
  z-index: 6;
  background: var(--mac-white);
  border-top: 1px solid var(--mac-or-500);
  border-bottom: 1px solid var(--mac-filet);
}

.strip__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  padding-block: 1.5rem;
}

.strip__id {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.strip__title {
  margin: 0;
  font-family: var(--mac-font-text);
  font-size: 0.75rem;
  font-weight: var(--mac-fw-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mac-marine-900);
}

.strip__session {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.78125rem;
  color: var(--mac-slate-700);
  font-variant-numeric: tabular-nums;
}

.strip__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mac-hausse);
  animation: live 2.4s var(--mac-ease-out) infinite;
}

@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgb(31 122 77 / 0.45); }
  70%  { box-shadow: 0 0 0 8px rgb(31 122 77 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(31 122 77 / 0); }
}

.strip__label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: var(--mac-slate-700);
}

.strip__value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.625rem;
  margin: 0;
}

.strip__value .mac-num {
  font-size: var(--mac-fs-figure-m);
  font-weight: var(--mac-fw-semibold);
  letter-spacing: -0.01em;
  color: var(--mac-marine-900);
}

.strip__value .mac-delta {
  font-size: var(--mac-fs-small);
}

.strip__vol {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
}

.strip__chart {
  grid-column: 1 / -1;
}

.spark {
  width: 100%;
  height: auto;
  overflow: visible;
}

.spark__base {
  stroke: var(--mac-filet);
}

.spark__ticks {
  stroke: var(--mac-slate-400);
}

/* La courbe se trace à l'ouverture de la page */
.spark__line {
  fill: none;
  stroke: var(--mac-hausse);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: spark-draw 1.6s 0.4s var(--mac-ease-out) forwards;
}

.spark__dot {
  stroke: var(--mac-or-500);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0;
  animation: fade-in 0.4s 1.8s forwards;
}

@keyframes spark-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

.strip__cta {
  grid-column: 1 / -1;
}

.strip__cta .mac-btn {
  width: 100%;
}

@media (min-width: 768px) {
  .strip__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }
  .strip__chart { grid-column: auto; }
  .strip__cta { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  /* Réglette posée sur le bas du hero, qui fuit vers la droite */
  /* Moitié haute posée sur le hero ; moitié basse sur le fond ivoire des chiffres clés */
  .strip {
    margin-top: -3.5rem;
    background: linear-gradient(transparent 3.5rem, var(--mac-ivoire) 3.5rem);
    border: 0;
  }

  .strip__inner {
    grid-template-columns: auto auto minmax(7rem, 14rem) minmax(max-content, 1fr) auto;
    gap: 0;
    align-items: stretch;
    margin-right: calc(-1 * var(--bleed));
    padding: 0 var(--bleed) 0 0;
    background: var(--mac-white);
    border-top: 1px solid var(--mac-or-500);
    box-shadow: var(--mac-shadow-3);
  }

  .strip__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.125rem;
    border-left: 1px solid var(--mac-filet);
  }

  .strip__title,
  .strip__session,
  .strip__value {
    white-space: nowrap;
  }

  .strip__cell:first-child {
    border-left: 0;
  }

  .strip__id {
    grid-column: auto;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .strip__value .mac-num {
    font-size: 1.625rem;
  }

  .strip__chart {
    padding-block: 1rem;
  }

  .strip__cta {
    grid-column: auto;
    padding-right: 0;
    border-left: 0;
  }

  .strip__cta .mac-btn {
    width: auto;
  }
}


/* 4. Expertises — le diaporama des métiers
   Mobile et tablette : cinq fiches empilées (photo, numéro, titre, texte).
   Desktop : un métier à la fois ; home.js passe au suivant toutes les
   6 secondes quand le bloc est visible, sans jamais bloquer le
   défilement de la page.
   ========================================================================== */
.xp {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

.xp__head {
  margin-bottom: 2rem;
}

/* Introduction directement sous le titre */
.xp__lead {
  margin-top: 0.875rem;
}

@media (min-width: 1024px) {
  .xp__head .sec-head__main {
    grid-column: 1 / 7;
  }

  .xp__head {
    display: block;
  }

  .xp__head .mac-h2 {
    max-width: none;
  }
}

.xp__steps {
  display: grid;
  gap: 3rem;
}

.xp__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.xp__mimg {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.75rem;
}

.xp__num {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  color: var(--mac-or-700);
  font-variant-numeric: tabular-nums;
}

.xp__num span {
  color: var(--mac-slate-400);
}

.xp__title {
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: var(--home-fs-xp);
  font-weight: var(--mac-fw-light);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--mac-marine-900);
  text-wrap: balance;
}

.xp__text {
  max-width: 26rem;
  margin: 0 0 0.5rem;
  font-size: var(--mac-fs-lead);
  line-height: 1.6;
  color: var(--mac-slate-700);
}

.xp__index,
.xp__media {
  display: none;
}

@media (min-width: 1024px) {
  /* Trois rangées compactes : l'en-tête, le métier (texte + photo), la progression */
  .xp__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 20rem auto;
    column-gap: 1.5rem;
    row-gap: 2rem;
  }

  .xp__head {
    grid-column: 1 / 7;
    grid-row: 1;
    margin-bottom: 0;
  }

  .xp__copy {
    grid-column: 1 / 6;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Les cinq fiches se superposent ; seule l'active est visible */
  .xp__steps {
    display: grid;
    gap: 0;
  }

  .xp__step {
    grid-area: 1 / 1;
    gap: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.5rem);
    transition:
      opacity 500ms var(--mac-ease-out),
      transform 700ms var(--mac-ease-out),
      visibility 0s 500ms;
  }

  .xp__step.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 150ms, 150ms, 0s;
  }

  .xp__mimg {
    display: none;
  }

  .xp__title {
    font-size: clamp(2rem, 1rem + 1.8vw, 2.625rem);
  }

  /* Barre de progression horizontale, pleine largeur sous la scène :
     cinq segments qui se remplissent d'or au fil du défilement */
  .xp__index {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .xp__tab {
    display: block;
    min-width: 0;
    padding: 0 0 0.25rem;
    font-family: var(--mac-font-text);
    font-size: 0.75rem;
    font-weight: var(--mac-fw-semibold);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--mac-slate-400);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--mac-dur-base) var(--mac-ease-out);
  }

  .xp__tab:hover,
  .xp__tab.is-active {
    color: var(--mac-marine-900);
  }

  .xp__tab-num {
    margin-right: 0.625rem;
    color: var(--mac-or-700);
    font-variant-numeric: tabular-nums;
  }

  .xp__bar {
    display: block;
    height: 2px;
    margin-bottom: 0.875rem;
    overflow: hidden;
    background: var(--mac-filet);
  }

  .xp__bar i {
    display: block;
    height: 100%;
    background: var(--mac-or-500);
    transform: scaleX(var(--fill, 0));
    transform-origin: left center;
  }

  /* Fenêtre photo : colonnes 7 à 12, de l'en-tête jusqu'au bas du métier */
  .xp__media {
    display: block;
    grid-column: 7 / -1;
    grid-row: 1 / 3;
  }

  .xp__frame {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: var(--mac-marine-900);
  }

  /* Changement de métier : volet qui monte depuis le bas */
  .xp__shot {
    position: absolute;
    inset: 0;
    height: 100%;
    clip-path: inset(100% 0 0 0);
    transform: scale(1.06);
    transition: clip-path 1s var(--mac-ease-in-out), transform 1.6s var(--mac-ease-out);
  }

  .xp__shot.is-active {
    z-index: 1;
    clip-path: inset(0);
    transform: none;
  }

  .xp__shot.is-prev {
    clip-path: inset(0);
    transform: none;
  }

  .xp__shot--trade    { object-position: 70% 50%; }
  .xp__shot--am       { object-position: 50% 45%; }
  .xp__shot--advice   { object-position: 45% 50%; }
  .xp__shot--pe       { object-position: 50% 30%; }
  .xp__shot--research { object-position: 55% 50%; }

  .xp__veil {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(0deg, rgb(6 24 44 / 0.7) 0%, rgb(6 24 44 / 0) 35%);
  }

  .xp__frame .marks {
    z-index: 3;
    inset: 1.25rem;
  }

  .xp__count {
    position: absolute;
    z-index: 4;
    left: 1.75rem;
    bottom: 1.25rem;
    margin: 0;
    font-family: var(--mac-font-text);
    font-size: 3rem;
    font-weight: var(--mac-fw-light);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--mac-white);
    font-variant-numeric: tabular-nums;
  }

  .xp__count small {
    font-size: 1.125rem;
    letter-spacing: 0;
    color: var(--mac-brume-300);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .xp__step,
  .xp__shot {
    transform: none;
    transition-duration: 0s;
  }
}


/* 5. Solutions d'investissement — le fonds vedette
   Carte nuit (.spot) : performance en or et courbe tracée par home.js.
   Liste (.fpick) : un clic met le fonds en vedette.
   ========================================================================== */
.sol {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

.sol__grid {
  display: grid;
  gap: 2.5rem;
}


/* L'écart avec la suite est déjà porté par la grille */
.sol__head {
  margin-bottom: 0;
}

.sol__show {
  display: grid;
  gap: 1.5rem;
}

/* Carte vedette */
.spot {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  overflow: hidden;
  color: var(--mac-white);
  background: var(--mac-marine-900);
}

.spot__body {
  transition: opacity 300ms var(--mac-ease-out), transform 500ms var(--mac-ease-out);
}

.spot.is-swapping .spot__body {
  opacity: 0;
  transform: translateY(0.5rem);
}

.spot__class {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-or-300);
}

.spot__name {
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  font-weight: var(--mac-fw-regular);
  line-height: 1.2;
  color: var(--mac-white);
}

/* La performance est le sujet : très grand, en or */
.spot__fig {
  margin: 1.5rem 0 0;
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  font-weight: var(--mac-fw-light);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--mac-or-500);
}

.spot__sign {
  margin-right: 0.03em;
  font-size: 0.55em;
  font-weight: var(--mac-fw-regular);
  vertical-align: 0.35em;
}

.spot__pct {
  font-size: 0.38em;
  font-weight: var(--mac-fw-regular);
  letter-spacing: 0;
}

.spot__period {
  margin: 0.75rem 0 0;
  font-size: var(--mac-fs-caption);
  color: var(--mac-brume-300);
}

/* Courbe : pleine largeur de la carte, du bord gauche au bord droit */
.spot__chart {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  height: clamp(8rem, 6rem + 6vw, 12rem);
  margin: 1.5rem -1.5rem 0;
  overflow: visible;
}

.spot__grid {
  fill: none;
  stroke: rgb(255 255 255 / 0.08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.spot__line {
  fill: none;
  stroke: var(--mac-or-500);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--draw, 0);
}

.spot__area {
  opacity: var(--area, 1);
  transition: opacity 600ms var(--mac-ease-out);
}

.spot.is-drawing .spot__line {
  transition: stroke-dashoffset 1.4s var(--mac-ease-out);
}

/* Point final : dernière valeur, posé par home.js */
.spot__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--mac-or-500);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgb(201 163 91 / 0.2);
  opacity: 0;
  transition: opacity 300ms var(--mac-ease-out);
}

.spot.is-drawn .spot__dot {
  opacity: 1;
}

.spot__link {
  margin-top: 1.25rem;
  align-self: flex-start;
  --mac-link: var(--mac-white);
  color: var(--mac-white);
}

/* Liste des fonds */
.sol__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mac-marine-900);
}

.sol__list li {
  border-bottom: 1px solid var(--mac-filet);
}

.fpick {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "class perf"
    "name  perf";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  width: 100%;
  padding: 1.125rem 1rem 1.125rem 1.25rem;
  font: inherit;
  text-align: left;
  color: var(--mac-marine-900);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--mac-dur-base) var(--mac-ease-out);
}

/* Repère doré à gauche du fonds en vedette */
.fpick::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--mac-or-500);
  transform: scaleY(0);
  transition: transform var(--mac-dur-slow) var(--mac-ease-out);
}

.fpick:hover,
.fpick.is-active {
  background: var(--mac-ivoire);
}

.fpick.is-active::before {
  transform: scaleY(1);
}

.fpick__class {
  grid-area: class;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mac-slate-600);
}

.fpick__name {
  grid-area: name;
  font-family: var(--mac-font-display);
  font-size: 1.125rem;
  font-weight: var(--mac-fw-medium);
  line-height: 1.25;
}

.fpick__perf {
  grid-area: perf;
  font-size: 1.5rem;
  font-weight: var(--mac-fw-light);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.fpick.is-active .fpick__perf {
  color: var(--mac-or-700);
}

@media (min-width: 1024px) {
  .sol__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: center;
  }

  /* Titre, introduction et lien empilés dans la colonne de gauche */
  .sol__head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    grid-column: 1 / 5;
    padding-right: 1.5rem;
  }

  .sol__head .mac-h2 {
    max-width: 12em;
  }

  /* Fonds vedette et liste, en format réduit, à droite */
  .sol__show {
    grid-column: 5 / -1;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .spot {
    padding: 1.75rem 1.75rem 1.5rem;
  }

  .spot__fig {
    font-size: clamp(2.75rem, 1.6rem + 2.4vw, 4rem);
  }

  .spot__chart {
    width: calc(100% + 3.5rem);
    height: 8.5rem;
    margin: auto -1.75rem 0;
    padding-top: 1.25rem;
  }

  .sol__list {
    align-content: center;
    border-top: 0;
  }

  .sol__list li:first-child {
    border-top: 1px solid var(--mac-filet);
  }

  .fpick {
    padding: 1.125rem 1rem 1.125rem 1.5rem;
  }

  .fpick__name {
    font-size: 1rem;
  }

  .fpick__perf {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spot__body,
  .spot.is-drawing .spot__line {
    transition: none;
  }
}


/* 6. Chiffres clés — une ligne, cinq chiffres
   Mobile : deux colonnes ; desktop : cinq colonnes séparées par des filets.
   ========================================================================== */
.kf {
  padding-block: var(--mac-section-y);
  background-color: var(--mac-ivoire);
}

.kf__head {
  margin-bottom: 3rem;
}

.kf__head .mac-h2 {
  margin: 0;
}

.kf__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--mac-marine-900);
}

/* Le chiffre au-dessus, le libellé dessous (dt reste premier pour la lecture) */
.kf__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.75rem;
}

.kf__item dd {
  display: flex;
  align-items: baseline;
  margin: 0;
  font-size: clamp(2.25rem, 1.6rem + 1.7vw, 3rem);
  font-weight: var(--mac-fw-light);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--mac-marine-900);
}

.kf__item--gold dd {
  color: var(--mac-or-700);
}

.kf__unit {
  margin-left: 0.5rem;
  font-size: 0.9375rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0;
  color: var(--mac-or-700);
}

.kf__item dt {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--mac-slate-700);
}

@media (min-width: 1024px) {
  .kf__row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .kf__item {
    padding: 0.25rem 1.5rem;
    border-left: 1px solid var(--mac-filet);
  }

  .kf__item:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* 7. Références — le bandeau défilant
   Titre centré, puis une ligne de logos en boucle continue entre deux filets.
   La piste contient 4 jeux identiques ; elle glisse de la moitié de sa
   largeur (2 jeux), puis repart sans à-coup. Pause au survol.
   ========================================================================== */
.refs {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  background: var(--mac-ivoire);
}

.refs__head {
  margin-bottom: 2rem;
  text-align: center;
}

.refs__head .mac-eyebrow {
  justify-content: center;
}

.refs__head p {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  font-size: 0.9375rem;
  color: var(--mac-slate-700);
}

/* Bandeau pleine largeur, bords estompés */
.refs__band {
  overflow: hidden;
  /* Le masque isole le bandeau : son propre fond permet au « multiply »
     des logos de faire disparaître leur blanc */
  background: var(--mac-ivoire);
  border-top: 1px solid var(--mac-filet);
  border-bottom: 1px solid var(--mac-filet);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.refs__track {
  display: flex;
  width: max-content;
  background: var(--mac-ivoire); /* la piste animée isole aussi les logos */
  animation: refs-scroll 40s linear infinite;
}

.refs__band:hover .refs__track {
  animation-play-state: paused;
}

@keyframes refs-scroll {
  to { transform: translateX(-50%); }
}

.refs__set {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.refs__set li {
  display: grid;
  place-items: center;
  width: 13rem;
  height: 7rem;
  padding: 0 2rem;
}

/* Logos clients : en gris, ils reprennent leurs couleurs au survol */
.refs__logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 3.5rem;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  mix-blend-mode: multiply;
  transition: filter var(--mac-dur-slow) var(--mac-ease-out), opacity var(--mac-dur-slow) var(--mac-ease-out);
}

/* Le logo Poulina, très aéré dans son fichier, a besoin de plus de hauteur */
.refs__logo--airy {
  max-height: 4.75rem;
}

.refs__set li:hover .refs__logo {
  filter: none;
  opacity: 1;
}

.logo-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}

.logo-ph b {
  font-size: 0.9375rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1.25;
  color: var(--mac-slate-600);
}

.logo-ph small {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mac-slate-400);
}

/* Mouvement réduit : pas de défilement, un seul jeu centré */
@media (prefers-reduced-motion: reduce) {
  .refs__track {
    width: auto;
    justify-content: center;
    animation: none;
  }

  .refs__set[aria-hidden="true"] {
    display: none;
  }

  .refs__set {
    flex-wrap: wrap;
    justify-content: center;
  }

  .refs__band {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 767px) {
  .refs__set li {
    width: 10rem;
    height: 5.5rem;
    padding: 0 1.25rem;
  }

  .refs__track {
    animation-duration: 30s;
  }
}

/* 8. Profils clients — les onglets
   Un onglet actif à la fois (home.js). Sans JavaScript, tous les panneaux
   restent visibles l'un sous l'autre.
   ========================================================================== */
.pf {
  padding-block: var(--mac-section-y);
}

.pf__head {
  margin-bottom: 2.5rem;
}

/* Onglets : défilement horizontal sur mobile, filet doré sous l'actif */
.pf__tabs {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--mac-marine-700);
}

.pf__tabs::-webkit-scrollbar {
  display: none;
}

.pf__tab {
  position: relative;
  flex: none;
  padding: 0 0 1rem;
  font-family: var(--mac-font-text);
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mac-brume-500);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--mac-dur-base) var(--mac-ease-out);
}

.pf__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mac-or-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mac-dur-slow) var(--mac-ease-out);
}

.pf__tab:hover,
.pf__tab.is-active {
  color: var(--mac-white);
}

.pf__tab.is-active::after {
  transform: scaleX(1);
}

.pf__tab-num {
  margin-right: 0.625rem;
  color: var(--mac-or-300);
  font-variant-numeric: tabular-nums;
}

.pf__panels {
  display: grid;
}

.pf__panel {
  display: grid;
  gap: 1.5rem;
}

html.js .pf__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--mac-ease-out), visibility 0s 400ms;
}

html.js .pf__panel.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

html:not(.js) .pf__panel + .pf__panel {
  margin-top: 3rem;
}

.pf__photo {
  aspect-ratio: 16 / 10;
}

.pf__title {
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: var(--mac-fw-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mac-white);
}

.pf__tag {
  margin: 0.5rem 0 0;
  font-family: var(--mac-font-display);
  font-size: 1.0625rem;
  font-weight: var(--mac-fw-light);
  line-height: 1.4;
  color: var(--mac-brume-300);
}

.pf__list {
  display: grid;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mac-marine-700);
}

.pf__list li {
  padding: 0.625rem 0;
  font-size: 0.9375rem;
  color: var(--mac-brume-100);
  border-bottom: 1px solid var(--mac-marine-700);
}

/* Petit écran : les trois onglets restent visibles, libellés sur plusieurs lignes */
@media (max-width: 767px) {
  .pf__tabs {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1rem;
    overflow: visible;
  }

  .pf__tab {
    font-size: 0.6875rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
  }

  .pf__tab-num {
    display: block;
    margin: 0 0 0.25rem;
  }
}

@media (min-width: 768px) {
  /* Services sur deux colonnes */
  .pf__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .pf__tabs {
    gap: 3rem;
  }

  /* Image à gauche (5 colonnes), contenu à droite */
  .pf__panel {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: center;
  }

  .pf__photo {
    grid-column: 1 / 6;
    aspect-ratio: 4 / 3;
  }

  .pf__body {
    grid-column: 7 / -1;
  }

  .pf__title {
    font-size: 2rem;
  }
}

/* 9. Actualités — la une
   ========================================================================== */
.news {
  padding-block: var(--mac-section-y);
  background: var(--mac-ivoire);
}

.news__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.news__grid {
  display: grid;
  gap: 2.5rem;
}

.news__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.news__media .ph {
  position: absolute;
  inset: 0;
  transition: transform 900ms var(--mac-ease-out);
}

.news__media .marks {
  opacity: 0;
  transition: opacity var(--mac-dur-slow) var(--mac-ease-out), inset var(--mac-dur-slow) var(--mac-ease-out);
}

.news__lead:hover .news__media > :first-child {
  transform: scale(1.03);
}

.news__lead:hover .news__media .marks {
  inset: 1.25rem;
  opacity: 1;
}

.news__meta {
  margin: 1.25rem 0 0;
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--mac-ls-label);
  text-transform: uppercase;
  color: var(--mac-slate-600);
}

.news__cat {
  color: var(--mac-marine-900);
}

.news__title {
  max-width: 20em;
  margin: 0.75rem 0 0.75rem;
  font-family: var(--mac-font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  font-weight: var(--mac-fw-regular);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--mac-marine-900);
  text-wrap: balance;
}

.news__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news__lead:hover .mac-btn__label,
.brief:hover .mac-btn__label {
  background-size: 100% 1px, 100% 1px;
}

.news__lead:hover .mac-btn__arrow,
.brief:hover .mac-btn__arrow {
  transform: translateX(4px);
}

.news__lead:has(.news__link:focus-visible),
.brief:has(.news__link:focus-visible) {
  outline: 2px solid var(--mac-focus);
  outline-offset: 4px;
}

.news__link:focus-visible {
  outline: none;
}

.news__briefs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mac-marine-900);
}

.brief {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--mac-filet);
}

.brief__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.brief__media .ph {
  position: absolute;
  inset: 0;
  background-size: 1.5rem 1.5rem;
  transition: transform 900ms var(--mac-ease-out);
}

.brief:hover .brief__media > :first-child {
  transform: scale(1.05);
}

.brief .ph__label {
  left: 0.5rem;
  bottom: 0.375rem;
}

.brief__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brief .news__meta {
  margin: 0;
}

.brief__title {
  margin: 0.5rem 0 0.125rem;
  font-family: var(--mac-font-display);
  font-size: 1.0625rem;
  font-weight: var(--mac-fw-medium);
  line-height: 1.35;
  color: var(--mac-marine-900);
}

.brief .mac-btn--link {
  font-size: var(--mac-fs-small);
}

@media (min-width: 1024px) {
  .news__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }

  .news__lead {
    grid-column: 1 / 8;
  }

  /* Colonne de brèves séparée par un filet, comme une page de quotidien */
  .news__briefs {
    grid-column: 8 / -1;
    padding-left: 2rem;
    border-top: 0;
    border-left: 1px solid var(--mac-filet);
  }

  .brief {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.5rem 0;
  }

  .brief:first-child {
    padding-top: 0;
  }

  .brief__media {
    aspect-ratio: 4 / 5;
  }
}


/* 9 bis. Presse & médias — la revue de presse
   Fond marine ; fiches à angles vifs séparées par des filets. Un filet doré
   se trace en haut de la fiche au survol. Filtres : home.js.
   ========================================================================== */
.press {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

.press__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.press__intro .mac-h2 {
  max-width: 16em;
}

.press__lead {
  max-width: 36rem;
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mac-slate-700);
}

/* Filtres : étiquettes carrées, l'active en marine plein */
.press__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.press__filter {
  min-height: 2.25rem;
  padding: 0 1rem;
  font-family: var(--mac-font-text);
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mac-slate-700);
  background: transparent;
  border: 1px solid var(--mac-slate-400);
  border-radius: var(--mac-radius-1);
  cursor: pointer;
  transition: color var(--mac-dur-base) var(--mac-ease-out), background-color var(--mac-dur-base) var(--mac-ease-out), border-color var(--mac-dur-base) var(--mac-ease-out);
}

.press__filter:hover {
  color: var(--mac-marine-900);
  border-color: var(--mac-marine-900);
}

.press__filter.is-active {
  color: var(--mac-white);
  background: var(--mac-marine-900);
  border-color: var(--mac-marine-900);
}

/* Grille de fiches : bordures qui se chevauchent d'1 px (filets uniques),
   sans case vide colorée quand un filtre laisse une rangée incomplète */
.press__grid {
  display: grid;
  margin: 0;
  padding: 1px 0 0 1px;
  list-style: none;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-height: 13rem;
  margin: -1px 0 0 -1px;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--mac-white);
  border: 1px solid var(--mac-filet);
  transition: background-color var(--mac-dur-slow) var(--mac-ease-out);
}

.pcard[hidden] {
  display: none;
}

.pcard::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mac-or-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mac-dur-slow) var(--mac-ease-out);
}

.pcard:hover {
  background: var(--mac-ivoire);
}

.pcard:hover::before {
  transform: scaleX(1);
}

.pcard__type {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-or-700);
}

.pcard__title {
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: 1.1875rem;
  font-weight: var(--mac-fw-regular);
  line-height: 1.35;
  color: var(--mac-marine-900);
}

.pcard__title a {
  color: inherit;
  text-decoration: none;
}

/* Toute la fiche est cliquable */
.pcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.pcard__title a:focus-visible {
  outline: none;
}

.pcard:has(a:focus-visible) {
  outline: 2px solid var(--mac-focus);
  outline-offset: -2px;
}

.pcard__meta {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--mac-slate-600);
}

.pcard__go {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
  transition: color var(--mac-dur-base) var(--mac-ease-out);
}

.pcard:hover .pcard__go {
  color: var(--mac-or-700);
}

.press__empty {
  margin: 1.5rem 0 0;
  color: var(--mac-slate-700);
}

@media (min-width: 768px) {
  .press__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .press__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pcard {
    padding: 2rem 2rem 1.75rem;
  }
}

/* 10. Outils et application — le poste de travail
   ========================================================================== */
.tools {
  padding-block: var(--mac-section-y);
  background: var(--mac-ivoire);
}


/* Réglette d'outils : des cases d'instrument, pas des cartes */
.tools__strip {
  display: grid;
  border-top: 1px solid var(--mac-marine-900);
}

.tool {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  grid-template-areas: "glyph name go";
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0.5rem 1.25rem 0;
  color: var(--mac-marine-900);
  text-decoration: none;
  border-bottom: 1px solid var(--mac-filet);
  transition: background-color var(--mac-dur-slow) var(--mac-ease-out);
}

.tool:hover {
  background-color: var(--mac-white);
}

.tool:focus-visible {
  outline: 2px solid var(--mac-focus);
  outline-offset: -2px;
}

.tool__num {
  display: none;
}

/* Pictogrammes-données dessinés pour MAC SA ; un seul trait doré chacun */
.tool__glyph {
  grid-area: glyph;
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--mac-marine-900);
  stroke-width: 1.4;
}

.tool__glyph .soft {
  stroke: var(--mac-slate-400);
}

.tool__glyph .acc {
  stroke: var(--mac-or-500);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.tool__glyph .acc-dot {
  fill: var(--mac-or-500);
  stroke: none;
}

.tool:hover .tool__glyph .acc {
  animation: redraw 700ms var(--mac-ease-out);
}

@keyframes redraw {
  from { stroke-dashoffset: 1; }
}

.tool__name {
  grid-area: name;
  font-family: var(--mac-font-display);
  font-size: 1.125rem;
  font-weight: var(--mac-fw-medium);
  line-height: 1.3;
}

.tool__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--mac-fs-small);
  font-weight: var(--mac-fw-semibold);
}

.tool__arrow {
  color: var(--mac-or-700);
  transition: transform var(--mac-dur-base) var(--mac-ease-out);
}

.tool:hover .tool__arrow {
  transform: translateX(4px);
}

/* Panneau application : les écrans débordent vers le haut */
.app {
  position: relative;
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
  padding: 2.5rem 1.5rem 0;
}

.app__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.app__title {
  max-width: 14em;
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--mac-fw-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mac-white);
}

.app__list {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.app__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--mac-brume-100);
}

.app__list svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: var(--mac-brume-500);
  stroke-width: 2;
}

.app__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.app .mac-store {
  background-color: transparent;
  border-color: var(--mac-brume-700);
}

.app .mac-store:hover {
  background-color: var(--mac-marine-800);
  border-color: var(--mac-or-500);
}

.app__devices {
  position: relative;
}

@media (min-width: 768px) {
  .tools__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tool {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "glyph" "name" "go";
    align-items: start;
    gap: 1.25rem;
    min-height: 15rem;
    padding: 1.75rem 1.5rem 1.5rem;
    border-bottom: 0;
    border-left: 1px solid var(--mac-filet);
  }

  .tool:first-child {
    border-left: 0;
  }

  .tool__num {
    position: absolute;
    top: 1.75rem;
    right: 1.5rem;
    display: block;
    font-size: 0.75rem;
    font-weight: var(--mac-fw-semibold);
    letter-spacing: 0.1em;
    color: var(--mac-slate-600);
  }

  .tool__glyph {
    width: 3.5rem;
    height: 3.5rem;
  }

  .tool__name {
    font-size: 1.25rem;
  }

  .tool__go {
    align-self: end;
  }

  .app {
    padding: 3rem 2.5rem 0;
  }
}

@media (min-width: 1024px) {
  /* En-tête commun, puis les trois outils en pleine largeur, puis l'application */
  .tools > .mac-container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .tools__head,
  .tools__strip {
    grid-column: 1 / -1;
  }

  /* Outils compacts : pictogramme et numéro en tête, nom, action */
  .tool {
    gap: 0.75rem;
    min-height: 0;
    padding: 1.5rem 1.5rem 1.25rem;
  }

  .tool__num {
    top: 1.5rem;
  }

  .tool__glyph {
    width: 2.5rem;
    height: 2.5rem;
  }

  .tool__name {
    font-size: 1.125rem;
  }

  .app {
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: end;
    margin-top: 7rem;
    padding: 3rem 3.5rem 0;
  }

  .app__copy {
    grid-column: 1 / 6;
    align-self: center;
    padding-bottom: 3rem;
  }

  /* Les écrans ne débordent plus que légèrement vers le haut */
  .app__devices {
    grid-column: 6 / -1;
    margin-top: -7rem;
  }
}


/* 10 bis. Études de cas — les tombstones d'opérations
   Plaque ivoire à double cadre (code des banques d'affaires), montant en or.
   Le bouton fait monter le dos nuit qui porte la citation du client.
   ========================================================================== */
.cases {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

.cases__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.cases__head .mac-h2 {
  max-width: 14em;
}

.cases__lead {
  max-width: 32rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mac-slate-700);
}

.cases__grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tomb {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
  background: var(--mac-ivoire);
  border: 1px solid var(--mac-marine-900);
}

/* Second cadre intérieur, en filet fin */
.tomb::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid var(--mac-filet);
  pointer-events: none;
}

.tomb__face {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding: 2.25rem 1.75rem 1.5rem;
}

/* Emplacement du logo client */
.tomb__logo {
  display: grid;
  place-items: center;
  gap: 0.125rem;
  width: 100%;
  min-height: 3.5rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--mac-filet);
}

.tomb__logo b {
  font-family: var(--mac-font-display);
  font-size: 1.125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
}

.tomb__logo small {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mac-slate-400);
}

.tomb__op {
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-slate-700);
}

.tomb__amount {
  margin: 0.75rem 0 0;
  font-size: clamp(2rem, 1.6rem + 0.9vw, 2.375rem);
  font-weight: var(--mac-fw-light);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mac-or-700);
}

.tomb__amount span {
  font-size: 0.4em;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0;
}

.tomb__year {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--mac-slate-600);
}

.tomb__role {
  margin: auto 0 0;
  padding-top: 1.25rem;
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
}

/* Dos de la plaque : la citation, sur fond nuit */
.tomb__back {
  position: absolute;
  inset: 0 0 3.25rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1.75rem 1rem;
  text-align: left;
  background: var(--mac-marine-900);
  clip-path: inset(100% 0 0 0);
  visibility: hidden;
  transition: clip-path 600ms var(--mac-ease-in-out), visibility 0s 600ms;
}

.tomb.is-open .tomb__back {
  clip-path: inset(0);
  visibility: visible;
  transition-delay: 0s;
}

.tomb__quote {
  position: relative;
  margin: 0;
  padding-top: 2.25rem;
}

.tomb__quote::before {
  content: "“";
  position: absolute;
  top: -1rem;
  left: -0.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--mac-or-500);
}

.tomb__quote p {
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: 1.0625rem;
  font-weight: var(--mac-fw-light);
  line-height: 1.5;
  color: var(--mac-white);
}

.tomb__who {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--mac-marine-700);
}

.tomb__who b {
  font-size: 0.875rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-white);
}

.tomb__who span {
  font-size: 0.8125rem;
  color: var(--mac-brume-300);
}

/* Bouton en pied de plaque, au-dessus du dos */
.tomb__toggle {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0 1rem;
  font-family: var(--mac-font-text);
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-white);
  background: var(--mac-marine-900);
  border: 0;
  cursor: pointer;
  transition: background-color var(--mac-dur-base) var(--mac-ease-out);
}

.tomb__toggle:hover {
  background: var(--mac-marine-800);
}

.tomb__toggle:focus-visible {
  outline: 2px solid var(--mac-or-300);
  outline-offset: -4px;
}

.tomb__arrow {
  color: var(--mac-or-500);
  transition: transform var(--mac-dur-base) var(--mac-ease-out);
}

.tomb.is-open .tomb__arrow {
  transform: rotate(180deg);
}

@media (min-width: 640px) {
  .cases__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .cases__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: end;
  }

  .cases__head > div {
    grid-column: 1 / 7;
  }

  .cases__lead {
    grid-column: 8 / -1;
  }

  .cases__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tomb {
    min-height: 23rem;
  }
}

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

/* 10 ter. Engagement RSE — la finance responsable
   Intro à gauche, quatre piliers en 2 × 2 à droite, séparés par des filets.
   Pictogrammes au trait, un seul trait doré chacun (comme les outils).
   ========================================================================== */
.rse {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

.rse__grid {
  display: grid;
}

.rse__pillars {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mac-marine-900);
}

.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas:
    "glyph num"
    "glyph title"
    "glyph text";
  column-gap: 1.25rem;
  align-content: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--mac-filet);
}

.pillar__glyph {
  grid-area: glyph;
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--mac-marine-900);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pillar__glyph .acc {
  stroke: var(--mac-or-500);
  stroke-width: 1.6;
}

.pillar__num {
  grid-area: num;
  margin: 0;
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  color: var(--mac-or-700);
}

.pillar__title {
  grid-area: title;
  margin: 0.375rem 0 0;
  font-family: var(--mac-font-display);
  font-size: 1.25rem;
  font-weight: var(--mac-fw-medium);
  line-height: 1.3;
  color: var(--mac-marine-900);
}

.pillar__text {
  grid-area: text;
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mac-slate-700);
}

@media (min-width: 768px) {
  .rse__pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pillar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "glyph" "num" "title" "text";
    padding: 2rem 2rem 2rem 0;
  }

  .pillar:nth-child(even) {
    padding-left: 2rem;
    border-left: 1px solid var(--mac-filet);
  }

  .pillar__glyph {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 1024px) {
  /* Les quatre piliers sur une rangée, sous l'en-tête commun */
  .rse__pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pillar,
  .pillar:nth-child(even) {
    padding: 2rem 1.75rem 0.5rem;
    border-bottom: 0;
    border-left: 1px solid var(--mac-filet);
  }

  .pillar:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* 11. Rappel CTA — la signature
   ========================================================================== */
.cta {
  padding-block: var(--mac-section-y) calc(var(--mac-section-y) * 0.75);
}

.cta__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}

.cta__title {
  max-width: 13em;
  margin: 0;
  font-family: var(--mac-font-display);
  font-size: var(--home-fs-cta);
  font-weight: var(--mac-fw-light);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--mac-white);
  text-wrap: balance;
}

.cta__lead {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  font-size: var(--mac-fs-lead);
  line-height: 1.6;
  color: var(--mac-brume-300);
}

.cta__actions {
  display: grid;
  gap: 0.75rem;
}

.cta__actions .ico {
  width: 1rem;
  height: 1rem;
}

.cta__rdv {
  justify-self: start;
}

@media (min-width: 1024px) {
  .cta__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .cta__copy    { grid-column: 1 / 9; }
  .cta__actions { grid-column: 9 / -1; }
}


/* 11 bis. Nous trouver — les bureaux du Groupe
   Pays en onglets verticaux (filet doré sur l'actif), bureaux en accordéon
   <details> natif : fonctionne sans JavaScript. Onglets : home.js.
   ========================================================================== */
.find {
  padding-block: var(--mac-section-y);
  background: var(--mac-ivoire);
}

.find__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.find__head .mac-h2 {
  max-width: 14em;
}

.find__lead {
  max-width: 32rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mac-slate-700);
}

.find__body {
  display: grid;
  gap: 2rem;
}

/* Pays : rangée défilante sur mobile, colonne verticale sur desktop */
.find__countries {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--mac-filet);
}

.find__country {
  position: relative;
  display: grid;
  flex: none;
  padding: 0 0 1rem;
  font-family: var(--mac-font-display);
  font-size: 1.125rem;
  font-weight: var(--mac-fw-regular);
  text-align: left;
  color: var(--mac-slate-600);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--mac-dur-base) var(--mac-ease-out);
}

.find__country::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mac-or-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mac-dur-slow) var(--mac-ease-out);
}

.find__country:hover,
.find__country.is-active {
  color: var(--mac-marine-900);
}

.find__country.is-active::after {
  transform: scaleX(1);
}

.find__num {
  font-family: var(--mac-font-text);
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.1em;
  color: var(--mac-or-700);
}

.find__count {
  font-family: var(--mac-font-text);
  font-size: 0.75rem;
  color: var(--mac-slate-400);
}

@media (max-width: 479px) {
  .find__countries {
    gap: 1rem;
  }

  .find__country {
    font-size: 1rem;
  }
}

html.js .find__panel:not(.is-active) {
  display: none;
}

html:not(.js) .find__panel + .find__panel {
  margin-top: 2rem;
}

/* Bureaux en accordéon */
.find__panel {
  border-top: 1px solid var(--mac-marine-900);
}

.office {
  border-bottom: 1px solid var(--mac-filet);
}

.office summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name sign"
    "city sign";
  align-items: center;
  column-gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}

.office summary::-webkit-details-marker {
  display: none;
}

.office summary:focus-visible {
  outline: 2px solid var(--mac-focus);
  outline-offset: 2px;
}

.office__name {
  grid-area: name;
  font-family: var(--mac-font-display);
  font-size: 1.25rem;
  font-weight: var(--mac-fw-medium);
  color: var(--mac-marine-900);
}

.office__city {
  grid-area: city;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mac-slate-600);
}

/* Signe + / − dans un carré, comme ailleurs sur la page */
.office__sign {
  grid-area: sign;
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--mac-slate-400);
  border-radius: var(--mac-radius-1);
  transition: background-color var(--mac-dur-slow) var(--mac-ease-out), border-color var(--mac-dur-slow) var(--mac-ease-out);
}

.office__sign::before,
.office__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1px;
  background: var(--mac-marine-900);
  transform: translate(-50%, -50%);
  transition: transform var(--mac-dur-slow) var(--mac-ease-out), background-color var(--mac-dur-slow);
}

.office__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.office[open] .office__sign {
  background: var(--mac-marine-900);
  border-color: var(--mac-marine-900);
}

.office[open] .office__sign::before,
.office[open] .office__sign::after {
  background: var(--mac-white);
}

.office[open] .office__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.office__body {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
  padding: 0 0 1.75rem;
}

.office__body address {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mac-slate-700);
}

.office__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
  font-size: 1rem;
}

.office__contact a {
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
  text-decoration: none;
}

.office__contact a:hover {
  color: var(--mac-or-700);
}

@media (min-width: 1024px) {
  .find__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: end;
  }

  .find__head > div {
    grid-column: 1 / 7;
  }

  .find__lead {
    grid-column: 8 / -1;
  }

  .find__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: start;
  }

  /* Colonne des pays, filet doré vertical sur l'actif */
  .find__countries {
    grid-column: 1 / 4;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    border-bottom: 0;
    border-left: 1px solid var(--mac-filet);
  }

  .find__country {
    padding: 0.875rem 0 0.875rem 1.25rem;
    font-size: 1.25rem;
  }

  .find__country::after {
    top: 0;
    bottom: 0;
    left: -1px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }

  .find__country.is-active::after {
    transform: scaleY(1);
  }

  .find__panels {
    grid-column: 5 / -1;
  }

  .office__body {
    padding-left: 0;
  }
}

/* 12. Pied de page — le colophon ; barre d'action mobile
   ========================================================================== */
.ft {
  padding: 4.5rem 0 7rem;
  font-size: 0.9375rem;
  color: var(--mac-brume-300);
  border-top: 1px solid var(--mac-marine-700);
}

.ft__top {
  display: grid;
  gap: 2.5rem;
}

.ft__brand img {
  width: auto;
  height: 2.75rem;
}

.ft__id {
  display: grid;
  gap: 0.625rem;
  margin: 1.75rem 0 0;
}

.ft__id div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

.ft__id dt {
  font-size: var(--mac-fs-caption);
  color: var(--mac-brume-500);
}

.ft__id dd {
  margin: 0;
  font-weight: var(--mac-fw-medium);
  color: var(--mac-white);
}

.ft__h {
  margin: 0 0 1rem;
  font-family: var(--mac-font-text);
  font-size: 0.75rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mac-white);
}

.ft__col ul {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ft a {
  color: var(--mac-brume-300);
  text-decoration: none;
  background-image: linear-gradient(var(--mac-or-500), var(--mac-or-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: color var(--mac-dur-base) var(--mac-ease-out), background-size var(--mac-dur-slow) var(--mac-ease-out);
}

.ft a:hover {
  color: var(--mac-white);
  background-size: 100% 1px;
}

.ft address {
  font-style: normal;
  line-height: 1.75;
}

.ft__social {
  display: flex;
  gap: 1.25rem;
  margin: 1rem 0 0;
}

.ft__social a {
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-white);
}

.ft__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  font-size: var(--mac-fs-caption);
  color: var(--mac-brume-500);
  border-top: 1px solid var(--mac-marine-700);
}

.ft__cities i {
  margin: 0 0.25rem;
  font-style: normal;
  color: var(--mac-or-500);
}

@media (min-width: 768px) {
  .ft { padding-bottom: 2rem; }
  .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ft__top {
    grid-template-columns: 4fr 2.5fr 3fr 3fr;
    gap: 2rem;
  }
}

/* Barre mobile : apparaît après le hero, s'efface sur le CTA final */
.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  padding: 0.75rem var(--mac-gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.97);
  border-top: 1px solid var(--mac-filet);
  box-shadow: 0 -8px 24px -12px rgb(11 35 64 / 0.2);
  transform: translateY(110%);
  transition: transform 400ms var(--mac-ease-out);
}

.mbar.is-visible {
  transform: none;
}

.mbar .mac-btn {
  padding: 0 0.75rem;
}

.mbar .ico {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 768px) {
  .mbar { display: none; }
}


/* 13. Apparitions au défilement et mouvement réduit
   ========================================================================== */
.js [data-reveal]:not(.is-in) {
  opacity: 0;
}

.js [data-reveal].is-in {
  animation: reveal 800ms var(--mac-ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes reveal {
  from { opacity: 0; translate: 0 1rem; }
  to   { opacity: 1; translate: 0 0; }
}

/* Le masque est porté par l'enfant : un élément entièrement masqué
   ne serait jamais signalé par IntersectionObserver */
.js [data-reveal-mask] > :last-child {
  clip-path: inset(100% 0 -10% 0);
  transition: clip-path 1.2s var(--mac-ease-out);
}

.js [data-reveal-mask].is-in > :last-child {
  clip-path: inset(-10% -5% -10% -5%);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal]:not(.is-in),
  .js [data-reveal].is-in {
    opacity: 1;
    animation: none;
  }

  .js [data-reveal-mask] > :last-child {
    clip-path: none;
  }

  .spark__line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .spark__dot {
    opacity: 1;
    animation: none;
  }

  .strip__live,
  .hero__slide.is-active img {
    animation: none;
  }

  .hero__curve {
    clip-path: none;
    animation: none;
  }
}