/* REM — styles propres à la page index.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:.2rem; z-index:3;
  }
/* le petit cube du logo rebondit (écrasement à la réception, quart de tour en l'air) */
.bounce-ball{
    width:20px; height:20px; transform-origin:50% 100%;
    animation:cubeHop .95s infinite;
  }
.bounce-ball span{
    display:block; width:100%; height:100%; background:#0066FF;
    animation:cubeSpin .95s infinite;
  }
.bounce-shadow{
    width:24px; height:5px; border-radius:50%; background:#0066FF; opacity:.3;
    animation:shadowSquash .95s infinite;
  }
@keyframes cubeHop{
    0%   { transform:translateY(0) scale(1.35,.62); animation-timing-function:cubic-bezier(.3,0,.6,1); }
    12%  { transform:translateY(-4px) scale(.8,1.22); animation-timing-function:cubic-bezier(.2,.7,.4,1); }
    48%  { transform:translateY(-46px) scale(1,1); animation-timing-function:cubic-bezier(.6,0,.85,.4); }
    84%  { transform:translateY(0) scale(.86,1.16); animation-timing-function:cubic-bezier(.2,.8,.4,1); }
    92%  { transform:translateY(0) scale(1.4,.58); animation-timing-function:ease-out; }
    100% { transform:translateY(0) scale(1.35,.62); }
  }
@keyframes cubeSpin{
    0%, 12% { transform:rotate(0deg); animation-timing-function:cubic-bezier(.45,0,.55,1); }
    84%, 100% { transform:rotate(-90deg); }
  }
@keyframes shadowSquash{
    0%, 92%, 100% { transform:scale(1.15); opacity:.32; }
    48% { transform:scale(.45); opacity:.08; }
  }
@media (prefers-reduced-motion:reduce){ .bounce-ball, .bounce-ball span, .bounce-shadow{ animation:none; } }
/* chaque logo a la même surface visuelle, quel que soit son format */
/* logos : même poids visuel, monochrome comme le bandeau du dessus, couleurs au survol */
.cl{ position:relative; display:block; }
.cl::before, .cl::after{ content:""; position:absolute; inset:0; background:center / contain no-repeat; transition:opacity .45s var(--ease); }
.cl::before{ opacity:.6; }
.cl::after{ opacity:0; }
.client-logo:hover .cl::before{ opacity:0; }
.client-logo:hover .cl::after{ opacity:1; }
.cl-0{ width:calc(100px * var(--ls)); height:calc(51px * var(--ls)); }
.cl-0::before{ background-image:url(../../assets/img/clients/orpi-mono.webp); }
.cl-0::after{ background-image:url(../../assets/img/clients/orpi-couleur.webp); }
.cl-1{ width:calc(223px * var(--ls)); height:calc(31px * var(--ls)); }
.cl-1::before{ background-image:url(../../assets/img/clients/justbeflex-mono.webp); }
.cl-1::after{ background-image:url(../../assets/img/clients/justbeflex-couleur.webp); }
.cl-2{ width:calc(163px * var(--ls)); height:calc(51px * var(--ls)); }
.cl-2::before{ background-image:url(../../assets/img/clients/terrasses-de-clairefontaine-mono.webp); }
.cl-2::after{ background-image:url(../../assets/img/clients/terrasses-de-clairefontaine-couleur.webp); }
.cl-3{ width:calc(76px * var(--ls)); height:calc(73px * var(--ls)); }
.cl-3::before{ background-image:url(../../assets/img/clients/vila-cyrus-mono.webp); }
.cl-3::after{ background-image:url(../../assets/img/clients/vila-cyrus-couleur.webp); }
.cl-4{ width:calc(154px * var(--ls)); height:calc(44px * var(--ls)); }
.cl-4::before{ background-image:url(../../assets/img/clients/la-fabrik-emotion-mono.webp); }
.cl-4::after{ background-image:url(../../assets/img/clients/la-fabrik-emotion-couleur.webp); }
.cl-5{ width:calc(82px * var(--ls)); height:calc(59px * var(--ls)); }
.cl-5::before{ background-image:url(../../assets/img/clients/win-2-win-mono.webp); }
.cl-5::after{ background-image:url(../../assets/img/clients/win-2-win-couleur.webp); }
.cl-6{ width:calc(69px * var(--ls)); height:calc(82px * var(--ls)); }
.cl-6::before{ background-image:url(../../assets/img/clients/monogramme-rf-mono.webp); }
.cl-6::after{ background-image:url(../../assets/img/clients/monogramme-rf-couleur.webp); }
.cl-7{ width:calc(137px * var(--ls)); height:calc(57px * var(--ls)); }
.cl-7::before{ background-image:url(../../assets/img/clients/dentella-wedding-mono.webp); }
.cl-7::after{ background-image:url(../../assets/img/clients/dentella-wedding-couleur.webp); }
.cl-8{ width:calc(77px * var(--ls)); height:calc(83px * var(--ls)); }
.cl-8::before{ background-image:url(../../assets/img/clients/citrons-mono.webp); }
.cl-8::after{ background-image:url(../../assets/img/clients/citrons-couleur.webp); }
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:1.09em; width:auto; vertical-align:-.353em; margin:0 .1em 0 .06em; }
.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, #me-approche{ display:block; }
#approche .section-head, #me-approche .section-head{ position:sticky; top:110px; margin-bottom:0; align-self:start; }
#approche, #me-approche{ align-items:center; }
@media (prefers-reduced-motion:reduce){ .wcard, .wcard-inner, .wcard-v{ transition:none; } }
@media (max-width:900px){
    #approche, #me-approche{ display:block; }
    #approche .section-head, #me-approche .section-head{ position:static; margin-bottom:3rem; }
  }
.page[hidden]{ display:none !important; }
.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{ border-top:1px solid var(--line); 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; } }
.page-cta{ max-width:1340px; margin-top:clamp(2.4rem,5vw,3.6rem); }
#approche .page-cta{ margin-left:auto; margin-right:auto; text-align:center; }
/* mots clés en gras : surlignage qui se dessine */
.two-col-item strong{ background:linear-gradient(rgba(0,102,255,.16),rgba(0,102,255,.16)) no-repeat 0 88% / 0% .42em; transition:background-size 1.1s var(--ease) .9s; }
.two-col.in .two-col-item strong{ background-size:100% .42em; }
@media (prefers-reduced-motion:reduce){ .two-col-item strong{ transition:none; } }
/* intro REM : le R contre le cube */
.il-wrap{ position:relative; }
.intro-logo{ display:block; position:relative; width:clamp(260px,42vw,600px); height:auto; overflow:visible; }
.intro-hole{ position:fixed; inset:0; z-index:1; display:block; pointer-events:none; }
#intro .intro-stage{ z-index:2; }
section.hero > p.hero-intro{ max-width:560px; margin:1.8rem 0 0; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6; color:rgba(242,245,249,.72); padding-right:3rem; }
/* wallet sur mobile : accordéon, une carte ouverte à la fois */
@media (max-width:760px){
    .wallet .wcard{ cursor:pointer; box-shadow:0 -12px 30px rgba(0,0,0,.22); }
    .wallet .wcard .wcard-inner{ min-width:0 !important; width:auto; opacity:1 !important; padding:1.5rem 1.4rem; align-items:stretch; text-align:left; transition:none; }
    .wallet .wcard + .wcard .wcard-inner{ padding-top:calc(1.5rem + 22px); }
    .wallet .wcard h3{ font-size:clamp(1.7rem,7.5vw,2.2rem); }
    .wallet .wcard-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
    .wallet .wcard-head::after{ content:""; flex:0 0 auto; width:12px; height:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-3px,-3px); transition:transform .45s var(--ease); opacity:.8; }
    .wallet .wcard.open .wcard-head::after{ transform:rotate(-135deg) translate(-3px,-3px); }
    .wallet .wcard-body{ display:grid; grid-template-rows:0fr; padding-top:0; transition:grid-template-rows .55s var(--ease), padding-top .55s var(--ease); }
    .wallet .wcard-body > div{ overflow:hidden; min-height:0; }
    .wallet .wcard.open .wcard-body{ grid-template-rows:1fr; padding-top:1.1rem; }
    .wallet .wcard-body p{ font-size:1rem; }
  }