/* ============================================================
   APERÇU · structure et mise en page inspirées de sunmetalon.com
   Les couleurs restent celles de MBO (ivoire, espresso, bronze).
   Seul ajout de couleur : le bleu, réservé aux appels à l'action.
   Supprimer ce fichier et sa balise <link> pour revenir à l'ancien design.
   ============================================================ */
/* bleu nuit : profond et désaturé, il s'accorde aux bruns chauds au lieu de trancher */
:root{--cta:#1F3B63;--cta-hover:#162C4B;--cta-ink:#1F3B63}

/* ---------- 1. Navigation à la Sun Metalon : liens en onglets à gauche,
   logo au centre, bouton à droite */
@media(min-width:1081px){
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;max-width:none;padding:0 28px}
.nav__links{order:1;gap:0;justify-self:start}
.nav__links a{padding:22px 18px;border-right:1px solid var(--hair);font-size:11.5px}
.nav__links a:first-child{border-left:1px solid var(--hair)}
.logo{order:2;justify-self:center}
.nav__cta{order:3;justify-self:end}
.nav__burger{order:4}
.nav.scrolled .nav__links a{padding:16px 18px}
}

/* ---------- 2. Accueil : accroches aux deux bords, titre géant pleine
   largeur, visuel au centre, puis un paragraphe-manifeste en grand corps */
.hero{padding:120px 0 90px;text-align:center}
.hero .wrap{max-width:none;padding:0 28px}
.hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
.hero__copy{display:contents}
.hero__eyebrow{order:1;display:flex;justify-content:space-between;letter-spacing:.3em;margin:0}
.hero h1{order:2;font-size:clamp(3.2rem,9.6vw,10.5rem);line-height:.9;letter-spacing:-.045em;margin:34px 0 0}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero__sub{order:3;max-width:44ch;margin:26px auto 0;text-align:center;font-family:'Jost',sans-serif;font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.35;color:var(--espresso)}
.hero__sub strong{color:var(--bronze);font-weight:400}
.hero__cta{order:4;justify-content:center;margin:30px auto 0}
.hero .contact-option,.hero .privacy-note{order:5;margin-left:auto;margin-right:auto;text-align:center}

/* ---------- 3. Titres de section centrés et très grands */
.sec-head{max-width:none;align-items:center;text-align:center;margin-left:auto!important;margin-right:auto}
.sec-head h2{font-size:clamp(2.6rem,6vw,5.6rem);line-height:.98;letter-spacing:-.04em;max-width:18ch}
.sec-head .two-tone .l1,.sec-head .two-tone .l2{display:block}
.sec-head .aud__intro{max-width:64ch;margin-left:auto;margin-right:auto}

/* ---------- 4. Volets en liste à grand corps, comme « Sludge / Swarf /
   Chips » : une ligne par volet, la description s'ouvre au survol */
.services__grid{grid-template-columns:1fr;border-left:none;border-top:1px solid var(--espresso)}
.services__grid .svc{flex-direction:row;align-items:baseline;gap:28px;min-height:0;padding:20px 4px;
  background:transparent;border-right:none;border-bottom:1px solid var(--hair)}
.services__grid .svc:nth-child(2){background:transparent}
.services__grid .svc::after{display:none}
.services__grid .svc__i{flex:0 0 48px;color:var(--bronze)}
.services__grid .svc h3{flex:1;margin:0;font-size:clamp(1.6rem,3.2vw,2.8rem);letter-spacing:-.025em;color:var(--espresso)}
.services__grid .svc p{position:static;flex:0 0 34%;opacity:1;transform:none;max-height:0;overflow:hidden;
  transition:max-height .45s var(--ease);font-size:14px}
.services__grid .svc__tags{flex:0 0 auto;margin:0;order:4}
.services__grid .svc:hover{background:var(--sand);transform:none;box-shadow:none}
.services__grid .svc:hover p{max-height:120px}
.services__grid .svc:hover .svc__tags{opacity:1}
.services__grid .svc:hover h3{color:var(--bronze)}

/* ---------- 5. Boutons en pilule, en bleu */
.btn,.nav__cta{background:var(--cta);border-color:var(--cta);color:#fff;border-radius:999px;padding-left:28px;padding-right:28px}
.btn::after,.nav__cta::after{background:var(--cta-hover)}
.btn:hover,.nav__cta:hover{color:#fff}
.link{color:var(--cta-ink)}

@media(max-width:1080px){
  .services__grid .svc{flex-wrap:wrap}
  .services__grid .svc p{flex-basis:100%;max-height:none}
}
@media(max-width:760px){
  .hero__eyebrow{flex-direction:column;gap:6px;align-items:center}
  .services__grid .svc h3{font-size:1.5rem}
  .services__grid .svc p{display:block}
}

/* ---------- ajustements */
@media(min-width:1081px){.nav__links a{white-space:nowrap;padding:22px 14px}.nav.scrolled .nav__links a{padding:16px 14px}}
/* le titre du Pilotage partage sa ligne avec le tableau de bord : aligné à gauche */
.pil__top .sec-head{align-items:flex-start;text-align:left}
.pil__top .sec-head h2{font-size:clamp(2.4rem,4.4vw,4rem)}
/* le bandeau des partenaires débordait de ~20 px entre 1 100 et 1 300 px de large (bug antérieur) */
.team{overflow-x:clip}

/* ---------- Accueil : les preuves chiffrées au centre, à la place du visuel */
.hero{padding-bottom:64px}
.hero h1{font-size:clamp(3rem,8.2vw,8.6rem)}
.hero__proof{order:6;list-style:none;margin:52px auto 0;padding:0;width:100%;max-width:1180px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--espresso)}
.hero__proof li{display:flex;flex-direction:column;gap:6px;padding:22px 24px 4px;text-align:left;border-left:1px solid var(--hair)}
.hero__proof li:first-child{border-left:none;padding-left:0}
.hero__proof b{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--bronze)}
.hero__proof span{font-size:13.5px;line-height:1.45;color:var(--body);max-width:32ch}

/* ---------- Manifeste en grand corps, comme le paragraphe d'intro de la référence */
.manifesto{padding:88px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.manifesto__text{margin:0 auto;max-width:1180px;font-family:'Jost',sans-serif;font-weight:400;
  font-size:clamp(1.3rem,2.3vw,2.2rem);line-height:1.25;letter-spacing:-.012em;color:var(--espresso)}
.manifesto__text strong{font-weight:400;color:var(--bronze)}

/* ---------- Problème en section « valeur » : titre centré, visuel à gauche, trois points à droite */
.problem .wrap{padding-left:48px}
.problem__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "visual points";gap:56px 72px;align-items:center}
.problem__grid > div:first-child{grid-area:head;text-align:center}
.problem__grid > div:first-child .eyebrow{margin-bottom:22px!important}
.problem h2{max-width:22ch;margin:0 auto;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1;letter-spacing:-.035em}
.problem h2 .em{display:block}
.problem__visual{grid-area:visual;min-height:420px}
.problem__points{grid-area:points}
.problem__lead{margin:0 0 22px;color:var(--body);font-size:16px}
.points{list-style:none;margin:0;padding:0;border-top:1px solid var(--espresso)}
.points li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 0;border-bottom:1px solid var(--hair);counter-increment:pt}
.points li::before{content:counter(pt,decimal-leading-zero);grid-row:span 2;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.2em;color:var(--bronze);padding-top:6px}
.points b{font-family:'Jost',sans-serif;font-weight:400;font-size:1.45rem;color:var(--espresso)}
.points span{color:var(--body);font-size:15px}
.problem__conclusion{margin:22px 0 0;color:var(--espresso);font-size:16px}

/* ---------- Volets : liste à gauche, panneau de détail à droite (comme Sludge / Swarf) */
.svc-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start;margin-top:44px}
.svc-wrap .services__grid{margin-top:0}
.services__grid .svc{cursor:pointer}
.services__grid .svc p{display:none}
.services__grid .svc:hover,.services__grid .svc.is-active{background:transparent}
.services__grid .svc.is-active h3,.services__grid .svc:hover h3{color:var(--bronze)}
.services__grid .svc.is-active{border-bottom-color:var(--bronze)}
.services__grid .svc:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.svc-panel{position:sticky;top:110px;min-height:340px;padding:34px;background:var(--espresso);color:var(--ivory);display:flex;flex-direction:column;gap:18px}
.svc-panel__n{font-family:'Jost',sans-serif;font-weight:300;font-size:4.2rem;line-height:1;color:#D8B47D}
.svc-panel__t{margin:0;font-size:1.8rem;font-weight:300;color:var(--ivory)}
.svc-panel__d{margin:0;font-size:16px;line-height:1.6;color:#E6DED3}
.svc-panel__tags{margin-top:auto;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#D8B47D}

@media(max-width:1080px){
  .svc-wrap{grid-template-columns:1fr}
  .svc-panel{display:none}
  .services__grid .svc p{display:block;flex-basis:100%}
  .problem__grid{grid-template-columns:1fr;grid-template-areas:"head" "points" "visual"}
}
@media(max-width:760px){
  .hero__proof{grid-template-columns:1fr}
  .hero__proof li,.hero__proof li:first-child{border-left:none;padding:16px 0 4px;border-bottom:1px solid var(--hair)}
  .problem .wrap{padding-left:22px}
  .manifesto{padding:56px 0}
}

/* ============================================================
   ANIMATIONS inspirées de terminal-industries.com (voir motion.js)
   Sans JavaScript, la page garde sa mise en page d'origine.
   ============================================================ */

/* ---------- Manifeste : les mots s'éclairent au fil du défilement */
.js-motion .manifesto__text .w{opacity:.2;transition:opacity .35s var(--ease)}
.js-motion .manifesto__text .w.on{opacity:1}
.js-motion .manifesto__text.reveal{opacity:1;transform:none}

/* ---------- Méthode : panneau fixe à gauche, étapes qui défilent à droite */
.method__stage{display:none}
@media(min-width:1081px){
  .js-motion .method__layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:72px;margin-top:56px;align-items:start}
  .js-motion .method__stage{display:flex;flex-direction:column;position:sticky;top:120px;min-height:min(470px,66vh);
    padding:40px 42px;background:var(--espresso);color:var(--ivory)}
  .method__bar{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:auto}
  .method__bar i{height:3px;background:rgba(247,243,238,.18);transition:background .5s var(--ease)}
  .method__bar i.on{background:#D8B47D}
  .method__n{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(5rem,8vw,8rem);line-height:.9;letter-spacing:-.04em;color:#D8B47D;margin-top:40px}
  .method__k{margin:22px 0 10px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,243,238,.72)}
  .method__t{margin:0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.7rem,2.4vw,2.3rem);line-height:1.12;color:var(--ivory)}
  .method__d{margin:14px 0 0;font-size:16px;line-height:1.6;color:#E6DED3;max-width:42ch}
  .method__stage.swap .method__n,.method__stage.swap .method__t,.method__stage.swap .method__d{animation:stage-in .55s var(--ease)}

  .js-motion .method .timeline{display:block;margin-top:0;border-top:1px solid var(--espresso)}
  .js-motion .method .tl-line{display:none}
  .js-motion .method .step{min-height:0;perspective:none;padding:44px 0;border-bottom:1px solid var(--hair);
    opacity:.34;transition:opacity .5s var(--ease)}
  .js-motion .method .step:last-child{margin-bottom:22vh}
  .js-motion .method .step.is-active{opacity:1}
  .js-motion .method .step__front{position:static;padding:0;border:0;background:none;transform:none!important}
  /* le résultat reste lisible par les lecteurs d'écran, le panneau l'affiche à l'écran */
  .js-motion .method .step__back{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;transform:none!important}
  .js-motion .method .step__dot{margin-bottom:14px}
  .js-motion .method .step__dot::after{display:none}
  .js-motion .method .step__dot b{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.24em;color:var(--bronze)}
  .js-motion .method .step__body h3{font-size:clamp(1.9rem,2.8vw,2.8rem);letter-spacing:-.025em;color:var(--espresso)}
  .js-motion .method .step__body p{font-size:16px;max-width:46ch}
  .js-motion .method .step:focus-visible{outline:3px solid var(--cta);outline-offset:6px}
}

/* ---------- Volets : changement du panneau */
.svc-panel.swap > *{animation:stage-in .45s var(--ease)}
.services__grid .svc:focus-visible{outline:3px solid var(--cta);outline-offset:3px}

@keyframes stage-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Bandeau défilant : pause au survol (règle Pro Max) */
.signal-band:hover .signal-track{animation-play-state:paused}

/* ---------- Réduction des animations demandée : tout est affiché tel quel */
@media(prefers-reduced-motion:reduce){
  .js-motion .manifesto__text .w{opacity:1;transition:none}
  .js-motion .method .step{opacity:1;transition:none}
  .method__stage.swap *,.svc-panel.swap > *{animation:none}
  .signal-track{animation:none}
}

/* ---------- Volets : sur grand écran, les étiquettes passent dans le panneau,
   les titres tiennent sur une ligne */
@media(min-width:1081px){
  .svc-wrap .services__grid .svc__tags{display:none}
  .svc-wrap .services__grid .svc h3{font-size:clamp(1.5rem,2.3vw,2.3rem)}
}

/* ============================================================
   PALETTE de la présentation MBO (mbopresentation.netlify.app)
   ivoire, sable, encre, vert forêt pour les mots mis en avant.
   Le bronze, assombri pour le contraste, reste sur les petites étiquettes.
   Le bleu nuit reste réservé aux appels à l'action.
   ============================================================ */
:root{--ink:#2A201B;--vert:#3E5A3A;--sable:#CDBFAA;--bronze:#7A5C3C;--muted:#6E6154;--bronze-hair:rgba(122,92,60,.42)}
.two-tone .l2,.problem h2 .em{color:var(--vert)}
.hero__sub strong,.manifesto__text strong,.hero__proof b{color:var(--vert)}
.services__grid .svc.is-active h3,.services__grid .svc:hover h3{color:var(--vert)}
.services__grid .svc.is-active{border-bottom-color:var(--vert)}
::selection{background:var(--vert);color:#fff}

/* ---------- Navigation : logo à gauche, onglets au centre, bouton à droite */
@media(min-width:1081px){
  .nav__in{grid-template-columns:auto 1fr auto}
  .logo{order:1;justify-self:start}
  .nav__links{order:2;justify-self:center}
  .nav__cta{order:3}
}

/* ---------- Bandeau photo pleine largeur, léger zoom au défilement */
.banner{margin:0;position:relative;overflow:hidden;height:clamp(260px,52vw,640px);background:var(--sable)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(var(--zoom,1.08));transition:transform .2s linear;will-change:transform}

/* ---------- Problème : la photo remplace l'arche dessinée */
.problem__visual .arch{display:none}

/* ---------- Méthode : panneau sable, comme le volet droit de la présentation */
@media(min-width:1081px){
  .js-motion .method__stage{background:var(--sable);color:var(--ink)}
  .method__bar i{background:rgba(42,32,27,.16)}
  .method__bar i.on{background:var(--vert)}
  .method__n{color:var(--vert)}
  .method__k{color:var(--ink)}
  .method__t{color:var(--ink)}
  .method__d{color:var(--ink)}
}

/* ---------- Contact final : texte à gauche, photo à droite */
@media(min-width:1081px){
  .finalcta{text-align:left}
  .finalcta .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:72px;align-items:center}
  .finalcta .wrap > *:not(.finalcta__photo){grid-column:1}
  .finalcta p{margin-left:0}
  .finalcta__photo{grid-column:2;grid-row:1 / span 6;margin:0}
}
.finalcta__photo{margin:44px 0 0}
.finalcta__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}

@media(prefers-reduced-motion:reduce){.banner img{transform:none;transition:none}}
@media(min-width:1081px){
  .nav__in{align-items:center;padding-top:10px;padding-bottom:10px}
  .nav__links a{padding-top:16px;padding-bottom:16px}
}
@media(min-width:1081px){
  .finalcta .btn{justify-self:start}
  .finalcta .contact-option{text-align:left;margin-left:0}
}

/* ---------- Appels à l'action en vert forêt (blanc dessus : 7,7:1) au lieu du bleu */
:root{--cta:#3E5A3A;--cta-hover:#2E4530;--cta-ink:#3E5A3A}
.proof-rail__v{color:var(--vert)}
.hero{padding-bottom:72px}
.problem__aside{margin-top:0}
.hero__eyebrow{justify-content:center;text-align:center}


/* ============================================================
   BANDEAU ANIMÉ en haut de page (SVG intégré dans index.html).
   Trois disques inspirés du O fendu du logo : trame de données,
   jauge d'indicateur, écran de pilotage. Même visuel que la bannière LinkedIn.
   Au repos, le dessin est complet ; les animations ne tournent que si
   le visiteur n'a pas demandé à réduire les animations.
   ============================================================ */
.brand-band{margin:var(--navh,83px) 0 0;height:clamp(190px,22vw,340px);overflow:hidden;background:var(--ivory);border-bottom:1px solid var(--hair)}
.brand-band__art{display:block;width:100%;height:100%}
.brand-band .bd-float,.brand-band .bd-ticks,.brand-band .bd-ping{transform-box:view-box}
.hero{padding-top:44px}
@media(max-width:1080px){.brand-band{margin-top:var(--navh,150px)}}

@media(prefers-reduced-motion:no-preference){
  .bd-fa{animation:bd-float 9s ease-in-out infinite}
  .bd-fb{animation:bd-float 11s ease-in-out -4s infinite}
  .bd-fc{animation:bd-float 7s ease-in-out -2s infinite}
  .bd-ticks{animation:bd-turn 90s linear infinite}
  .bd-dot{animation:bd-blink 3.6s ease-in-out infinite}
  .bd-d1{animation-delay:-.6s}.bd-d2{animation-delay:-1.2s}.bd-d3{animation-delay:-1.8s}.bd-d4{animation-delay:-2.4s}.bd-d5{animation-delay:-3s}
  .bd-arc{stroke-dasharray:1;animation:bd-fill 7s cubic-bezier(.22,.61,.36,1) infinite}
  .bd-arc2{animation-delay:.35s}.bd-arc3{animation-delay:.7s}
  .bd-bar{transform-box:fill-box;transform-origin:50% 100%;animation:bd-grow 7s cubic-bezier(.22,.61,.36,1) infinite}
  .bd-curve{stroke-dasharray:1;animation:bd-draw 7s cubic-bezier(.22,.61,.36,1) infinite}
  .bd-end{animation:bd-end 7s ease infinite}
  .bd-ping{animation:bd-ping 2.4s ease-out infinite}
  .bd-signal{stroke-dasharray:.06 1;animation:bd-signal 5s linear infinite}
  .brand-band.is-off *{animation-play-state:paused!important}
}
@media(prefers-reduced-motion:reduce){.bd-signal{display:none}}
@keyframes bd-float{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
@keyframes bd-turn{to{transform:rotate(360deg)}}
@keyframes bd-blink{0%,100%{fill-opacity:1}50%{fill-opacity:.2}}
@keyframes bd-fill{0%{stroke-dashoffset:1}35%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes bd-grow{0%{transform:scaleY(.12)}30%,82%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
@keyframes bd-draw{0%,12%{stroke-dashoffset:1}48%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes bd-end{0%,40%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@keyframes bd-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes bd-signal{from{stroke-dashoffset:.06}to{stroke-dashoffset:-1}}

/* ---------- Titre dans le bandeau : « Lancez. Structurez. » à gauche,
   « Pilotez votre société. » à droite, le dessin au centre */
.brand-band{position:relative}
.band-title{position:absolute;inset:0;z-index:1;margin:0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 max(16px,2.6vw);pointer-events:none;font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(1.25rem,2.15vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.band-title__l{color:var(--espresso)}
.band-title__r{color:var(--vert);text-align:right}
@media(max-width:760px){
  .brand-band{height:auto}
  .band-title{position:static;flex-direction:column;align-items:flex-start;gap:2px;padding:26px 16px 6px;font-size:2rem}
  .band-title__r{text-align:left}
  .brand-band__art{height:200px}
}

/* ---------- Mission, juste sous le bandeau */
.hero__mission{order:2;margin:20px auto 0;max-width:32ch;font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(1.45rem,2.5vw,2.4rem);line-height:1.25;letter-spacing:-.015em;color:var(--espresso);text-align:center;text-wrap:balance}
.hero__mission strong{font-weight:400;color:var(--vert)}

/* ---------- Ils nous font confiance : logos cliquables */
.clients{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--espresso);border-left:1px solid var(--hair)}
.clients li{position:relative;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.clients li::after{content:"+";position:absolute;right:-6px;bottom:-12px;z-index:1;font:300 16px/1 'Jost',sans-serif;color:var(--bronze)}
.client{box-sizing:border-box;width:100%;min-height:230px;margin:0;padding:34px 20px;border:0;background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--espresso);
  font:inherit;transition:background .3s var(--ease)}
.client:hover{background:var(--sand)}
.client:focus-visible{outline:3px solid var(--cta);outline-offset:-3px}
.client__mark{display:block;color:var(--espresso);transition:transform .4s var(--ease)}
.client:hover .client__mark{transform:scale(1.05)}
.client__mark--abc{font:500 1.45rem/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.client__mark--alegria{font:300 2.3rem/1 'Jost',sans-serif;letter-spacing:-.03em}
.client__mark--legalplace{font:700 1.75rem/1 'Manrope',sans-serif;letter-spacing:-.04em}
.client__mark--ecompro{font:500 1.15rem/1 'Jost',sans-serif;letter-spacing:.32em;text-transform:uppercase}
.client__sector{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.client__more{margin-top:6px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cta-ink)}
@media(max-width:900px){.clients{grid-template-columns:repeat(2,minmax(0,1fr))}.client{min-height:180px}}

/* ---------- Fenêtre de détail d'un accompagnement */
.case{box-sizing:border-box;width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 48px);margin:auto;padding:clamp(28px,5vw,56px);
  border:0;background:var(--ivory);color:var(--ink);box-shadow:0 30px 80px rgba(42,32,27,.35);overflow:auto}
.case::backdrop{background:rgba(42,32,27,.6)}
.case[open]{animation:case-in .45s var(--ease)}
.case__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;
  background:var(--ivory);color:var(--espresso);font:300 26px/1 'Jost',sans-serif;cursor:pointer}
.case__close:hover{background:var(--sand)}
.case__close:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.case__t{margin:14px 0 0;max-width:22ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.02em;color:var(--espresso);text-wrap:balance}
.case__d{margin:20px 0 0;max-width:60ch;font-size:17px;line-height:1.7;color:var(--body)}
.case__list{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.case__list li{position:relative;padding-left:22px;color:var(--ink)}
.case__list li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--vert)}
.case__quote{margin:24px 0 0;padding:4px 0 4px 20px;border-left:2px solid var(--vert);font-family:'Jost',sans-serif;font-weight:300;font-size:1.2rem;line-height:1.5;color:var(--espresso)}
.case__quote cite{display:block;margin-top:12px;font-family:'Manrope',sans-serif;font-style:normal;font-size:13px;color:var(--muted)}
.case__link{display:inline-block;margin-top:24px;color:var(--cta-ink);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.case--photo[open]{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;align-items:start;width:min(1040px,calc(100vw - 32px))}
.case__photo{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:760px){.case--photo[open]{grid-template-columns:1fr;gap:22px}.case__photo{aspect-ratio:16/10}}
@keyframes case-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.case[open]{animation:none}}
.case__photo{height:auto;max-height:540px}
@media(max-width:760px){
  .brand-band__art{height:150px}
  .band-title{padding-top:22px;font-size:1.8rem}
  .hero--banner,.hero{padding-top:28px}
  .hero__mission{font-size:1.3rem;margin-top:12px}
  .hero__cta{margin-top:22px}
}

/* ============================================================
   LE PROBLÈME EN CASES ANIMÉES : quatre cases, chacune avec une
   petite animation qui montre le problème (voir index.html, .pcase)
   ============================================================ */
.problem .sec-head h2{max-width:24ch;margin:0 auto;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.035em;color:var(--espresso)}
.problem .sec-head h2 .em{display:block;color:var(--vert)}
.cases{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pcase{position:relative;display:flex;flex-direction:column;padding:22px 22px 26px;background:var(--ivory);border:1px solid var(--hair);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.pcase:hover{transform:translateY(-4px);border-color:var(--bronze-hair);box-shadow:0 18px 40px rgba(42,32,27,.08)}
.pcase__viz{height:120px;margin-bottom:22px;background:var(--sand);border:1px solid var(--hair);position:relative;overflow:hidden}
.pcase__n{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.22em;color:var(--bronze)}
.pcase h3{margin:8px 0 0;font-family:'Jost',sans-serif;font-weight:400;font-size:1.3rem;line-height:1.2;color:var(--espresso)}
.pcase p{margin:10px 0 0;font-size:15px;line-height:1.6;color:var(--body)}
@media(max-width:1080px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cases{grid-template-columns:1fr}}
/* 01 : une courbe qui s'efface dans le brouillard */
.pcase__viz svg{display:block;width:100%;height:100%}
.v-grid{stroke:var(--espresso);stroke-opacity:.1;stroke-width:1;fill:none}
.v-line{fill:none;stroke:var(--espresso);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.v-fog{fill:url(#none);fill:var(--sand);opacity:.86}
.v-q{font:300 34px 'Jost',sans-serif;fill:var(--bronze)}
/* 02 : trois outils, trois chiffres qui ne concordent jamais */
.pcase__viz--tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 12px}
.v-tool{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 8px;background:var(--ivory);border:1px solid var(--hair);text-align:center}
.v-tool span{font:500 9.5px 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.v-tool b{position:relative;display:block;height:20px;overflow:hidden;white-space:nowrap;font:400 13px/20px 'Jost',sans-serif;color:var(--espresso)}
.v-tool b i{display:block;font-style:normal}
/* 03 : des indicateurs qui ne se chargent jamais */
.pcase__viz--kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 12px}
.v-kpi{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:10px 8px;background:var(--ivory);border:1px solid var(--hair)}
.v-kpi span{font:500 9px 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.v-kpi b{display:block;height:14px;width:80%;background:linear-gradient(90deg,var(--sand) 0%,#E2D6C4 50%,var(--sand) 100%);background-size:200% 100%}
/* 04 : un curseur qui recopie des cellules */
.pcase__viz--cells{padding:14px}
.v-cells{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);height:100%;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.v-cells i{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--ivory)}
.v-cells i:nth-child(3n){background:#F1EADF}
.v-cursor{position:absolute;left:0;top:0;width:calc(100% / 6);height:calc(100% / 3);border:2px solid var(--vert);background:rgba(122,92,60,.12)}

@media(prefers-reduced-motion:no-preference){
  .v-line{stroke-dasharray:1;animation:v-draw 5s ease-in-out infinite}
  .v-fog{animation:v-fog 5s ease-in-out infinite}
  .v-q{animation:v-q 5s ease-in-out infinite}
  .v-tool b i{animation:v-roll 4.5s steps(1) infinite}
  .v-tool:nth-child(2) b i{animation-delay:-1.5s}.v-tool:nth-child(3) b i{animation-delay:-3s}
  .v-kpi b{animation:v-shimmer 1.6s linear infinite}
  .v-kpi:nth-child(2) b{animation-delay:-.5s}.v-kpi:nth-child(3) b{animation-delay:-1s}
  .v-cursor{animation:v-cursor 6s steps(1) infinite}
}
@keyframes v-draw{0%{stroke-dashoffset:1}45%,100%{stroke-dashoffset:0}}
@keyframes v-fog{0%,40%{opacity:0}60%,100%{opacity:.86}}
@keyframes v-q{0%,55%{opacity:0}70%,100%{opacity:1}}
@keyframes v-roll{0%{transform:translateY(0)}33%{transform:translateY(-20px)}66%{transform:translateY(-40px)}}
@keyframes v-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes v-cursor{
  0%{transform:translate(0,0)}8%{transform:translate(100%,0)}16%{transform:translate(200%,0)}25%{transform:translate(300%,100%)}
  33%{transform:translate(400%,100%)}41%{transform:translate(500%,100%)}50%{transform:translate(0,200%)}58%{transform:translate(100%,200%)}
  66%{transform:translate(200%,0)}75%{transform:translate(300%,0)}83%{transform:translate(400%,200%)}91%{transform:translate(500%,200%)}}

/* ============================================================
   LA MÉTHODE EN PANNEAUX HORIZONTAUX (comme sunmetalon.com) :
   sur grand écran, la section se fige et les panneaux défilent de
   droite à gauche pendant qu'on descend. Ailleurs, ils s'empilent.
   ============================================================ */
.method{padding:0;background:var(--ink)}
.mx__track{display:grid;grid-template-columns:1fr}
.mx__panel{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:340px;padding:40px max(16px,4vw) 36px;color:var(--ivory)}
.mx__panel--intro{background:var(--ink)}
.mx__panel--k1{background:#3A2C24}
.mx__panel--k2{background:var(--sable);color:var(--ink)}
.mx__panel--k3{background:var(--ivory);color:var(--ink)}
.mx__panel--k4{background:var(--vert)}
.mx__panel--k5{background:#E7DCCB;color:var(--ink)}
.mx__panel--k6{background:var(--espresso)}
.mx__panel .eyebrow{color:var(--sable)}
.mx__h{margin:18px 0 0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2.2rem,3.6vw,3.6rem);line-height:1.02;letter-spacing:-.03em;color:var(--ivory)}
.mx__h span{display:block}.mx__accent{color:var(--sable)}
.mx__n{position:relative;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(3.6rem,6vw,6rem);line-height:.9;letter-spacing:-.04em;opacity:.9}
.mx__t{position:relative;margin:18px 0 0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.7rem,2.3vw,2.4rem);line-height:1.08;letter-spacing:-.02em;color:inherit}
.mx__d{position:relative;margin:16px 0 0;max-width:36ch;font-size:16px;line-height:1.6;opacity:.86}
.mx__res{position:relative;display:flex;gap:12px;margin:auto 0 0;padding-top:28px;font-size:15px;line-height:1.5}
.mx__res b{font-weight:600}
.mx__dot{flex:0 0 9px;width:9px;height:9px;margin-top:6px;border-radius:50%;background:currentColor}
.mx__shape{position:absolute;right:-12%;top:14%;width:62%;aspect-ratio:1;background:currentColor;opacity:.07;
  transform:translateX(calc(var(--mxp,0) * -40px))}
.mx__shape--arch{border-top-right-radius:100%}
.mx__shape--arch-l{border-top-left-radius:100%}
.mx__shape--d{border-radius:0 50% 50% 0}
.mx__shape--disc{border-radius:50%}
.mx__progress{display:none}
@media(min-width:1081px){
  .js-motion:not(.reduce-motion) .mx{height:var(--mxh,400vh)}
  .js-motion:not(.reduce-motion) .mx__sticky{position:sticky;top:var(--navh,83px);height:calc(100vh - var(--navh,83px));overflow:hidden}
  .js-motion:not(.reduce-motion) .mx__track{display:flex;height:100%;width:max-content;will-change:transform}
  .js-motion:not(.reduce-motion) .mx__panel{flex:0 0 clamp(340px,30vw,470px);height:100%;min-height:0;padding:44px 40px 40px}
  .js-motion:not(.reduce-motion) .mx__panel--intro{flex-basis:clamp(380px,34vw,520px)}
  .js-motion:not(.reduce-motion) .mx__progress{display:block;position:absolute;left:40px;right:40px;bottom:18px;height:2px;background:rgba(247,243,238,.16)}
  .mx__progress i{display:block;height:100%;width:100%;background:var(--sable);transform-origin:0 50%;transform:scaleX(var(--mxp,0))}
  .js-motion.reduce-motion .mx__track,.no-js .mx__track{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   LE PILOTAGE (comme la présentation produit de sunmetalon.com) :
   petit surtitre, très grand titre, puis le tableau de bord qui
   monte depuis le bas et passe devant le titre au défilement.
   ============================================================ */
.pilotage{padding:0 0 96px;background:var(--ink);color:#CFC5B8}
.pv__sticky{display:flex;flex-direction:column;align-items:center;padding:88px max(16px,4vw) 40px;text-align:center}
.pv__eyebrow{margin:0;font-family:'Manrope',sans-serif;font-size:15px;letter-spacing:.02em;color:#E7DCCB}
.pv__title{margin:14px 0 0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2.6rem,7.4vw,7.6rem);line-height:.95;letter-spacing:-.04em;color:var(--ivory);
  transform:scale(var(--pvs,1));opacity:var(--pvo,1);transform-origin:50% 0}
.pv__title span{display:block}.pv__accent{color:var(--sable)}
.dash2{position:relative;z-index:1;width:min(1080px,100%);margin:44px 0 0;padding:22px 24px 18px;background:var(--ivory);color:var(--ink);text-align:left;
  border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.45);transform:translateY(var(--pvy,0px)) scale(var(--pvd,1))}
@media(min-width:1081px){
  .js-motion:not(.reduce-motion) .pv{height:190vh}
  .js-motion:not(.reduce-motion) .pv__sticky{position:sticky;top:var(--navh,83px);height:calc(100vh - var(--navh,83px));overflow:hidden;padding-top:6vh}
  .js-motion:not(.reduce-motion) .dash2{margin-top:-2vh}
}
.pilotage .wrap{padding-top:24px}
.pilotage .pil__intro{margin:0 auto;text-align:center;max-width:60ch}
.d2__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.d2__title{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--espresso)}
.d2__live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--body)}
.d2__live i{width:8px;height:8px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(122,92,60,.5)}
.d2__note{margin-left:auto;font-size:12px;color:var(--muted)}
.d2__tabs{display:inline-flex;gap:4px;margin:14px 0 0;padding:4px;background:var(--sand);border-radius:999px}
.d2__tab{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--body);font:500 13px 'Manrope',sans-serif;cursor:pointer}
.d2__tab[aria-pressed="true"]{background:var(--ivory);color:var(--ink);box-shadow:0 1px 3px rgba(42,32,27,.12)}
.d2__tab:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.d2__kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.kp{padding:14px 14px 10px;background:#FFFFFF;border:1px solid var(--hair);border-radius:4px}
.kp__lab{margin:0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--body)}
.kp__val{margin:6px 0 0;font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.kp__delta{margin:4px 0 0;font-size:12.5px;color:var(--body)}
.kp__d{font-weight:600}.kp__d.is-up{color:var(--vert)}.kp__d.is-down{color:#9B3B2E}
.kp__spark{display:block;width:100%;height:44px;margin-top:8px;overflow:visible}
.kp__spark .s-win{fill:var(--vert);opacity:.08}
.kp__spark .s-line{fill:none;stroke:var(--espresso);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.kp__spark .s-end{fill:var(--vert)}
.d2__chart{position:relative;margin-top:14px;padding:12px 14px 6px;background:#FFFFFF;border:1px solid var(--hair);border-radius:4px}
.d2__chart:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.d2__chart-t{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--body)}
.d2__svg{display:block;width:100%;height:clamp(150px,18vw,220px)}
.d2__svg .c-grid{stroke:var(--espresso);stroke-opacity:.08}
.d2__svg .c-bar{fill:var(--sable);transition:fill .3s}
.d2__svg .c-bar.is-sel{fill:var(--vert)}
.d2__svg .c-bar.is-hover{fill:var(--bronze)}
.d2__svg .c-line{fill:none;stroke:var(--espresso);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.d2__svg .c-pt{fill:var(--ivory);stroke:var(--espresso);stroke-width:1.5;vector-effect:non-scaling-stroke}
.d2__svg .c-lab{font:500 13px 'Manrope',sans-serif;fill:var(--muted)}
.d2__tip{position:absolute;top:10px;padding:8px 10px;background:var(--ink);color:var(--ivory);border-radius:4px;font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transform:translateX(-50%);transition:opacity .2s}
.d2__tip.is-on{opacity:1}
.d2__tip b,.d2__tip span{display:block;white-space:nowrap}
.d2__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;font-size:12.5px;color:var(--body)}
.d2__key{display:inline-flex;align-items:center;gap:7px}
.d2__key i{display:inline-block}
.k-bar{width:10px;height:10px;background:var(--sable)}
.k-line{width:16px;height:2px;background:var(--espresso)}
.k-sel{width:10px;height:10px;background:var(--vert)}
.d2__foot .dash__data{margin-left:auto}
@media(max-width:900px){.d2__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.d2__note{margin-left:0}}
@media(prefers-reduced-motion:no-preference){
  .d2__live i{animation:d2-live 2s ease-out infinite}
  .kp__spark .s-line.is-draw{stroke-dasharray:1;animation:d2-draw 1s var(--ease) both}
}
@keyframes d2-live{0%{box-shadow:0 0 0 0 rgba(122,92,60,.5)}100%{box-shadow:0 0 0 10px rgba(122,92,60,0)}}
@keyframes d2-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ============================================================
   CE QUE VOUS OBTENEZ : trois livrables, chacun avec un objet
   tiré des formes du logo, puis la bande « Restons en contact »
   ============================================================ */
.outputs{background:linear-gradient(180deg,var(--ivory) 0%,#E9E1D6 100%)}
.outputs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:56px;text-align:center}
.out h3{margin:26px 0 0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.02em;color:var(--espresso)}
.out p{margin:12px auto 0;max-width:34ch;font-size:15px;line-height:1.6;color:var(--body)}
.out__obj{position:relative;width:min(200px,60%);aspect-ratio:1;margin:0 auto;filter:drop-shadow(0 24px 24px rgba(42,32,27,.22))}
.out__obj i{position:absolute;top:0;bottom:0;width:calc(50% - 4px)}
.out__obj i:first-child{left:0}.out__obj i:last-child{right:0}
.out__obj--disc i{background:radial-gradient(circle at 30% 25%,#7B6252,var(--espresso) 70%)}
.out__obj--disc i:first-child{border-radius:100% 0 0 100% / 50% 0 0 50%}
.out__obj--disc i:last-child{border-radius:0 100% 100% 0 / 0 50% 50% 0}
.out__obj--arch i{background:radial-gradient(circle at 30% 20%,#E9DDCB,var(--sable) 70%)}
.out__obj--arch i:first-child{border-top-right-radius:100%}
.out__obj--arch i:last-child{border-top-left-radius:100%}
.out__obj--d i{width:100%;height:calc(50% - 4px);background:radial-gradient(circle at 25% 25%,#A88560,var(--vert) 70%);border-radius:0 999px 999px 0}
.out__obj--d i:first-child{top:0;bottom:auto}.out__obj--d i:last-child{top:auto;bottom:0}
@media(prefers-reduced-motion:no-preference){
  .out__obj{animation:out-float 7s ease-in-out infinite}
  .out:nth-child(2) .out__obj{animation-delay:-2.3s}.out:nth-child(3) .out__obj{animation-delay:-4.6s}
}
@keyframes out-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
.stay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:64px;padding-top:40px;border-top:1px solid var(--hair)}
.stay__t{margin:0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--espresso)}
@media(max-width:760px){.outputs__grid{grid-template-columns:1fr;gap:48px}}

/* ============================================================
   CONTACT : texte à gauche, formulaire à droite
   ============================================================ */
@media(min-width:1081px){
  .finalcta .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .finalcta__copy{grid-column:1}
  .finalcta .wrap > .cform{grid-column:2;grid-row:1}
}
.finalcta__copy .btn{margin-top:36px}
.cform{display:grid;gap:14px;margin-top:44px;padding:clamp(22px,3vw,36px);background:#FFFFFF;border:1px solid var(--hair);text-align:left}
@media(min-width:1081px){.cform{margin-top:0}}
.cform__t{margin:0 0 4px;font-family:'Jost',sans-serif;font-weight:400;font-size:1.4rem;color:var(--espresso)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform__f{display:grid;gap:6px}
.cform__f span{font-size:13px;font-weight:600;color:var(--body)}
.cform__f input,.cform__f textarea{width:100%;box-sizing:border-box;min-height:46px;padding:10px 12px;border:1px solid rgba(42,32,27,.28);border-radius:4px;background:var(--ivory);color:var(--ink);font:400 16px 'Manrope',sans-serif}
.cform__f textarea{resize:vertical}
.cform__f input:focus,.cform__f textarea:focus{outline:3px solid rgba(122,92,60,.35);border-color:var(--vert)}
.cform__f [aria-invalid="true"]{border-color:#9B3B2E}
.cform__err{margin:0;color:#9B3B2E;font-size:14px}
.cform__send{justify-self:start;margin-top:4px}
.cform__note{margin:0;font-size:13px;color:var(--muted)}
@media(max-width:600px){.cform__row{grid-template-columns:1fr}}

/* ============================================================
   PIED DE PAGE (comme sunmetalon.com)
   ============================================================ */
.footer{position:relative;overflow:hidden;padding:0}
.footer__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);min-height:520px}
.footer__left{position:relative;padding:64px max(16px,4vw) 0}
.footer__pitch{margin:24px 0 0;max-width:44ch;color:rgba(247,243,238,.75);font-size:16px;line-height:1.6}
.footer__contact{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
.footer__contact .line-link{margin:0}
.footer__word{position:absolute;left:max(8px,2vw);bottom:-.22em;margin:0;font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(7rem,22vw,20rem);line-height:1;letter-spacing:-.05em;color:rgba(247,243,238,.07);pointer-events:none}
.footer__links{display:flex;flex-direction:column;padding:64px 32px 32px;border-left:1px solid var(--ivory-line)}
.footer__links a{padding:13px 0;border-bottom:1px solid var(--ivory-line);color:rgba(247,243,238,.82);font-size:15px;transition:color .3s}
.footer__links a:hover{color:#C7A876}
.footer__links a:focus-visible{outline:3px solid #C7A876;outline-offset:2px}
.footer__copy{margin-top:auto;padding-top:28px;font-size:13px;color:rgba(247,243,238,.55)}
@media(max-width:760px){
  .footer__main{grid-template-columns:1fr;min-height:0}
  .footer__left{padding-bottom:150px}
  .footer__links{border-left:0;border-top:1px solid var(--ivory-line);padding:24px 16px 32px}
}
/* logo du pied de page : le fond ivoire du fichier devient sombre, les lettres claires */
.footer__logo-mark{mix-blend-mode:normal}
.footer__logo-mark img{filter:grayscale(1) invert(1) contrast(1.4);mix-blend-mode:screen}
.out h3{line-height:1.15}
.finalcta .cform p{max-width:none;margin:0;font-size:inherit}
.finalcta .cform .cform__t{font-size:1.4rem}
.finalcta .cform .cform__note{font-size:13px;line-height:1.5;color:var(--muted)}
.finalcta .cform .cform__err{font-size:14px}

/* ---------- Conviction sous le bandeau, puis une phrase qui dit qui nous sommes */
.hero__mission{max-width:26ch}
.hero__lead{order:3;margin:18px auto 0;max-width:58ch;text-align:center;font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.6;color:var(--body)}
@media(max-width:760px){.hero__lead{font-size:15px}}

/* ============================================================
   V3 · AUTODIAGNOSTIC À COCHER (section Problème)
   ============================================================ */
.diag{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:28px;margin-top:52px;align-items:start}
.diag__list{margin:0;padding:0;border:0;display:grid;gap:10px;min-width:0}
.diag__q{padding:0;margin:0 0 14px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.diag__item{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;
  background:#FFFFFF;border:1px solid var(--hair);border-radius:6px;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.diag__item:hover{border-color:var(--bronze-hair);transform:translateX(4px)}
.diag__cb{position:absolute;opacity:0;width:1px;height:1px}
.diag__box{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid rgba(42,32,27,.35);border-radius:6px;background:var(--ivory);transition:background .25s,border-color .25s}
.diag__box svg{width:18px;height:18px;fill:none;stroke:#FFFFFF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease)}
.diag__cb:checked + .diag__box{background:var(--vert);border-color:var(--vert)}
.diag__cb:checked + .diag__box svg{stroke-dashoffset:0}
.diag__item:has(.diag__cb:checked){background:#F3ECE3;border-color:rgba(122,92,60,.45)}
.diag__cb:focus-visible + .diag__box{outline:3px solid var(--cta);outline-offset:3px}
.diag__txt b{display:block;font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.3;color:var(--espresso)}
.diag__txt small{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--body)}
.diag__res{position:sticky;top:calc(var(--navh,83px) + 24px);padding:32px 30px;background:var(--espresso);color:var(--ivory);border-radius:6px}
.diag__k{margin:0;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sable)}
.diag__count{display:flex;align-items:baseline;gap:10px;margin:10px 0 0;font-family:'Jost',sans-serif;font-weight:300;line-height:1}
.diag__count b{font-weight:300;font-size:clamp(4rem,7vw,6rem);letter-spacing:-.04em;color:var(--ivory)}
.diag__count span{font-size:1.4rem;color:var(--sable)}
.diag__gauge{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:18px}
.diag__gauge i{height:6px;border-radius:3px;background:rgba(247,243,238,.16);transition:background .35s var(--ease)}
.diag__gauge i.on{background:#B89874}
.diag__msg{margin:18px 0 0;min-height:3.2em;font-family:'Jost',sans-serif;font-weight:300;font-size:1.25rem;line-height:1.35;color:var(--ivory)}
.diag__cta{margin-top:22px}
@media(max-width:900px){.diag{grid-template-columns:1fr}.diag__res{position:static}}

/* ============================================================
   V3 · PILOTAGE : grand titre et quatre indicateurs clés
   ============================================================ */
.pilotage{padding:96px 0}
.pilotage .wrap{padding-top:0}
.pv__head{text-align:center}
.pv__title{transform:none;opacity:1}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid rgba(247,243,238,.2);border-left:1px solid rgba(247,243,238,.12)}
.kpi2{padding:26px 24px 20px;border-right:1px solid rgba(247,243,238,.12);border-bottom:1px solid rgba(247,243,238,.12)}
.kpi2__lab{margin:0;font-size:13px;letter-spacing:.04em;color:#CFC5B8}
.kpi2__val{margin:10px 0 0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi2__d{margin:10px 0 0;font-size:13px;color:#CFC5B8}
.kpi2__d span{color:#D8B47D;font-weight:600}
.kpi2__spark{display:block;width:100%;height:40px;margin-top:16px;overflow:visible}
.kpi2__spark polyline{fill:none;stroke:var(--sable);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.kpi2__spark circle{fill:#D8B47D}
.kpis__note{margin:14px 0 0;text-align:right;font-size:12.5px;color:rgba(247,243,238,.6)}
.pilotage .pil__intro{margin:56px auto 0}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:no-preference){
  .kpi2.reveal .kpi2__spark polyline{stroke-dasharray:1;stroke-dashoffset:1}
  .kpi2.reveal.in .kpi2__spark polyline{transition:stroke-dashoffset 1.4s var(--ease) .3s;stroke-dashoffset:0}
}

/* ============================================================
   V3 · CE QUE VOUS OBTENEZ : quatre livrables, icônes au trait
   ============================================================ */
.outputs__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:left}
.out{padding:30px 26px 32px;background:#FFFFFF;border:1px solid var(--hair);border-radius:6px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.out:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(42,32,27,.08)}
.out__ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--sand)}
.out__ic svg{width:36px;height:36px}
.out__ic .ic{fill:none;stroke:var(--espresso);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.out__ic .ic--g{stroke:var(--vert);stroke-width:2.2}
.out h3{margin:22px 0 0;font-size:clamp(1.25rem,1.6vw,1.45rem);line-height:1.2}
.out p{margin:10px 0 0;max-width:none}
@media(prefers-reduced-motion:no-preference){
  .out.reveal .ic{stroke-dasharray:1;stroke-dashoffset:1}
  .out.reveal.in .ic{transition:stroke-dashoffset 1.2s var(--ease) .25s;stroke-dashoffset:0}
}
@media(max-width:1080px){.outputs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.outputs__grid{grid-template-columns:1fr}}

/* ---------- Résultats dans les fenêtres clients */
.case__facts{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;padding:0}
.case__facts li{flex:1 1 140px;padding:16px 18px;background:#FFFFFF;border:1px solid var(--hair);border-radius:6px}
.case__facts b{display:block;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;letter-spacing:-.03em;color:var(--vert)}
.case__facts span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--body)}

/* ============================================================
   V5 · PILOTAGE : illustration d'un tableau de pilotage
   ============================================================ */
.dash-fig{margin:40px auto 0;max-width:1200px}
.dash-art{display:block;width:100%;height:auto}
.dash-fig .kpis__note{margin-top:4px;text-align:center}
.pilotage{padding-bottom:72px}
@media(prefers-reduced-motion:no-preference){
  .dash-fig.reveal .da-line{stroke-dasharray:1;stroke-dashoffset:1}
  .dash-fig.reveal.in .da-line{transition:stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1) .4s;stroke-dashoffset:0}
  .dash-fig.reveal .da-area{opacity:0}
  .dash-fig.reveal.in .da-area{transition:opacity 1s ease 1.4s;opacity:1}
  .dash-fig.reveal .da-seg{stroke-dasharray:1;stroke-dashoffset:1}
  .dash-fig.reveal.in .da-seg{animation:da-seg 1s cubic-bezier(.22,.61,.36,1) forwards}
  .da-ping{animation:da-ping 2.4s ease-out infinite}
  .da-live{animation:da-blink 2s ease-in-out infinite}
  .da-float{animation:da-float 7s ease-in-out infinite}
  .da-f2{animation-delay:-3.5s}
}
@keyframes da-seg{to{stroke-dashoffset:0}}
@keyframes da-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
@keyframes da-blink{50%{opacity:.35}}
@keyframes da-float{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* ============================================================
   V5 · AUTODIAGNOSTIC ÉDITORIAL : grandes lignes, filets fins,
   pastille ronde à cocher, résultat sur fond sombre
   ============================================================ */
.diag__list{gap:0;border-top:1px solid rgba(42,32,27,.18)}
.diag__item{grid-template-columns:56px minmax(0,1fr) 46px;gap:20px;align-items:center;padding:26px 6px 26px 0;
  background:transparent;border:0;border-bottom:1px solid rgba(42,32,27,.12);border-radius:0;transform:none}
.diag__item:hover{transform:none;background:transparent}
.diag__item::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--vert);transition:width .5s var(--ease)}
.diag__item:has(.diag__cb:checked){background:transparent;border-color:rgba(42,32,27,.12)}
.diag__item:has(.diag__cb:checked)::before{width:100%}
.diag__no{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.2em;color:var(--bronze)}
.diag__txt b{font-weight:300;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.015em;transition:color .3s}
.diag__txt small{font-size:15px}
.diag__item:hover .diag__txt b{color:var(--vert)}
.diag__box{order:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(42,32,27,.3);background:transparent;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.diag__item:hover .diag__box{border-color:var(--vert);transform:scale(1.06)}
.diag__box svg{width:18px;height:18px}
.diag__cb:checked + .diag__box{background:var(--vert);border-color:var(--vert)}
.diag__cb:checked ~ .diag__txt b{color:var(--vert)}
.diag__q{margin-bottom:18px}
@media(max-width:600px){.diag__item{grid-template-columns:34px minmax(0,1fr) 40px;gap:12px}}

/* ============================================================
   PAGES INTÉRIEURES (Le cabinet, Contact) : en-tête de page
   ============================================================ */
.page-head{padding:calc(var(--navh,83px) + 80px) 0 40px;text-align:center}
.page-head--short{padding-bottom:0}
.page-head__t{margin:20px auto 0;max-width:20ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2.4rem,6vw,5.6rem);line-height:.98;letter-spacing:-.04em;color:var(--espresso);text-wrap:balance}
.page-head__t span{display:block}
.page-head__accent{color:var(--vert)}
.page-head__lead{margin:26px auto 0;max-width:60ch;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.65;color:var(--body)}
.nav__links a[aria-current="page"]{color:var(--vert)}
.page-head + .sec{padding-top:56px}
.page-head--short + .finalcta{padding-top:56px}

/* ============================================================
   COULEURS MBO : les mots et chiffres mis en avant reviennent au bronze.
   Seuls les boutons d'action restent verts (--cta).
   ============================================================ */
:root{--vert:#7A5C3C}

/* ---------- Le problème : quatre problèmes, texte seul, filets fins */
.pbs{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--espresso)}
.pb{padding:28px 28px 8px 0;border-right:1px solid var(--hair)}
.pb + .pb{padding-left:28px}
.pb:last-child{border-right:0}
.pb__n{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.22em;color:var(--bronze)}
.pb h3{margin:14px 0 0;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15;letter-spacing:-.015em;color:var(--espresso)}
.pb p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--body)}
@media(max-width:1080px){.pbs{grid-template-columns:repeat(2,minmax(0,1fr))}.pb,.pb + .pb{padding:26px 22px 18px 0;border-right:0;border-bottom:1px solid var(--hair)}.pb:nth-child(even){padding-left:22px;border-left:1px solid var(--hair)}}
@media(max-width:600px){.pbs{grid-template-columns:1fr}.pb:nth-child(even){padding-left:0;border-left:0}}

/* ---------- Méthode en grand : panneaux pleine hauteur */
@media(max-width:1080px){.mx__panel{min-height:0;padding-top:30px;padding-bottom:28px}.mx__res{padding-top:18px}}
@media(min-width:1081px){.js-motion:not(.reduce-motion) .mx__progress{background:rgba(42,32,27,.14)}.mx__progress i{background:var(--bronze)}}

/* ---------- Bandeau : qui nous sommes et pour qui, au-dessus du titre */
.band-kicker{position:absolute;top:18px;left:0;right:0;z-index:1;margin:0;text-align:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);pointer-events:none}
@media(max-width:760px){.band-kicker{position:static;padding:22px 16px 0;text-align:left;font-size:11px}.band-title{padding-top:8px}}
/* ---------- Expertises : le livrable sous chaque titre */
.services__grid .svc__tags{letter-spacing:.12em}

/* V8 · références : bandeau de logos qui défile */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.marquee{display:flex;overflow:hidden;margin-top:48px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee__track{flex:none;display:flex;align-items:center;list-style:none;margin:0;padding:0;animation:mq-scroll 38s linear infinite}
.marquee__track li{flex:none;display:flex;align-items:center;justify-content:center;min-width:260px;height:150px;padding:0 48px;opacity:.82}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes mq-scroll{to{transform:translateX(-100%)}}
.refs__conf{margin:24px 0 0;padding:0 16px;text-align:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media(max-width:760px){.marquee__track li{min-width:190px;height:110px;padding:0 28px}.marquee__track{animation-duration:28s}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}.marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}.marquee__track+.marquee__track{display:none}.marquee__track{flex-wrap:wrap;justify-content:center}.marquee__track li:nth-child(n+5){display:none}}
html.reduce-motion .marquee__track{animation:none}
.testi{max-width:820px;margin:64px auto 0;padding:0 16px;text-align:center}
.testi__q{margin:0;font:300 clamp(1.15rem,2vw,1.5rem)/1.55 'Jost',sans-serif;color:var(--espresso)}
.testi__who{display:inline-flex;align-items:center;gap:14px;margin-top:26px;text-align:left;font-size:14px;color:var(--muted)}
.testi__who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center 25%}
.testi__who b{display:block;color:var(--ink);font-weight:600}
.client__logo{display:block;width:auto;height:48px}
@media(max-width:760px){.client__logo{height:38px}}
.client__logo--abc{height:92px}
.client__mark--legalplace{font:800 2.1rem/1 'Manrope',sans-serif;letter-spacing:-.045em}
.client__mark--legalplace i{font-style:normal;color:var(--bronze)}
@media(max-width:760px){.client__logo--abc{height:70px}.client__mark--legalplace{font-size:1.6rem}}
.client__logo--joecom{height:84px}
@media(max-width:760px){.client__logo--joecom{height:64px}}
.marquee__track li{opacity:1}
.client__mark--legalplace{color:#0A1158}
.client__mark--legalplace i{color:#F7687C}

/* V9 · mention du cabinet sous le bandeau */
.band-sub{margin:0;padding:22px 16px;text-align:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);border-bottom:1px solid var(--hair)}
@media(max-width:760px){.band-sub{font-size:11px;letter-spacing:.18em;line-height:1.7}}

/* V10 · problème : photo d'accompagnement et liste éditoriale */
.problem2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--ivory);border-top:1px solid var(--hair)}
.problem2__photo{position:relative;align-self:center;margin:clamp(40px,5vw,80px) 0 clamp(40px,5vw,80px) clamp(24px,5vw,80px);aspect-ratio:4/5;max-height:640px;overflow:hidden;border-radius:4px}
.problem2__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% center;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.problem2__photo.in img{transform:scale(1)}
.problem2__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(67,51,43,0) 55%,rgba(67,51,43,.28))}
.problem2__body{padding:clamp(56px,7vw,112px) clamp(24px,6vw,104px)}
.problem2__h{margin:22px 0 0;max-width:24ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.14;letter-spacing:-.02em;color:var(--espresso)}
.problem2__h .em{color:var(--bronze)}
.pb2s{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--espresso)}
.pb2{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 8px;padding:24px 0 22px;border-bottom:1px solid var(--hair)}
.pb2::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--bronze);transition:width .6s var(--ease)}
.pb2:hover::after{width:100%}
.pb2__n{padding-top:6px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.24em;color:var(--bronze)}
.pb2 h3{margin:0;font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.3;color:var(--ink)}
.pb2 p{margin:6px 0 0;max-width:56ch;font-size:15.5px;line-height:1.6;color:var(--body)}
@media(max-width:900px){.problem2{grid-template-columns:1fr}.problem2__photo{margin:32px 16px 0;aspect-ratio:4/3;max-height:none}.pb2{grid-template-columns:44px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.problem2__photo img{transform:none;transition:none}}

/* V11 · références : titre sur une ligne, section plus compacte */
.refs.sec{padding:64px 0 72px}
.refs .sec-head h2.two-tone{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.15;max-width:none;white-space:nowrap}
.refs .sec-head h2.two-tone span{display:inline}
.refs .marquee{margin-top:32px}
@media(max-width:760px){.refs .sec-head h2.two-tone{white-space:normal;font-size:1.5rem}.refs.sec{padding:48px 0 56px}}

/* ===== V12 · en-tête : texte à gauche, CTA à droite ===== */
.hero2{padding:clamp(72px,9vw,128px) 0 clamp(64px,8vw,112px)}
.hero2__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:end;max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.hero2__mission{margin:22px 0 0;max-width:20ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.1;letter-spacing:-.025em;color:var(--espresso)}
.hero2__mission strong{font-weight:300;color:var(--bronze)}
.hero2__lead{margin:28px 0 0;max-width:54ch;font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--body)}
.hero2__side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-left:clamp(24px,3vw,48px);border-left:1px solid var(--hair)}
.hero2__side .contact-option{margin:6px 0 0;text-align:left}
@media(max-width:900px){.hero2__in{grid-template-columns:1fr;align-items:start}.hero2__side{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid var(--hair)}}

/* ===== V12 · mots révélés au fil du défilement ===== */
[data-scrub] .w{opacity:.16;transition:opacity .35s ease}
[data-scrub] .w.on{opacity:1}

/* ===== V12 · problème en accordéon ===== */
.problem2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ivory);border-top:1px solid var(--hair)}
.problem2__photo{display:none}
.problem2__body{padding:clamp(56px,7vw,112px) clamp(16px,5vw,88px) clamp(56px,7vw,112px)}
.problem2__h{margin:22px 0 0;max-width:24ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1.15;letter-spacing:-.02em;color:var(--espresso)}
.problem2__h .em{color:var(--bronze)}
.pb2s{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--espresso)}
.pb2{display:block;padding:0;border-bottom:1px solid var(--hair)}
.pb2::after{display:none}
.pb2__btn{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;width:100%;margin:0;padding:26px 16px 26px 18px;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background .3s ease}
.pb2__btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bronze);transform:scaleY(0);transition:transform .45s var(--ease)}
.pb2__btn:hover{background:rgba(205,191,170,.22)}
.pb2__btn:focus-visible{outline:3px solid var(--cta);outline-offset:-3px}
.pb2.is-open .pb2__btn::before{transform:scaleY(1)}
.pb2__n{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.24em;color:var(--bronze)}
.pb2__t{font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.35rem,2vw,1.95rem);line-height:1.2;letter-spacing:-.015em;color:#6E6058;transition:color .3s ease}
.pb2.is-open .pb2__t,.pb2__btn:hover .pb2__t{color:var(--ink)}
.pb2__ic{position:relative;width:18px;height:18px;justify-self:end}
.pb2__ic::before,.pb2__ic::after{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--espresso);transition:transform .4s var(--ease)}
.pb2__ic::after{transform:rotate(90deg)}
.pb2.is-open .pb2__ic::before{transform:rotate(45deg)}
.pb2.is-open .pb2__ic::after{transform:rotate(135deg)}
.pb2__d{margin:0;padding:0 18px 24px 70px;max-width:56ch;font-size:15.5px;line-height:1.65;color:var(--body);animation:pb2in .45s var(--ease)}
@keyframes pb2in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.problem2__art{position:relative;display:flex;flex-direction:column;justify-content:flex-end;background:#2A201B;overflow:hidden}
.ia-art{display:block;width:100%;height:auto;max-height:78vh}
.problem2__desc{padding:8px clamp(24px,4vw,64px) clamp(32px,4vw,56px);color:var(--ivory)}
.problem2__dn{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.24em;color:var(--sable)}
.problem2__dt{margin:12px 0 0;max-width:42ch;font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:#EFE8DF}
.problem2__desc.swap .problem2__dt{animation:pb2in .45s var(--ease)}
@media(min-width:901px){.pb2__d{display:none}}
@media(max-width:900px){.problem2{grid-template-columns:1fr}.problem2__art{order:-1}.problem2__desc{display:none}.ia-art{max-height:none}.pb2__btn{grid-template-columns:40px minmax(0,1fr) 24px;padding:20px 8px 20px 12px}.pb2__d{padding:0 12px 20px 52px}}
/* animations de l'illustration */
.ia-dot{animation:iaTw 3.2s ease-in-out infinite}
@keyframes iaTw{0%,100%{opacity:.35}50%{opacity:1}}
.ia-flow{stroke-dasharray:4 7;animation:iaFlow 2.4s linear infinite}
@keyframes iaFlow{to{stroke-dashoffset:-44}}
.ia-ping{animation:iaPing 2.6s ease-out infinite}
@keyframes iaPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.ia-spin{animation:iaSpin 18s linear infinite}
@keyframes iaSpin{to{transform:rotate(360deg)}}
.ia-core{animation:iaCore 2.6s ease-in-out infinite}
@keyframes iaCore{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.ia-out{animation:iaFlow 1.6s linear infinite}
.ia-bar{transform-box:fill-box;transform-origin:bottom;animation:iaBar 3s ease-in-out infinite}
@keyframes iaBar{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.ia-dot,.ia-flow,.ia-ping,.ia-spin,.ia-core,.ia-out,.ia-bar,.pb2__d,.problem2__desc.swap .problem2__dt{animation:none}[data-scrub] .w{opacity:1}}
@media(min-width:901px){.hero2__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
@media(min-width:901px){.hero2__side .contact-option a{white-space:nowrap}}

/* ===== V13 · expertises : une illustration par expertise, en fondu ===== */
.svc-panel__art{position:relative;height:0;padding-bottom:47.5%;margin:-6px -6px 4px;border-bottom:1px solid rgba(247,243,238,.12)}
.svc-art{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.97);transition:opacity .55s ease,transform .7s var(--ease)}
.svc-panel__art[data-i="1"] .svc-art[data-i="1"],.svc-panel__art[data-i="2"] .svc-art[data-i="2"],.svc-panel__art[data-i="3"] .svc-art[data-i="3"],.svc-panel__art[data-i="4"] .svc-art[data-i="4"]{opacity:1;transform:none}
.svc-panel.swap > .svc-panel__art{animation:none}
.svc-panel__n{font-size:2.6rem}
.sa-check{stroke-dasharray:1;stroke-dashoffset:1;animation:saDraw 2.8s var(--ease) infinite}
@keyframes saDraw{0%{stroke-dashoffset:1}30%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.sa-line{stroke-dasharray:1;stroke-dashoffset:1;animation:saLine 4s var(--ease) infinite}
@keyframes saLine{0%{stroke-dashoffset:1}45%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.2}}
.sa-dash,.sa-loop{animation:iaFlow 1.8s linear infinite}
.sa-ping{animation:iaPing 2.4s ease-out infinite}
.sa-lens{animation:saLens 5s ease-in-out infinite}
@keyframes saLens{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,4px)}}
@media(prefers-reduced-motion:reduce){.sa-check,.sa-line{animation:none;stroke-dashoffset:0}.sa-dash,.sa-loop,.sa-ping,.sa-lens{animation:none}.svc-art{transition:none}}
@media(max-width:900px){.hero2__side{align-items:stretch}.hero2__side .btn{justify-content:center;max-width:100%;letter-spacing:.14em;padding-left:20px;padding-right:20px}}

/* ===== V14 · expertises façon accordéon : ligne active marquée, panneau titre / image / texte ===== */
.svc__ic{display:none}
@media(min-width:1081px){
  .svc-wrap{align-items:stretch;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .svc-wrap .services__grid{align-self:start;border-top:1px solid var(--espresso)}
  .svc-wrap .services__grid .svc{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 28px;align-items:center;gap:0;padding:30px 20px 30px 22px;border-bottom:1px solid var(--hair);background:transparent;transition:background .35s ease}
  .svc-wrap .services__grid .svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bronze);transform:scaleY(0);transition:transform .45s var(--ease)}
  .svc-wrap .services__grid .svc:hover{background:rgba(205,191,170,.22)}
  .svc-wrap .services__grid .svc.is-active{background:#EDE3D6;border-bottom-color:var(--hair)}
  .svc-wrap .services__grid .svc.is-active::before{transform:scaleY(1)}
  .svc-wrap .services__grid .svc h3,.svc-wrap .services__grid .svc:hover h3{font-size:clamp(1.4rem,2vw,2rem);color:#6E6058;transition:color .3s ease}
  .svc-wrap .services__grid .svc.is-active h3,.svc-wrap .services__grid .svc:hover h3{color:var(--ink)}
  .svc-wrap .services__grid .svc p,.svc-wrap .services__grid .svc .svc__tags{display:none}
  .svc__ic{display:block;position:relative;width:18px;height:18px;justify-self:end}
  .svc__ic::before,.svc__ic::after{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:var(--espresso);transition:transform .4s var(--ease)}
  .svc__ic::after{transform:rotate(90deg)}
  .svc.is-active .svc__ic::before{transform:rotate(45deg)}
  .svc.is-active .svc__ic::after{transform:rotate(135deg)}
  .svc-panel{position:sticky;top:100px;min-height:600px;padding:40px clamp(28px,3vw,48px) 40px;gap:0;background:#2A201B}
  .svc-panel__n{order:1;font-size:12px;letter-spacing:.24em;color:var(--sable);font-family:'Jost',sans-serif}
  .svc-panel__t{order:2;margin-top:14px;font-size:clamp(1.7rem,2.4vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
  .svc-panel__art{order:3;flex:1;min-height:260px;height:auto;padding:0;margin:28px 0 24px;border:0}
  .svc-panel__d{order:4;max-width:44ch;font-size:16.5px;line-height:1.65;color:#EFE8DF}
  .svc-panel__tags{order:5;margin-top:22px}
}

/* ===== V15 · problème : photo d'atelier, plus compacte, texte en surimpression ===== */
.problem2{align-items:center}
.problem2__art{align-self:center;margin:clamp(40px,5vw,80px) clamp(16px,5vw,80px) clamp(40px,5vw,80px) 0;height:clamp(420px,38vw,520px);border-radius:4px;justify-content:flex-end;background:#2A201B}
.problem2__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.problem2__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,32,27,0) 35%,rgba(42,32,27,.86) 100%);pointer-events:none}
.problem2__desc{position:relative;z-index:1;padding:0 clamp(24px,3vw,44px) clamp(24px,3vw,40px)}
@media(max-width:900px){.problem2__art{margin:24px 16px 0;height:auto;aspect-ratio:4/3}.problem2__art::after{display:none}}

/* ===== V16 · colonnes alignées : liste et panneau de même hauteur ===== */
.problem2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;column-gap:0;padding:clamp(56px,7vw,104px) clamp(16px,5vw,80px)}
.problem2__head{grid-column:1 / -1;padding:0 0 40px}
.problem2__h{max-width:34ch}
.problem2__body{padding:0;display:flex;flex-direction:column}
.problem2__body .pb2s{margin:0;flex:1}
.problem2__art{align-self:stretch;margin:0;height:auto;min-height:0;border-radius:0}
@media(max-width:900px){.problem2{grid-template-columns:1fr;padding:48px 16px}.problem2__head{padding-bottom:24px}.problem2__art{order:0;aspect-ratio:4/3;margin-bottom:8px}}
@media(min-width:1081px){
  .svc-wrap{align-items:stretch}
  .svc-wrap .services__grid{align-self:stretch}
  .svc-panel{position:relative;top:auto;min-height:0;padding:30px clamp(24px,2.6vw,40px)}
  .svc-panel__t{font-size:clamp(1.4rem,1.9vw,1.9rem)}
  .svc-panel__art{flex:1 1 auto;min-height:120px;margin:16px 0 14px}
  .svc-panel__d{font-size:15.5px}
  .svc-panel__tags{margin-top:14px}
  .services__grid .svc.is-active:focus-visible{outline:none}
}

/* ===== V17 · pied de page distinct du bloc pilotage ===== */
.footer{background:var(--espresso);border-top:1px solid rgba(216,180,125,.55)}

/* ===== V18 · pied de page clair (sable MBO) : moins de marron en bas de page ===== */
.footer{background:#EEE6DC;color:var(--espresso);border-top:0}
.footer__pitch{color:var(--body)}
.footer__word{color:rgba(67,51,43,.06)}
.footer__links{border-left-color:rgba(67,51,43,.16)}
.footer__links a{color:var(--espresso);border-bottom-color:rgba(67,51,43,.16)}
.footer__links a:hover{color:var(--bronze)}
.footer__links a:focus-visible{outline-color:var(--cta)}
.footer__copy{color:#6E6058}
.footer .eyebrow,.footer__logo .sub{color:var(--bronze)}
.footer a.line-link,.footer p.line-link{color:var(--espresso)}
.footer a.line-link:hover{color:var(--bronze)}
.footer__logo-mark{mix-blend-mode:multiply}
.footer__logo-mark img{filter:none;mix-blend-mode:multiply}
@media(max-width:900px){.footer__links{border-top-color:rgba(67,51,43,.16)}}

/* ===== V19 · moins de marron : pilotage et panneau des expertises en vert profond ===== */
:root{--deep:#243028}

/* ===== V20 · photo du problème : mouvement lent (en attendant la vidéo) ===== */
.problem2__img{animation:kenburns 22s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-2%,1.5%)}}
@media(prefers-reduced-motion:reduce){.problem2__img{animation:none}}

/* ===== V21 · pilotage compact : titre et texte à gauche, tableau de bord à droite ===== */
@media(min-width:1000px){
  .pilotage{padding:80px 0}
  .pilotage .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head fig" "intro fig";column-gap:clamp(32px,4vw,64px);align-items:center;max-width:1280px}
  .pilotage .pv__head{grid-area:head;align-self:end;text-align:left}
  .pilotage .pv__title{font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:1.02}
  .pilotage .pil__intro{grid-area:intro;align-self:start;margin:24px 0 0;text-align:left;max-width:44ch;font-size:16px}
  .pilotage .dash-fig{grid-area:fig;margin:0}
}
@media(max-width:999px){.pilotage{padding:64px 0}.pilotage .pv__title{font-size:clamp(2rem,8vw,3rem)}.dash-fig{margin-top:28px}.pilotage .pil__intro{margin-top:28px}}
@media(min-width:1000px){.pilotage{padding:56px 0}}

/* ===== V22 · articles ===== */
.art-crumbs{margin:0 0 18px;font-size:13px;color:var(--muted)}
.art-crumbs a{color:var(--bronze);text-decoration:none}
.art-crumbs a:hover{text-decoration:underline}
.art-h1{margin:18px 0 0;max-width:24ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.1;letter-spacing:-.02em;color:var(--espresso)}
.art-lead{margin:22px 0 0;max-width:62ch;font-size:clamp(16.5px,1.3vw,19px);line-height:1.7;color:var(--body)}
.art-meta{margin:18px 0 0;font-size:13.5px;color:var(--muted)}
.art-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-top:24px;padding-bottom:72px;max-width:1180px}
.art-toc{position:sticky;top:110px;align-self:start;padding-top:8px;border-top:1px solid var(--espresso)}
.art-toc__t{margin:14px 0 10px;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze)}
.art-toc ol{list-style:none;margin:0;padding:0}
.art-toc li{border-bottom:1px solid var(--hair)}
.art-toc a{display:block;padding:9px 0;font-size:14px;line-height:1.4;color:var(--body);text-decoration:none}
.art-toc a:hover{color:var(--bronze)}
.art-body{max-width:70ch;font-size:17px;line-height:1.75;color:var(--body)}
.art-body h2{margin:52px 0 0;scroll-margin-top:110px;font-family:'Jost',sans-serif;font-weight:400;font-size:clamp(1.45rem,2vw,1.9rem);line-height:1.2;letter-spacing:-.01em;color:var(--espresso)}
.art-body h2:first-child{margin-top:8px}
.art-body p{margin:16px 0 0}
.art-body ul,.art-body ol{margin:16px 0 0;padding-left:1.2em}
.art-body li{margin:8px 0 0}
.art-body strong{color:var(--ink);font-weight:600}
.art-body a{color:var(--bronze)}
.art-formula{padding:18px 22px;background:#EEE6DC;border-left:2px solid var(--bronze);font-size:16px}
.art-table-wrap{margin:22px 0 0;overflow-x:auto}
.art-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.5}
.art-table th,.art-table td{padding:12px 14px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.art-table thead th{font-family:'Jost',sans-serif;font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory);background:var(--espresso)}
.art-table tbody th{font-weight:600;color:var(--ink);background:#F2ECE4}
.art-key{margin:40px 0 0;padding:26px 28px;background:var(--espresso);color:#EFE8DF}
.art-key__t{margin:0!important;font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#D8B47D}
.art-key p{color:#EFE8DF}
.art-note{font-size:14px;color:var(--muted)}
.art-faq{margin-top:56px}
.art-faq__i{border-bottom:1px solid var(--hair)}
.art-faq__i summary{padding:18px 0;cursor:pointer;font-family:'Jost',sans-serif;font-size:1.1rem;color:var(--ink)}
.art-faq__i summary:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.art-faq__i p{margin:0 0 18px}
.art-cta{padding:72px 0;background:#EEE6DC;text-align:center}
.art-cta .two-tone{font-size:clamp(1.7rem,3vw,2.6rem)}
.art-cta p{max-width:52ch;margin:16px auto 26px;color:var(--body)}
.art-related{padding:64px 0 80px}
.art-list{padding:8px 0 80px}
.art-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.art-filter{padding:9px 18px;border:1px solid var(--hair);border-radius:999px;background:transparent;font:inherit;font-size:14px;color:var(--body);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.art-filter:hover{border-color:var(--bronze);color:var(--bronze)}
.art-filter.is-on{background:var(--espresso);border-color:var(--espresso);color:var(--ivory)}
.art-filter:focus-visible{outline:3px solid var(--cta);outline-offset:2px}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.art-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.art-card{display:flex;flex-direction:column;gap:12px;padding:28px 26px;background:#FBF8F4;border:1px solid var(--hair);text-decoration:none;color:inherit;transition:border-color .35s,transform .45s var(--ease),box-shadow .45s var(--ease)}
.art-card:hover{border-color:var(--bronze);transform:translateY(-4px);box-shadow:0 18px 34px rgba(67,51,43,.1)}
.art-card:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.art-card__cat{font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.art-card__t{font-family:'Jost',sans-serif;font-weight:400;font-size:1.3rem;line-height:1.25;color:var(--espresso)}
.art-card__d{font-size:15px;line-height:1.6;color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-card__m{margin-top:auto;padding-top:8px;font-size:13px;color:var(--muted)}
.art-card[hidden]{display:none}
@media(max-width:1000px){.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.art-layout{grid-template-columns:1fr}.art-toc{position:static}}
@media(max-width:640px){.art-grid,.art-grid--2{grid-template-columns:1fr}.art-body{font-size:16px}}
.art-body,.art-toc{min-width:0}.art-table-wrap{max-width:100%}
.page-head .art-h1,.page-head .art-lead{margin-left:auto;margin-right:auto}.page-head .art-h1{max-width:28ch}

/* ===== V23 · méthode : cartes empilées (chaque panneau recouvre le précédent) ===== */
@media(min-width:1081px){
  .js-motion:not(.reduce-motion) .mx--stack .mx__track{position:relative;display:block;width:100%;height:100%;transform:none!important}
  .js-motion:not(.reduce-motion) .mx--stack .mx__panel{position:absolute;top:0;bottom:0;right:0;width:auto;height:auto;will-change:transform;box-shadow:-18px 0 36px rgba(42,32,27,.14)}
  .js-motion:not(.reduce-motion) .mx--stack .mx__panel > *{max-width:460px}
  .js-motion:not(.reduce-motion) .mx--stack .mx__panel--intro{box-shadow:none}
}

/* ===== V24 · vidéos ===== */
video.problem2__img{display:block;background:#2A201B}
.cab-video{margin:0 auto;max-width:1280px;padding:0 clamp(16px,4vw,56px)}
.cab-video video{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:center 35%;border-radius:4px;background:#2A201B}
@media(max-width:760px){.cab-video video{aspect-ratio:16/10}}

/* ===== V25 · tableau de pilotage vivant, et grossissement au survol ===== */
.dash-art{transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .7s ease;transform-origin:50% 55%}
.dash-fig:hover .dash-art{transform:scale(1.05)}
@media(prefers-reduced-motion:no-preference){
  .dash-fig.reveal.in .da-line{animation:daLine 7s cubic-bezier(.22,.61,.36,1) 2.4s infinite}
  .dash-fig.reveal.in .da-area{animation:daArea 7s ease 2.4s infinite}
  .dash-fig.reveal.in .da-seg{animation:da-seg 1s cubic-bezier(.22,.61,.36,1) forwards,daSeg 7s cubic-bezier(.22,.61,.36,1) 2.6s infinite}
  .dash-fig .da-kv{transition:opacity .3s}
}
@keyframes daLine{0%,72%{stroke-dashoffset:0}80%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes daArea{0%,70%{opacity:1}80%{opacity:0}100%{opacity:1}}
@keyframes daSeg{0%,72%{stroke-dashoffset:0}80%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.dash-fig:hover .dash-art{transform:none}}

/* ===== V26 · information RGPD sous les boutons de réservation ===== */
.privacy-note{margin:4px 0 0;max-width:46ch;font-size:12.5px;line-height:1.5;color:var(--body)}
.privacy-note a{color:var(--espresso);text-decoration:underline;text-underline-offset:2px}
.finalcta .privacy-note{margin-top:10px}

/* ===== V27 · passe unslop (retouche) : unslop by @heydamir, CC BY 4.0 =====
   Étiquettes en casse de phrase, sans grand espacement ; chiffres à chasse fixe ;
   titre des expertises resserré ; grille de la méthode sans vide quand les animations sont réduites. */
body .eyebrow,body .pv__eyebrow,body .band-sub,body .svc__tags,body .svc-panel__tags,body .footer__logo .sub,
body .art-card__cat,body .art-toc__t,body .art-key__t,body .refs__conf,body .client__sector,body .member__role,body .partner__role{
  text-transform:none;letter-spacing:.01em}
body .eyebrow,body .pv__eyebrow{font-family:'Jost',sans-serif;font-weight:500;font-size:15px;color:var(--bronze)}
.pilotage .pv__eyebrow{color:#D8B47D}
.mx__panel .eyebrow{color:var(--sable)}
body .band-sub{font-size:14px;color:var(--bronze)}
body .svc__tags,body .svc-panel__tags{font-size:13px}
body .svc-panel__tags{color:#D8B47D}
body .footer__logo .sub{font-size:13px}
body .art-card__cat,body .art-toc__t,body .art-key__t{font-size:13px}
body .art-table thead th{text-transform:none;letter-spacing:0;font-size:14px}
/* navigation et boutons : casse de phrase */
body .nav__links a{text-transform:none;letter-spacing:.01em;font-size:14px}
body .btn,body .nav__cta,body .link{text-transform:none;letter-spacing:.01em;font-size:15px}
body .nav__cta{font-size:14px}
/* chiffres à chasse fixe */
.da-kv,.dash-art text,.pb2__n,.svc__i,.mx__n,.svc-panel__n{font-variant-numeric:tabular-nums}
/* titre des expertises : deux lignes au lieu de trois */
.services .sec-head h2.two-tone{font-size:clamp(2rem,3.3vw,3rem);line-height:1.1;max-width:none;margin-left:auto;margin-right:auto}
/* méthode sans animation : la grille se remplit sans case vide */
@media(min-width:1081px){
  .js-motion.reduce-motion .mx__track,.no-js .mx__track{grid-template-columns:repeat(4,minmax(0,1fr))}
  .js-motion.reduce-motion .mx__panel--intro,.no-js .mx__panel--intro{grid-column:span 2}
}
@media(max-width:760px){body .nav__links a{font-size:12px}}

/* ===== V28 · téléphone ===== */
@media(max-width:900px){
  .hero2{padding:48px 0 56px}
  .hero2__in{grid-template-columns:1fr;gap:32px}
  .hero2__mission{font-size:clamp(1.9rem,8.4vw,2.4rem);max-width:none}
  .hero2__side{align-items:stretch;gap:16px}
  .hero2__side .btn{width:100%;justify-content:center;border-radius:999px;padding:16px 20px}
  .hero2__side .link{align-self:flex-start}
}
@media(max-width:760px){
  /* liens du menu : zone de toucher d'au moins 40 px */
  body .nav__links a{display:inline-flex;align-items:center;min-height:40px;font-size:13px;letter-spacing:0;opacity:1}
  body .nav__links{padding-top:4px;padding-bottom:4px}
  .footer__contact .line-link,.contact-option a{display:inline-block;padding:8px 0}
  body .partner__role{font-size:12px;letter-spacing:0}
  body .partner__name{font-size:15px}
  .services__grid .svc__tags,.svc__tags{white-space:normal;letter-spacing:.01em;overflow-wrap:anywhere}
  .art-h1{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .pb2__t{font-size:1.25rem}
}
@media(max-width:900px){.btn,.nav__cta,.link{letter-spacing:.01em!important}}

/* ===== V29 · méthode sur téléphone : les étapes s'empilent au défilement, les précédentes restent en bandes en haut ===== */
@media(max-width:1080px){
  .js-motion:not(.reduce-motion) .mx,.js-motion:not(.reduce-motion) .mx__sticky,.js-motion:not(.reduce-motion) .mx__track,.js-motion:not(.reduce-motion) .method{overflow:visible}
  .js-motion:not(.reduce-motion) .mx__track{display:block}
  .js-motion:not(.reduce-motion) .mx__panel{position:sticky;min-height:min(72vh,560px);box-shadow:0 -14px 28px rgba(42,32,27,.18)}
  .js-motion:not(.reduce-motion) .mx__panel--intro{box-shadow:none}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(1){top:var(--navh,140px)}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(2){top:calc(var(--navh,140px) + 44px)}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(3){top:calc(var(--navh,140px) + 88px)}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(4){top:calc(var(--navh,140px) + 132px)}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(5){top:calc(var(--navh,140px) + 176px)}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(6){top:calc(var(--navh,140px) + 220px)}
  .js-motion:not(.reduce-motion) .mx__panel:nth-child(7){top:calc(var(--navh,140px) + 264px)}
  /* le numéro reste lisible dans la bande de 34 px */
  .js-motion:not(.reduce-motion) .mx__panel:not(.mx__panel--intro){padding-top:5px}
  .js-motion:not(.reduce-motion) .mx__n{font-size:2.1rem;line-height:1.05}
}

/* ===== V30 · téléphone : en-tête sur une seule ligne (logo, bouton, menu) ===== */
@media(max-width:760px){
  .nav .nav__in{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:10px 16px}
  .nav .logo{flex:none;transform:scale(.8);transform-origin:left center;margin-right:-22px}
  .nav .nav__cta{order:2;margin-left:auto;padding:10px 16px;font-size:13px;white-space:nowrap}
  .nav .nav__burger{order:3;display:block;flex:none;width:42px;height:42px;margin-left:0;border-radius:10px}
  .nav .nav__links{position:absolute;top:100%;left:0;right:0;z-index:5;display:flex;flex-direction:column;gap:0;padding:8px 16px 16px;
    background:var(--ivory);border-bottom:1px solid var(--hair);box-shadow:0 18px 30px rgba(42,32,27,.08);
    opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
  .nav.menu-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav .nav__links a{display:flex;align-items:center;min-height:48px;padding:0;border-right:0;border-bottom:1px solid var(--hair);font-size:16px}
  .nav .nav__links a:last-child{border-bottom:0}
  .nav.menu-open .nav__burger span{opacity:0}
  .nav.menu-open .nav__burger::before{transform:translateY(7px) rotate(45deg)}
  .nav.menu-open .nav__burger::after{transform:translateY(-7px) rotate(-45deg)}
}
@media(max-width:360px){.nav .nav__cta{padding:9px 12px;font-size:12px}}
/* ===== V30 · tableau de pilotage plus grand sur téléphone ===== */
@media(max-width:760px){
  .pilotage .dash-fig{margin-left:-12px;margin-right:-12px}
  .pilotage .dash-art{transform:scale(1.12);transform-origin:50% 40%;margin:14px 0}
  .dash-fig:hover .dash-art{transform:scale(1.12)}
}
@media(max-width:760px){.pilotage{overflow-x:hidden}}

/* ===== V31 · formulaire de contact : champ piège invisible, confirmation d'envoi ===== */
.cform__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cform__done{margin:8px 0 0;padding:20px 22px;background:#EEE6DC;border-left:2px solid var(--bronze);font-size:16px;line-height:1.6;color:var(--body)}
.cform__done strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:600}
.cform__done:focus{outline:none}
.cform__send[disabled]{opacity:.7;cursor:wait}
.cform__note a{color:var(--espresso);text-decoration:underline;text-underline-offset:2px}
.cform [hidden]{display:none!important}

/* ============================================================
   V32 · Bandeau : hélice de données sur fond espresso
   ============================================================ */
.brand-band{background:#1E1612;border-bottom:0}
.brand-band__helix{position:relative}
.brand-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(30,22,18,.85) 0%,rgba(30,22,18,0) 28%,rgba(30,22,18,0) 72%,rgba(30,22,18,.85) 100%)}
.band-title{z-index:2}
.band-title__l{color:#F2EBE2}
.band-title__r{color:#D8B47D}
@media(max-width:760px){
  .brand-band::after{display:none}
  .brand-band__art{height:170px}
}

/* ============================================================
   V34 · Confirmation d'envoi du formulaire : coche dessinée,
   titre éditorial, apparition fluide
   ============================================================ */
.cform{transition:height .6s cubic-bezier(.22,.61,.36,1);overflow:hidden}
.cform.is-leaving .cform__t,.cform.is-leaving .cform__row,.cform.is-leaving .cform__f,.cform.is-leaving .cform__send,.cform.is-leaving .cform__note{
  opacity:0;transform:translateY(-10px);filter:blur(2px);transition:opacity .4s ease,transform .4s ease,filter .4s ease}
.cform .cform__done{margin:0;padding:clamp(28px,4vw,48px) 0 clamp(8px,2vw,16px);background:none;border:0;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.cform .cform__done[hidden]{display:none!important}
.cform__done:focus{outline:none}
.cf-ok{width:84px;height:84px;margin-bottom:22px;overflow:visible}
.cf-ok__halo{fill:var(--sand,#EEE6DC);transform-origin:48px 48px}
.cf-ok__ring{fill:none;stroke:var(--bronze);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.cf-ok__tick{fill:none;stroke:var(--espresso);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
#cf-done .cf-ok__eyebrow{margin:0;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.06em;color:var(--bronze)}
#cf-done .cf-ok__h{margin:12px 0 0;max-width:16ch;font-family:'Jost',sans-serif;font-weight:300;font-size:clamp(1.9rem,3vw,2.6rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--espresso);text-wrap:balance}
#cf-done .cf-ok__h span{color:var(--bronze)}
#cf-done .cf-ok__d{margin:16px 0 0;max-width:34ch;font-size:16px;line-height:1.6;color:var(--body)}
#cf-done .cf-ok__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:28px 0 0;padding-top:22px;border-top:1px solid var(--hair);width:min(100%,380px)}
.cf-ok__link{font-family:'Jost',sans-serif;font-size:15px;color:var(--espresso);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.cf-ok__link span{display:inline-block;transition:transform .25s ease}
.cf-ok__link:hover{color:var(--bronze);border-color:currentColor}.cf-ok__link:hover span{transform:translateX(4px)}
@media(prefers-reduced-motion:no-preference){
  .cform__done > *{opacity:0;transform:translateY(14px)}
  .cform.is-done .cform__done > *{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.22,.61,.36,1)}
  .cform.is-done .cform__done > :nth-child(2){transition-delay:.55s}
  .cform.is-done .cform__done > :nth-child(3){transition-delay:.65s}
  .cform.is-done .cform__done > :nth-child(4){transition-delay:.78s}
  .cform.is-done .cform__done > :nth-child(5){transition-delay:.9s}
  .cf-ok__ring{stroke-dashoffset:1}.cf-ok__tick{stroke-dashoffset:1}.cf-ok__halo{transform:scale(.4);opacity:0}
  .cform.is-done .cf-ok__halo{transform:scale(1);opacity:1;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .4s ease}
  .cform.is-done .cf-ok__ring{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .1s}
  .cform.is-done .cf-ok__tick{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1) .75s}
}

/* ============================================================
   V35 · Textes qui arrivent mot à mot : léger glissement et flou qui se dissipe
   ============================================================ */
@media(prefers-reduced-motion:no-preference){
  [data-scrub] .w{display:inline-block;opacity:.08;transform:translateY(.32em);filter:blur(4px);
    transition:opacity .6s ease,transform .7s cubic-bezier(.22,.61,.36,1),filter .6s ease}
  [data-scrub] .w.on{opacity:1;transform:none;filter:none}
}

/* ============================================================
   V36 · Articles : une photo par article, article à la une, sans animation de couverture
   ============================================================ */
.art-card{position:relative;padding:0 26px 26px;background:#FFFFFF;overflow:hidden}
.art-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(33,24,19,.25)}
.art-card__cover{position:relative;display:block;margin:0 -26px 10px;aspect-ratio:2/1;overflow:hidden;background:#E9E1D6}
.art-card__cover img{display:block;width:100%;height:100%;object-fit:cover}
.art-card__m{color:var(--bronze)}
@media(min-width:1001px){
  .art-list .art-grid > .art-card:first-child:not([hidden]){grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto 1fr auto;column-gap:32px;row-gap:12px;padding:0 30px 0 0}
  .art-list .art-grid > .art-card:first-child .art-card__cover{grid-column:1;grid-row:1 / span 4;margin:0;aspect-ratio:auto;min-height:340px}
  .art-list .art-grid > .art-card:first-child .art-card__cat{grid-column:2;margin-top:32px}
  .art-list .art-grid > .art-card:first-child .art-card__t{grid-column:2;font-size:1.75rem;line-height:1.18}
  .art-list .art-grid > .art-card:first-child .art-card__d{grid-column:2;-webkit-line-clamp:5}
  .art-list .art-grid > .art-card:first-child .art-card__m{grid-column:2;margin-bottom:28px}
}
.art-filter:focus:not(:focus-visible){outline:none}
.art-filter.is-on{box-shadow:none}