/* Google Sans, servie avec le site */
/* symbols */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/google-sans-symbols.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/google-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/google-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   L'AGENCE LB · VERSION 16
   Dernière version. La v11, la couche de mouvement v14-v15, et Motion à fond
   (ressorts, élans, inclinaisons). Base : : GSAP + ScrollTrigger + SplitText
   + Lenis pour le défilement et le texte, Motion (Framer Motion sans React)
   pour les états d'interface. Tout le bloc « V14 · MOUVEMENT » en fin de
   feuille ; le reste est la v11.
   Mêmes sections que les autres versions, mises en page neuves :
   · une qui s'écarte au défilement
   · chiffres posés sur la photo
   · manifeste qui s'allume mot à mot
   · services en accordéon horizontal
   · photographie en mosaïque à vitesses différenciées
   · dossiers en pile qui se libère
   · clients avec image plein cadre au survol
   · certifications qui se retournent
   · contact qui se remplit au défilement
   ============================================================ */

:root{
  --cream:#FFFFFF; --ink:#333333; --coral:#E64F32;
  --mint:#6EC69E; --forest:#2F5045; --sky:#A8CCEB; --butter:#FFF3AE;
  --i-64:rgba(51,51,51,.74); --i-40:rgba(51,51,51,.70);
  --rule:rgba(51,51,51,.15); --rule-2:rgba(51,51,51,.30);
  --c-74:rgba(255,255,255,.74); --c-44:rgba(255,255,255,.44);
  --c-64:rgba(255,255,255,.64); --c-40:rgba(255,255,255,.40); --c-24:rgba(255,255,255,.24); --c-12:rgba(255,255,255,.12); --c-06:rgba(255,255,255,.06);
  --coral-14:rgba(230,79,50,.14);
  --pad:clamp(18px,4.4vw,80px); --maxw:1840px; --rail:clamp(0px,3.2vw,56px);
  --micro:clamp(10px,.74vw,12px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"Google Sans",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(15px,1vw,17px);line-height:1.6;letter-spacing:0;
  font-variation-settings:"wght" 400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;letter-spacing:0;background:none;border:0;cursor:pointer;color:inherit}
::selection{background:var(--coral);color:var(--cream)}
:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
body::after{content:"";position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}

.mono{font-size:var(--micro);text-transform:uppercase;font-variation-settings:"wght" 500;color:var(--i-40);line-height:1.5}
.mono--i{color:var(--i-64)} .mono--c{color:var(--coral)}
.num{font-variant-numeric:tabular-nums lining-nums}
.lede{font-size:clamp(16px,1.3vw,21px);line-height:1.5;color:var(--i-64)}
strong{font-variation-settings:"wght" 550;color:var(--coral)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.rub{display:flex;align-items:baseline;gap:clamp(10px,1.5vw,20px);flex-wrap:wrap;padding-block:12px;border-top:1px solid var(--ink);margin-bottom:clamp(26px,3.4vw,56px)}
.rub .i{font-size:var(--micro);color:var(--coral);font-variation-settings:"wght" 600}
/* rubrique posée sous son contenu : pas de filet au-dessus */
.rub--bas{border-top:0;padding-block:0;margin-bottom:0;margin-top:clamp(14px,1.6vw,24px)}
.sec{padding-block:clamp(56px,7.5vw,128px)}
.photo{position:relative;overflow:hidden;background:var(--cream)}
.photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.07) saturate(.9)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

.ln{display:block;overflow:hidden;padding-top:.16em;margin-top:-.16em;padding-bottom:.18em;margin-bottom:-.18em}
.ln > span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.is-in .ln > span{transform:none}
.is-in .ln:nth-child(2) > span{transition-delay:.07s}
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-in.fade,.is-in .fade{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ln > span,.fade{transition:none!important}
  .ln > span{transform:none}.fade{opacity:1;transform:none}
  .mq__t{animation:none!important}
}

.rail{position:fixed;top:0;bottom:0;left:0;width:var(--rail);z-index:60;border-right:1px solid var(--rule);transition:border-color .3s;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:20px 0;pointer-events:none}
.rail__bot{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:12px;
  font-size:var(--micro);text-transform:uppercase;color:var(--i-40);font-variation-settings:"wght" 500;
  pointer-events:auto;margin:0}
.rail__sep{display:block;width:1px;height:14px;background:var(--rule-2);flex:0 0 auto}
.rail__cta{color:var(--coral);transition:color .3s}
.rail__cta:hover{color:var(--ink)}
.rail__soc{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.1vw,15px);pointer-events:auto}
.rail__soc a{display:grid;place-items:center;width:26px;height:26px;color:var(--i-40);transition:color .3s,transform .3s var(--ease)}
.rail__soc a svg{width:15px;height:15px}
.rail__soc a:hover{color:var(--coral);transform:translateY(-2px)}
.rail__bot[data-tone="dark"],.rail__soc a[data-tone="dark"]{color:var(--c-40)}
.rail[data-tone="dark"]{border-right-color:var(--c-24)}
.rail .prog{position:absolute;left:-1px;top:0;width:2px;background:var(--coral);height:100%;transform:scaleY(0);transform-origin:top center}
@media (max-width:900px){.rail{display:none}}
.shell{margin-left:var(--rail)}

.cur{position:fixed;top:0;left:0;z-index:9992;pointer-events:none;width:10px;height:10px;border-radius:999px;background:var(--ink);transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .3s,opacity .3s}
/* Le curseur natif ne disparaît que si le script a pris la main. Sans JS,
   sur écran tactile ou en mouvement réduit, la flèche système revient. */
html.cur-actif,html.cur-actif *{cursor:none}
/* ?curseur=rond : le point reste un cercle qui grossit, sans épouser
   la forme des boutons. */
@media (hover:none),(pointer:coarse){.cur{display:none}}

.idx{position:fixed;right:clamp(8px,1.2vw,22px);top:50%;transform:translateY(-50%);z-index:65;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.idx a{display:flex;align-items:center;justify-content:flex-end;gap:7px;font-size:9px;font-variation-settings:"wght" 500;color:var(--i-40);transition:color .3s}
.idx a i{display:block;width:14px;height:1px;background:currentColor;transition:width .35s var(--ease)}
/* le nom de la section se déplie au survol, vers la gauche */
.idx .nm{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-size:10px;text-transform:none;
  font-variation-settings:"wght" 500;transition:max-width .4s var(--ease),opacity .3s ease,margin-right .4s var(--ease);margin-right:-7px}
.idx a:hover .nm,.idx a:focus-visible .nm,.idx a[aria-current="true"]:hover .nm{max-width:150px;opacity:1;margin-right:0}
@media (prefers-reduced-motion:reduce){.idx .nm{transition:none}}
.idx a[data-tone="dark"]{color:var(--c-40)}
.idx a:hover,.idx a[aria-current="true"]{color:var(--coral)}
.idx a[data-tone="dark"]:hover,.idx a[data-tone="dark"][aria-current="true"]{color:var(--butter)}
.idx a:hover i,.idx a[aria-current="true"] i{width:26px}
@media (max-width:1180px){.idx{display:none}}
.cta-slot{display:inline-block;width:var(--cta-w,120px);height:var(--cta-h,40px)}
@media (max-width:1120px){.cta-slot{display:none}}
.jase{position:fixed;left:0;top:0;z-index:80;display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;text-transform:uppercase;
  background:var(--coral);color:var(--cream);white-space:nowrap;overflow:visible;padding:11px 20px;
  font-size:clamp(12.5px,.9vw,14px);font-variation-settings:"wght" 500;
  transition:transform .85s var(--ease),width .85s var(--ease),height .85s var(--ease),font-size .6s var(--ease),box-shadow .5s,background .35s,color .35s,translate .45s var(--ease),opacity .4s;
  will-change:transform}
.jase span.t{position:relative;z-index:2}
.jase .arw{position:relative;z-index:2;opacity:0;width:0;transition:opacity .45s ease .15s,width .6s var(--ease)}
.jase:hover{background:var(--ink)}
/* Il se balance tant que le curseur reste dessus. On passe par rotate,
   la propriété indépendante : transform porte déjà sa position et scale
   son effet d'appui. Les trois se composent au lieu de s'écraser. */
/* au survol, la flèche avance : la cible ne bouge pas sous le pointeur */
.jase .arw{display:inline-block}
.jase.out:hover .arw,.jase.out:focus-visible .arw{transform:translateX(4px)}
.jase::before,.jase::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid var(--coral);opacity:0;pointer-events:none}
/* une seule onde, au moment où le bouton se détache de l'en-tête */
.jase.out::before{animation:jasePulse 1.4s var(--ease) .55s 1}
.jase.out::after{animation:jasePulse 1.4s var(--ease) .8s 1}
@keyframes jasePulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
.jase.out{padding:16px 28px;font-size:clamp(13px,1.05vw,16px);box-shadow:0 18px 40px rgba(51,51,51,.22)}
.jase.out .arw{opacity:1;width:auto}
.jase.out:hover{background:var(--butter);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.jase{transition:background .35s,color .35s}.jase.out::before,.jase.out::after{animation:none}}
@media (max-width:1120px){.jase{transition:opacity .4s,translate .5s var(--ease),background .35s}.jase.docked{opacity:0;pointer-events:none;translate:0 12px}}

.nav{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:clamp(56px,5vw,72px)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{display:block;height:clamp(28px,2.7vw,40px);width:auto}
.mainnav__list{display:flex;align-items:center;gap:clamp(2px,.4vw,8px)}
.mainnav__link{display:inline-flex;align-items:center;gap:6px;padding:10px clamp(8px,.9vw,15px);font-size:clamp(12.5px,.9vw,14px);color:var(--ink);position:relative}
.mainnav__link::after{content:"";position:absolute;left:clamp(8px,.9vw,15px);right:100%;bottom:4px;height:1px;background:var(--coral);transition:right .35s var(--ease)}
.mainnav__link:hover::after,.has-mega[data-open="true"] .mainnav__link::after{right:clamp(8px,.9vw,15px)}
.caret{width:9px;height:9px;transition:transform .3s ease;opacity:.5}
.has-mega[data-open="true"] .caret{transform:rotate(180deg);opacity:1}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .35s var(--ease),visibility .3s}
.has-mega[data-open="true"] .mega{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(22px,4vw,70px);padding-block:clamp(24px,2.8vw,44px)}
/* Les filets viennent des bordures de chaque ligne, pas d'un fond gris
   laissé apparent par les interstices : sinon l'espace sous le dernier
   lien se remplit de gris quand le volet est plus haut que sa liste. */
.mega__links{display:grid;align-content:start;border-top:1px solid var(--rule)}
.mega__links li{border-bottom:1px solid var(--rule)}
.mega__links a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:clamp(10px,1.3vw,18px);padding:clamp(13px,1.4vw,19px) clamp(10px,1.1vw,16px);transition:background .3s}
.mega__links a:hover{background:var(--coral-14)}
.mega__links .n{font-size:var(--micro);color:var(--coral);padding-top:.35em;font-variation-settings:"wght" 600}
.mega__links .t{display:block;font-size:clamp(15px,1.15vw,19px);line-height:1.2;font-variation-settings:"wght" 450}
.mega__links .d{display:block;margin-top:4px;font-size:clamp(12.5px,.9vw,14px);color:var(--i-64)}
.mega__links a:hover .t{color:var(--coral)}
.mega__feat{background:var(--forest);color:var(--cream);padding:clamp(20px,2vw,32px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,1.8vw,24px)}
.mega__feat .mono{color:var(--c-44)}
.mega__feat .h{font-size:clamp(1.03rem,1.5vw,1.62rem);line-height:1.08;font-variation-settings:"wght" 450}
.mega__feat .p{margin-top:11px;font-size:clamp(12.5px,.9vw,14.5px);color:var(--c-74)}
.mega__feat .cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:1px solid var(--c-44);border-radius:999px;padding:9px 17px;font-size:clamp(12.5px,.9vw,14px);transition:background .3s,color .3s,border-color .3s}
.mega__feat .cta:hover{background:var(--butter);color:var(--ink);border-color:var(--butter)}
.nav__actions{display:flex;align-items:center;gap:clamp(8px,1vw,17px)}
.nav__tel,.nav__lang{font-size:clamp(12.5px,.9vw,14px);white-space:nowrap}
.nav__tel:hover,.nav__lang:hover{color:var(--coral)}
.status{display:inline-flex;align-items:center;gap:7px}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(110,198,158,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(110,198,158,0)}100%{box-shadow:0 0 0 0 rgba(110,198,158,0)}}
/* secondaire : contour corail, se remplit au survol */
.btn{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--coral);color:var(--ink);padding:10px 18px;border-radius:999px;font-size:clamp(12.5px,.9vw,14px);transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)}
/* primaire : vert forêt, vire au menthe au survol */
.btn--vert{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.btn--vert:hover{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.btn--lg{padding:15px 26px;font-size:clamp(13px,1vw,15px)}
.mag{will-change:transform}
.burger{display:none;width:38px;height:38px;border:1px solid var(--rule);border-radius:999px;padding:0;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.4px;background:var(--ink);transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:18px}.burger span:nth-child(3){top:23px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.mobnav{display:none;border-top:1px solid var(--rule);background:var(--cream);max-height:calc(100vh - 58px);overflow-y:auto}
.mobnav[data-open="true"]{display:block}
.mob-sec{border-bottom:1px solid var(--rule)}
.mob-sec>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:16px;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.mob-panel{display:none;padding-bottom:12px}
.mob-sec[data-open="true"] .mob-panel{display:block}
.mob-sec[data-open="true"]>button .caret{transform:rotate(180deg)}
.mob-panel a{display:block;padding:11px 0 11px 16px;border-left:1px solid var(--rule);font-size:14.5px}
.mob-panel a .d{display:block;font-size:12.5px;color:var(--i-64);margin-top:3px}
.mob-extra{display:flex;flex-wrap:wrap;gap:18px;padding:18px 0 26px}
@media (max-width:1120px){.mainnav,.nav__tel,.nav__lang,.status{display:none}.burger{display:block}}
@media (max-width:900px){.mega__in{grid-template-columns:1fr}}
.mq{border-block:1px solid var(--rule);padding-block:clamp(13px,1.4vw,19px);overflow:hidden}
.mq__t{display:flex;gap:clamp(28px,3.8vw,68px);width:max-content;will-change:transform}
.mq__t > span{display:flex;align-items:center;gap:clamp(28px,3.8vw,68px);flex:0 0 auto}
/* boîte identique pour chaque logo : ils occupent tous le même gabarit */
.cl__i{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:clamp(104px,10.6vw,152px);height:clamp(28px,2.9vw,42px)}
/* Densité égalisée : l'opacité de chaque logo est calculée depuis sa luminance
   réelle pour que tous rendent la même valeur de gris sur le fond blanc. */
/* Taille optique identique : la hauteur de chaque logo est calculée
   depuis ses proportions pour que tous couvrent la même surface. */
.cl__g{max-width:100%;height:calc(100% * var(--k,1));width:auto;object-fit:contain;
  filter:grayscale(1);opacity:var(--o,.62);transition:filter .45s var(--ease),opacity .45s var(--ease)}
.g--inverse{filter:grayscale(1) invert(1)}
/* survol d'un logo : sa couleur se révèle */
.cl__i:hover .cl__g{filter:none;opacity:1}
/* ce logo est crème sur fond transparent : sa vraie couleur serait invisible
   sur blanc, on garde donc l'inversion et on ne lève que l'opacité */
.cl__i:hover .g--inverse{filter:invert(1);opacity:1}
.mq > .mq__t > span::after{content:"·";color:var(--coral);font-size:var(--micro)}

/* ============================================================
   01 · LA UNE — le titre s'écarte, la photo se découvre entre
   ============================================================ */
.op{position:relative;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(70px,9vw,120px) clamp(28px,3.4vw,54px)}
.op__meta{position:absolute;top:clamp(26px,3.2vw,52px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;will-change:opacity}
.op h1{font-size:clamp(2rem,7.6vw,8.6rem);line-height:.86;font-variation-settings:"wght" 500;will-change:opacity}
.op h1 .ln{width:-moz-fit-content;width:fit-content;max-width:100%;will-change:transform;padding-top:.2em;margin-top:-.2em;padding-bottom:.22em;margin-bottom:-.22em}
.op h1 .co{color:var(--forest);display:inline-block;transform-origin:left center;will-change:transform}
.op__foot{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,50px);
  align-items:end;margin-top:clamp(28px,3.6vw,56px);border-top:1px solid var(--rule);padding-top:clamp(18px,2.2vw,32px)}
.op__rule{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--coral);transform:scaleX(0);transform-origin:left center;will-change:transform}
.op__foot p{max-width:44ch;color:var(--i-64)}
.op__foot p strong{color:var(--coral);font-variation-settings:"wght" 500}
.op__cta{display:flex;gap:11px;flex-wrap:wrap}
@media (max-width:820px){.op__foot{grid-template-columns:1fr}.op__meta{position:static;margin-bottom:clamp(26px,5vw,44px)}.op{justify-content:center}}

/* ============================================================
   02 · PREUVES — les chiffres posés sur la photo
   ============================================================ */
.pr{padding-block:clamp(50px,6.5vw,110px)}
.pr__grid{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--rule)}
.pr__i{padding:clamp(22px,2.6vw,42px) clamp(14px,1.6vw,26px);border-right:1px solid var(--rule)}
.pr__i:last-child{border-right:0}
.pr__i .k{display:block;font-size:clamp(1.9rem,4.6vw,4.6rem);line-height:.84;font-variation-settings:"wght" 500}
.pr__i:nth-child(1) .k{color:var(--coral)}
.pr__i .l{margin-top:12px;max-width:20ch;color:var(--i-64)}
.chart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(22px,3.4vw,64px);align-items:end;margin-top:clamp(34px,4.4vw,72px)}
.chart__t{font-size:clamp(1.05rem,1.6vw,1.5rem);line-height:1.3;max-width:32ch}
.mark{position:relative;display:inline-block}
.mark::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.08em;height:.3em;background:var(--coral);opacity:.24;z-index:-1;transform:skewY(-.8deg) scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .3s}
.rv.is-in .mark::after{transform:skewY(-.8deg) scaleX(1)}
.bars{display:flex;align-items:flex-end;gap:clamp(4px,.7vw,11px);height:clamp(120px,15vw,220px);border-bottom:1px solid var(--ink)}
.bars i{flex:1;background:var(--coral-14);border-top:2px solid var(--coral);display:block;transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease)}
.bars i:last-child{background:var(--coral);border-top-color:var(--coral)}
.rv.is-in .bars i{transform:none}
/* dès que le script prend la main, il anime au défilement */
.bars--js i,.rv.is-in .bars--js i{transition:none}
.xs{display:flex;justify-content:space-between;padding-top:8px}
@media (max-width:860px){.pr__grid{grid-template-columns:repeat(2,1fr)}.pr__i:nth-child(2){border-right:0}.pr__i:nth-child(-n+2){border-bottom:1px solid var(--rule)}.chart{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bars i{transform:none}.mark::after{transform:skewY(-.8deg) scaleX(1)}}
@media (max-width:480px){.pr__grid{grid-template-columns:1fr}.pr__i{border-right:0;border-bottom:1px solid var(--rule)}.pr__i:last-child{border-bottom:0}}

/* ============================================================
   03 · MANIFESTE — le texte s'allume mot à mot
   ============================================================ */
.mf{background:var(--forest);color:var(--cream);padding-block:clamp(80px,12vw,200px)}
.mf .mono{color:var(--c-44)}
.mf__t{font-size:clamp(1.48rem,4.4vw,4.37rem);line-height:1.08;font-variation-settings:"wght" 450;max-width:22ch;margin-top:clamp(20px,2.6vw,42px)}
.mf__t w{display:inline-block;color:var(--c-12);transition:color .45s ease}
.mf__t w.on{color:var(--cream)}
.mf__t w.hi.on{color:var(--butter)}
.mf__p{margin-top:clamp(28px,3.4vw,54px);max-width:46ch;color:var(--c-74)}

/* ============================================================
   04 · ADN — les quatre piliers
   ============================================================ */
.adn__t{font-size:clamp(1.4rem,3.5vw,3.5rem);line-height:1.06;font-variation-settings:"wght" 450}
.adn__t .ln{padding-top:.16em;margin-top:-.16em;padding-bottom:.2em;margin-bottom:-.2em}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(28px,3.6vw,58px)}
.pillar{background:var(--cream);padding:clamp(18px,2.1vw,34px);transition:background .35s}
.pillar:hover{background:var(--coral-14)}
.pillar h3{font-size:clamp(1rem,1.25vw,1.3rem);font-variation-settings:"wght" 500;margin-top:9px}
.pillar p{font-size:clamp(13px,.92vw,14.5px);color:var(--i-64);margin-top:5px}
@media (max-width:720px){.pillars{grid-template-columns:1fr}}

/* ============================================================
   04 · SERVICES — accordéon horizontal
   ============================================================ */
.ac{display:flex;gap:2px;height:clamp(380px,52vh,620px);margin-top:clamp(26px,3.2vw,52px)}
.ac__p{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--ink);cursor:pointer;
  transition:flex-grow .75s var(--ease)}
.ac__p[aria-expanded="true"]{flex-grow:5.2}
.ac__p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.14) brightness(.52);transition:filter .7s var(--ease),transform 1s var(--ease);transform:scale(1.06)}
.ac__p[aria-expanded="true"] img{filter:grayscale(0) contrast(1.06) brightness(.78);transform:scale(1)}
.ac__p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,51,51,.1),rgba(51,51,51,.78));pointer-events:none}
.ac__in{position:absolute;inset:auto 0 0 0;z-index:2;padding:clamp(16px,1.8vw,30px);color:var(--cream);display:flex;flex-direction:column;gap:10px}
.ac__n{font-size:var(--micro);text-transform:uppercase;font-variation-settings:"wght" 600;color:var(--coral)}
.ac__h{font-size:clamp(0.9rem,1.4vw,1.44rem);line-height:1.1;font-variation-settings:"wght" 450;
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;transition:none}
.ac__p[aria-expanded="true"] .ac__h{writing-mode:horizontal-tb;transform:none;white-space:normal}
.ac__d{max-width:40ch;color:var(--c-74);font-size:clamp(13px,.94vw,15px);opacity:0;max-height:0;overflow:hidden;transition:opacity .5s ease .2s,max-height .6s var(--ease)}
.ac__p[aria-expanded="true"] .ac__d{opacity:1;max-height:9em}
@media (max-width:900px){
  .ac{flex-direction:column;height:auto;gap:1px}
  .ac__p{flex:none;min-height:96px;transition:min-height .6s var(--ease)}
  .ac__p[aria-expanded="true"]{min-height:300px}
  .ac__h{writing-mode:horizontal-tb;transform:none;white-space:normal}
}

/* ============================================================
   04 · SERVICES — colonne collante sur fond charbon
   ============================================================ */
.spw{background:var(--ink);color:var(--cream)}
.spw .mono{color:var(--c-40)}
.sp{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,5vw,110px);padding-block:clamp(60px,8vw,150px)}
.sp__l{position:sticky;top:clamp(90px,10vw,140px);align-self:start}
.sp__l .no{font-size:clamp(1.98rem,4.6vw,4.95rem);line-height:.8;color:var(--c-12);font-variation-settings:"wght" 500;display:block;margin-bottom:clamp(14px,1.8vw,26px)}
.sp__l h2{font-size:clamp(1.51rem,3vw,3.02rem);line-height:.98;font-variation-settings:"wght" 450}
.sp__l .sub{margin-top:clamp(16px,2vw,28px);max-width:32ch;color:var(--c-64);font-size:clamp(14px,1vw,16px)}
.sp__l .sub strong{color:var(--butter);font-variation-settings:"wght" 500}
.sp__r{min-width:0}
.rows{border-top:1px solid var(--c-40)}
.rows a{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:clamp(12px,1.8vw,28px);align-items:center;padding-block:clamp(14px,1.7vw,26px);border-bottom:1px solid var(--c-12);transition:padding-left .4s var(--ease),background .35s}
.rows a:hover{padding-left:clamp(8px,1.2vw,18px);background:var(--c-06)}
.rows h3{font-size:clamp(.99rem,1.65vw,1.74rem);line-height:1.1;font-variation-settings:"wght" 450}
.rows a:hover h3{color:var(--butter)}
.rows .go{opacity:.3;transition:transform .4s,opacity .3s}
.rows a:hover .go{opacity:1;transform:translate(4px,-4px)}
@media (max-width:860px){.sp{grid-template-columns:1fr;gap:clamp(24px,4vw,46px)}.sp__l{position:static}}

/* ============================================================
   09 · LA MÉTHODE — fond beurre, pleine hauteur d'écran
   ============================================================ */
.proc{min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:var(--butter);
  padding-block:clamp(56px,7.5vw,120px) clamp(90px,12vw,200px)}
.proc > .wrap{width:100%}
.proc .mono{color:rgba(51,51,51,.5)}
.proc .rub{border-top-color:var(--ink)}
.proc h2{font-size:clamp(1.64rem,4.3vw,4.1rem);line-height:.92;font-variation-settings:"wght" 450}
.proc__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,52px);margin-top:clamp(34px,4.4vw,74px)}
.proc__i{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);padding-top:16px;border-top:1px solid var(--rule-2)}
.proc__i .n{font-size:var(--micro);color:var(--coral);font-variation-settings:"wght" 600}
.proc__i h3{font-size:clamp(1.05rem,1.45vw,1.55rem);font-variation-settings:"wght" 500}
.proc__i p{font-size:clamp(13px,.9vw,14.5px);color:rgba(51,51,51,.68)}
@media (max-width:860px){.proc{min-height:0;padding-block:clamp(50px,8vw,90px)}.proc__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proc__grid{grid-template-columns:1fr}}

/* ============================================================
   11 · AVIS — carrousel façon fiche Google
   Exception assumée à la charte : les étoiles, le G et le sceau
   sont les marques de Google. Les recolorer serait les travestir.
   ============================================================ */
.gr__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(20px,2.4vw,36px)}
.gr__score{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px)}
.gr__g{width:clamp(22px,2.2vw,32px);height:auto;flex:0 0 auto}
.gr__sc{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex-wrap:wrap}
.gr__nb{font-size:clamp(1.3rem,2vw,2rem);line-height:1;font-variation-settings:"wght" 500}
.gr__row{display:flex;align-items:center;gap:6px}
.gr__st{display:inline-flex;gap:2px}
.gr__st svg{width:clamp(14px,1.25vw,18px);height:auto}
.gr__st--sm svg{width:clamp(12px,1vw,15px)}
.gr__nav{display:flex;gap:8px}
.gr__nav button{width:clamp(38px,3.4vw,46px);height:clamp(38px,3.4vw,46px);border-radius:50%;border:1px solid var(--rule-2);
  background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,opacity .3s}
.gr__nav button svg{width:20px;height:20px}
.gr__nav button:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.gr__nav button[disabled]{opacity:.28;pointer-events:none}
.gr__rail{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.gr__rail::-webkit-scrollbar{display:none}
.gr__c{flex:0 0 clamp(268px,25vw,360px);scroll-snap-align:start;border:1px solid var(--rule);border-radius:14px;
  padding:clamp(16px,1.7vw,26px);display:flex;flex-direction:column;gap:clamp(10px,1.1vw,16px);
  background:var(--cream);transition:border-color .35s,box-shadow .35s}
.gr__c:hover{border-color:var(--rule-2);box-shadow:0 14px 34px rgba(51,51,51,.07)}
.gr__h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px}
.gr__av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-variation-settings:"wght" 500}
.gr__av--forest{background:var(--forest);color:var(--cream)}
.gr__av--coral{background:var(--coral);color:var(--cream)}
.gr__av--sky{background:var(--sky);color:var(--ink)}
.gr__av--mint{background:var(--mint);color:var(--ink)}
.gr__av--butter{background:var(--butter);color:var(--ink)}
.gr__id{min-width:0}
.gr__nm{display:block;font-size:clamp(13.5px,1.02vw,15.5px);font-variation-settings:"wght" 500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr__dt{display:block;margin-top:2px}
.gr__c .gr__g{width:19px}
.gr__v{width:15px;height:15px;flex:0 0 auto}
.gr__t{font-size:clamp(13.5px,1.02vw,15.5px);line-height:1.55;color:var(--i-64);
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
@media (prefers-reduced-motion:reduce){.gr__rail{scroll-behavior:auto}}

/* ============================================================
   10 · CERTIFICATIONS — ce que chaque partenariat apporte au client
   Les logos restent en couleur : ce sont des marques déposées.
   ============================================================ */
.ce__g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.ce__c{background:var(--cream);padding:clamp(22px,2.6vw,44px) clamp(18px,2.1vw,36px);display:flex;flex-direction:column;
  gap:clamp(9px,1vw,14px)}
.ce__logo{display:flex;align-items:center;height:clamp(40px,4vw,58px);margin-bottom:clamp(14px,1.8vw,30px)}
.ce__logo img{max-height:100%;max-width:min(100%,232px);width:auto;object-fit:contain;object-position:left center}
.ce__c h3{font-size:clamp(1.12rem,1.6vw,1.72rem);line-height:1.14;font-variation-settings:"wght" 500}
.ce__c p{font-size:clamp(13.5px,1vw,15.5px);line-height:1.6;color:var(--i-64)}
@media (max-width:900px){.ce__g{grid-template-columns:1fr}}

/* résultat chiffré dans l'accordéon des cas clients */
.ac__k{display:block;font-size:clamp(1.5rem,2.6vw,2.6rem);line-height:1;color:var(--butter);font-variation-settings:"wght" 500;margin-bottom:10px}

/* ============================================================
   05 · PHOTOGRAPHIE — mosaïque à vitesses différenciées
   ============================================================ */
.mo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,26px);margin-top:clamp(26px,3.2vw,52px);align-items:start}
.mo__c{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,26px);will-change:transform}
.mo__c:nth-child(2){padding-top:clamp(30px,5vw,90px)}
.mo .photo{overflow:hidden}
.mo .photo img{transition:transform 1.1s var(--ease)}
.mo .photo:hover img{transform:scale(1.05)}
.mo__cap{display:flex;gap:9px;margin-top:9px}
.mo__cap .n{color:var(--coral)}
.mo__empty{aspect-ratio:4/3;border:1px dashed var(--rule-2);display:flex;align-items:center;justify-content:center}
@media (max-width:820px){.mo{grid-template-columns:1fr}.mo__c{transform:none!important}.mo__c:nth-child(2){padding-top:0}}

/* ============================================================
   06 · DOSSIERS — pile qui se libère
   ============================================================ */
.st{position:relative}
.st__i{position:sticky;top:clamp(90px,12vh,150px);margin-bottom:clamp(18px,2.4vw,38px)}
.st__c{border:1px solid var(--rule-2);background:var(--cream);padding:clamp(22px,3vw,52px);
  display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr) auto;gap:clamp(16px,2.6vw,48px);align-items:start;
  box-shadow:0 -1px 0 var(--cream),0 18px 44px rgba(51,51,51,.10);transition:background .4s,transform .5s var(--ease)}
.st__i:hover .st__c{background:var(--coral-14)}
.st__c h3{font-size:clamp(1.07rem,2.2vw,2.23rem);line-height:1.06;font-variation-settings:"wght" 450}
.st__meta{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.st__tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:var(--micro);text-transform:uppercase;font-variation-settings:"wght" 500;background:var(--coral-14);color:var(--coral)}
.st__i:nth-child(1) .st__tag{background:var(--butter);color:var(--ink)}
.st__i:nth-child(2) .st__tag{background:var(--mint);color:var(--ink)}
.st__c .go{justify-self:end;opacity:.34;transition:transform .4s,opacity .3s}
.st__i:hover .go{opacity:1;transform:translate(4px,-4px)}
@media (max-width:820px){.st__i{position:static}.st__c{grid-template-columns:minmax(0,1fr) auto;row-gap:14px}.st__meta{flex-direction:row;align-items:center;gap:14px;grid-column:1/3}}

/* ============================================================
   08 · AVIS — grande citation, onglets clients
   ============================================================ */
/* ============================================================
   09 · CERTIFICATIONS — cartes qui se retournent
   ============================================================ */
.pl{border-block:1px solid var(--rule);padding-block:clamp(22px,2.8vw,44px);overflow:hidden}
.pl__t{gap:clamp(44px,6vw,110px)}
.pl__i{display:flex;align-items:center;justify-content:center;height:clamp(34px,3.4vw,52px);padding-inline:clamp(14px,1.6vw,26px);white-space:nowrap;flex:0 0 auto}
.pl__i img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:var(--o,.62);
  transition:filter .45s var(--ease),opacity .45s var(--ease)}
/* badge dont l'encre est trop claire : on l'assombrit avant d'ajuster l'opacité */
.pl--pale{filter:grayscale(1) brightness(.8)}
.pl__i:hover img{filter:none;opacity:1}
.pl__i:hover .pl--pale{filter:none}

/* ============================================================
   10 · CONTACT — le mot se remplit au défilement
   ============================================================ */
.ct{background:var(--forest);color:var(--cream);padding-block:clamp(70px,9vw,160px)}
.ct .mono{color:var(--c-74)}
.ct__w{font-size:clamp(2.4rem,9.6vw,10.4rem);line-height:.82;font-variation-settings:"wght" 500;margin-top:clamp(12px,1.5vw,22px);
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.5);
  background:linear-gradient(90deg,var(--cream) var(--fill,0%),transparent var(--fill,0%));
  -webkit-background-clip:text;background-clip:text;display:inline-block}
.ct__w a{display:inline-block;color:inherit}
.ct__rows{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(34px,4.4vw,72px);border-top:1px solid var(--c-44);padding-top:clamp(20px,2.4vw,34px)}
.ct__rows a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.ct__rows{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ct__w{color:var(--cream);-webkit-text-stroke:0;background:none}}

.foot{background:var(--ink);color:var(--c-74);padding-block:clamp(34px,4vw,60px)}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.7fr));gap:clamp(20px,3vw,46px)}
.foot h4{font-size:var(--micro);text-transform:uppercase;color:var(--c-44);margin-bottom:13px;font-variation-settings:"wght" 500}
.foot li+li{margin-top:8px}
.foot a:hover{color:var(--cream)}
.foot__big{font-size:clamp(1.3rem,2.8vw,2.35rem);line-height:1;color:var(--cream);max-width:16ch;font-variation-settings:"wght" 450}
.foot__bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(32px,3.8vw,60px);padding-top:19px;border-top:1px solid var(--c-12)}
@media (max-width:860px){.foot__grid{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   V14 · MOUVEMENT
   Tout ce qui suit n'existe que si le script a posé html.mo-on
   (mouvement permis) ; sans lui, la page est la v11 statique.
   ============================================================ */
/* Lenis lisse le défilement natif et remplace le scroll-behavior du navigateur */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* avant que le script ait posé les états de départ : rien ne clignote */
html.mo-on:not(.mo-pret) .fade:not(.op .fade){visibility:hidden}
/* le fondu-montée de la v11 est remplacé par des masques */
html.mo-on .fade{opacity:1;transform:none;transition:none}
html.mo-on .mf__t w{transition:none}

/* ——— lettres et lignes découpées ——— */
/* préfixe sx- : la v11 utilise déjà .mo (mosaïque), on ne réutilise aucun nom */
.sx-l{padding-bottom:.08em;margin-bottom:-.08em}

/* ——— roues de chiffres ——— */
html.mo-on .pr__i .k,html.mo-on .sp__l .no{line-height:1}
.odo{display:inline-flex;align-items:flex-start;white-space:nowrap}
.odo__c{display:inline-block;height:1em;overflow:hidden;line-height:1}
.odo__s{display:flex;flex-direction:column;transform:translateY(calc(var(--n,0) * -1em))}
.odo__s i{display:block;height:1em;line-height:1;font-style:normal}
.odo__t{display:inline-block;line-height:1;white-space:pre}
.sp__l .no{transition:color .6s var(--ease)}
.sp__l .no.is-actif{color:var(--butter)}

/* ——— texte qui roule au survol ——— */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.22;margin-block:-.06em}
.roll__a{display:inline-block;transition:transform .6s var(--ease)}
.roll__b{position:absolute;left:0;top:100%;white-space:nowrap}
.roll__b i{display:inline-block;font-style:normal;transition:transform .6s var(--ease);transition-delay:calc(var(--i,0) * .014s)}
:is(a,button):is(:hover,:focus-visible) .roll__a,
:is(a,button):is(:hover,:focus-visible) .roll__b i{transform:translateY(-100%)}

/* ——— boutons : cercle de couleur né au point d'entrée du pointeur ——— */
html.mo-on .btn{position:relative;isolation:isolate;overflow:hidden}
html.mo-on .btn::before{content:"";position:absolute;left:var(--fx,50%);top:var(--fy,50%);width:250%;aspect-ratio:1;border-radius:50%;
  background:var(--coral);z-index:-1;pointer-events:none;transform:translate(-50%,-50%) scale(0);transition:transform .7s var(--ease)}
html.mo-on .btn:hover::before{transform:translate(-50%,-50%) scale(1)}
html.mo-on .btn:hover{background:transparent}
html.mo-on .btn--vert::before{background:var(--mint)}
html.mo-on .btn--vert:hover{background:var(--forest)}
.btn,.jase,.gr__nav button,.mega__feat .cta,.burger{scale:var(--press,1)}

/* ——— curseur : états ——— */
/* Un seul état de survol, volontairement sobre : le point grossit un peu
   et inverse ce qu'il couvre. Les anciens états « voir » et « glisser »
   montaient à 74 et 84 px et portaient un mot : à cette taille le curseur
   masquait ce qu'on venait justement lire. */
body[data-cur="lien"] .cur{width:30px;height:30px;background:var(--cream);mix-blend-mode:difference}
.cur{transition:width .35s var(--ease),height .35s var(--ease),background .3s,opacity .3s}

/* ——— en-tête qui s'efface à la descente ——— */
.nav{transition:transform .6s var(--ease)}
.nav.nav--cache{transform:translateY(-100%)}
html.menu-ouvert .jase{opacity:0;pointer-events:none}

/* ——— éléments partagés ——— */
.mainnav__trait{position:absolute;left:0;top:0;width:100px;height:1px;background:var(--coral);transform-origin:left center;transform:scaleX(0);pointer-events:none}
.trait-on .mainnav__link::after{display:none}
.idx__m{position:absolute;right:-7px;top:0;width:2px;height:14px;border-radius:2px;background:var(--coral);pointer-events:none}
.rows{position:relative}
.rows__hl{position:absolute;left:0;right:0;top:0;height:0;background:var(--c-06);opacity:0;pointer-events:none}
.rows.hl-on a{position:relative;z-index:1}
.rows.hl-on a:hover{background:none}

/* ——— cas clients : la photo suit la souris ——— */
html.mo-on .ac__p img{translate:var(--px,0px) var(--py,0px)}

/* ——— photographie ——— */
.mo figure{will-change:transform}
html.mo-on .mo .photo img{transition:scale 1.1s var(--ease)}
html.mo-on .mo .photo:hover img{scale:1.05}

/* ——— dossiers : la pile ——— */
html.mo-on .st__c{transition:background .4s}

/* ——— la méthode épinglée ——— */
/* L'escalier : chaque étape est décalée vers le bas, et le tracé corail
   gravit les marches au lieu de courir à plat. */
.proc{position:relative}
.proc > .wrap{position:relative;z-index:1}
/* halo corail qui suit le pointeur, option ?souris=lueur */
.proc__lueur{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(clamp(180px,22vw,340px) circle at var(--mx,50%) var(--my,50%),rgba(230,79,50,.17),rgba(230,79,50,0) 72%)}
.proc.souris-dedans .proc__lueur{opacity:1}
/* révélateur : tout s'estompe sauf un disque autour du pointeur */
.proc--revele .proc__i{transition:opacity .35s var(--ease)}
.proc--revele.souris-dedans .proc__i{opacity:var(--lum,.24)}
/* trace : le point corail se laisse conduire à la souris */
.proc--trace .proc__grid{cursor:ew-resize}

.proc--souris .proc__i,.proc--souris h2{transition:translate .42s var(--ease),rotate .42s var(--ease)}
.proc__trace{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;display:none}
.proc__trace path{fill:none;stroke:var(--coral);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.proc__trace circle{fill:var(--coral)}
html.mo-on .proc--pin .proc__grid{position:relative;align-items:start;--marche:clamp(22px,3.6vw,64px)}
html.mo-on .proc--pin .proc__i:nth-child(1){margin-top:calc(var(--marche) * 3)}
html.mo-on .proc--pin .proc__i:nth-child(2){margin-top:calc(var(--marche) * 2)}
html.mo-on .proc--pin .proc__i:nth-child(3){margin-top:var(--marche)}
html.mo-on .proc--pin .proc__trace{display:block}
html.mo-on .proc--pin .proc__i > *{transition:opacity .6s var(--ease),transform .7s var(--ease),color .4s}
html.mo-on .proc--pin .proc__i:not(.is-on) > *{opacity:.25;transform:translateY(10px)}
html.mo-on .proc--pin .proc__i:not(.is-on) .n{color:var(--ink)}

/* ——— avis : carrousel qu'on attrape ——— */
.gr__rail.drag{scroll-snap-type:none;scroll-behavior:auto;user-select:none;cursor:grabbing}
.gr__rail.drag *{pointer-events:none}

/* ——— pied de page qui remonte de dessous ——— */
.foot{overflow:hidden}

/* ============================================================
   V15 · ULTRA — ce qui s'ajoute à la v14
   ============================================================ */
/* focus clavier dessiné : l'anneau se resserre sur l'élément */
@keyframes focusEntre{from{outline-offset:12px;outline-color:rgba(230,79,50,0)}}
:focus-visible{transition:outline-offset .25s var(--ease)}
html.mo-on :focus-visible{animation:focusEntre .45s var(--ease)}

/* curseur piloté par le script : taille et forme interpolées, pas de transition CSS */
.cur.cur--js{transition:background .3s,opacity .3s,box-shadow .3s}
body[data-cur="colle"] .cur{background:transparent;box-shadow:inset 0 0 0 1.5px #fff;mix-blend-mode:difference}

/* la une : courbe de croissance derrière le titre */
.op__pente{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.op__pente path{fill:none;stroke:var(--coral);stroke-linecap:round}
.op__pente .trace{stroke-width:1.5;opacity:.9}
.op__pente .plein{stroke-width:3.2;opacity:1;stroke:var(--coral-texte)}
.op__pente circle{fill:var(--coral)}
/* le bout de la courbe respire : la croissance est vivante, pas figée */
@keyframes penteBat{0%,100%{r:5}50%{r:7.5}}
html.mo-on .op__pente circle{animation:penteBat 2.8s var(--ease) infinite}
/* repère de défilement : un filet où descend un segment corail. Il
   disparaît au premier geste, et ne revient pas. */
/* posé dans le vide entre le paragraphe, à gauche, et les boutons, à droite */
.op__cue{position:absolute;left:50%;translate:-50% 0;bottom:clamp(14px,2vw,26px);z-index:2;
  display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .6s var(--ease)}
.op.cue-on .op__cue{opacity:1}
.op.cue-off .op__cue{opacity:0;pointer-events:none}
.op__cue i{display:block;width:1px;height:clamp(28px,3.4vw,46px);background:var(--rule-2);position:relative;overflow:hidden}
.op__cue i::after{content:"";position:absolute;left:0;right:0;top:0;height:42%;background:var(--coral)}
html.mo-on .op__cue i::after{animation:cueDescend 1.9s var(--ease) infinite}
@keyframes cueDescend{0%{transform:translateY(-110%)}60%,100%{transform:translateY(240%)}}
.op__cue span{font-size:var(--micro);text-transform:uppercase;color:var(--i-40);font-variation-settings:"wght" 500}
@media (max-width:820px){.op__cue{display:none}}
@media (prefers-reduced-motion:reduce){html.mo-on .op__pente circle,html.mo-on .op__cue i::after{animation:none}}
.op h1,.op__foot{position:relative;z-index:1}
/* ——— Trois ajouts au hero, ?hero=lentille|photo|souffle ——— */
/* lentille : un disque corail inverse ce qu'il recouvre. L'isolation
   confine le mélange au titre : les boutons et la courbe n'y passent pas. */
.op h1{isolation:isolate}
.op__lentille{position:absolute;top:0;left:0;z-index:3;pointer-events:none;
  width:var(--d,190px);height:var(--d,190px);margin:calc(var(--d,190px) / -2) 0 0 calc(var(--d,190px) / -2);
  border-radius:50%;background:var(--coral);mix-blend-mode:difference;
  opacity:0;transition:opacity .45s var(--ease)}
.op.lentille-on .op__lentille{opacity:1}
/* photo : le mot devient une fenêtre sur une photo du bureau. Le titre est
   déjà éclaté en caractères, et un détourage posé sur le mot ne traverse pas
   ces sous-éléments : on le pose donc sur chaque caractère, en recalant
   l'image pour qu'elle reste continue d'une lettre à l'autre. */
.op h1 .co--photo{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-repeat:no-repeat}
@media (prefers-reduced-motion:reduce){.op__lentille{display:none}}
.op__meta{z-index:1}

/* passages clair → sombre : une rangée de blocs dans la marge de la section sombre */
.mf,.spw,.ct{position:relative}
.mf{--bh:calc(clamp(80px,12vw,200px) * .7)}
.spw{--bh:calc(clamp(60px,8vw,150px) * .7)}
.ct{--bh:calc(clamp(70px,9vw,160px) * .7)}
.bloc{position:absolute;left:0;right:0;z-index:1;height:var(--bh);display:grid;grid-template-columns:repeat(14,1fr);pointer-events:none}
.bloc--haut{top:-1px}
.bloc--bas{bottom:-1px}
.bloc i{display:block;background:var(--cream);margin:0 -.5px}
.bloc--haut i{transform-origin:50% 0}
.bloc--bas i{transform-origin:50% 100%}

/* photographie : le canevas du shader prend la place de l'image */
.gl-img{position:absolute;inset:0;width:100%;height:100%;display:block}
.photo.gl-on img{opacity:0}
html.mo-on .mo .photo .gl-img{transition:scale 1.1s var(--ease)}
html.mo-on .mo .photo:hover .gl-img{scale:1.05}

/* méthode : compteur d'étapes, seulement quand la section est épinglée */
.proc__ct{display:none;margin-left:clamp(10px,2vw,32px);color:var(--ink)}
.proc__ct b{font-weight:inherit;color:var(--coral)}
html.mo-on .proc--pin .proc__ct{display:inline}

/* cas clients : la photo s'ouvre en plein écran avant l'étude */
.bascule{position:fixed;inset:0;z-index:9995;overflow:hidden;background:var(--ink)}
.bascule__img{position:absolute;inset:0;background-size:cover;filter:contrast(1.06) brightness(.62)}
.bascule__t{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,6vw,90px);color:var(--cream);display:flex;flex-direction:column;gap:6px}
.bascule__t > span{display:block;overflow:hidden;clip-path:inset(0 0 -0.2em 0)}
.bascule__k{font-size:clamp(2.2rem,7vw,7rem);line-height:1;color:var(--butter);font-variation-settings:"wght" 500}
.bascule__n{font-size:clamp(1.4rem,3.4vw,3.4rem);line-height:1.05;font-variation-settings:"wght" 450}

/* ============================================================
   V16 · MOTION À FOND
   ============================================================ */
/* accordéon : la largeur suit un ressort Motion, plus la transition CSS */
@media (min-width:901px){ .ac--ressort .ac__p{transition:none} }
/* cartes qui s'inclinent, reflet qui suit le pointeur */
.incline{position:relative}
.incline:hover{z-index:2}
.reflet{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(230,79,50,.13),rgba(230,79,50,0) 58%)}
/* petits rebonds pilotés par --pop */
.rub .i{display:inline-block;scale:var(--pop,1)}
.st__tag{scale:var(--pop,1)}
.proc__i .n{display:inline-block;scale:var(--pop,1);transform-origin:left center}
html.mo-on .st__c .go{transition:opacity .3s}
html.mo-on .st__i:hover .go{transform:none}
/* bandeau qu'on attrape */
.mq{cursor:grab;user-select:none}
.mq.tire{cursor:grabbing}
.mq img{-webkit-user-drag:none;user-select:none}

/* ——— lien d'évitement : caché hors du clavier ——— */
.evite{position:fixed;left:16px;top:12px;z-index:9999;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--cream);font-size:14px;transform:translateY(-180%);transition:transform .3s var(--ease)}
.evite:focus{transform:none}
#une:focus{outline:none}

/* ——— une : lisible au premier rendu (spec), la vague de graisse passe par --w ——— */
#une .ln > span{transform:none;transition:none}
.op .fade{opacity:1;transform:none}
#uneT .sx-c{font-variation-settings:"wght" var(--w,500)}

/* ——— photographie : zoom au défilement porté par le cadre ——— */
html.mo-on .mo .photo > img,html.mo-on .mo .photo > .gl-img{transform:scale(var(--zoom,1))}

/* ——— accessibilité : contrastes AA sur le petit texte (spec : A11y = 100) ———
   Le corail de la marque (#E64F32) donne 3,8:1 sur blanc : bien pour les
   grands titres, insuffisant sous 18 px. Le petit texte corail passe à un
   corail plus sombre, 5,4:1. Les libellés gris passent de 40 % à 70 %. */
:root{--coral-texte:#C23A1E}
.mono--c,.rub .i,.mo__cap .n,.proc__i .n,.mega__links .n,.rail__cta,.st__tag{color:var(--coral-texte)}
strong,.op__foot p strong{color:var(--coral-texte)}
.gr__av--coral{background:var(--coral-texte)}
#cas p.mono a{color:var(--coral-texte)!important;text-decoration:underline;text-underline-offset:3px}
.mf .mono,.mega__feat .mono{color:var(--c-74)}
.mf__t w{color:rgba(255,255,255,.63)}
.proc .mono{color:rgba(51,51,51,.74)}
.foot h4{color:var(--c-74)}
.spw .mono{color:var(--c-64)}
.idx a[data-tone="dark"],.rail__bot[data-tone="dark"],.rail__soc a[data-tone="dark"]{color:var(--c-64)}

/* ——— Bouton tracé, sur fond sombre ——— */
.btn--trace{background:none;border-color:var(--c-44);color:var(--cream)}
.btn--trace:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.ct__head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,52px);flex-wrap:wrap}
.ct__head .btn{margin-bottom:clamp(6px,1.1vw,18px);flex:0 0 auto}

/* ——— Bande infolettre ——— */
/* Vert sauge demandé. Le titre garde #333 (gros, donc lisible à 3,4:1) ;
   les petits textes descendent à #1A1A1A pour passer la barre des 4,5:1. */
.nl{--nl-fond:#608D79; --nl-texte:#333333; --nl-menu:#1A1A1A;
  background:var(--nl-fond);color:var(--nl-texte);padding-block:clamp(48px,6.4vw,104px)}
.btn--encre{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--encre:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.nl__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(24px,4vw,88px);align-items:end}
.nl__t h2{font-size:clamp(1.42rem,3.3vw,3.15rem);line-height:.98;font-variation-settings:"wght" 450;margin-top:clamp(10px,1.3vw,18px)}
.nl__p{margin-top:clamp(13px,1.5vw,22px);max-width:46ch;color:var(--nl-menu);font-size:clamp(14.5px,1.05vw,17px)}
.nl__ch{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--nl-menu);padding-bottom:12px}
.nl__c{flex:1 1 220px;min-width:0;background:none;border:0;padding:8px 2px;color:var(--nl-menu);
  font:inherit;font-size:clamp(15px,1.3vw,21px);letter-spacing:0}
.nl__c::placeholder{color:rgba(26,26,26,.62)}
.nl__c:focus{outline:0}
.nl__ch:focus-within{border-bottom-color:var(--cream)}
.nl__f .btn{flex:0 0 auto}
.nl__note{margin-top:clamp(10px,1.2vw,16px);color:var(--nl-menu)}
.nl .mono{color:var(--nl-menu)}
/* Sur une section colorée, le trait de surlignage (z-index -1) passait
   derrière le fond. isolation:isolate lui donne son propre contexte :
   il reste sous le texte, mais au-dessus du vert. */
.nl .mark{isolation:isolate}
.nl .mark::after{background:var(--cream);opacity:.5}
@media (max-width:900px){.nl__in{grid-template-columns:1fr}}

/* ——— Formulaires côté serveur ——— */
/* Piège à robots : invisible pour un humain, rempli par un automate. */
.piege{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Accusé de réception, affiché au retour de traitement.php */
.avis{margin-top:14px;padding:11px 15px;border-radius:10px;
  font-size:clamp(13px,.95vw,15px);line-height:1.45}
.avis--ok{background:rgba(110,198,158,.2);border:1px solid rgba(110,198,158,.55);color:var(--ink)}
.avis--non{background:rgba(230,79,50,.1);border:1px solid rgba(230,79,50,.45);color:var(--ink)}
.ctf .avis{grid-column:1 / -1;color:var(--cream)}
.ctf .avis--ok{background:rgba(110,198,158,.22);border-color:rgba(110,198,158,.5)}
.ctf .avis--non{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38)}