/* REM — styles propres à la page agence.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 */
/* 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; }
.inline-logo{ display:inline-block; height:1.09em; width:auto; vertical-align:-.353em; margin:0 .1em 0 .06em; }
/* ---------- engagements : un cycle (écoute -> confiance -> fidélité -> écoute) ---------- */
#engagements{ padding-bottom:0; }
#engagements .section-head{ margin-bottom:0; }
.cycle{ position:relative; height:330vh; }
.cycle-stage{
    position:sticky; top:0; height:100vh; height:100svh;
    display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center;
    gap:clamp(2rem,5vw,5rem); padding-top:84px;
  }
.ring{ position:relative; width:min(60vh,38vw); aspect-ratio:1; justify-self:center; }
.ring svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ring .track{ fill:none; stroke:rgba(242,245,249,.12); stroke-width:14; stroke-linecap:round; }
.ring .fill{ fill:none; stroke:var(--blue); stroke-width:14; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke .5s var(--ease); }
.ring .fill.is-active{ stroke:var(--blue-2); }
.ring .chev{ fill:none; stroke:rgba(242,245,249,.45); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ring .dot{ fill:#fff; }
.ring .dot-halo{ fill:var(--blue-2); opacity:.25; }
.ring-core{ position:absolute; inset:22%; display:grid; place-items:center; text-align:center; }
.ring-word{
    grid-area:1/1; font-weight:800; letter-spacing:-.03em; line-height:.9;
    font-size:clamp(2.2rem,4.6vw,4.6rem);
    opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .6s var(--ease);
  }
.ring-word small{ display:block; margin-top:.9rem; font-size:clamp(.85rem,1vw,.98rem); font-weight:400; letter-spacing:0; line-height:1.4; color:var(--text-dim); }
.ring-word.is-active{ opacity:1; transform:none; }
.ring-label{
    position:absolute; transform:translate(-50%,-50%);
    font:inherit; font-weight:700; font-size:clamp(.85rem,1.05vw,1rem);
    background:#0B0F19; color:var(--text-dim); border:1px solid var(--line); border-radius:100px;
    padding:.45rem 1rem; cursor:pointer; white-space:nowrap;
    transition:color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  }
.ring-label:hover{ color:var(--grey-l); border-color:rgba(242,245,249,.4); }
.ring-label.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.ring-label:focus-visible{ outline:2px solid var(--blue-2); outline-offset:3px; }
.cycle-steps{ position:relative; min-height:min(64vh,520px); }
.cycle-step{
    position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:1.6rem;
    opacity:0; visibility:hidden; transform:translateY(24px);
    transition:opacity .55s var(--ease), transform .7s var(--ease), visibility 0s linear .55s;
  }
.cycle-step.is-active{ opacity:1; visibility:visible; transform:none; transition:opacity .55s var(--ease) .1s, transform .7s var(--ease) .1s, visibility 0s; }
.cycle-step .mini{ display:none; }
.cycle-step h3{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cycle-step h3{ font-weight:800; letter-spacing:-.02em; line-height:.95; font-size:clamp(2rem,3.4vw,3.2rem); }
.cycle-step p{ font-size:clamp(1rem,1.2vw,1.08rem); line-height:1.65; max-width:520px; color:var(--text-dim); }
.cycle-step ul{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.2rem 1.6rem; max-width:560px; }
.cycle-step li{ font-weight:700; font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.35; padding:.85rem 0; border-top:1px solid var(--line); }
.cycle-step .handoff{ display:flex; align-items:center; gap:.7rem; font-weight:700; color:var(--blue-2); font-size:clamp(.95rem,1.1vw,1.05rem); }
.cycle-step .handoff svg{ width:28px; height:28px; flex:none; }
@media (max-width:860px), (prefers-reduced-motion:reduce){
    .cycle{ height:auto; }
    .cycle-stage{ position:static; height:auto; display:block; padding-top:3rem; }
    .ring{ display:none; }
    .cycle-steps{ min-height:0; display:flex; flex-direction:column; gap:clamp(3.5rem,10vw,5rem); padding-bottom:clamp(5rem,10vw,8rem); }
    .cycle-step{ position:static; opacity:1; visibility:visible; transform:none; transition:none; }
    .cycle-step .mini{ display:block; width:64px; height:64px; }
    .cycle-step h3{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
    .cycle-step .mini .t{ fill:none; stroke:rgba(242,245,249,.14); stroke-width:22; stroke-linecap:round; }
    .cycle-step .mini .a{ fill:none; stroke:var(--blue-2); stroke-width:22; stroke-linecap:round; }
  }
@media (max-width:520px){ .cycle-step ul{ grid-template-columns:1fr; } }
@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{ 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; } }
/* ---------- notre histoire + mot du directeur ---------- */
.story-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.4rem,6vw,6rem); max-width:1340px; align-items:start; }
.story-copy h3{ font-weight:800; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.015em; line-height:1.1; margin-bottom:1.2rem; }
.story-copy p{ color:var(--text-dim); font-size:clamp(1.02rem,1.3vw,1.15rem); line-height:1.65; max-width:560px; }
.story-copy p + p{ margin-top:1rem; }
.director{ margin:0; }
.director blockquote{ font-weight:600; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.5; }
.director figcaption{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.25rem; }
.director figcaption strong{ font-weight:800; font-size:1.05rem; }
.director figcaption span{ color:var(--blue-2); font-size:.95rem; }
@media (max-width:860px){ .story-grid{ grid-template-columns:1fr; } }
/* ---------- approche : l'écoute ---------- */
.listen-stat{ display:flex; align-items:flex-end; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; margin-bottom:clamp(3rem,6vw,4.5rem); }
.listen-stat .num{ font-weight:800; font-size:clamp(4.5rem,14vw,11rem); line-height:.85; letter-spacing:-.03em; color:var(--blue-2); white-space:nowrap; }
.listen-stat p{ max-width:440px; font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:600; line-height:1.45; padding-bottom:.4rem; }
.listen-close{ max-width:920px; margin-top:clamp(3rem,6vw,4.5rem); font-weight:700; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.35; letter-spacing:-.01em; }
/* ---------- effets sur les éléments clés ---------- */
/* 50 % : compteur */
.listen-stat .num{ font-variant-numeric:tabular-nums; }
/* colonnes de l'approche : apparition décalée */
#ecoute .benefit{ border-top:0; padding-top:0; }
#ecoute .benefit:nth-child(2){ transition-delay:.12s; }
#ecoute .benefit:nth-child(3){ transition-delay:.24s; }
/* phrase de conclusion : les mots s'allument au scroll */
.listen-close .w{ color:rgba(242,245,249,.2); transition:color .35s var(--ease); }
.listen-close .w.on{ color:var(--grey-l); }
/* 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; }
    .listen-close .w{ color:var(--grey-l); }
  }
/* ---------- carrousel des 13 métiers (droite vers gauche, continu) ---------- */
.jobs-marquee{ position:relative; overflow:hidden; margin:1rem calc(-1 * clamp(1.4rem,4vw,3.4rem)) 0; }
.jobs-marquee::before, .jobs-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:8%; z-index:1; pointer-events:none; }
.jobs-marquee::before{ left:0; background:linear-gradient(90deg,#0B0F19,rgba(11,15,25,0)); }
.jobs-marquee::after{ right:0; background:linear-gradient(270deg,#0B0F19,rgba(11,15,25,0)); }
.jobs-track{ display:flex; width:max-content; will-change:transform; backface-visibility:hidden; transform:translate3d(0,0,0); animation:jobsScroll 130s linear infinite; }
@keyframes jobsScroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.jobs-track > div{ display:flex; flex-shrink:0; }
.jobs-track span{ font-weight:800; letter-spacing:-.02em; font-size:clamp(2.4rem,6.5vw,5.4rem); line-height:1.15; padding:.12em clamp(1.2rem,2.6vw,2.6rem) .16em; white-space:nowrap; }  /* marges verticales : jambages (p, g, j) et accents non rognés */
.jobs-track .v-white{ color:var(--grey-l); }
.jobs-track .v-blue{ color:var(--blue-2); }
@media (prefers-reduced-motion:reduce){
    .jobs-track{ animation:none; width:auto; } .jobs-track > div{ flex-wrap:wrap; } .jobs-track > div[aria-hidden], .jobs-track > div:first-child span:nth-child(n/**/+14){ display:none; }
  }
/* ---------- histoire sur fond blanc ---------- */
#histoire{ background:#fff; color:var(--grey-d); }
#histoire .story-copy p{ color:#4b545e; }
#histoire .director figcaption span{ color:var(--blue); }
#histoire .btn{ margin-top:2.2rem; background:#fff; color:var(--grey-d); box-shadow:0 0 0 1px #d6dde6; }
#histoire .btn .fill{ background:var(--blue); }
/* ---------- appels à l'action dans la page ---------- */
.page-cta{ max-width:1340px; margin-top:clamp(2.4rem,5vw,3.6rem); }
/* ---------- engagements + écoute : fond blanc ---------- */
#engagements, #ecoute{ background:#fff; color:var(--grey-d); --line:#E1E6ED; --text-dim:#4b545e; }
#engagements .ring .track{ stroke:#E8EDF3; }
#engagements .ring .fill{ stroke:var(--blue); }
#engagements .ring .fill.is-active{ stroke:var(--blue-2); }
#engagements .ring .chev{ stroke:#9AA6B4; }
#engagements .ring .dot{ fill:var(--blue); }
#engagements .ring .dot-halo{ fill:var(--blue); opacity:.18; }
#engagements .ring-label{ background:#fff; color:#6B7684; border-color:#D6DDE6; }
#engagements .ring-label:hover{ color:var(--grey-d); border-color:#9AA6B4; }
#engagements .ring-label.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
#engagements .ring-label:focus-visible{ outline-color:var(--blue); }
#engagements .cycle-step .handoff{ color:var(--blue); }
#engagements .cycle-step .mini .t{ stroke:#E8EDF3; }
#engagements .cycle-step .mini .a{ stroke:var(--blue); }
#ecoute .listen-stat .num{ color:var(--blue); }
#ecoute .listen-close .w{ color:#CFD6DF; }
#ecoute .listen-close .w.on{ color:var(--grey-d); }
#ecoute .btn{ background:var(--grey-d); color:#fff; }
#ecoute .btn .fill{ background:var(--blue); }
@media (prefers-reduced-motion:reduce){ #ecoute .listen-close .w{ color:var(--grey-d); } }