/* ══════════════════════════════════════════════════════════════
   Rongqia France — Office Management Preview
   Stylesheet — palette, layout, motion, glassmorphism
   ══════════════════════════════════════════════════════════════ */
/* ─── tokens ─────────────────────────────────────────────────── */
:root{
  --rf-blue:#223A4C;
  --rf-cream:#F9F0D8;
  --rf-blue-soft:#3A5468;
  --rf-cream-warm:#F2E5C0;
  --rf-blue-deep:#1A2A38;
  --font-d:'Rajdhani',sans-serif;
  --font-b:'Open Sans',sans-serif;
  --font-m:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto;font-size:115%}
body{
  font-family:var(--font-b);
  font-size:1.062rem;
  line-height:1.6;
  color:var(--rf-blue);
  background:var(--rf-cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--rf-blue);color:var(--rf-cream)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* grain noise overlay — très subtil (à peine perceptible) */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  pointer-events:none;
  z-index:9999;
  mix-blend-mode:multiply;
  opacity:.08;
}

/* scroll progress bar */
.scroll-prog{
  position:fixed;top:0;left:0;height:1px;width:0;
  background:var(--rf-blue-soft);
  z-index:1000;transition:width .1s linear;
}

/* ─── layout helpers ─────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.sec{padding:180px 0;position:relative;z-index:2}
.hero{z-index:2}
footer{position:relative;z-index:2}
.sec-dark{background:var(--rf-blue);color:var(--rf-cream)}
.sec-dark ::selection{background:var(--rf-cream);color:var(--rf-blue)}

.sec-num{
  font-family:var(--font-m);
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--rf-blue-soft);
  margin-bottom:48px;
  display:block;
}
.sec-dark .sec-num{color:rgba(249,240,216,.55)}

h1,h2,h3{
  font-family:var(--font-d);
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.12;
}

/* ─── RF logo ────────────────────────────────────────────────── */
.rf-logo{display:block;width:auto;fill:currentColor;color:var(--rf-blue)}
.rf-logo-hero{
  display:block;
  width:130vw;
  max-width:none;
  height:auto;
  position:relative;
  left:50%;
  margin:0 0 180px;
  transform:translateX(-50%);
  opacity:0;
  clip-path:circle(0% at 50% 50%);
  -webkit-clip-path:circle(0% at 50% 50%);
  animation:
    fadeInLogo 1.6s cubic-bezier(.16,.84,.44,1) .2s forwards,
    revealHero 2s cubic-bezier(.16,.84,.44,1) .2s forwards;
}
@keyframes revealHero{
  from {clip-path:circle(8% at 50% 50%);-webkit-clip-path:circle(8% at 50% 50%)}
  to   {clip-path:circle(120% at 50% 50%);-webkit-clip-path:circle(120% at 50% 50%)}
}
@keyframes fadeInLogo{
  from{opacity:0;transform:translate(-50%,14px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.rf-logo-footer{height:48px;color:var(--rf-cream);margin-bottom:18px}
@media (max-width:1024px) and (orientation:portrait){
  .rf-logo-hero{width:96vw}
}
@media (max-width:860px){
  .rf-logo-hero{margin:0 0 120px}
  .rf-logo-footer{height:56px}
}
/* ─── Très petits écrans (Galaxy A06, iPhone SE…) ───────────── */
@media (max-width:480px){
  /* Filigrane réseau retiré sur mobile (mix-blend-mode interagit
     mal avec certains navigateurs Samsung/Chrome Android) */
  body::after{display:none !important}
  .wrap{padding:0 20px;max-width:100%}
  .sec{padding:72px 0}
  .hero{padding:56px 0 72px;min-height:auto;text-align:center;overflow:hidden}
  .hero-inner{padding:0;text-align:center}
  /* Logo hero : on annule TOUS les hacks de centrage desktop, on revient à un block centré simple */
  .rf-logo-hero{
    width:78vw !important;
    max-width:78vw !important;
    margin:0 auto 48px !important;
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }
  .hero .overline{
    font-size:clamp(1.4rem,6vw,1.9rem) !important;
    white-space:normal !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
    max-width:18ch !important;
    margin:0 auto 24px !important;
    text-align:center !important;
    display:block !important;
  }
  .hero h1{
    font-size:clamp(1.5rem,6vw,2rem) !important;
    margin:0 auto 20px !important;
    max-width:18ch !important;
    white-space:normal !important;
    text-align:center !important;
  }
  .hero-pitch{
    font-size:.95rem !important;
    white-space:normal !important;
    max-width:30ch !important;
    margin:8px auto 0 !important;
    padding:0 12px !important;
    line-height:1.5 !important;
    text-align:center !important;
  }
  /* Hero questions sur mobile : flex column (stack vertical), tout centré */
  .hero-questions{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin:32px auto 24px !important;
    max-width:100% !important;
    width:100% !important;
    padding-left:8px !important;
  }
  .hero-questions li{
    font-size:.95rem !important;
    line-height:1.4 !important;
  }
  .matter{padding:56px 0 80px}
  .matter-intro{margin-bottom:40px;font-size:clamp(1.5rem,6vw,2rem)}
  .bento{gap:8px}
  .bento-cell{padding:18px;min-height:100px}
  .bento-cell h3{font-size:1rem}
  .bento-cell p{font-size:.82rem}
  .method h2,.tarif h2,.contact h2{font-size:clamp(1.6rem,7vw,2.2rem)}
  .timeline li{grid-template-columns:48px 1fr;gap:16px;padding:24px 0}
  .timeline::before{left:24px}
  .timeline .num::after{left:24px}
  .timeline .num{font-size:1.3rem}
  .timeline h3{font-size:1.05rem}
  .timeline p{font-size:.88rem;max-width:none}
  .tarif-diptych{gap:14px}
  .tarif-card{padding:18px}
  .portrait .wrap > .portrait-def{margin-bottom:48px;font-size:1rem;max-width:30ch}
  .portrait .grid{gap:32px}
  .portrait .card{padding:0}
  .portrait .body .qualites li{padding:14px 16px;font-size:.92rem}
  .contact-grid{gap:24px}
  .contact-icon{display:none}
  .contact-confidentialite{font-size:.85rem;padding-left:14px}
  footer{padding:48px 0 40px}
  footer .wrap{padding:0 20px}
  footer .footer-grid{gap:32px}
  footer .footer-mark{padding-bottom:24px}
  footer .footer-cols{gap:24px}
  /* Tout centré sur mobile : les 3 cols passent en pile uniforme */
  footer .footer-col{align-items:center !important;text-align:center !important}
  footer .footer-brand p{text-align:center !important}
  footer .footer-legal a{align-self:center !important}
  footer .footer-mail{text-align:center !important}
  footer .footer-phone{text-align:center !important}
  footer .footer-phone a{display:inline-block !important}
  .scroll-cue{bottom:14px}
}


/* ─── hero ───────────────────────────────────────────────────── */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  position:relative;
  padding:80px 0 80px;
  overflow:hidden;
}


.hero-inner{position:relative;z-index:1;text-align:center}

/* ─── Scroll cue (flèche pulsée bas de hero) ─────────────────── */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  color:var(--rf-cream);
  text-decoration:none;
  opacity:0;
  z-index:2;
  animation:
    cueIn 1.4s var(--ease) 4.4s forwards,
    cuePulse 2.8s ease-in-out 5.8s infinite;
}
.scroll-cue svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.scroll-cue:hover{opacity:.95;animation-play-state:paused}
@keyframes cueIn{
  from{opacity:0;transform:translate(-50%,-10px)}
  to{opacity:.55;transform:translate(-50%,0)}
}
@keyframes cuePulse{
  0%,100%{opacity:.45;transform:translate(-50%,0)}
  50%{opacity:.85;transform:translate(-50%,5px)}
}
@media (max-width:720px){.scroll-cue{bottom:20px}}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{animation:cueIn 1s ease 1s forwards;opacity:.55}
}

.hero .overline{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.2rem,5vw,3.6rem);
  letter-spacing:.005em;
  text-transform:none;
  color:var(--rf-blue);
  margin:0 auto;
  max-width:none;
  display:block;
  text-align:center;
  line-height:1.1;
  white-space:nowrap;
  opacity:0;
  animation:fadeIn 2s var(--ease) 2s forwards;
}
.hero .overline em{
  font-style:normal;
  display:block;
  margin-top:14px;
  font-size:.5em;
  font-weight:400;
  color:var(--rf-blue-soft);
  letter-spacing:.01em;
}
.hero h1{
  font-size:clamp(2.4rem,5.4vw,4.6rem);
  max-width:18ch;
  margin-bottom:32px;
  opacity:0;
  animation:fadeIn 1.8s var(--ease) .9s forwards;
}
.hero h1 em{
  font-style:normal;
  color:var(--rf-blue-soft);
  display:block;
  margin-top:.15em;
}
.hero .tagline{
  font-family:var(--font-d);
  font-weight:500;
  font-size:1.4rem;
  color:var(--rf-blue-soft);
  margin-bottom:32px;
  opacity:0;
  animation:fadeIn 1s var(--ease) .8s forwards;
}
.hero .lede{
  max-width:54ch;
  margin-bottom:48px;
  opacity:0;
  animation:fadeIn 1s var(--ease) 1s forwards;
}
.cta-row{
  display:flex;gap:24px;flex-wrap:wrap;
  opacity:0;
  animation:fadeIn 1s var(--ease) 1.2s forwards;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── CTA ────────────────────────────────────────────────────── */
.cta{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 26px;
  font-family:var(--font-d);
  font-weight:600;
  font-size:0.9375rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  border:1px solid var(--rf-blue);
}
.cta-primary{background:var(--rf-blue);color:var(--rf-cream)}
.cta-primary:hover{background:transparent;color:var(--rf-blue);transform:translateY(-2px)}
.cta-secondary{background:transparent;color:var(--rf-blue)}
.cta-secondary:hover{background:var(--rf-blue);color:var(--rf-cream);transform:translateY(-2px)}
.cta-secondary::after{content:"→";transition:transform .3s var(--ease)}
.cta-secondary:hover::after{transform:translateX(4px)}

.sec-dark .cta-primary{background:var(--rf-cream);color:var(--rf-blue);border-color:var(--rf-cream)}
.sec-dark .cta-primary:hover{background:transparent;color:var(--rf-cream)}
.sec-dark .cta-secondary{color:var(--rf-cream);border-color:var(--rf-cream)}
.sec-dark .cta-secondary:hover{background:var(--rf-cream);color:var(--rf-blue)}

/* ─── reveal ─────────────────────────────────────────────────── */
.rv{opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}

/* ─── § Le mode ──────────────────────────────────────────────── */
.mode h2{font-size:clamp(2rem,3.6vw,3rem);max-width:18ch;margin-bottom:40px}
.mode .callout{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.3;
  max-width:24ch;
  margin:48px 0 36px;
  color:var(--rf-cream);
  border-left:2px solid var(--rf-cream);
  padding-left:24px;
}
.mode .prose{max-width:60ch;color:rgba(249,240,216,.85);margin-bottom:64px}
.mode-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-bottom:64px;
}
.mode-grid article{
  border-top:1px solid rgba(249,240,216,.25);
  padding-top:24px;
}
.mode-grid h3{
  font-size:1.25rem;
  letter-spacing:.01em;
  margin-bottom:14px;
}
.mode-grid p{
  font-size:0.9375rem;
  color:rgba(249,240,216,.82);
  line-height:1.55;
}
.mode .closer{
  font-family:var(--font-d);
  font-weight:500;
  font-size:1.25rem;
  max-width:48ch;
  color:var(--rf-cream);
}
.mode .closer em{
  font-style:italic;
  color:var(--rf-cream-warm);
}

/* ─── § Périmètre ────────────────────────────────────────────── */
.perim h2{font-size:clamp(2rem,3.6vw,3rem);max-width:20ch;margin-bottom:32px}
.perim .lede{max-width:60ch;margin-bottom:80px;color:var(--rf-blue-soft)}
.domaines{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(34,58,76,.16);
}
.domaines li{
  display:grid;
  grid-template-columns:60px 1fr;
  gap:24px;
  padding:32px 0;
  border-bottom:1px solid rgba(34,58,76,.16);
  align-items:start;
  transition:background .3s var(--ease);
}
.domaines li:nth-child(odd){border-right:1px solid rgba(34,58,76,.16);padding-right:32px}
.domaines li:nth-child(even){padding-left:32px}
.domaines li:hover{background:rgba(242,229,192,.5)}
.domaines .num{
  font-family:var(--font-m);
  font-size:0.8125rem;
  font-weight:500;
  color:var(--rf-blue-soft);
  padding-top:4px;
}
.domaines h3{
  font-family:var(--font-d);
  font-weight:600;
  font-size:1.15rem;
  margin-bottom:8px;
  color:var(--rf-blue);
}
.domaines p{font-size:0.9375rem;color:var(--rf-blue-soft);line-height:1.55}

/* ─── § Méthode ──────────────────────────────────────────────── */
.method h2{font-size:clamp(1.6rem,2.8vw,2.4rem);max-width:34ch;margin-bottom:32px;line-height:1.18}
.method .lede{max-width:60ch;margin-bottom:80px;color:var(--rf-blue-soft)}
.timeline{
  list-style:none;
  position:relative;
}
.timeline::before{
  content:"";
  position:absolute;
  left:48px;top:12px;bottom:12px;
  width:1px;background:rgba(34,58,76,.2);
}
.timeline li{
  position:relative;
  display:grid;
  grid-template-columns:96px 1fr;
  gap:48px;
  padding:32px 0;
  align-items:start;
}
.timeline .num{
  font-family:var(--font-d);
  font-weight:600;
  font-size:1.6rem;
  color:var(--rf-blue);
  position:relative;
  z-index:1;
}
.timeline .num::after{
  content:"";
  position:absolute;
  left:48px;top:50%;
  width:8px;height:8px;
  background:var(--rf-blue);
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.timeline h3{
  font-family:var(--font-d);
  font-size:1.4rem;
  margin-bottom:8px;
}
.timeline .meta{
  font-family:var(--font-m);
  font-size:0.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rf-blue-soft);
  margin-bottom:14px;
}
.timeline p{max-width:60ch;color:var(--rf-blue-soft);font-size:0.9375rem;line-height:1.6}

/* ─── § Tarif ────────────────────────────────────────────────── */
.tarif h2{font-size:clamp(2rem,3.6vw,3rem);max-width:18ch;margin-bottom:32px}
.tarif .lede{max-width:60ch;margin-bottom:48px;color:rgba(249,240,216,.85)}
.tarif-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  border-top:1px solid rgba(249,240,216,.25);
  padding-top:32px;
  margin-bottom:56px;
}
.tarif-grid div h4{
  font-family:var(--font-m);
  font-size:0.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(249,240,216,.6);
  margin-bottom:10px;
  font-weight:500;
}
.tarif-grid div p{
  font-family:var(--font-d);
  font-weight:500;
  font-size:1.05rem;
  color:var(--rf-cream);
  line-height:1.35;
}
.tarif .closer{max-width:60ch;color:rgba(249,240,216,.85)}

/* ─── Manifeste (creed) ──────────────────────────────────────── */
.creed{padding:120px 0;background:var(--rf-cream)}
.creed h2{
  font-size:clamp(1.6rem,2.6vw,2.2rem);
  margin-bottom:56px;
  max-width:24ch;
  color:var(--rf-blue);
}
.creed-list{
  list-style:none;
  border-top:1px solid rgba(34,58,76,.15);
}
.creed-list li{
  padding:18px 0;
  border-bottom:1px solid rgba(34,58,76,.15);
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.9rem);
  line-height:1.25;
  color:var(--rf-blue);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
}
.creed-list li span:first-child{flex:1}
.creed-list li em{
  font-style:normal;
  color:var(--rf-blue-soft);
  font-size:.85em;
  white-space:nowrap;
  font-family:var(--font-d);
}
.creed-list li.twist{
  margin-top:8px;
  font-weight:600;
}
.creed-list li.twist em{
  color:var(--rf-blue);
  font-weight:600;
}
@media (max-width:600px){
  .creed-list li{flex-direction:column;align-items:flex-start;gap:4px;padding:14px 0}
  .creed-list li em{font-size:.95em}
}


/* ─── § Matière (manifeste court + bento 7 domaines) ─────────── */
.matter{padding:80px 0 140px;background:var(--rf-cream)}
.matter-intro{
  max-width:28ch;
  margin:0 auto 96px;
  text-align:center;
  font-family:var(--font-d);
  font-weight:600;
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  line-height:1.2;
  color:var(--rf-blue);
}
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,minmax(220px,auto));
  gap:14px;
}
.bento-cell{
  background:var(--rf-cream-warm);
  padding:32px;
  display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;
  transition:background .6s var(--ease),color .6s var(--ease),border-color .6s var(--ease);
  border:1px solid rgba(34,58,76,.12);
}
.bento-cell:hover{background:var(--rf-blue);color:var(--rf-cream);border-color:var(--rf-blue)}
/* ─── Pictos SVG des cellules bento ─────────────────────────── */
.bento-cell .bento-icon{
  width:32px;
  height:32px;
  color:rgba(249,240,216,.6);
  margin-bottom:auto;
  align-self:flex-start;
  transition:color .6s var(--ease);
}
.bento-cell.c1 .bento-icon{width:42px;height:42px}
.bento-cell:hover .bento-icon{color:var(--rf-blue-soft)}
.bento-cell:hover p{color:rgba(249,240,216,.8)}
.bento-cell h3{
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.4rem);
  line-height:1.15;
  margin-bottom:10px;
  color:inherit;
  hyphens:auto;
  -webkit-hyphens:auto;
  word-break:normal;
  overflow-wrap:break-word;
  transition:color .6s var(--ease);
}
.bento-cell p{
  font-size:0.875rem;line-height:1.5;
  color:var(--rf-blue-soft);
  transition:color .6s var(--ease);
}
/* Grid 3×2 — c1 large en haut, 4 standards autour */
.bento-cell.c1{grid-column:1/3;grid-row:1;background:rgba(249,240,216,.07);border-color:rgba(249,240,216,.22)}
.bento-cell.c1 h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.bento-cell.c2{grid-column:3;grid-row:1}
.bento-cell.c3{grid-column:1;grid-row:2}
.bento-cell.c4{grid-column:2;grid-row:2}
.bento-cell.c5{grid-column:3;grid-row:2}
/* Mobile : 5 cellules en pile verticale propre */
@media (max-width:860px){
  .bento{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto;gap:10px}
  .bento-cell,
  .bento-cell.c1,.bento-cell.c2,.bento-cell.c3,.bento-cell.c4,
  .bento-cell.c5{
    grid-column:auto;grid-row:auto;padding:22px;min-height:120px;
  }
  .matter-intro{margin-bottom:48px}
}


.tarif-sub{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.4rem);
  color:rgba(249,240,216,.82);
  margin:-32px 0 32px;
  letter-spacing:.005em;
}
/* ─── § Portrait ─────────────────────────────────────────────── */
.portrait{position:relative;overflow:hidden;isolation:isolate}
.portrait .wrap{position:relative;z-index:1}

/* Filigrane réseau global — DÉSACTIVÉ (décision finale Tom 26/05) */
body{position:relative}
.portrait .grid{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:160px;
  align-items:start;
}
.portrait .card{position:sticky;top:120px}
.portrait .card .name{
  font-family:var(--font-d);
  font-weight:600;
  font-size:clamp(1.8rem,2.8vw,2.4rem);
  line-height:1.1;
  margin-bottom:14px;
  letter-spacing:-.005em;
}
.portrait .card .title{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.05rem,1.4vw,1.2rem);
  color:var(--rf-blue);
  line-height:1.3;
  margin-bottom:24px;
}
.portrait .card .title em{
  display:block;
  font-style:normal;
  color:var(--rf-blue-soft);
  font-weight:400;
  font-size:.85em;
  margin-top:2px;
  letter-spacing:.01em;
}
.portrait .card .meta{
  font-family:var(--font-m);
  font-size:0.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rf-blue-soft);
  line-height:2;
}
.portrait .body p{
  margin-bottom:24px;
  max-width:62ch;
  font-size:1.062rem;
  line-height:1.65;
}
.portrait .body p:last-child{margin-bottom:0}
.portrait .body strong{
  font-family:var(--font-d);
  font-weight:600;
  color:var(--rf-blue);
  letter-spacing:.005em;
}
.portrait .body em{
  font-style:normal;
  color:var(--rf-blue-soft);
}
.portrait .body .closer{
  border-left:2px solid var(--rf-blue);
  padding-left:24px;
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.45;
  color:var(--rf-blue);
  max-width:60ch;
  margin-top:8px;
}

.portrait .body .portrait-hook{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  line-height:1.25;
  color:var(--rf-blue);
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(34,58,76,.18);
  max-width:none;
}


/* ─── § Contact ──────────────────────────────────────────────── */
.contact{text-align:left;padding:160px 0}
.contact h2{font-size:clamp(2.4rem,4.4vw,3.6rem);max-width:18ch;margin-bottom:32px}
.contact .lede{max-width:54ch;margin-bottom:48px;color:var(--rf-blue-soft)}
.contact-confidentialite{
  font-family:var(--font-b);
  font-size:clamp(.85rem,1.05vw,1rem);
  line-height:1.55;
  max-width:54ch;
  margin:0 0 40px;
  padding-left:18px;
  border-left:1px solid rgba(249,240,216,.22);
  color:rgba(249,240,216,.72);
}
.contact-mail{
  font-family:var(--font-d);
  font-weight:600;
  font-size:clamp(1.6rem,3vw,2.4rem);
  display:inline-block;
  padding-bottom:6px;
  border-bottom:2px solid var(--rf-blue);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.contact-mail:hover{color:var(--rf-blue-soft);border-color:var(--rf-blue-soft)}
.contact .meta{
  font-family:var(--font-m);
  font-size:0.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rf-blue-soft);
  margin-top:32px;
}

/* ─── footer ─────────────────────────────────────────────────── */
footer{
  background:var(--rf-blue-deep);
  color:rgba(249,240,216,.65);
  padding:48px 0;
  font-size:0.8125rem;
  line-height:1.6;
}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px}
footer strong{color:var(--rf-cream);font-weight:600;font-family:var(--font-d);letter-spacing:.04em}

/* ─── responsive ─────────────────────────────────────────────── */
@media (max-width:860px){
  .sec{padding:96px 0}
  .mode-grid,.domaines,.tarif-grid{grid-template-columns:1fr}
  .domaines li:nth-child(odd){border-right:none;padding-right:0}
  .domaines li:nth-child(even){padding-left:0}
  .timeline li{grid-template-columns:64px 1fr;gap:24px}
  .timeline::before{left:32px}
  .timeline .num::after{left:32px}
  .portrait .grid{grid-template-columns:1fr;gap:48px}
  .portrait .card{position:static}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════
   INVERSION GLOBALE — fond bleu, texte crème
   ══════════════════════════════════════════════════════════════ */
body{
  background:
    radial-gradient(ellipse 1400px 900px at var(--g1x,30%) var(--g1y,25%), rgba(58,84,104,.22), transparent 55%),
    radial-gradient(ellipse 1100px 800px at var(--g2x,75%) var(--g2y,75%), rgba(58,84,104,.16), transparent 60%),
    radial-gradient(ellipse 800px 600px at var(--g3x,50%) var(--g3y,50%), rgba(249,240,216,.04), transparent 70%),
    var(--rf-blue);
  background-attachment:fixed,fixed,fixed,fixed;
  color:var(--rf-cream);
  animation:nappe 60s ease-in-out infinite alternate;
}
@property --g1x{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --g1y{syntax:'<percentage>';inherits:false;initial-value:25%}
@property --g2x{syntax:'<percentage>';inherits:false;initial-value:75%}
@property --g2y{syntax:'<percentage>';inherits:false;initial-value:75%}
@property --g3x{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --g3y{syntax:'<percentage>';inherits:false;initial-value:50%}
@keyframes nappe{
  0%   {--g1x:30%;--g1y:25%;--g2x:75%;--g2y:75%;--g3x:50%;--g3y:50%}
  50%  {--g1x:70%;--g1y:60%;--g2x:25%;--g2y:35%;--g3x:60%;--g3y:40%}
  100% {--g1x:35%;--g1y:75%;--g2x:80%;--g2y:30%;--g3x:40%;--g3y:60%}
}
@media (prefers-reduced-motion: reduce){
  body{animation:none}
}
::selection{background:var(--rf-cream);color:var(--rf-blue)}

/* Hero */
.hero{background:var(--rf-blue)}
.hero .overline{color:var(--rf-cream)}
.hero .overline em{color:rgba(249,240,216,.55)}
.rf-logo-hero{color:var(--rf-cream)}

/* Section "sec-dark" (mode + combien) → bascule en clair */
.sec-dark{background:var(--rf-cream);color:var(--rf-blue)}
.sec-dark .sec-num{color:var(--rf-blue-soft)}
.sec-dark .callout{color:var(--rf-blue);border-left-color:var(--rf-blue)}
.sec-dark .prose{color:var(--rf-blue-soft)}
.sec-dark .closer{color:var(--rf-blue)}
.sec-dark h2{color:var(--rf-blue)}
.sec-dark ::selection{background:var(--rf-blue);color:var(--rf-cream)}
.tarif-sub{color:var(--rf-blue-soft)}

/* Sections "light" (matter / method / portrait / contact) → fond bleu */
.matter,.contact{background:var(--rf-blue)}
.method{background:var(--rf-blue-deep)}
.portrait{background:var(--rf-blue-deep)}
section[id="method"]{background:var(--rf-cream-warm) !important;background:var(--rf-blue-deep) !important}

/* sec-num + headings + paragraphs dans les sections inversées */
.matter .sec-num,.contact .sec-num,.method .sec-num,.portrait .sec-num{
  color:rgba(249,240,216,.55);
}
.matter h2,.matter h3,.contact h2,.method h2,.method h3,.portrait h2,.portrait h3{
  color:var(--rf-cream);
}
.matter .matter-intro{color:var(--rf-cream)}
.method .lede,.contact .lede{color:rgba(249,240,216,.85)}

/* Bento cells inversés */
.bento-cell{
  background:rgba(249,240,216,.04);
  border-color:rgba(249,240,216,.15);
  color:var(--rf-cream);
  backdrop-filter:blur(8px) saturate(110%);
  -webkit-backdrop-filter:blur(8px) saturate(110%);
}
.bento-cell h3{color:var(--rf-cream)}
.bento-cell p{color:rgba(249,240,216,.72)}
.bento-cell:hover{background:var(--rf-cream);color:var(--rf-blue);border-color:var(--rf-cream)}
.bento-cell:hover h3{color:var(--rf-blue)}
.bento-cell:hover p{color:var(--rf-blue-soft)}

/* Timeline (méthode) */
.timeline::before{background:rgba(249,240,216,.2)}
.timeline .num{color:var(--rf-cream)}
.timeline .num::after{background:var(--rf-cream)}
.timeline h3{color:var(--rf-cream)}
.timeline .meta{color:rgba(249,240,216,.55)}
.timeline p{color:rgba(249,240,216,.8)}

/* Portrait */
.portrait .card .name,.portrait .card .title{color:var(--rf-cream)}
.portrait .card .title em{color:rgba(249,240,216,.6)}
.portrait .card .meta{color:rgba(249,240,216,.55)}
.portrait .body p{color:rgba(249,240,216,.85)}
.portrait .body strong{color:var(--rf-cream)}
.portrait .body em{color:rgba(249,240,216,.75)}
.portrait .body .closer{color:var(--rf-cream);border-left-color:var(--rf-cream)}
.portrait .body .portrait-hook{color:var(--rf-cream);border-bottom-color:rgba(249,240,216,.2)}

/* Contact */
.contact h2{color:var(--rf-cream)}
.contact .lede{color:rgba(249,240,216,.8)}
.contact-mail{color:var(--rf-cream);border-bottom-color:var(--rf-cream)}
.contact-mail:hover{color:rgba(249,240,216,.65);border-bottom-color:rgba(249,240,216,.65)}
.contact .meta{color:rgba(249,240,216,.55)}

/* Scroll prog */
.scroll-prog{background:rgba(249,240,216,.45)}

/* Grain noise overlay : sur fond sombre, on bascule en screen (très léger) */
body::before{mix-blend-mode:screen;opacity:.05}


/* ─── Footer : logo en row + 3 cols égales alignées ──────────── */
footer{padding:96px 0 80px}
footer .wrap{padding:0 48px}
footer .footer-grid{
  display:flex;
  flex-direction:column;
  gap:64px;
}
footer .footer-mark{
  display:flex;
  justify-content:center;
  padding-bottom:48px;
  border-bottom:1px solid rgba(249,240,216,.10);
}
footer .footer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:80px;
  align-items:start;
}
footer .footer-col{display:flex;flex-direction:column}
footer .footer-brand p{margin:0;line-height:1.7}
footer .footer-contact{text-align:center;align-items:center}
footer .footer-legal{gap:10px}
@media (max-width:860px){
  footer{padding:64px 0 56px}
  footer .wrap{padding:0 32px}
  footer .footer-grid{gap:48px}
  footer .footer-mark{padding-bottom:32px}
  footer .footer-cols{grid-template-columns:1fr;gap:40px}
}
footer .footer-label{
  font-family:var(--font-m);
  font-size:0.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(249,240,216,.5);
  margin-bottom:14px;
}
footer .footer-mail{
  font-family:var(--font-d);
  font-weight:600;
  font-size:clamp(1.1rem,1.4vw,1.35rem);
  color:var(--rf-cream);
  display:inline-block;
  padding-bottom:4px;
  border-bottom:1px solid var(--rf-cream);
  transition:opacity .25s var(--ease);
}
footer .footer-mail:hover{opacity:.7}
footer .footer-phone{
  margin-top:18px;
  font-size:0.8125rem;
  line-height:1.5;
  color:rgba(249,240,216,.85);
}
footer .footer-phone span{
  display:block;
  margin-top:2px;
  font-size:0.6875rem;
  font-family:var(--font-m);
  letter-spacing:.08em;
  color:rgba(249,240,216,.5);
  text-transform:uppercase;
}
footer .footer-legal a{
  font-size:0.8125rem;
  color:rgba(249,240,216,.7);
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
  align-self:flex-start;
}
footer .footer-legal a:hover{
  color:var(--rf-cream);
  border-bottom-color:var(--rf-cream);
}
@media (max-width:860px){
  footer .footer-grid{grid-template-columns:1fr;gap:32px}
}

/* ─── Justification typographique sur paragraphes longs ──────── */
.mode .prose,
.method .timeline p,
.portrait .body p,
.tarif .closer{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:8 4 4;
}
/* Garder en plain les éléments courts / décoratifs */
.portrait .body .portrait-hook,
.portrait .body .closer,
.method .timeline .meta,
.method .lede,
.matter-intro,
.tarif-sub{
  text-align:initial;
  hyphens:none;
}

/* ─── Glissés-fondus au scroll (gauche / droite) ─────────────── */
.rv-left{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv-left.in{opacity:1;transform:translateX(0)}
.rv-right{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv-right.in{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion: reduce){
  .rv-left,.rv-right{opacity:1;transform:none}
}

/* ─── § Forfait par mission : diptyque deux scénarios ────────── */
.tarif-lede{
  max-width:62ch;
  margin-bottom:48px;
  font-size:1.05rem;
  color:rgba(249,240,216,.85);
  line-height:1.6;
}
.tarif-diptych{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:8px;
}
.tarif-card{
  padding:36px 32px;
  border:1px solid rgba(34,58,76,.16);
  background:rgba(249,240,216,.04);
  position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.tarif-card:hover{background:rgba(249,240,216,.08);border-color:rgba(249,240,216,.32)}
.tarif-card h3{
  font-family:var(--font-d);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(249,240,216,.55);
  margin-bottom:16px;
}
.tarif-card p{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.4;
  color:var(--rf-cream);
}
@media (max-width:640px){
  .tarif-diptych{grid-template-columns:1fr;gap:14px}
  .tarif-card{padding:28px 24px}
}
/* Overrides inversion : sec-dark (clair) → diptyque sombre sur fond crème */
.sec-dark .tarif-lede{color:rgba(34,58,76,.78)}
.sec-dark .tarif-card{
  border-color:rgba(34,58,76,.18);
  background:rgba(34,58,76,.04);
}
.sec-dark .tarif-card:hover{background:rgba(34,58,76,.08);border-color:rgba(34,58,76,.32)}
.sec-dark .tarif-card h3{color:rgba(34,58,76,.55)}
.sec-dark .tarif-card p{color:var(--rf-blue)}

/* ─── § Matière — fond plein, filigrane global suffit ─────────── */
.matter{position:relative;overflow:hidden}
.matter > .wrap{position:relative;z-index:2}

/* ─── § Forfait : closer justifiant la valeur ────────────────── */
.tarif-closer{
  margin-top:56px;
  max-width:62ch;
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.1rem,1.6vw,1.4rem);
  line-height:1.5;
  color:var(--rf-cream);
}
.tarif-closer em{
  font-style:normal;
  display:block;
  margin-top:10px;
  color:rgba(249,240,216,.65);
  font-size:.85em;
  font-weight:400;
}
.sec-dark .tarif-closer{color:var(--rf-blue)}
.sec-dark .tarif-closer em{color:var(--rf-blue-soft)}

/* ─── Contact CTA : bouton "Ouvrir l'agenda" ─────────────────── */
.contact-cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:18px 36px;
  font-family:var(--font-d);
  font-weight:600;
  font-size:clamp(1.05rem,1.4vw,1.25rem);
  letter-spacing:.02em;
  color:var(--rf-blue);
  background:var(--rf-cream);
  border:1px solid var(--rf-cream);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
  margin-bottom:24px;
}
.contact-cta::after{
  content:"→";
  transition:transform .3s var(--ease);
}
.contact-cta:hover{
  transform:translateY(-2px);
  background:transparent;
  color:var(--rf-cream);
}
.contact-cta:hover::after{transform:translateX(4px)}
.contact-mail-inline{
  color:var(--rf-cream);
  border-bottom:1px solid rgba(249,240,216,.4);
  padding-bottom:1px;
}
.contact-mail-inline:hover{border-bottom-color:var(--rf-cream)}
.sec-dark .contact-cta{background:var(--rf-blue);color:var(--rf-cream);border-color:var(--rf-blue)}
.sec-dark .contact-cta:hover{background:transparent;color:var(--rf-blue)}

/* ─── Style dictionnaire (pour citation Larousse dans portrait) ─ */
.portrait .body .dico-pos{
  font-family:var(--font-m);
  font-size:.7em;
  font-style:italic;
  color:rgba(249,240,216,.55);
  margin:0 6px 0 2px;
  letter-spacing:.04em;
}
.portrait .body .dico-source{
  font-family:var(--font-m);
  font-size:.7em;
  color:rgba(249,240,216,.5);
  margin-left:4px;
}
.portrait .body p strong{
  font-family:var(--font-d);
  font-weight:600;
  color:var(--rf-cream);
}
.portrait .body p em{
  font-style:italic;
  color:rgba(249,240,216,.92);
}

/* ─── Liste qualités portrait — 3 clusters empilés ───────────── */
.portrait .body .qualites{
  list-style:none;
  margin:24px 0 32px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.portrait .body .qualites li{
  font-family:var(--font-b);
  font-weight:400;
  font-size:clamp(1rem,1.3vw,1.15rem);
  line-height:1.55;
  color:rgba(249,240,216,.78);
  padding:18px 22px;
  border:1px solid rgba(249,240,216,.18);
  background:rgba(249,240,216,.04);
}
.portrait .body .qualites li strong{
  font-family:var(--font-d);
  font-weight:600;
  color:var(--rf-cream);
  margin-right:4px;
}
.portrait .body .qualites li::before{content:none}

/* ─── Picto agenda dans § Contact (apparition douce) ─────────── */
.contact-icon{
  display:block;
  width:clamp(120px,16vw,200px);
  height:auto;
  color:rgba(249,240,216,.7);
  margin:0;
  justify-self:end;
  opacity:0;
  transform:translateY(18px) scale(.82) rotate(-4deg);
  transition:
    opacity 1.4s cubic-bezier(.22,.61,.36,1) .1s,
    transform 1.4s cubic-bezier(.22,.61,.36,1) .1s,
    color .6s var(--ease);
}
.contact-icon.in{
  opacity:.78;
  transform:translateY(0) scale(1) rotate(0deg);
}
.contact-icon:hover{color:var(--rf-cream)}
.sec-dark .contact-icon{color:rgba(34,58,76,.7)}
.sec-dark .contact-icon:hover{color:var(--rf-blue)}
@media (max-width:860px){
  .contact-icon{width:90px;margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .contact-icon{
    opacity:.78;
    transform:none;
    transition:color .3s linear;
  }
}

/* ─── Aération section portrait + avatar placeholder ─────────── */
.portrait.sec{padding:180px 0}
.portrait .body p{margin-bottom:42px;line-height:1.75}
.portrait .body .portrait-hook{margin-bottom:64px;padding-bottom:40px}
.portrait .body .qualites{margin:40px 0 64px;gap:14px}
.portrait .body .qualites li{padding:16px 18px}
.portrait .card{position:sticky;top:140px}
.portrait .card .name{margin-bottom:18px}
.portrait .card .title{margin-bottom:32px}

/* Avatar placeholder */
.portrait .card-avatar{
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(249,240,216,.06);
  border:1px solid rgba(249,240,216,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-d);
  font-weight:600;
  font-size:62px;
  letter-spacing:.04em;
  color:rgba(249,240,216,.85);
  margin-bottom:36px;
  user-select:none;
}
.portrait .card-avatar-note{
  display:block;
  margin:-24px 0 28px;
  font-family:var(--font-m);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(249,240,216,.4);
}

@media (max-width:860px){
  .portrait.sec{padding:140px 0}
  .portrait .grid{gap:72px}
  .portrait .card-avatar{width:120px;height:120px;font-size:44px;margin-bottom:24px}
}

/* ─── Contact : grille texte / picto à droite ───────────────── */
.contact .contact-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:64px;
  align-items:center;
}
.contact-text{max-width:48ch}
@media (max-width:860px){
  .contact .contact-grid{grid-template-columns:1fr;gap:32px}
  .contact .contact-icon{justify-self:start}
}

/* ─── Portrait : ligne d'intro repositionnée (ex-hook) ───────── */
.portrait .body .portrait-line{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  line-height:1.3;
  color:var(--rf-cream);
  margin-bottom:48px;
}

/* ─── Portrait : def modeste / claim hero ────────────────────── */
.portrait .wrap > .portrait-def{
  font-family:var(--font-b);
  font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  line-height:1.55;
  color:rgba(249,240,216,.75);
  text-align:center;
  margin:0 auto 96px;
  padding:0;
  border:none;
  max-width:54ch;
}
.portrait .wrap > .portrait-def strong{
  font-family:var(--font-d);
  font-weight:600;
  color:var(--rf-cream);
}
.portrait .wrap > .portrait-def em{
  font-style:italic;
}
.portrait .wrap > .portrait-def .dico-pos,
.portrait .wrap > .portrait-def .dico-source{
  font-family:var(--font-m);
  font-size:.42em;
  letter-spacing:.04em;
  color:rgba(249,240,216,.5);
  vertical-align:.25em;
}
@media (max-width:860px){
  .portrait .wrap > .portrait-def{margin-bottom:72px;max-width:24ch}
}
.portrait .body .portrait-claim{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.8rem,2.8vw,2.4rem);
  line-height:1.25;
  color:var(--rf-cream);
  margin-bottom:56px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(249,240,216,.2);
}

/* ─── Hero : 3 questions sur une seule ligne (desktop), grandes, cadence très lente ───── */
.hero-questions{
  list-style:none;
  margin:104px auto 104px;
  padding:0;
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:baseline;
  gap:32px;
  max-width:none;
  width:100%;
  text-align:left;
}
.hero-questions li{
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.3rem,1.7vw,1.65rem);
  line-height:1.4;
  color:var(--rf-cream);
  padding-left:18px;
  border-left:1px solid rgba(249,240,216,.28);
  position:relative;
  opacity:0;
  animation:fadeIn 1s var(--ease) forwards;
  transition:border-color .3s var(--ease),color .3s var(--ease);
  white-space:nowrap;
}
.hero-questions li:hover{border-left-color:var(--rf-cream)}
/* Cadence très rapide — 0.4 s entre chaque question */
.hero-questions li:nth-child(1){animation-delay:4.3s}
.hero-questions li:nth-child(2){animation-delay:4.7s}
.hero-questions li:nth-child(3){animation-delay:5.1s}
.hero-pitch{
  max-width:none;
  margin:0 auto 16px;
  font-family:var(--font-d);
  font-weight:500;
  font-size:clamp(1.25rem,1.8vw,1.6rem);
  line-height:1.4;
  color:var(--rf-cream);
  text-align:center;
  white-space:nowrap;
  letter-spacing:.005em;
  opacity:0;
  animation:fadeIn 1.6s var(--ease) 6.8s forwards;
}
@media (max-width:860px){
  .hero-pitch{white-space:normal;max-width:32ch;font-size:clamp(1.1rem,3.2vw,1.35rem);line-height:1.4}
}
@media (max-width:900px){
  .hero-questions{flex-direction:column;flex-wrap:wrap;align-items:flex-start;gap:18px;margin:40px auto 32px}
  .hero-questions li{white-space:normal;font-size:clamp(1.15rem,3.5vw,1.4rem)}
}

/* ─── Matter intro sous-ligne ────────────────────────────────── */
.matter-intro em{
  display:block;
  margin-top:14px;
  font-style:normal;
  font-weight:400;
  font-family:var(--font-d);
  font-size:.55em;
  color:rgba(249,240,216,.65);
  letter-spacing:.01em;
}