/* =================================================================
   HARWANNE CAPITAL MANAGEMENT — Design System
   Maison d'investissement sélective · Genève · Paris
   ================================================================= */

/* ---------- Fonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cinzel:wght@400;500;600&display=swap');

/* =================================================================
   TOKENS
   ================================================================= */
:root{
  /* Palette — haute finance genevoise */
  --ink:          #0c1620;   /* near-black navy ink   */
  --navy:         #0e2235;   /* deep midnight navy    */
  --navy-soft:    #16324b;   /* lifted navy           */
  --slate:        #3c4a57;   /* muted slate text      */
  --cream:        #f7f2e9;   /* primary ivory canvas  */
  --cream-2:      #efe7d7;   /* deeper parchment      */
  --paper:        #fbf8f1;   /* lightest paper        */
  --gold:         #b08d57;   /* frame gold            */
  --gold-bright:  #c8a86d;   /* lifted gold (on dark) */
  --gold-deep:    #75592e;   /* engraved gold — AA on cream (5.8:1) */
  --line:         rgba(12,22,32,.14);
  --line-light:   rgba(247,242,233,.18);

  /* Typography */
  --f-engrave: "Copperplate", "Cinzel", "Copperplate Gothic Light", "Big Caslon", serif;
  --f-display: "Cormorant Garamond", "Cinzel", Georgia, serif;
  --f-body:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* Spacing rhythm */
  --pad-x: clamp(1.4rem, 5vw, 7rem);
  --section-y: clamp(5rem, 11vh, 11rem);
  --maxw: 1280px;
  --topbar-h: 40px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* =================================================================
   RESET
   ================================================================= */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  font-size:clamp(1.02rem,.55vw + .9rem,1.18rem);
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
::selection{ background:var(--gold); color:var(--paper); }

/* =================================================================
   TYPOGRAPHY HELPERS
   ================================================================= */
.eyebrow{
  font-family:var(--f-engrave);
  font-size:.74rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:2.4rem; height:1px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.centered{ justify-content:center; }
.eyebrow.no-rule::before{ display:none; }
.eyebrow.on-dark{ color:var(--gold-bright); }
/* Hero, eyebrow (sur-titre) en blanc plutôt que doré */
.hero .eyebrow, .pagehero .eyebrow{ color:#fff; }
.hero .eyebrow::before, .pagehero .eyebrow::before{ background:#fff; }

h1,h2,h3,h4{ font-family:var(--f-engrave); font-weight:400; line-height:1.12; letter-spacing:.04em; }
.display{
  font-family:var(--f-engrave);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.8rem,3.8vw,3.6rem);
  line-height:1.12;
  letter-spacing:.045em;
}
.h-section{
  font-family:var(--f-engrave);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,1.95rem);
  line-height:1.22;
  letter-spacing:.03em;
  max-width:72ch;
}
.center .h-section,.cta-band .h-section,.pullquote .h-section{ max-width:none; }
.lead{
  font-size:1.3125rem; /* 21px fixe — plus de mélange 19/23 */
  line-height:1.65;
  color:var(--slate);
  font-weight:400;
}
.serif-quote{
  font-family:var(--f-body);
  font-style:italic;
  font-weight:400;
}
em,i{ font-style:italic; }
strong,b{ font-weight:500; color:inherit; }
.gold-text{ color:var(--gold-deep); }

/* =================================================================
   LAYOUT
   ================================================================= */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.section{ padding-block:var(--section-y); position:relative; }
.section--tight{ padding-block:clamp(3rem,7vh,6rem); }
.bg-cream{ background:var(--cream); }
.bg-paper{ background:var(--paper); }
.bg-cream2{ background:var(--cream-2); }
.bg-navy{ background:var(--navy); color:var(--cream); }
.bg-ink{ background:var(--ink); color:var(--cream); }
.bg-navy .lead,.bg-ink .lead{ color:rgba(247,242,233,.72); }

.center{ text-align:center; }
/* intros centrées élargies : le paragraphe d'accroche garde une mesure lisible */
.center .lead{ max-width:62ch; margin-inline:auto; }
.measure{ max-width:76ch; }
.measure-sm{ max-width:56ch; }
.mx-auto{ margin-inline:auto; }

.rule{ height:1px; background:var(--line); border:0; }
.rule-gold{ height:1px; width:4rem; background:var(--gold); border:0; }
.rule-gold.centered{ margin-inline:auto; }

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header{
  position:fixed; top:var(--topbar-h); left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem var(--pad-x);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease), top .5s var(--ease);
}
.site-header.scrolled{
  top:0;
  background:rgba(13,28,44,.92);
  backdrop-filter:blur(14px);
  padding-block:.9rem;
  box-shadow:0 1px 0 var(--line-light);
}
.brand{ display:flex; align-items:center; gap:.85rem; z-index:130; }
.brand img{ height:90px; width:auto; transition:height .5s var(--ease), filter .5s var(--ease); }
/* logo (monogramme noir sur fond transparent) recoloré en ivoire sur fonds sombres */
.brand img{ filter:brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(420%) hue-rotate(2deg) brightness(99%) contrast(94%); }
.site-header.scrolled .brand img{ height:64px; }
@media (max-width:860px){ .brand img{ height:60px; } .site-header.scrolled .brand img{ height:50px; } }

.nav{ display:flex; align-items:center; gap:1.7rem; }
.nav a{
  font-family:var(--f-engrave);
  font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,242,233,.82); font-weight:500;
  position:relative; padding-block:.4rem; transition:color .35s var(--ease); white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-bright); transition:width .4s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--cream); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }

.nav-cta{
  font-family:var(--f-engrave); font-size:.80rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--gold); color:var(--gold-bright)!important;
  padding:.7rem 1.4rem; border-radius:2px; transition:all .4s var(--ease);
}
.nav-cta::after{ display:none!important; }
.nav-cta:hover{ background:var(--gold); color:var(--ink)!important; }

.burger{
  display:none; z-index:130; width:34px; height:22px; position:relative;
  background:none; border:0; cursor:pointer;
}
.burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--cream);
  transition:transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease);
}
.burger span:nth-child(1){ top:2px; }
.burger span:nth-child(2){ top:10px; }
.burger span:nth-child(3){ top:18px; }
body.menu-open .burger span:nth-child(1){ top:10px; transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu{
  position:fixed; inset:0; z-index:115;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:1.4rem; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
body.menu-open{ overflow:hidden; }            /* verrouille le défilement de fond */
/* le logo d'en-tête est masqué tant que le menu est ouvert (le bandeau du menu
   porte déjà la marque), pour éviter le chevauchement en haut de l'overlay */
body.menu-open .brand{ opacity:0; visibility:hidden; }
body.menu-open .mobile-menu{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--f-engrave); font-weight:500; font-size:1.25rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cream);
  opacity:0; transform:translateY(14px); transition:all .5s var(--ease);
}
.mobile-menu .eyebrow{ margin-bottom:1rem; }
body.menu-open .mobile-menu a{ opacity:1; transform:none; }
body.menu-open .mobile-menu a:nth-child(2){ transition-delay:.08s; }
body.menu-open .mobile-menu a:nth-child(3){ transition-delay:.13s; }
body.menu-open .mobile-menu a:nth-child(4){ transition-delay:.18s; }
body.menu-open .mobile-menu a:nth-child(5){ transition-delay:.23s; }
body.menu-open .mobile-menu a:nth-child(6){ transition-delay:.28s; }
body.menu-open .mobile-menu a:nth-child(7){ transition-delay:.33s; }
body.menu-open .mobile-menu a:nth-child(8){ transition-delay:.38s; }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--f-engrave); font-size:.84rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500; padding:1rem 2rem; border-radius:2px; cursor:pointer;
  border:1px solid var(--gold); color:var(--gold-deep); background:transparent;
  transition:all .45s var(--ease);
}
.btn .arr{ transition:transform .45s var(--ease); }
.btn:hover{ background:var(--gold); color:var(--paper); border-color:var(--gold); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--solid{ background:var(--gold); color:var(--paper); }
.btn--solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.btn--ghost-light{ border-color:var(--line-light); color:var(--cream); }
.btn--ghost-light:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

.link-arrow{
  font-family:var(--f-engrave); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); display:inline-flex; align-items:center; gap:.7rem; font-weight:500;
  border:1px solid var(--line); padding:.7rem 1.3rem; border-radius:2px;
  transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.link-arrow:hover{ border-color:var(--gold); background:rgba(176,141,87,.07); }
.link-arrow .arr{ transition:transform .4s var(--ease); }
.link-arrow:hover .arr{ transform:translateX(6px); }
.on-dark .link-arrow,.bg-navy .link-arrow,.bg-ink .link-arrow{ color:var(--gold-bright); border-color:var(--line-light); }
.on-dark .link-arrow:hover,.bg-navy .link-arrow:hover,.bg-ink .link-arrow:hover{ border-color:var(--gold-bright); background:rgba(247,242,233,.06); }

/* =================================================================
   HERO
   ================================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  color:var(--cream); overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; animation:kenburns 12s ease-in-out infinite alternate; will-change:transform; transform-origin:60% 40%; }
/* fonds vidéo (héros, bandeaux) */
.hero__bg video, .pagehero__bg video, .imgband__bg video{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.18); } }
@media (prefers-reduced-motion:reduce){ .hero__bg img{ animation:none; transform:scale(1.04); } }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,18,28,.52) 0%, rgba(8,18,28,.34) 45%, rgba(10,22,34,.82) 100%),
    linear-gradient(90deg, rgba(7,15,23,.62) 0%, rgba(7,15,23,.18) 52%, rgba(7,15,23,0) 100%);
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:radial-gradient(130% 100% at 25% 42%, rgba(8,16,24,.0) 30%, rgba(8,16,24,.34) 100%);
}
.hero__inner{ padding-block:9rem 5rem; max-width:980px; }
.hero .display{ margin:1.6rem 0; }
.hero .display .accent{ color:var(--gold-bright); }
.hero__sub{ max-width:56ch; color:#fff; font-size:1.2rem; }
.hero__actions{ margin-top:2.6rem; display:flex; gap:1.1rem; flex-wrap:wrap; }

/* page hero (interior, shorter) */
.pagehero{
  position:relative; min-height:74svh; display:flex; align-items:flex-end;
  color:var(--cream); overflow:hidden; isolation:isolate;
}
.pagehero__bg{ position:absolute; inset:0; z-index:-2; }
.pagehero__bg img{ width:100%; height:100%; object-fit:cover; }
.pagehero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,18,28,.55) 0%, rgba(8,18,28,.4) 45%, rgba(8,18,28,.92) 100%);
}
/* Hero EFFICAP, carte ancienne, filtre navy + nuance dorée */
.pagehero--map .pagehero__bg img{ filter:contrast(1.05) brightness(.97) sepia(.18); }
.pagehero--map .pagehero__bg::after{
  background:
    linear-gradient(180deg, rgba(10,22,34,.74) 0%, rgba(10,22,34,.6) 45%, rgba(10,22,34,.95) 100%),
    radial-gradient(120% 120% at 30% 28%, rgba(176,141,87,.12) 0%, rgba(10,22,34,0) 58%);
}
.pagehero__inner{ padding-block:8rem 3.5rem; max-width:900px; }
.pagehero .display{ font-size:clamp(1.9rem,4vw,3.4rem); margin-top:1.3rem; }
.pagehero__sub{ margin-top:1.4rem; max-width:66ch; color:#fff; }

/* =================================================================
   SCROLL CUE
   ================================================================= */
.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; z-index:5;
  font-family:var(--f-engrave); font-size:.6rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(247,242,233,.6);
}
.scroll-cue .bar{ width:1px; height:46px; background:linear-gradient(var(--gold-bright),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); } 40%{ transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* =================================================================
   STAT STRIP
   ================================================================= */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.bg-navy .stats,.bg-ink .stats{ border-color:var(--line-light); }
.stat{ padding:2.6rem 1.5rem; text-align:center; border-right:1px solid var(--line); }
.bg-navy .stat,.bg-ink .stat{ border-color:var(--line-light); }
.stat:last-child{ border-right:0; }
.stat__num{
  font-family:var(--f-engrave); font-weight:400; font-size:clamp(2.1rem,3.6vw,3.2rem);
  letter-spacing:.01em; line-height:1.1; color:var(--gold-deep);
}
.bg-navy .stat__num,.bg-ink .stat__num{ color:var(--gold-bright); }
.stat__num .unit{ font-size:.5em; }
.stat__label{
  font-family:var(--f-engrave); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); margin-top:1rem;
}
.bg-navy .stat__label,.bg-ink .stat__label{ color:rgba(247,242,233,.6); }

/* =================================================================
   GENERIC GRID / EDITORIAL BLOCKS
   ================================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,5vw,6rem); align-items:center; }
.split--wide-text{ grid-template-columns:1.1fr .9fr; }
.split--wide-img{ grid-template-columns:.9fr 1.1fr; }
.split p + p{ margin-top:1.2rem; }
.split h2{ margin:1.3rem 0 1.6rem; }

.figure{ position:relative; }
.figure img{ width:100%; border-radius:3px; }
.figure--framed{ padding:0; }
.figure__cap{
  font-family:var(--f-engrave); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); margin-top:1rem; text-align:center;
}
.figure--shadow img{ box-shadow:0 30px 70px -30px rgba(12,22,32,.55); }
.gold-frame{ padding:.7rem; background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)); border-radius:3px; box-shadow:0 30px 70px -30px rgba(12,22,32,.6); }
.gold-frame img{ border-radius:1px; }

.duotone{ filter:grayscale(1) contrast(1.02) brightness(1.02) sepia(.12); }

/* =================================================================
   FEATURE CARDS
   ================================================================= */
.cards{ display:grid; gap:1.5rem; }
.cards-2{ grid-template-columns:repeat(2,1fr); }
.cards-3{ grid-template-columns:repeat(3,1fr); }
.cards-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:clamp(1.8rem,2.6vw,2.6rem); position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:0; background:var(--gold);
  transition:width .55s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(12,22,32,.4); border-color:transparent; }
.card:hover::before{ width:100%; }
.card__num{
  font-family:var(--f-engrave); font-size:.86rem; letter-spacing:.16em; color:var(--gold-deep); font-weight:600;
}
.card__title{ font-family:var(--f-display); font-size:1.7rem; font-weight:400; margin:.9rem 0 .8rem; }
.card__text{ color:var(--slate); font-size:1.02rem; line-height:1.65; }
.bg-navy .card,.bg-ink .card{ background:rgba(255,255,255,.03); border-color:var(--line-light); }
.bg-navy .card__text,.bg-ink .card__text{ color:rgba(247,242,233,.7); }
.bg-navy .card__title,.bg-ink .card__title{ color:var(--cream); }

/* =================================================================
   VALUES — large editorial blocks
   ================================================================= */
.value-block{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(2rem,5vw,5rem);
  padding-block:clamp(3rem,6vh,5.5rem); border-top:1px solid var(--line); align-items:start;
}
.value-block:first-of-type{ border-top:0; }
.value-block__index{
  font-family:var(--f-engrave); font-weight:400; font-size:clamp(2.4rem,4.5vw,4.4rem);
  color:var(--gold); line-height:.9; opacity:.6;
}
.value-block__title{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:.4rem; }
.value-block__roman{ font-family:var(--f-engrave); font-size:.80rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1.4rem; }
.value-block blockquote{
  font-family:var(--f-body); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,1.6vw,1.5rem); line-height:1.5; color:var(--ink);
  padding-left:1.6rem; border-left:2px solid var(--gold); margin:0 0 1.6rem;
}
.value-block cite{ display:block; font-style:normal; font-family:var(--f-engrave); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); margin-top:.8rem; }
.value-block p{ color:var(--slate); max-width:76ch; }
.value-block p + p{ margin-top:1.1rem; }

/* =================================================================
   TIMELINE — Heritage
   ================================================================= */
.timeline{ position:relative; max-width:1040px; margin-inline:auto; }
.timeline::before{
  content:""; position:absolute; left:calc(50% - .5px); top:0; bottom:0; width:1px;
  background:linear-gradient(var(--gold),rgba(176,141,87,.2));
}
.tl-item{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-bottom:clamp(3rem,6vh,5rem); }
.tl-item__year{
  font-family:var(--f-engrave); font-weight:400; font-size:clamp(2rem,3.4vw,2.9rem);
  letter-spacing:.01em; color:var(--gold-deep); line-height:1.05;
}
.tl-item__title{ font-family:var(--f-engrave); font-size:.84rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin:.7rem 0 1rem; }
.tl-item__text{ color:var(--slate); font-size:1.125rem; line-height:1.7; }
.tl-item__dot{
  position:absolute; left:calc(50% - 7px); top:.6rem; width:14px; height:14px; border-radius:50%;
  background:var(--cream); border:2px solid var(--gold); z-index:2;
}
.tl-item__dot::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--gold); }
.tl-item:nth-child(odd) .tl-item__content{ text-align:right; padding-right:3rem; }
.tl-item:nth-child(odd) .tl-item__media{ grid-column:2; padding-left:3rem; }
.tl-item:nth-child(even) .tl-item__content{ grid-column:2; padding-left:3rem; }
.tl-item:nth-child(even) .tl-item__media{ grid-column:1; grid-row:1; padding-right:3rem; }
.tl-item__media img{ border-radius:3px; box-shadow:0 24px 50px -28px rgba(12,22,32,.5); }
.tl-item:nth-child(odd) .tl-item__content .eyebrow{ flex-direction:row-reverse; }

/* =================================================================
   PULL QUOTE / EDITORIAL FEATURE
   ================================================================= */
.pullquote{ text-align:center; max-width:62rem; margin-inline:auto; }
.pullquote__mark{ font-family:var(--f-body); font-size:5rem; line-height:0; color:var(--gold); opacity:.6; display:block; height:2.6rem; }
.pullquote blockquote{
  font-family:var(--f-body); font-weight:400; font-style:italic;
  font-size:clamp(1.35rem,2.3vw,2.05rem); line-height:1.5;
}
.pullquote cite{
  display:block; margin-top:2rem; font-style:normal;
  font-family:var(--f-engrave); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-bright);
}

/* =================================================================
   INSTRUMENT LIST (EFFICAP)
   ================================================================= */
.instr{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.instr__item{ padding:clamp(2rem,3vw,3rem); border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .45s var(--ease); }
.instr__item:nth-child(2n){ border-right:0; }
.instr__item:nth-last-child(-n+2){ border-bottom:0; }
.instr__item:hover{ background:var(--cream); }
.instr__no{ font-family:var(--f-engrave); font-size:.82rem; letter-spacing:.16em; color:var(--gold-deep); font-weight:600; }
.instr__name{ font-family:var(--f-display); font-size:1.6rem; margin:.7rem 0 .7rem; }
.instr__desc{ color:var(--slate); font-size:1rem; line-height:1.6; }

/* =================================================================
   BADGES
   ================================================================= */
.badge-row{ display:flex; flex-wrap:wrap; gap:1rem; }
.badge{
  display:inline-flex; align-items:center; gap:.8rem; padding:.9rem 1.4rem;
  border:1px solid var(--line); border-radius:2px; background:var(--paper);
  font-family:var(--f-engrave); font-size:.80rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.bg-navy .badge,.bg-ink .badge{ background:rgba(255,255,255,.04); border-color:var(--line-light); color:var(--cream); }
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }

/* =================================================================
   CTA BAND
   ================================================================= */
.cta-band{ text-align:center; }
.cta-band .h-section{ margin:1.3rem auto 1rem; max-width:40ch; }
.cta-band p{ color:rgba(247,242,233,.72); max-width:59ch; margin:0 auto 2.4rem; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{ background:var(--ink); color:var(--cream); padding-block:clamp(4rem,8vh,6rem) 2.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:3rem; }
.site-footer .brand img{ height:84px; }
.footer-about{ color:rgba(247,242,233,.6); font-size:1rem; line-height:1.7; margin-top:1.4rem; max-width:39ch; }
.footer-col__title{ font-family:var(--f-engrave); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-bright); font-weight:500; margin-bottom:1.4rem; }
.footer-col li{ margin-bottom:.85rem; font-size:1rem; color:rgba(247,242,233,.72); }
.footer-col a{ color:rgba(247,242,233,.72); font-size:1rem; transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:clamp(3rem,6vh,4.5rem); padding-top:2rem; border-top:1px solid var(--line-light); }
.footer-bottom p,.footer-bottom a{ font-family:var(--f-engrave); font-size:.70rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,242,233,.5); }
.footer-bottom a:hover{ color:var(--gold-bright); }

/* =================================================================
   SCROLL REVEAL
   ================================================================= */
.reveal{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
/* hide pre-reveal state only when JS is available, so no-JS users always see content */
html.js .reveal{ opacity:0; transform:translateY(34px) scale(.986); }
/* in-state scoped under html.js so it outranks the hidden rule's specificity */
html.js .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.12s; }
.reveal.d2{ transition-delay:.24s; }
.reveal.d3{ transition-delay:.36s; }
.reveal.d4{ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){
  .reveal,html.js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .scroll-cue .bar{ animation:none; }
}

/* back to top */
.to-top{
  position:fixed; right:1.6rem; bottom:1.6rem; z-index:90;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--gold);
  background:var(--ink); color:var(--gold-bright); display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px); cursor:pointer;
  transition:all .45s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--gold); color:var(--ink); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .cards-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav{ display:none; }
  .burger{ display:block; }
  .split,.split--wide-text,.split--wide-img{ grid-template-columns:1fr; gap:2.5rem; }
  .split .figure{ order:-1; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .bg-navy .stat:nth-child(1),.bg-navy .stat:nth-child(2){ border-color:var(--line-light); }
  .cards-3,.cards-4,.cards-2{ grid-template-columns:1fr; }
  .instr{ grid-template-columns:1fr; }
  .instr__item{ border-right:0!important; border-bottom:1px solid var(--line)!important; }
  .instr__item:last-child{ border-bottom:0!important; }
  /* timeline → single column left aligned */
  .timeline::before{ left:7px; }
  .tl-item{ grid-template-columns:1fr; gap:1.2rem; padding-left:2.4rem; }
  .tl-item__dot{ left:1px; top:.4rem; }
  .tl-item:nth-child(odd) .tl-item__content,
  .tl-item:nth-child(even) .tl-item__content{ text-align:left; padding:0; grid-column:1; }
  .tl-item:nth-child(odd) .tl-item__media,
  .tl-item:nth-child(even) .tl-item__media{ grid-column:1; grid-row:auto; padding:0; }
  .tl-item:nth-child(odd) .tl-item__content .eyebrow{ flex-direction:row; }
  .value-block{ grid-template-columns:1fr; gap:1rem; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero__actions{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:520px){
  .stats{ grid-template-columns:1fr; }
  .stat{ border-right:0!important; border-bottom:1px solid var(--line); }
  .bg-navy .stat{ border-color:var(--line-light); }
  .stat:last-child{ border-bottom:0; }
}

/* =================================================================
   v2 — TOP UTILITY BAR · LANGUAGE SELECTOR · ENGRAVED REFINEMENTS
   ================================================================= */

/* ---- Top utility bar (engraved "Copperplate" register) -------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:121;
  height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  background:rgba(8,16,24,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(247,242,233,.1);
  transition:transform .5s var(--ease), background .5s var(--ease);
}
body.nav-scrolled .topbar{ transform:translateY(-100%); }
.topbar__loc{
  font-family:var(--f-engrave);
  font-size:.70rem; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(247,242,233,.62); display:flex; align-items:center; gap:.7em;
}
.topbar__loc .dot{ width:3px; height:3px; border-radius:50%; background:var(--gold-bright); display:inline-block; }
.lang{ display:flex; align-items:center; gap:.55rem; }
.lang a{
  font-family:var(--f-engrave); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,242,233,.6); font-weight:500; transition:color .3s var(--ease);
  padding:.7rem .55rem; display:inline-flex; align-items:center; /* ≥24px tap target (WCAG 2.5.8) */
}
.lang a:hover{ color:var(--cream); }
.lang a[aria-current="true"]{ color:var(--gold-bright); }
.lang .sep{ width:1px; height:11px; background:rgba(247,242,233,.25); display:inline-block; }

/* ---- Engraved "letterpress" refinement ------------------------ */
/* a hairline highlight/shadow gives the copperplate gravure feel  */
.eyebrow, .topbar__loc, .lang a, .footer-col__title,
.value-block__roman, .stat__label, .badge, .figure__cap, .footer-bottom p, .footer-bottom a{
  text-shadow:0 1px 0 rgba(247,242,233,.25);
}
.bg-navy .eyebrow, .bg-ink .eyebrow, .bg-navy .stat__label, .bg-ink .stat__label,
.bg-navy .badge, .bg-ink .badge, .eyebrow.on-dark,
.topbar__loc, .lang a, .footer-col__title, .footer-bottom p, .footer-bottom a,
.bg-navy .figure__cap, .bg-ink .figure__cap{
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.nav a, .nav-cta{ text-shadow:0 1px 2px rgba(0,0,0,.18); }
.btn{ font-weight:500; }
/* engraved hairline frame under section eyebrows for extra gravure */
.eyebrow{ font-size:.88rem; }

/* ---- Engraved section divider wordmark ------------------------ */
.engrave-divider{
  text-align:center; font-family:var(--f-engrave); font-weight:500;
  font-size:clamp(.7rem,1vw,.82rem); letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold-deep); padding-block:clamp(2rem,4vh,3.2rem);
  display:flex; align-items:center; justify-content:center; gap:1.4rem;
}
.engrave-divider::before,.engrave-divider::after{ content:""; height:1px; width:clamp(2rem,8vw,6rem); background:var(--line); }
.bg-navy .engrave-divider,.bg-ink .engrave-divider{ color:var(--gold-bright); }
.bg-navy .engrave-divider::before,.bg-navy .engrave-divider::after,
.bg-ink .engrave-divider::before,.bg-ink .engrave-divider::after{ background:var(--line-light); }

/* =================================================================
   GOVERNANCE / TEAM PAGE
   ================================================================= */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.member{
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:2.4rem 2rem; text-align:center; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.member:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(12,22,32,.4); }
.member__avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 1.4rem;
  display:grid; place-items:center; position:relative;
  background:linear-gradient(150deg,var(--navy),var(--ink));
  border:1px solid var(--gold);
}
.member__avatar span{
  font-family:var(--f-engrave); font-weight:600; font-size:1.1rem; letter-spacing:.1em;
  color:var(--gold-bright);
}
.member__name{ font-family:var(--f-display); font-size:1.45rem; font-weight:400; margin-bottom:.2rem; }
.member__name.placeholder{ color:var(--slate); font-style:italic; opacity:.65; }
.member__role{ font-family:var(--f-engrave); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:1rem; }
.member__bio{ color:var(--slate); font-size:.96rem; line-height:1.6; }

.todo-note{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:.4rem;
  font-family:var(--f-engrave); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); border:1px dashed var(--gold); border-radius:2px; padding:.5rem .9rem;
}

.gov-list{ max-width:880px; margin-inline:auto; }
.gov-row{
  display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:baseline;
  padding-block:2rem; border-top:1px solid var(--line);
}
.gov-row:first-child{ border-top:0; }
.gov-row__k{ font-family:var(--f-engrave); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); }
.gov-row__t{ font-family:var(--f-display); font-size:1.5rem; margin-bottom:.5rem; }
.gov-row__d{ color:var(--slate); }

/* ---- raise mobile-nav breakpoint (longer nav) ----------------- */
@media (max-width:1024px){
  .nav{ display:none; }
  .burger{ display:block; }
}
@media (max-width:860px){
  .team-grid{ grid-template-columns:1fr; }
  .gov-row{ grid-template-columns:1fr; gap:.4rem; }
}
@media (max-width:560px){
  .topbar__loc{ font-size:.54rem; letter-spacing:.22em; }
  :root{ --topbar-h: 44px; }
}

/* =================================================================
   IMAGE BANDS — full-bleed cinematic dividers
   ================================================================= */
.imgband{
  position:relative; isolation:isolate; overflow:hidden;
  color:var(--cream); text-align:center;
  padding-block:clamp(5rem,15vh,10rem);
}
.imgband__bg{ position:absolute; inset:0; z-index:-2; }
.imgband__bg img{ width:100%; height:100%; object-fit:cover; }
.imgband::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,16,24,.62) 0%, rgba(8,16,24,.7) 100%),
    radial-gradient(120% 120% at 50% 40%, transparent 30%, rgba(8,16,24,.55) 100%);
}
.imgband__inner{ max-width:64rem; margin-inline:auto; padding-inline:var(--pad-x); }
.imgband .display{ font-size:clamp(2.2rem,4.5vw,3.8rem); margin:1.2rem 0; }
.imgband p{ color:rgba(247,242,233,.82); max-width:63ch; margin-inline:auto; }
.imgband .rule-gold{ background:var(--gold-bright); }
/* slight unifying tone for bright color photos shown inline */
.img-tone{ filter:saturate(.86) contrast(1.02) brightness(.98); }

/* =================================================================
   ACCESSIBILITY — focus, skip link (WCAG 2.4.1 / 2.4.7)
   ================================================================= */
:focus{ outline:none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:2px;
}
/* on dark surfaces the bright gold ring reads clearly; on light, deepen it */
.bg-cream a:focus-visible, .bg-paper a:focus-visible, .bg-cream2 a:focus-visible,
.bg-cream button:focus-visible, .field input:focus-visible,
.field textarea:focus-visible, .field select:focus-visible{
  outline-color:var(--gold-deep);
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200;
  transform:translateY(-160%);
  background:var(--ink); color:var(--cream);
  font-family:var(--f-engrave); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.85rem 1.3rem; border:1px solid var(--gold); border-radius:3px;
  transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:translateY(0); outline:none; }
#main{ scroll-margin-top:calc(var(--topbar-h) + 64px); }

/* =================================================================
   COPPERPLATE TITLES — engraved caps for component headings
   (placed last so it outranks the component rules above)
   ================================================================= */
.card__title, .value-block__title, .instr__name, .gov-row__t, .member__name{
  font-family:var(--f-engrave);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.045em;
  line-height:1.22;
}
.card__title{ font-size:1.2rem; }
.value-block__title{ font-size:clamp(1.35rem,2.3vw,1.9rem); letter-spacing:.035em; }
.instr__name{ font-size:1.2rem; }
.gov-row__t{ font-size:1.15rem; }
.member__name{ font-size:1.05rem; }
.member__name.placeholder{ font-style:normal; }
/* engraved titles read better a touch lighter where the face supports it */
.display, .h-section{ font-weight:400; }

/* =================================================================
   TEAM PROFILES — real members with bios
   ================================================================= */
.profiles{ max-width:1000px; margin-inline:auto; border-top:1px solid var(--line); }
.profile{
  display:grid; grid-template-columns:190px 1fr; gap:clamp(1.6rem,4vw,3.4rem);
  padding:clamp(2rem,4.5vh,3.2rem) 0; border-bottom:1px solid var(--line); align-items:start;
}
.profile__photo{
  aspect-ratio:4/5; border:1px solid var(--gold); border-radius:3px; overflow:hidden;
  background:linear-gradient(150deg,var(--navy),var(--ink)); display:grid; place-items:center;
}
.profile__photo span{ font-family:var(--f-engrave); font-size:1.7rem; letter-spacing:.12em; color:var(--gold-bright); }
.profile__photo img{ width:100%; height:100%; object-fit:cover; }
.profile__cap{ font-family:var(--f-engrave); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); text-align:center; margin-top:.7rem; }
.profile__role{ font-family:var(--f-engrave); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.profile__name{ font-family:var(--f-engrave); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.15; margin:.5rem 0 1.1rem; }
.profile__bio{ max-width:78ch; }
.profile__bio p + p{ margin-top:.9rem; }
@media (max-width:640px){
  .profile{ grid-template-columns:1fr; gap:1.2rem; }
  .profile__media{ max-width:170px; }
}

/* =================================================================
   VIDEO BAND — fond vidéo (citation Walras, accueil)
   ================================================================= */
.videoband{ position:relative; isolation:isolate; overflow:hidden; }
.videoband__bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.videoband::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,16,24,.72) 0%, rgba(10,22,34,.82) 100%);
}

/* =================================================================
   STATS EN CROIX (EFFICAP — 3e génération)
   ================================================================= */
.stats--cross{ grid-template-columns:1fr 1fr; border-top:0; border-bottom:0; }
.stats--cross .stat{ border-right:0; }
.stats--cross .stat:nth-child(odd){ border-right:1px solid var(--line-light); }
.stats--cross .stat:nth-child(1),
.stats--cross .stat:nth-child(2){ border-bottom:1px solid var(--line-light); }
@media (max-width:520px){
  /* en colonne unique, garder une simple séparation horizontale */
  .stats--cross{ grid-template-columns:1fr; }
  .stats--cross .stat{ border-right:0!important; border-bottom:1px solid var(--line-light)!important; }
  .stats--cross .stat:last-child{ border-bottom:0!important; }
}

/* =================================================================
   IMGBAND — ancrage du jet d'eau derrière le point « · »
   ================================================================= */
.imgband--anchor{ min-height:62vh; display:flex; align-items:center; }
.imgband--anchor .imgband__bg img{ object-position:46% 32%; }
.imgband--anchor .display{ position:relative; }
/* sous-titre du bandeau sur une seule ligne sur grand écran */
.imgband--anchor .imgband__inner{ max-width:78rem; }
.imgband--anchor .lead{ max-width:none; }

/* =================================================================
   PARALLAX (piloté en JS sur les fonds d'images)
   ================================================================= */
.imgband__bg img, .pagehero__bg img{ will-change:transform; }

/* =================================================================
   CADRE EFFICAP — « ancienne banque » (double filet or sur parchemin)
   ================================================================= */
.efficap-frame{
  position:relative; background:var(--paper);
  border:1px solid var(--gold); border-radius:3px;
  padding:clamp(2.4rem,5vw,4rem);
  box-shadow:0 30px 70px -34px rgba(12,22,32,.5);
  display:grid; place-items:center; gap:1.4rem;
}
.efficap-frame::before{
  content:""; position:absolute; inset:11px; border:1px solid var(--gold-deep);
  border-radius:2px; opacity:.55; pointer-events:none;
}
.efficap-frame::after{
  content:""; position:absolute; inset:6px; border:1px solid rgba(176,141,87,.25);
  border-radius:2px; pointer-events:none;
}
.efficap-frame img{ max-width:72%; height:auto; position:relative; }
.efficap-frame__cap{
  position:relative; font-family:var(--f-engrave); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold-deep); text-align:center;
}

/* =================================================================
   PAGES LÉGALES (mentions légales, politique de confidentialité)
   ================================================================= */
.legal-doc{ max-width:80ch; margin-inline:auto; }
.legal-doc .intro{ font-size:1.3125rem; line-height:1.6; color:var(--slate); margin-bottom:2.6rem; }
.legal-block{ padding-block:1.9rem; border-top:1px solid var(--line); }
.legal-block:first-of-type{ border-top:0; padding-top:0; }
.legal-block__k{
  font-family:var(--f-engrave); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); display:block; margin-bottom:.9rem;
}
.legal-block p{ margin-bottom:.85rem; line-height:1.72; }
.legal-block ul{ list-style:disc; padding-left:1.4rem; margin:.4rem 0 .9rem; }
.legal-block li{ margin-bottom:.45rem; }
.legal-block a{ color:var(--gold-deep); border-bottom:1px solid var(--line); }
.legal-block a:hover{ border-color:var(--gold); }
.legal-block .todo{ color:var(--gold-deep); font-style:italic; }
.legal-doc .updated{
  font-family:var(--f-engrave); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8a8a7c; margin-top:2.6rem; display:block;
}

/* =================================================================
   RESPONSIVE — raffinements mobile et tablette
   (placé en fin de feuille : prime sur les règles antérieures)
   ================================================================= */

/* Anti-débordement des titres gravés : un mot trop long en capitales
   se coupe proprement au lieu de provoquer un défilement horizontal. */
.display, .h-section, .hero .display, .pagehero .display, .imgband .display,
.card__title, .value-block__title, .tl-item__title, .instr__name{
  overflow-wrap:break-word;
}

/* Zone tactile du burger portée à ~56x44px (WCAG 2.5.5), visuel inchangé. */
.burger::after{ content:""; position:absolute; inset:-11px; }

/* Menu mobile défilable, avec respiration verticale sur petits écrans. */
.mobile-menu{ overflow-y:auto; padding-block:5.5rem; }

/* Chiffres clés accueil : 3 colonnes, dégressif jusqu'à 1 colonne.
   (remplace l'ancien style en ligne qui bloquait le responsive) */
.stats--3{ grid-template-columns:repeat(3,1fr); }

/* ---- Tablette et grand mobile (620 à 1024px) : deux colonnes
   plutôt que trois/quatre (desktop) ou une seule (ancien repli 860px) ---- */
@media (min-width:620px) and (max-width:1024px){
  .cards-3, .cards-4{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
}
/* EFFICAP : liste d'instruments en deux colonnes sur tablette / grand mobile
   (l'ancien repli 860px la réduisait à une colonne, trop aérée) */
@media (min-width:620px) and (max-width:860px){
  .instr{ grid-template-columns:repeat(2,1fr); }
  .instr__item{ border-right:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; }
  .instr__item:nth-child(2n){ border-right:0!important; }
  .instr__item:nth-last-child(-n+2){ border-bottom:0!important; }
}

/* ---- Tablette portrait et grand mobile (≤ 860px) ---- */
@media (max-width:860px){
  .hero__inner{ padding-block:7.5rem 4rem; }
  .pagehero__inner{ padding-block:6.5rem 3rem; }
  .hero__sub{ font-size:1.12rem; }
}

/* ---- Mobile (≤ 600px) ---- */
@media (max-width:600px){
  :root{ --section-y:clamp(3.4rem,9vh,5.5rem); }
  .display, .h-section{ letter-spacing:.03em; }
  .lead{ font-size:1.16rem; line-height:1.6; }
  .legal-doc .intro{ font-size:1.16rem; }
  .pullquote__mark{ font-size:3.6rem; height:2rem; }
  .efficap-frame img{ max-width:88%; }
  .badge{ font-size:.72rem; padding:.75rem 1.05rem; letter-spacing:.12em; }
  .to-top{ right:1rem; bottom:1rem; }
  /* bandeau de marque du menu : un peu d'air, ne touche plus les bords */
  .mobile-menu .eyebrow{ letter-spacing:.2em; padding-inline:1.2rem; text-align:center; }
  .mobile-menu .eyebrow::before{ display:none; }
  /* chiffres clés accueil en colonne unique, simple filet horizontal */
  .stats--3{ grid-template-columns:1fr; }
  .stats--3 .stat{ border-right:0; border-bottom:1px solid var(--line); }
  .stats--3 .stat:last-child{ border-bottom:0; }
}

/* ---- Petit mobile (≤ 380px) ---- */
@media (max-width:380px){
  :root{ --pad-x:1.15rem; }
  .display{ letter-spacing:.015em; }
}

/* ---- Écran bas (mobile en paysage) : compacter le menu plein écran ---- */
@media (max-height:640px){
  .mobile-menu{ gap:.85rem; padding-block:4.5rem; }
  .mobile-menu a{ font-size:1.02rem; }
}

/* masquer un élément sur la version responsive (mobile / tablette portrait) */
@media (max-width:860px){
  .hide-sm{ display:none !important; }
}

/* =================================================================
   GUILLEMET DE CITATION sur bandeau image (héritage) — plus marqué
   ================================================================= */
.imgband .pullquote__mark{ color:#fff; opacity:.92; font-size:clamp(4.6rem,7vw,7rem); height:3rem; }

/* =================================================================
   FRISE HORIZONTALE — instruments EFFICAP
   ================================================================= */
.frieze{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; position:relative; }
.frieze::before{
  content:""; position:absolute; top:23px; left:12.5%; right:12.5%; height:1px; z-index:0;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); opacity:.55;
}
.frieze__item{ position:relative; z-index:1; text-align:center; }
.frieze__node{
  width:46px; height:46px; margin:0 auto 1.5rem; border-radius:50%;
  border:1px solid var(--gold); background:var(--paper); color:var(--gold-deep);
  display:grid; place-items:center; font-family:var(--f-engrave); font-weight:500;
  font-size:.84rem; letter-spacing:.04em;
}
.frieze__name{
  font-family:var(--f-engrave); text-transform:uppercase; font-weight:400;
  font-size:1.02rem; letter-spacing:.045em; line-height:1.25; margin-bottom:.8rem;
}
.frieze__desc{ color:var(--slate); font-size:.98rem; line-height:1.6; max-width:30ch; margin-inline:auto; }
@media (max-width:859px){
  .frieze{ grid-template-columns:repeat(2,1fr); gap:2.6rem 1.5rem; }
  .frieze::before{ display:none; }
}
@media (max-width:560px){
  .frieze{ grid-template-columns:1fr; max-width:26rem; margin-inline:auto; }
}

/* =================================================================
   BANDEAU CITATION sur image (Walras, page Valeurs)
   image de fond + voile navy pour la lisibilité
   ================================================================= */
.quoteband{ position:relative; isolation:isolate; overflow:hidden; background:var(--navy); color:var(--cream); }
.quoteband__bg{ position:absolute; inset:0; z-index:-2; }
.quoteband__bg img{ width:100%; height:100%; object-fit:cover; }
.quoteband::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(14,34,53,.84) 0%, rgba(12,22,32,.9) 100%);
}
.quoteband .pullquote__mark{ color:var(--gold-bright); opacity:.8; }

/* =================================================================
   PILIERS D'ORGANISATION — architecture institutionnelle (équipe)
   trois cartes horizontales encadrées, pictos gravés
   ================================================================= */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.pillar{
  border:1px solid var(--line-light); border-radius:5px; padding:2.6rem 2rem;
  background:rgba(255,255,255,.03); text-align:center;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.pillar:hover{ transform:translateY(-5px); border-color:rgba(176,141,87,.5); box-shadow:0 30px 60px -34px rgba(0,0,0,.55); }
.pillar__icon{
  display:inline-grid; place-items:center; width:66px; height:66px; margin-bottom:1.6rem;
  border-radius:50%; border:1px solid var(--gold); color:var(--gold-bright);
}
.pillar__icon svg{ width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.pillar__title{
  font-family:var(--f-engrave); text-transform:uppercase; font-weight:400;
  font-size:1.04rem; letter-spacing:.045em; line-height:1.25; color:var(--cream); margin-bottom:1rem;
}
.pillar__desc{ color:rgba(247,242,233,.72); font-size:.98rem; line-height:1.62; }
@media (max-width:860px){
  .pillars{ grid-template-columns:1fr; max-width:34rem; margin-inline:auto; }
}

/* =================================================================
   FORMULAIRE — marqueur des champs obligatoires
   ================================================================= */
.req{ color:var(--gold-deep); margin-left:.12em; }
.form-legend{
  font-family:var(--f-engrave); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate); margin-bottom:.4rem;
}