/* REM — styles propres à la page methodologie.html (chargés après main.css) */
@media (prefers-reduced-motion:reduce){
    .intro-sigle{ display:none; }
    .intro-rem{ opacity:1; clip-path:none; }
    body.loaded #intro{ opacity:0; transition:opacity .5s; }
  }
@media (prefers-reduced-motion:reduce){
    header .logo, nav li, .bounce-ball-wrap{ opacity:1; translate:none; }
  }
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.3em; margin-bottom:-.3em; }
.bounce-ball-wrap{
    position:absolute; right:clamp(1.4rem,4vw,3.4rem); bottom:clamp(2.2rem,5vw,3.4rem);
    display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:3;
  }
.bounce-ball{
    width:22px; height:22px; border-radius:50%; background:var(--blue-2);
    animation:ballBounce 1.1s cubic-bezier(.5,0,1,.5) infinite alternate;
  }
.bounce-shadow{
    width:22px; height:5px; border-radius:50%; background:var(--blue-2); opacity:.25;
    animation:shadowSquash 1.1s cubic-bezier(.5,0,1,.5) infinite alternate;
  }
@keyframes ballBounce{ from{ transform:translateY(0); } to{ transform:translateY(-46px); } }
@keyframes shadowSquash{ from{ transform:scale(1); opacity:.25; } to{ transform:scale(.5); opacity:.08; } }
/* chaque logo a la même surface visuelle, quel que soit son format */
.client-logo img{ display:block; object-fit:contain; opacity:.9; }
h2 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.3em; margin-bottom:-.3em; }
.pillars{ position:relative; display:flex; flex-direction:column; gap:clamp(2rem,6vh,4rem); padding-bottom:4vh; }
.pillar{
    --top:calc(88px + var(--i) * 14px);
    position:sticky; top:var(--top);
    height:calc(100svh - var(--top) - 24px); min-height:460px;
    border-radius:clamp(22px,3vw,44px); overflow:hidden;
    background:var(--bg); color:var(--fg);
    box-shadow:0 -18px 50px rgba(11,15,20,.14);
    transform-origin:center top; will-change:transform;
  }
.pillar-inner{
    height:100%; display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.6rem,4vw,4rem);
    padding:clamp(1.8rem,4vw,3.6rem);
  }
.pillar-copy{ display:flex; flex-direction:column; justify-content:center; gap:1.3rem; }
.inline-logo{ display:inline-block; height:.78em; width:auto; vertical-align:baseline; margin:0 .08em; transform:translateY(.02em); }
.pillar-tag{
    align-self:flex-start; font-size:.82rem; font-weight:700; padding:.55rem 1.1rem;
    border:1px solid currentColor; border-radius:100px; opacity:.85; color:inherit;
    display:inline-flex; align-items:center; gap:.45rem;
    transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
  }
.pillar-tag:hover{ background:var(--fg); color:var(--bg); opacity:1; }
.pillar-tag .arr{ transition:transform .3s var(--ease); }
.pillar-tag:hover .arr{ transform:translate(2px,-2px); }
.pillar h3{
    font-family:var(--font); font-weight:800; letter-spacing:-.02em; line-height:.95;
    font-size:clamp(2.4rem,5.6vw,5.2rem);
  }
.pillar-copy p{ font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.6; max-width:430px; opacity:.86; }
.pillar-visual{ position:relative; display:flex; flex-direction:column; justify-content:center; }
.pillar-visual ul{ list-style:none; }
.pillar-visual li{
    font-weight:700; font-size:clamp(1.3rem,2.7vw,2.4rem); letter-spacing:-.015em; line-height:1.15;
    padding:.4rem 0;
    opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
.pillar.on .pillar-visual li{ opacity:1; transform:none; }
.pillar.on .pillar-visual li:nth-child(2){ transition-delay:.08s; }
.pillar.on .pillar-visual li:nth-child(3){ transition-delay:.16s; }
.pillar.on .pillar-visual li:nth-child(4){ transition-delay:.24s; }
.pillar.on .pillar-visual li:nth-child(5){ transition-delay:.32s; }
.pillar.on .pillar-visual li:nth-child(6){ transition-delay:.40s; }
.pillar.on .pillar-visual li:nth-child(7){ transition-delay:.48s; }
@media (max-width:860px){
    .pillar{ --top:calc(76px + var(--i) * 10px); min-height:0; height:auto; }
    .pillar-inner{ grid-template-columns:1fr; }
  }
@media (prefers-reduced-motion:reduce){
    .pillar{ transform:none !important; }
    .pillar-visual li{ opacity:1; transform:none; transition:none; }
  }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:2.6rem; } }
/* ---------- process / scrollytelling ---------- */
#approche{ display:block; }
#approche .section-head{ position:sticky; top:110px; margin-bottom:0; align-self:start; }
#approche{ align-items:center; }
@media (prefers-reduced-motion:reduce){ .wcard, .wcard-inner, .wcard-v{ transition:none; } }
@media (max-width:900px){
    #approche{ display:block; }
    #approche .section-head{ position:static; margin-bottom:3rem; }
  }
.xp-list li{ padding:1.4rem 0; border-top:1px solid var(--rule); }
.xp-list li:last-child{ border-bottom:1px solid var(--rule); }
@media (max-width:860px){ .xp-grid{ grid-template-columns:1fr; } .xp-copy{ position:static; } }
.benefit{ padding-top:1.6rem; }
@media (max-width:860px){ .benefits{ grid-template-columns:1fr; } }
@media (max-width:860px){ .contact-grid, .contact-form{ grid-template-columns:1fr; } }
/* ---------- l'expérience REM : un projet raconté pas à pas ---------- */
.journey-sec{ background:var(--grey-l); color:var(--grey-d); }
.journey-sec .lead{ color:#4b545e; max-width:420px; }
.journey{ position:relative; max-width:1240px; margin:0 auto; }
.journey-line{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; z-index:0; }
.journey-line path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.journey-line .track{ stroke:#cfd7e2; stroke-width:2; stroke-dasharray:1 9; }
.journey-line .draw{ stroke:var(--blue); stroke-width:3; }
.stop{
    position:relative; z-index:1; display:grid; grid-template-columns:96px minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(1.6rem,4vw,4.4rem); padding:clamp(2.6rem,5vw,4.6rem) 0; align-items:start;
  }
.stop-badge{
    grid-column:1; justify-self:center; width:68px; height:68px; border-radius:50%;
    background:var(--c); color:var(--cf); display:grid; place-items:center;
    font-weight:800; font-size:1.45rem; box-shadow:0 0 0 10px var(--grey-l);
  }
.stop-story{ grid-column:2; }
.stop-when{ font-weight:700; color:var(--blue); font-size:1rem; }
.stop h3{ font-weight:800; font-size:clamp(2.4rem,5vw,4.2rem); letter-spacing:-.02em; line-height:1; margin-top:.35rem; }
.stop-note{ display:block; margin-top:.9rem; font-weight:700; font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.35; color:var(--blue); }
.stop-story p{ font-size:clamp(1.05rem,1.3vw,1.16rem); line-height:1.7; color:#2b323b; max-width:480px; margin-top:1.2rem; }
.stop-take{ margin-top:1.8rem; max-width:480px; }
.stop-take b{ display:block; font-size:.92rem; color:#6b7480; font-weight:700; margin-bottom:.35rem; }
.stop-take span{ font-weight:700; font-size:1.1rem; line-height:1.45; }
.chat{ grid-column:3; display:flex; flex-direction:column; gap:1rem; padding-top:.4rem; }
.msg{ max-width:88%; display:flex; flex-direction:column; }
.msg .who{ font-size:.82rem; color:#6b7480; margin:0 1rem .35rem; }
.msg .bubble{ padding:1rem 1.25rem; border-radius:24px; font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.5; }
.msg.rem{ align-self:flex-start; }
.msg.rem .bubble{ background:var(--blue); color:#fff; border-bottom-left-radius:6px; }
.msg.you{ align-self:flex-end; align-items:flex-end; }
.msg.you .bubble{ background:#fff; color:var(--grey-d); border-bottom-right-radius:6px; box-shadow:0 1px 0 #d3dae3; }
.msg{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.stop.seen .msg{ opacity:1; transform:none; }
.stop.seen .msg:nth-child(2){ transition-delay:.7s; }
.stop.seen .msg:nth-child(3){ transition-delay:1.4s; }
.journey-end{
    position:relative; z-index:1; display:grid; grid-template-columns:96px minmax(0,1fr);
    column-gap:clamp(1.6rem,4vw,4.4rem); align-items:center; padding-top:clamp(2rem,4vw,3rem);
  }
.journey-dot{ grid-column:1; justify-self:center; width:18px; height:18px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 8px var(--grey-l); }
.journey-end-copy{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2rem; }
.journey-end-copy p{ font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.015em; line-height:1.1; }
.journey-sec .btn{ background:var(--grey-d); color:#fff; }
.journey-sec .btn .fill{ background:var(--blue); }
@media (max-width:900px){
    .stop{ grid-template-columns:56px minmax(0,1fr); row-gap:2rem; }
    .chat{ grid-column:2; }
    .stop-badge{ width:52px; height:52px; font-size:1.15rem; }
    .journey-end{ grid-template-columns:56px minmax(0,1fr); }
    .msg{ max-width:94%; }
  }
@media (prefers-reduced-motion:reduce){
    .msg{ opacity:1; transform:none; transition:none; }
  }
/* le cube du logo parcourt le chemin : petits bonds le long du trait, grand saut au-dessus de chaque étape */
.j-cube{ position:absolute; left:0; top:0; width:20px; height:20px; z-index:3; pointer-events:none; will-change:transform; }
.j-cube span{ display:block; width:100%; height:100%; background:var(--blue); transform-origin:50% 100%; }
.journey-dot{ transition:opacity .2s ease; }
.stop-badge.bump{ animation:badgeBump .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes badgeBump{ 0%{ transform:scale(1,1); } 30%{ transform:scale(1.14,.86); } 60%{ transform:scale(.95,1.06); } 100%{ transform:scale(1,1); } }
@media (prefers-reduced-motion:reduce){ .j-cube{ display:none; } }