/* ==========================================================================
   MAC SA — Page d'accueil · compositions bloc par bloc
   Uteek Digital · v0.2 · 29/10/2026 (retours client du 28/10)

   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, 640, 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. Newsroom
   10. Actualités
   11. Outils et application
   12. Engagement RSE (bloc masqué pour le moment)
   13. Rappel CTA
   14. Nous trouver
   15. Pied de page et barre mobile
   16. 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 ; un peu plus grande
     qu'avec Manrope, car l'œil du serif Newsreader est plus petit */
  --mac-fs-h2:   clamp(1.875rem, 1.6rem + 1.1vw, 2.625rem);  /* 30 → 42 */
  --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.375rem, 1.65rem + 3vw, 4.25rem);       /* 38 → 68 */
  --home-fs-cta:       clamp(1.75rem, 1.4rem + 1.4vw, 2.625rem);      /* 28 → 42 */
  /* 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;
}

/* Surtitre puis titre : un souffle constant entre les deux (le serif, à
   l'œil plus petit, paraissait collé au surtitre) */
.mac-eyebrow + .mac-h2 {
  margin-top: 1rem;
}

/* … sauf là où l'en-tête du système de design porte déjà son propre écart */
.mac-section-head__main > .mac-h2 {
  margin-top: 0;
}

/* Mot composé à ne pas couper (« rendez-vous ») */
.nobr {
  white-space: nowrap;
}

/* 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 .find__lead,
.head-stack.head-stack .sec-head__side {
  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;
}

.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 {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-brume-300);
}

.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 marine,
   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-900);
    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; }
}

/* 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(11 35 64 / 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.01em;
  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(11 35 64 / 0.85) 0%, rgb(11 35 64 / 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.04;
  letter-spacing: -0.02em;
  color: var(--mac-white);
  text-wrap: balance;
}

/* Le mot porté par l'italique du serif plutôt que par la graisse */
.hero__title b {
  font-style: italic;
  font-weight: var(--mac-fw-regular);
}

.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 marine garde les onglets pays lisibles */
  .hero__veil {
    background: linear-gradient(180deg, rgb(11 35 64 / 0.75) 0%, rgb(11 35 64 / 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 blanc des expertises */
  .strip {
    margin-top: -3.5rem;
    background: linear-gradient(transparent 3.5rem, var(--mac-white) 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 — la liste verticale des métiers
   Les cinq métiers en accordéon vertical : un seul ouvert à la fois.
   Mobile et tablette : la photo s'ouvre avec le texte du métier.
   Desktop : liste à gauche, photo du métier ouvert à droite ; home.js
   passe au métier suivant toutes les 6 s quand le bloc est visible, et la
   barre dorée verticale du métier ouvert se remplit avec le temps.
   Sans JavaScript, tous les métiers restent ouverts.
   ========================================================================== */
.xp {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

.xp__head {
  margin-bottom: 2rem;
}

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

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

.xp__item {
  position: relative;
  padding-left: 1.25rem;
  border-bottom: 1px solid var(--mac-filet);
}

/* Barre verticale à gauche du métier : l'or y monte quand il est ouvert */
.xp__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  overflow: hidden;
}

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

.xp__item.is-active .xp__bar {
  background: var(--mac-filet);
}

.xp__item.is-active .xp__bar i {
  transform: scaleY(var(--fill, 1));
}

.xp__title {
  margin: 0;
}

.xp__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 0;
  font-family: var(--mac-font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: var(--mac-fw-regular);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--mac-slate-600);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--mac-dur-base) var(--mac-ease-out);
}

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

.xp__tab:focus-visible {
  outline-offset: -2px;
}

/* Signe + / − en bout de ligne */
.xp__sign {
  position: relative;
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

.xp__sign::before,
.xp__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--mac-dur-slow) var(--mac-ease-out);
}

.xp__sign::after {
  transform: rotate(90deg);
}

.xp__item.is-active .xp__sign::after {
  transform: rotate(0deg);
}

html:not(.js) .xp__sign {
  display: none;
}

/* Ouverture en douceur : la rangée de la grille passe de 0 à sa hauteur */
.xp__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 600ms var(--mac-ease-out);
}

.xp__item.is-active .xp__panel,
html:not(.js) .xp__panel {
  grid-template-rows: 1fr;
}

.xp__panel-in {
  min-height: 0;
  overflow: hidden;
}

.xp__mimg {
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
}

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

.xp__panel-in .mac-btn {
  margin: 0.25rem 0 1.125rem;
}

.xp__media {
  display: none;
}

@media (min-width: 1024px) {
  /* Liste et en-tête à gauche, photo à droite sur toute la hauteur */
  .xp__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
  }

  .xp__head {
    grid-column: 1 / 7;
    grid-row: 1;
    margin-bottom: 2.5rem;
    padding-right: 2.5rem;
  }

  .xp__list {
    grid-column: 1 / 7;
    grid-row: 2;
    align-self: end;
    margin-right: 2.5rem;
  }

  .xp__tab {
    padding: 1rem 0;
  }

  /* Deux lignes réservées au texte : la liste garde la même hauteur
     d'un métier à l'autre, la page ne bouge pas */
  .xp__text {
    min-height: 3.2em;
  }

  .xp__mimg {
    display: none;
  }

  .xp__media {
    display: block;
    grid-column: 7 / -1;
    grid-row: 1 / 3;
  }

  .xp__frame {
    position: relative;
    height: 100%;
    min-height: 32rem;
    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(11 35 64 / 0.6) 0%, rgb(11 35 64 / 0) 35%);
  }

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

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


/* 5. Solutions d'investissement — les fonds côte à côte
   Quatre fiches de même poids : aucun fonds n'est mis en avant. La jauge
   verte est proportionnelle à la meilleure performance affichée (--fill,
   posé par home.js) et se remplit quand la fiche entre à l'écran.
   ========================================================================== */
.sol {
  padding-block: var(--mac-section-y);
  background: var(--mac-white);
}

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

.fund {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.625rem;
  background: var(--mac-white);
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
  transition:
    transform var(--mac-dur-slow) var(--mac-ease-out),
    box-shadow var(--mac-dur-slow) var(--mac-ease-out);
}

/* Le filet doré de 2 px qui se trace au survol, comme sur les cartes */
.fund::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -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);
}

.fund:hover {
  transform: translateY(-4px);
  box-shadow: var(--mac-shadow-2);
}

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

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

.fund__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.fund__type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.fund__tag {
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: var(--mac-ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mac-marine-900);
  background: var(--mac-ivoire);
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
}

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

.fund__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9375rem;
  color: var(--mac-marine-900);
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
  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);
}

.fund:hover .fund__go {
  color: var(--mac-white);
  background: var(--mac-marine-900);
  border-color: var(--mac-marine-900);
}

.fund__name {
  margin: 1.5rem 0 0;
  font-family: var(--mac-font-display);
  font-size: 1.375rem;
  font-weight: var(--mac-fw-medium);
  line-height: 1.2;
  color: var(--mac-marine-900);
}

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

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

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

.fund__data {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.25rem 0 0;
}

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

.fund__vl dd {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0.5rem 0 0;
}

.fund__vl .mac-num {
  font-size: clamp(2rem, 1.75rem + 0.8vw, 2.5rem);
  font-weight: var(--mac-fw-light);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mac-marine-900);
}

.fund__vl abbr {
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-or-700);
  text-decoration: none;
}

/* La performance descend en bas de fiche : les jauges s'alignent */
.fund__perf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--mac-filet);
}

.fund__perf dt {
  font-size: 0.8125rem;
  color: var(--mac-slate-700);
}

.fund__perf dd {
  margin: 0;
}

.fund__perf .mac-delta {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  background: rgb(31 122 77 / 0.08);
  border-radius: var(--mac-radius-1);
}

.fund__perf .mac-delta--down {
  background: rgb(180 67 47 / 0.08);
}

.fund__bar {
  display: block;
  height: 3px;
  margin-top: 0.875rem;
  overflow: hidden;
  background: var(--mac-slate-100);
}

.fund__bar i {
  display: block;
  height: 100%;
  background: var(--mac-hausse);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s var(--mac-ease-out) 0.3s;
}

.fund.is-in .fund__bar i,
html:not(.js) .fund__bar i {
  transform: scaleX(var(--fill, 0));
}

.sol__note {
  margin: 1.25rem 0 0;
  font-size: var(--mac-fs-caption);
  color: var(--mac-slate-600);
}

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

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


/* 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__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, zone réduite (retour client 28/10)
   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(2rem, 1.7rem + 1.2vw, 2.75rem);
  background: var(--mac-white);
}

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

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

.refs__head p {
  max-width: 34rem;
  margin: 0.5rem auto 0;
  font-size: 0.875rem;
  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-white);
  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-white); /* 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: 11rem;
  height: 5rem;
  padding: 0 1.75rem;
}

/* Logos clients : en gris, ils reprennent leurs couleurs au survol */
.refs__logo {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 2.75rem;
  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: 3.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: 9rem;
    height: 4.25rem;
    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. Newsroom — MAC SA dans l'actualité
   L'actualité du Groupe, sur fond marine. Filtres en onglets soulignés
   d'or ; quatre fiches au plus par filtre (home.js). Bandeau d'abonnement
   en pied de bloc.
   ========================================================================== */
.nr {
  padding-block: var(--mac-section-y);
}

.nr__filters {
  display: flex;
  gap: 1.75rem;
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--mac-marine-700);
}

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

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

.nr__filter::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);
}

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

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

/* La rangée défile : le focus reste à l'intérieur pour ne pas être rogné */
.nr__filter:focus-visible {
  outline-offset: -2px;
}

.nr__grid {
  display: grid;
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ncard {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ncard[hidden] {
  display: none;
}

.ncard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 1.125rem;
}

.ncard:hover .ncard__media img {
  transform: scale(1.04);
}

/* Date en pastille blanche : le jour en grand, le mois dessous */
.ncard__date {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 1;
  display: grid;
  justify-items: center;
  min-width: 3rem;
  padding: 0.375rem 0.5rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: var(--mac-fw-semibold);
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mac-marine-900);
  background: var(--mac-white);
  border-radius: var(--mac-radius-1);
}

.ncard__date b {
  font-size: 1.125rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0;
}

.ncard__type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mac-or-300);
}

.ncard__type::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--mac-or-500);
}

.ncard__title {
  margin: 0.625rem 0 0;
  font-family: var(--mac-font-display);
  font-size: 1.25rem;
  font-weight: var(--mac-fw-regular);
  line-height: 1.3;
  color: var(--mac-white);
}

.ncard__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--mac-dur-base) var(--mac-ease-out);
}

.ncard:hover .ncard__title a {
  text-decoration-color: var(--mac-or-500);
}

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

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

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

.ncard__src {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--mac-brume-500);
}

.nr__empty {
  margin: 1.5rem 0 0;
  color: var(--mac-brume-300);
}

/* Abonnement : recevoir les actualités du Groupe */
.nr__sub {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--mac-marine-700);
  border-radius: var(--mac-radius-1);
}

.nr__sub-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;
  color: var(--mac-white);
}

.nr__sub-copy p {
  max-width: 30rem;
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--mac-brume-300);
}

.nr__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-white);
}

.nr__field {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nr__input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: var(--mac-control-h);
  padding: 0 1rem;
  font-family: var(--mac-font-text);
  font-size: 1rem;
  color: var(--mac-white);
  background: rgb(255 255 255 / 0.04);
  border: 1px solid var(--mac-brume-700);
  border-radius: var(--mac-radius-1);
  transition: border-color var(--mac-dur-fast) var(--mac-ease-out);
}

.nr__input::placeholder {
  color: var(--mac-brume-500);
  opacity: 1;
}

.nr__input:hover {
  border-color: var(--mac-brume-300);
}

.nr__input:focus-visible {
  outline: 2px solid var(--mac-focus);
  outline-offset: 1px;
  border-color: var(--mac-focus);
}

.nr__field .mac-btn {
  flex: none;
}

.nr__msg {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-hausse-clair);
}

.nr__msg:empty {
  display: none;
}

.nr__legal {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--mac-brume-500);
}

.nr__legal a {
  color: var(--mac-brume-300);
  text-underline-offset: 0.2em;
}

.nr__legal a:hover {
  color: var(--mac-white);
}

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

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

  .nr__sub {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    align-items: center;
    padding: 2.25rem 2.5rem;
  }

  .nr__sub-copy {
    grid-column: 1 / 7;
  }

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


/* 10. Actualités — les marchés et les sociétés cotées
   Quatre fiches photo sur fond ivoire ; toute la fiche est cliquable.
   ========================================================================== */
.news {
  padding-block: var(--mac-section-y);
  background: var(--mac-ivoire);
}

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

.acard {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mac-white);
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
  transition:
    transform var(--mac-dur-slow) var(--mac-ease-out),
    box-shadow var(--mac-dur-slow) var(--mac-ease-out);
}

.acard:hover {
  transform: translateY(-4px);
  box-shadow: var(--mac-shadow-2);
}

.acard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.acard:hover .acard__media img {
  transform: scale(1.04);
}

.acard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.25rem 1.375rem;
}

/* Rubrique et date en or foncé (lisible sur blanc) */
.acard__meta {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--mac-fw-semibold);
  letter-spacing: var(--mac-ls-label);
  text-transform: uppercase;
  color: var(--mac-or-700);
}

.acard__title {
  margin: 0.625rem 0 1.25rem;
  font-family: var(--mac-font-display);
  font-size: 1.1875rem;
  font-weight: var(--mac-fw-medium);
  line-height: 1.3;
  color: var(--mac-marine-900);
}

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

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

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

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

.acard__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: var(--mac-fs-small);
  font-weight: var(--mac-fw-semibold);
  color: var(--mac-marine-900);
}

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

.acard:hover .acard__arrow {
  transform: translateX(4px);
}

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

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


/* 11. Outils et application — deux blocs
   À gauche l'en-tête et les trois outils en cartes ; à droite le panneau
   marine de l'application, téléphone cadré par le bord bas du panneau.
   Les deux blocs passent côte à côte à partir de 1280 px.
   ========================================================================== */
.tools {
  padding-block: var(--mac-section-y);
  background: var(--mac-ivoire);
}

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

.tools__head {
  margin-bottom: 1.75rem;
}

.tools__head .mac-h2 {
  max-width: 18em;
}

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

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

.tool:hover {
  transform: translateY(-3px);
  box-shadow: var(--mac-shadow-2);
}

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

/* Pictogramme posé dans une case ivoire */
.tool__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--mac-ivoire);
  border: 1px solid var(--mac-filet);
  border-radius: var(--mac-radius-1);
}

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

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

.tool__glyph .acc {
  stroke: var(--mac-or-500);
  stroke-width: 1.8;
  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.25;
}

.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);
  color: var(--mac-or-700);
}

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

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

/* Panneau application */
.app {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem 0;
  border-radius: var(--mac-radius-1);
}

.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.25rem + 0.9vw, 2rem);
  font-weight: var(--mac-fw-regular);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mac-white);
}

.app__list {
  display: grid;
  gap: 0.75rem;
  margin: 0.25rem 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-or-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);
}

/* Téléphone : centré sous le texte, coupé par le bord bas du panneau */
.app__phone {
  position: relative;
  height: 15rem;
  margin-top: 2rem;
}

.app__phone .mac-phone {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  transform-origin: center top;
}

@media (min-width: 640px) {
  .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: "icon" "name" "go";
    align-items: start;
    min-height: 11.5rem;
    padding: 1.25rem;
  }
}

/* Panneau assez large : texte à gauche, téléphone en bas à droite */
@media (min-width: 768px) {
  .app {
    min-height: 23rem;
    padding: 2.5rem;
  }

  .app__copy {
    max-width: calc(100% - 12rem);
  }

  .app__phone {
    position: absolute;
    top: 2.75rem;
    right: 2rem;
    bottom: 0;
    width: 11rem;
    height: auto;
    margin: 0;
  }

  .app__phone .mac-phone {
    left: auto;
    right: 0;
    transform: scale(0.6);
    transform-origin: right top;
  }
}

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

  /* En-tête en haut, outils en bas : alignés sur la hauteur du panneau */
  .tools__main {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

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


/* 12. Engagement RSE — la finance responsable
   Bloc masqué pour le moment (attribut hidden dans index.html).
   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;
  }
}


/* 13. Rappel CTA — la signature
   Panneau marine posé sur fond blanc : l'espace clair qui le suit le
   sépare du pied de page, du même bleu.
   ========================================================================== */
.cta {
  padding-block: 0 clamp(2.5rem, 2rem + 2vw, 4rem);
  background: var(--mac-white);
}

.cta__panel {
  display: grid;
  gap: 2rem;
  align-items: end;
  padding: 2.25rem 1.5rem;
  border-radius: var(--mac-radius-1);
}

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

.cta__lead {
  max-width: 34rem;
  margin: 1rem 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__panel {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    padding: 3rem 3.5rem;
  }
  .cta__copy    { grid-column: 1 / 8; }
  .cta__actions { grid-column: 8 / -1; }
}


/* 14. 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-white);
}

.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;
  }
}


/* 15. Pied de page — le colophon, compact ; barre d'action mobile
   Même marine que les autres sections sombres ; titres de colonnes en or.
   ========================================================================== */
.ft {
  padding: 2.75rem 0 6rem;
  font-size: 0.875rem;
  color: var(--mac-brume-300);
}

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

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

.ft__id {
  display: grid;
  gap: 0.25rem;
  margin: 1.25rem 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-size: var(--mac-fs-caption);
  font-weight: var(--mac-fw-medium);
  color: var(--mac-white);
}

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

.ft__col ul {
  display: grid;
  gap: 0.375rem;
  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.7;
}

.ft__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 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.5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  font-size: 0.75rem;
  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: 1.25rem; }
  .ft__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ft { padding-top: 3rem; }
  .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; }
}


/* 16. 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;
  }
}