:root{
  --papier:#F5F4F0; --blanc:#FFFFFF; --encre:#15181A; --acier:#5D646A;
  --trait:#DAD7CF; --cuivre:#A85A32; --cuivre-clair:#D98E5F;
  --sans:"Archivo",system-ui,sans-serif; --serif:"Cormorant Garamond",serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
#metier,#secteur,#realisations,#services,#contact{scroll-margin-top:96px}
#etape-01,#etape-02,#etape-03,#etape-04,#etape-05{scroll-margin-top:120px}
body{background:var(--papier);color:var(--encre);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{width:100%;max-width:none;margin:0 auto;padding-inline:clamp(22px,6vw,128px)}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- HEADER (barre blanche, logo C2) ---------- */
header{position:sticky;top:0;z-index:60;background:var(--papier);border-bottom:1px solid var(--trait)}
header .wrap{max-width:none;padding-inline:clamp(22px,6vw,128px)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none}
.logo .dia{width:77px;height:62px;flex:none;border-radius:60% 40% 42% 58% / 54% 52% 48% 46%;overflow:hidden;display:block}
.logo .dia img{width:100%;height:100%;object-fit:fill;display:block}
.logo .txt{display:inline-flex;flex-direction:column;align-items:center;line-height:.95}
.logo .nm{font-family:"Manrope",sans-serif;font-weight:800;font-size:34px;letter-spacing:.06em;color:var(--encre)}
.logo .nm .l{font-weight:300}
.logo .bl{display:flex;align-items:center;gap:7px;margin-top:8px}
.logo .bl:before,.logo .bl:after{content:"";height:1px;flex:1;background:var(--trait);max-width:12px}
.logo .bl span{font-family:var(--mono);font-size:8.6px;letter-spacing:.16em;color:var(--acier);text-transform:uppercase;white-space:nowrap}
nav{margin-left:auto}
nav ul{display:flex;gap:34px;list-style:none}
nav a{text-decoration:none;font-family:"Montserrat",sans-serif;font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:.14em;color:var(--encre);padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--cuivre)}
.btn{display:inline-block;padding:13px 26px;font-size:14.5px;font-weight:600;text-decoration:none;border:1.5px solid var(--encre);color:var(--encre);transition:.18s;cursor:pointer;font-family:inherit}
.btn-plein{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.btn-plein:hover{background:var(--cuivre);border-color:var(--cuivre);color:#fff}
.btn-ghost{border-color:#fff;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--encre)}
.burger{display:none;background:none;border:0;font-size:22px;color:var(--encre);cursor:pointer}

/* --- Choix de la langue : second oeuf a cote de Compte, meme dessin --- */
.acct .langues{position:relative}
.lg-btn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--encre);font-family:inherit}
.lg-btn .ic{width:54px;height:54px;border:1.6px solid var(--cuivre);
  border-radius:42% 58% 60% 40% / 48% 46% 54% 52%;display:flex;align-items:center;
  justify-content:center;color:var(--encre);font-family:var(--mono);font-size:13.5px;
  letter-spacing:.08em;transition:background .2s,color .2s,border-color .2s}
.lg-btn:hover .ic,.langues.ouvert .lg-btn .ic{background:var(--cuivre);border-color:var(--cuivre);color:#fff}
.lg-btn .lbl{font-family:"Montserrat",sans-serif;font-size:14px;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;color:var(--encre)}
.lg-liste{display:none;position:absolute;top:calc(100% + 12px);right:0;z-index:70;
  min-width:172px;list-style:none;background:var(--papier);
  border:1px solid var(--trait);box-shadow:0 18px 34px -22px rgba(0,0,0,.5)}
.langues.ouvert .lg-liste{display:block}
.lg-liste li + li{border-top:1px solid var(--trait)}
.lg-liste a{display:flex;align-items:baseline;gap:11px;padding:12px 16px;text-decoration:none;
  color:var(--encre);transition:background .18s,color .18s}
.lg-liste a:hover{background:#EFEDE7;color:var(--cuivre)}
.lg-liste a b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;font-weight:500;color:var(--acier)}
.lg-liste a span{font-family:"Montserrat",sans-serif;font-size:13.5px}
.lg-liste a.on b,.lg-liste a.on span{color:var(--cuivre)}
/* Compte / Devis (ronds icônes façon Norlinge) */
.acct{display:flex;gap:26px;align-items:flex-start;margin-left:30px}
.acct a{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:var(--encre)}
.acct .ic{width:54px;height:54px;border:1.6px solid var(--cuivre);border-radius:60% 40% 42% 58% / 54% 52% 48% 46%;display:flex;align-items:center;justify-content:center;color:var(--encre);transition:background .2s,color .2s,border-color .2s}
.acct a:nth-child(2) .ic{border-radius:42% 58% 60% 40% / 48% 46% 54% 52%}
.acct a:hover .ic{background:var(--cuivre);border-color:var(--cuivre);color:#fff}
.acct .ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.acct .lbl{font-family:"Montserrat",sans-serif;font-size:14px;font-weight:400;text-transform:uppercase;letter-spacing:.14em}

/* ---------- HERO ANIMÉ ---------- */
.hero{position:relative;min-height:max(500px,68vh);overflow:hidden;display:flex;align-items:flex-start;background:#2a2622}
.hero .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .interior{transform:scale(1.12);animation:heroKen 20s ease-in-out infinite alternate}
.hero .fabric{z-index:2;animation:fabricLoop 11s ease-in-out infinite}
.hero .scrim{position:absolute;inset:0;z-index:3;
  background:linear-gradient(102deg, rgba(15,17,19,.82) 0%, rgba(15,17,19,.55) 34%, rgba(15,17,19,.18) 62%, rgba(15,17,19,0) 82%),
             linear-gradient(0deg, rgba(15,17,19,.35) 0%, rgba(15,17,19,0) 30%)}
.hero .inner{position:relative;z-index:4;width:100%;padding-top:clamp(54px,9vh,100px)}
.hero .col{max-width:62rem}
.hero .wrap{max-width:none;padding-inline:clamp(22px,6vw,128px)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.hero h1{font-family:"Montserrat",sans-serif;font-size:clamp(1.65rem,3vw,2.65rem);font-weight:300;text-transform:uppercase;line-height:1.2;letter-spacing:.012em;color:#fff;margin:18px 0 0;max-width:none;text-shadow:0 2px 26px rgba(0,0,0,.32)}
.hero h1 br{display:inline}
@media(max-width:640px){.hero h1 br{display:none}}
.hero h1 strong{font-weight:700}
.hero h1 em{font-style:normal;color:#fff}
.signature{position:relative;display:inline-block;margin-top:26px;padding-bottom:14px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#fff}
/* filet cuivre sous la phrase : il prend toute la largeur du texte, s'effile aux deux bouts,
   glisse avec la phrase et se rehausse d'un balayage lent a chaque cycle */
.signature::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background-image:linear-gradient(90deg,transparent,var(--cuivre-clair),transparent),
                   linear-gradient(var(--cuivre),var(--cuivre));
  background-size:34% 100%,100% 100%;
  background-repeat:no-repeat;
  background-position:-40% 0,0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  transition:opacity .6s ease,transform .6s ease}
.signature.sig-balaye::before{animation:filetBalayage 2.4s ease-in-out 1}
@keyframes filetBalayage{from{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}
.signature .sig-txt{display:inline-block;transition:opacity .6s ease,transform .6s ease}
/* B : sortie vers la droite */
.signature.sig-out .sig-txt{opacity:0;transform:translateX(34px)}
.signature.sig-out::before{opacity:0;transform:translateX(34px)}
/* B : position d'entrée (depuis la gauche), sans transition */
.signature.sig-enter .sig-txt{opacity:0;transform:translateX(-34px);transition:none}
.signature.sig-enter::before{opacity:0;transform:translateX(-34px);transition:none}
.accroche{margin-top:20px;max-width:54ch;font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.9)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);animation:bob 2.4s ease-in-out infinite}

/* photo : respiration continue, ultra-lisse (2 clés, alternate) */
/* Ken-burns : 3 variantes de mouvement (diagonales/zoom différents) alternées
   par photo en JS → chaque image « respire » dans sa propre direction = plus vivant. */
@keyframes heroKen{
  from{transform:scale(1.23) translate3d(3.6%,2.3%,0)}
  to{transform:scale(1.05) translate3d(-3.6%,-2.3%,0)}
}
@keyframes heroKen2{
  from{transform:scale(1.05) translate3d(-3.2%,2.6%,0)}
  to{transform:scale(1.24) translate3d(3.2%,-2.2%,0)}
}
@keyframes heroKen3{
  from{transform:scale(1.21) translate3d(-3.6%,-2.2%,0)}
  to{transform:scale(1.04) translate3d(3.6%,2.5%,0)}
}
/* tissu : fondu LONG + flou de dissolution (transition fluide, pas de coupe sèche).
   Séparé de la dérive pour pouvoir mixer 2 rythmes non synchrones. */
@keyframes fabricFade{
  0%{opacity:1;filter:blur(0)}
  6%{opacity:1;filter:blur(.6px)}
  25%{opacity:0;filter:blur(9px)}
  75%{opacity:0;filter:blur(9px)}
  94%{opacity:1;filter:blur(.6px)}
  100%{opacity:1;filter:blur(0)}
}
/* dérive lente ; miroir (--fx), rotation (--rot) et sens du pan (--tx) pilotés en JS
   et changés à CHAQUE cycle PENDANT que le tissu est invisible → angle/cadrage différent
   à chaque passage, sans à-coup. Durée 17s ≠ 12s du fondu ≠ 5s de la vidéo. */
@keyframes fabricDrift{
  from{transform:scaleX(var(--fx,1)) rotate(var(--rot,0deg)) scale(1.16) translate3d(var(--tx,3%),1.5%,0)}
  to{transform:scaleX(var(--fx,1)) rotate(var(--rot,0deg)) scale(1.28) translate3d(calc(var(--tx,3%) * -1),-1.6%,0)}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
.hero .inner .col>*{animation:rise .9s ease-out both}
.hero .col .eyebrow{animation-delay:1.4s}
.hero .col h1{animation-delay:1.6s}
.hero .col .accroche{animation-delay:1.9s}
.hero .col .signature{animation-delay:2.1s}
.hero .col .btns{animation-delay:2.3s}

/* ---------- CHAÎNE ---------- */
.chaine{border-bottom:1px solid var(--trait);background:var(--blanc)}
.chaine .wrap{display:grid;grid-template-columns:repeat(5,1fr);width:100%;max-width:none;padding-inline:clamp(22px,6vw,128px)}
.maillon{padding:14px 22px 26px;border-right:1px solid var(--trait)}
.maillon:last-child{border-right:0;padding-right:0}
.maillon:first-child{padding-left:0}
.maillon h3{margin:4px 0 7px;font-family:"Montserrat",sans-serif;font-size:1.02rem;font-weight:500;text-transform:uppercase;letter-spacing:.09em}
.maillon h3 .n{font-family:var(--mono);font-size:.62em;letter-spacing:.1em;color:var(--cuivre);margin-right:9px;font-weight:500;vertical-align:1px}
.maillon p{font-size:14.5px;color:var(--acier);line-height:1.62}
.pied-note{padding:24px 0 60px;text-align:center;color:var(--acier);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}

@media(max-width:960px){.chaine .wrap{grid-template-columns:repeat(3,1fr)}.maillon:nth-child(n+4){border-top:1px solid var(--trait)}}
@media(max-width:640px){.chaine .wrap{grid-template-columns:1fr}.logo .bl{display:none}}

/* --- Barre compacte : sous 1080px le menu passe derriere le burger.
       Au-dessus, les cinq entrees ne tiennent plus a cote du logo et debordaient.
       Seuil calibre sur l'anglais, dont les entrees sont plus longues. --- */
@media(max-width:1280px){
  header .bar > nav{display:none}
  .burger{display:block;font-size:26px;line-height:1;padding:4px 2px;margin-left:16px}
  header.menu-ouvert .bar > nav{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--papier);border-bottom:1px solid var(--trait);
    padding:0 clamp(22px,6vw,128px) 14px;box-shadow:0 20px 30px -24px rgba(0,0,0,.45)}
  header.menu-ouvert .bar > nav ul{flex-direction:column;gap:0}
  header.menu-ouvert .bar > nav li{border-top:1px solid var(--trait)}
  header.menu-ouvert .bar > nav a{display:block;padding:17px 0;border-bottom:0}
  header.menu-ouvert .bar > nav a:hover{color:var(--cuivre);border-color:transparent}
}
@media(max-width:640px){
  .bar{gap:10px;padding:16px 0}
  .lg-btn .ic{width:40px;height:40px;font-size:11px}
  .lg-btn .lbl{display:none}
  .logo{gap:9px}
  .logo .dia{width:52px;height:42px}
  .logo .nm{font-size:23px;letter-spacing:.04em}
  .acct{margin-left:10px;gap:12px}
  .acct .ic{width:40px;height:40px}
  .acct .ic svg{width:17px;height:17px}
  .acct .lbl{display:none}
  .burger{margin-left:4px;font-size:24px}
}
@media(max-width:400px){
  header .wrap{padding-inline:15px}
  .logo .dia{width:42px;height:34px}
  .logo .nm{font-size:17px;letter-spacing:.02em}
  .acct .ic{width:36px;height:36px}
  .acct .ic svg{width:16px;height:16px}
  .lg-btn .ic{width:36px;height:36px;font-size:10px}
}
@media(max-width:340px){
  header .wrap{padding-inline:9px}
  .bar{gap:5px}
  .logo{gap:6px}
  .logo .dia{width:34px;height:28px}
  .logo .nm{font-size:14px}
  .acct{margin-left:4px}
  .acct .ic{width:30px;height:30px}
  .acct .ic svg{width:14px;height:14px}
  .lg-btn .ic{width:30px;height:30px;font-size:9.5px}
  .burger{margin-left:0;font-size:21px}
}

@media(prefers-reduced-motion:reduce){
  .hero .fabric{opacity:0;animation:none}
  .hero .interior{animation:none;transform:none}
  .hero .inner .col>*{animation:none}
  .scroll-hint{animation:none}
}

/* ========== SECTIONS SOUS LE HERO (rapatriées de maquette-D) ========== */
section.bloc{padding:82px 0}
.tete{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;margin-bottom:40px}
.tete .num{font-family:var(--mono);font-size:11.5px;color:var(--cuivre);letter-spacing:.14em;padding-top:9px}
.bloc h1,.bloc h2{font-family:"Montserrat",sans-serif;font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:300;text-transform:uppercase;letter-spacing:.012em;line-height:1.15;max-width:20ch}
.bloc h1 strong,.bloc h2 strong{font-weight:700}
.tete .sous{margin-top:13px;color:var(--acier);max-width:60ch;font-size:16px}

/* MARCHÉS */
.marches{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.marche{text-decoration:none;display:block;border-top:2px solid var(--encre)}
.marche .compte{display:flex;align-items:baseline;justify-content:space-between;padding-top:11px}
.marche .compte b{font-family:var(--mono);font-size:1.75rem;font-weight:500;line-height:1}
.marche .compte span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--acier);text-transform:uppercase}
.marche .ph{aspect-ratio:4/5;overflow:hidden;margin-top:15px;background:#ddd}
.marche .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:grayscale(.18)}
.marche:hover .ph img{transform:scale(1.04);filter:none}
.marche h3{margin-top:13px;font-family:"Montserrat",sans-serif;font-size:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.marche em{display:block;font-style:normal;margin-top:5px;font-size:13px;color:var(--acier)}

/* PREUVE */
.preuve{background:var(--encre);color:var(--papier)}
section.bloc.preuve{padding:56px 0}
.preuve h2{color:var(--papier);max-width:none;white-space:nowrap}
@media(max-width:640px){.preuve h2{white-space:normal}}
.preuve .tete{display:block}
.preuve .tete .sous{color:rgba(245,244,240,.7)}
.preuve-grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.exp-feature{border-right:1px solid;border-image:linear-gradient(180deg,transparent 6%,rgba(217,142,95,.42) 22%,rgba(217,142,95,.42) 78%,transparent 94%) 1;padding-right:clamp(30px,5vw,68px)}
.exp-num{font-family:var(--mono);font-size:clamp(4rem,9vw,6.6rem);font-weight:400;line-height:.9;color:transparent;-webkit-text-stroke:1px var(--cuivre-clair)}
.exp-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,244,240,.72);margin-top:16px}
.preuve-main .sous{color:rgba(245,244,240,.72);margin-top:14px;white-space:nowrap}
.preuve-main .cpts{border-top:none;margin-top:30px}
.preuve-main .cpt{padding:2px 26px;border-right:1px solid;border-image:linear-gradient(180deg,transparent 6%,rgba(217,142,95,.42) 22%,rgba(217,142,95,.42) 78%,transparent 94%) 1}
.preuve-main .cpt:first-child{padding-left:0}
.preuve-main .cpt:last-child{border-right:0;border-image:none}
.preuve-main .cpt b{font-size:clamp(1.5rem,2.4vw,1.9rem)}
@media(max-width:1180px){.preuve-main .sous{white-space:normal;max-width:56ch}}
@media(max-width:820px){.preuve-grid{grid-template-columns:1fr;gap:30px}.exp-feature{border-right:none;border-image:none;border-bottom:1px solid rgba(245,244,240,.18);padding-right:0;padding-bottom:24px}.preuve-main .cpts{grid-template-columns:1fr 1fr;gap:22px 0}.preuve-main .cpt{border-right:0;border-image:none;padding:2px 0}}
.cpts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(245,244,240,.22)}
.cpt{padding:32px 24px;border-right:1px solid rgba(245,244,240,.16)}
.cpt:last-child{border-right:0}
.cpt b{display:block;font-family:var(--mono);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500;line-height:1}
.cpt span{display:block;margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;opacity:.6}

/* RÉALISATIONS */
#realisations .tete{display:block}
#services .tete{display:block}
#services h2{max-width:none}
#services .sous{max-width:none}
#realisations h2{max-width:none;white-space:nowrap}
/* carrousel */
.rcar{position:relative;margin-top:6px}
.rview{overflow:hidden}
.rtrack{display:flex;gap:34px;transition:transform .6s cubic-bezier(.4,.02,.2,1)}
.rslide{flex:0 0 calc((100% - 68px)/3);text-decoration:none;display:block}
.rslide .ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:#e7e4dd}
.rslide .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rslide:hover .ph img{transform:scale(1.04)}
.rslide h3{font-family:"Montserrat",sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:.01em;color:var(--encre)}
/* légende : nom + type/ville + logo cliquable */
.rcap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px}
.rcap .rmeta{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--acier);margin-top:6px}
.rlogo{flex:none;display:flex;align-items:flex-end;height:30px}
.rlogo img{height:30px;max-width:120px;width:auto;object-fit:contain;transition:opacity .2s}
.rlogo:hover img{opacity:.6}
.rlogo.rlogo--lg{height:40px}
.rlogo.rlogo--lg img{height:40px}
/* carte CTA en fin de carrousel : juste le texte cliquable */
.rslide.cta .ph{background:transparent}
.rslide.cta .cta-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center}
.rslide.cta .cta-txt{font-family:"Montserrat",sans-serif;font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:1rem;line-height:1.6;color:var(--encre);text-decoration:none;transition:color .25s}
.rslide.cta .cta-txt:hover{color:var(--cuivre)}
/* nav œuf creux */
.rnav{position:absolute;top:calc(50% - 27px);transform:translateY(-50%);width:60px;height:48px;background:transparent;border:1.6px solid var(--cuivre);border-radius:60% 40% 42% 58% / 54% 52% 48% 46%;display:flex;align-items:center;justify-content:center;color:var(--cuivre);cursor:pointer;transition:background .25s,color .25s,opacity .25s;z-index:3}
.rnav:hover{background:var(--cuivre);color:#fff}
.rnav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rprev{left:-74px}
.rnext{right:-74px}
@media(max-width:1180px){.rprev{left:-30px}.rnext{right:-30px}}
@media(max-width:1050px){.rslide{flex:0 0 calc((100% - 34px)/2)}}
@media(max-width:640px){.rprev{left:-6px}.rnext{right:-6px}}
@media(max-width:640px){.rslide{flex:0 0 100%}}

/* Page Réalisations : grille 3 par ligne (reprend l'habillage des slides) */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 34px;margin-top:6px}
.rgrid .rslide{flex:none}
.rgrid .vide .ph{display:flex;align-items:center;justify-content:center;background:#EAE7E1;border:1px solid var(--trait)}
.rgrid .vide .ph span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#B6B0A6}
@media(max-width:1050px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.rgrid{grid-template-columns:1fr}}

/* EXPERTISE */
/* landing : les 6 services en raccourci */
.svcmini{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(30px,4vw,64px);margin-top:6px}
.svcmini a{display:block;text-decoration:none;padding:26px 0;border-bottom:1px solid var(--trait)}
.svcmini a:nth-child(-n+3){border-top:1px solid var(--trait)}
.svcmini h3{font-family:"Montserrat",sans-serif;font-size:1.06rem;font-weight:600;letter-spacing:.01em;color:var(--encre);transition:color .2s}
.svcmini a:hover h3{color:var(--cuivre)}
.svcmini p{margin-top:8px;font-size:14.6px;color:var(--acier);line-height:1.6}
.svc-lien{display:inline-flex;align-items:center;gap:15px;margin-top:34px;text-decoration:none;
  font-family:"Montserrat",sans-serif;font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre);border-bottom:1.5px solid var(--cuivre);padding-bottom:7px;transition:.2s}
.svc-lien:hover{color:var(--cuivre)}
.svc-lien svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* CONTACT */
.contact{background:var(--blanc);border-top:2px solid var(--encre)}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
form{display:grid;gap:15px}
label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acier);display:block;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--trait);background:var(--papier);font-family:inherit;font-size:15px;color:inherit}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--encre)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.coord{list-style:none;margin-top:6px}
.coord li{padding:16px 0;border-bottom:1px solid var(--trait)}
.coord b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--acier);margin-bottom:5px}
.coord a{text-decoration:none;font-weight:600}

/* FOOTER */
footer{background:var(--encre);color:var(--papier);padding:50px 0 22px;font-size:14px}
.pied{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px;padding-bottom:30px;border-bottom:1px solid rgba(245,244,240,.18)}
.pied p{opacity:.6;margin-top:13px;max-width:36ch;font-size:13.5px}
.pied h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:13px}
.pied ul{list-style:none;display:grid;gap:8px}
.pied a{text-decoration:none;opacity:.85}
.bas{padding-top:19px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;opacity:.5;font-size:12px}

@media(max-width:1050px){.marches,.projets,.cpts{grid-template-columns:repeat(2,1fr)}.cpt:nth-child(2){border-right:0}.svcmini{grid-template-columns:1fr}.ct{grid-template-columns:1fr;gap:40px}.pied{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.marches,.projets,.duo{grid-template-columns:1fr}.cpts{grid-template-columns:1fr}.cpt{border-right:0}section.bloc{padding:56px 0}.tete{grid-template-columns:1fr;gap:10px}.pied{grid-template-columns:1fr}}

/* ===== ESSAI : Métier transparent sur l'animation hero (fond = boucle hero) ===== */
.topvisual{position:relative;overflow:hidden;background:#2a2622}
.topvisual .layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.topvisual .interior{transform:scale(1.12);animation:heroKen 15s ease-in-out infinite alternate}
.topvisual .fabric{z-index:2;will-change:opacity,transform,filter;
  animation:fabricFade 12s ease-in-out infinite, fabricDrift 17s ease-in-out infinite alternate}
.topvisual .scrim{position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(102deg, rgba(15,17,19,.80) 0%, rgba(15,17,19,.50) 34%, rgba(15,17,19,.15) 62%, rgba(15,17,19,0) 82%),
    linear-gradient(180deg, rgba(15,17,19,.30) 0%, rgba(15,17,19,.06) 34%, rgba(15,17,19,.52) 72%, rgba(15,17,19,.82) 100%)}
.hero{background:transparent!important;overflow:visible}
.chaine{position:relative;z-index:4;background:transparent;border-bottom:1px solid rgba(255,255,255,.20)}
.chaine .maillon{border-right:0;position:relative}
.chaine .maillon:not(:last-child)::after{content:"";position:absolute;top:10%;bottom:10%;right:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 22%,rgba(255,255,255,.55) 78%,transparent)}
.chaine .maillon h3{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.chaine .maillon h3 a{color:inherit;text-decoration:none;position:relative;display:inline-block}
.chaine .maillon h3 a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--cuivre-clair);transition:right .4s cubic-bezier(.2,.7,.3,1)}
.chaine .maillon h3 a:hover::after,.chaine .maillon h3 a:focus-visible::after{right:0}
.chaine.clair .maillon h3 a::after{background:var(--cuivre)}
.chaine .maillon h3 .n{color:var(--cuivre-clair)}
.chaine .maillon p{color:rgba(255,255,255,.94);text-shadow:0 1px 3px rgba(0,0,0,.72),0 2px 16px rgba(0,0,0,.55)}
/* les 5 colonnes gardent la meme hauteur visuelle : 6 lignes */
@media(min-width:961px){.chaine .maillon p{min-height:9.72em}}
@media(max-width:960px){.chaine .maillon:nth-child(n+4){border-top:1px solid rgba(255,255,255,.22)}}

/* Page Métier : les 5 étapes en zigzag (texte / photo alternés) */
.tete .sous.une-ligne{max-width:none;white-space:nowrap}
@media(max-width:820px){.tete .sous.une-ligne{white-space:normal}}
.etapes{display:grid;gap:clamp(4px,1vw,14px);margin-top:46px}
.etape{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,86px);align-items:center}
.etape.inv .txt{order:2}
/* numéro : discret, en mono cuivre, comme sur la chaîne du hero */
.etape .txt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:16px}
.etape .n{grid-area:1/1;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--cuivre)}
.etape h3{grid-area:1/2;margin:0;font-family:"Montserrat",sans-serif;font-size:clamp(1.4rem,2.6vw,2rem);
  font-weight:300;text-transform:uppercase;letter-spacing:.04em;line-height:1.12}
.etape p{grid-column:1/-1;margin-top:26px;padding-top:26px;border-top:1px solid var(--trait);
  max-width:44ch;color:var(--acier);font-size:16.5px;line-height:1.74}
/* photo : l'œuf de la zone Secteur */
.etape .media{display:flex;flex-direction:column;align-items:center;gap:15px;justify-self:center;width:100%}
.etape .diapo-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cuivre);text-align:center;min-height:14px}
/* barre segmentée : une barre par vue, celle en cours se remplit ; clic = accès direct */
.etape .diapo-nav{display:flex;gap:7px;justify-content:center;margin-top:2px}
.etape .seg{width:30px;height:2px;padding:0;border:0;background:var(--trait);cursor:pointer;
  position:relative;overflow:hidden;border-radius:1px;transition:background .25s}
.etape .seg:hover{background:#C9C2B6}
.etape .seg i{display:block;height:100%;width:100%;background:var(--cuivre);
  transform:scaleX(0);transform-origin:left center}
.etape .seg.done i{transform:scaleX(1)}
.etape .seg.on i{animation:segFill 4s linear forwards}
.etape .diapo-nav.pause .seg.on i{animation-play-state:paused}
@keyframes segFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.etape .seg:focus-visible{outline:1.5px solid var(--cuivre);outline-offset:4px}
.etape .diapo{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.etape .diapo:active,.etape .diapo.tire{cursor:grabbing}
.etape .diapo img{-webkit-user-drag:none}
.etape .diapo.tire img{transition:opacity .45s ease}
/* meme balayage sur l'image des secteurs, accueil et page Secteur */
.cercle{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cercle:active,.cercle.tire{cursor:grabbing}
#secteur .cercle.tire img{transition:opacity .45s ease}
.etape .diapo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity .9s ease}
.etape .diapo img.on{opacity:1;animation:secKen 9s ease-out both}
.etape .diapo img.on:nth-child(even){animation-name:secKen2}
.etape .ph{position:relative;width:100%;max-width:565px;aspect-ratio:1 / .715;overflow:hidden;
  justify-self:center;background:#e7e4dd;border:1px solid var(--trait);
  border-radius:60% 40% 42% 58% / 54% 52% 48% 46%;
  box-shadow:0 26px 64px -30px rgba(21,24,26,.5)}
.etape.inv .ph{border-radius:42% 58% 60% 40% / 48% 46% 54% 52%}
.etape .ph img{width:100%;height:100%;object-fit:cover}
.etape .ph.vide{display:flex;align-items:center;justify-content:center;background:#EAE7E1;
  box-shadow:0 20px 52px -34px rgba(21,24,26,.4)}
.etape .ph.vide span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#B6B0A6}
@media(max-width:900px){
  .etapes{gap:64px}
  .etape{grid-template-columns:1fr;gap:32px}
  .etape.inv .txt{order:0}
  .etape .ph{max-width:420px;justify-self:start}
}

/* Page Métier : la même chaîne, mais sur fond papier (pas de hero) */
.chaine.clair{background:transparent;border-bottom:0;margin-top:44px}
.chaine.clair .wrap{padding-inline:0}
.chaine.clair .maillon h3{color:var(--encre);text-shadow:none}
.chaine.clair .maillon h3 .n{color:var(--cuivre)}
.chaine.clair .maillon p{color:var(--acier);text-shadow:none}
.chaine.clair .maillon:not(:last-child)::after{
  background:linear-gradient(180deg,transparent 2%,rgba(168,90,50,.5) 18%,rgba(168,90,50,.5) 82%,transparent 98%)}
@media(max-width:960px){.chaine.clair .maillon:nth-child(n+4){border-top:1px solid var(--trait)}}


  #secteur .tete{display:block}
  #secteur h2{max-width:none;white-space:nowrap;margin-bottom:0}
  #secteur h2 strong{font-weight:700}
  @media(max-width:620px){#secteur h2{white-space:normal}}
  #secteur .sec-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,480px);gap:84px;align-items:start;margin-top:42px}
  @media(max-width:1150px){#secteur .sec-live{grid-template-columns:1fr;gap:40px}#secteur .cercle-col{order:-1;position:static;align-items:flex-start}#secteur .cercle{max-width:520px}}
  #secteur .sec-col .sous{max-width:none;font-size:19px;line-height:1.72;color:var(--encre)}
  #secteur .sec-col .sous.s2{margin-top:18px;color:var(--acier)}
  #secteur .cercle-col{display:flex;flex-direction:column;align-items:center;gap:18px;position:sticky;top:96px}
  #secteur .cercle{position:relative;width:100%;max-width:480px;aspect-ratio:1 / .86;overflow:hidden;
    border-radius:60% 40% 42% 58% / 54% 52% 48% 46%;background:#e7e4dd;
    box-shadow:0 26px 64px -30px rgba(21,24,26,.5);border:1px solid var(--trait)}
  #secteur .cercle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease}
  #secteur .cercle img.on{opacity:1;animation:secKen 9s ease-out both}
  #secteur .cercle img.on:nth-child(even){animation-name:secKen2}
  @keyframes secKen{from{transform:scale(1.03) translate(-2.4%,1.2%)}to{transform:scale(1.20) translate(2.4%,-1.2%)}}
  @keyframes secKen2{from{transform:scale(1.20) translate(2.4%,-1.2%)}to{transform:scale(1.03) translate(-2.4%,1.2%)}}
  #secteur .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre);text-align:center;min-height:14px}
  #secteur .fams{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px}
  #secteur .fam{padding:28px 12px 6px 36px;position:relative}
  #secteur .fam:first-child{padding-left:0}
  #secteur .fam:not(:first-child){border-left:1px solid;
    border-image:linear-gradient(180deg,transparent 3%,rgba(168,90,50,.5) 20%,rgba(168,90,50,.5) 80%,transparent 97%) 1}
  #secteur .flabel{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre)}
  #secteur .fam ul{list-style:none;padding:0;margin:20px 0 0}
  #secteur .fam li{position:relative;font-family:"Montserrat",sans-serif;font-size:1.02rem;font-weight:400;letter-spacing:.006em;line-height:1.32;color:var(--encre);padding:11px 0;cursor:pointer;transition:color .25s,padding .25s}
  #secteur .fam li::before{content:"";position:absolute;left:-22px;top:50%;transform:translateY(-50%) scale(0) rotate(-8deg);width:13px;height:10px;background:transparent;border:1.5px solid var(--cuivre);border-radius:58% 42% 46% 54% / 64% 60% 40% 36%;transition:transform .3s cubic-bezier(.34,1.45,.5,1)}
  #secteur .fam li.on{color:var(--cuivre);padding-left:20px}
  #secteur .fam li.on::before{transform:translateY(-50%) scale(1) rotate(-8deg)}
  @media(max-width:640px){#secteur .fams{grid-template-columns:1fr}#secteur .fam{padding:22px 0}#secteur .fam:first-child{padding-left:0}#secteur .fam:not(:first-child){border-left:0;border-image:none;border-top:1px solid var(--trait)}}


  /* Contact refait dans le vocabulaire de la page : filets, labels mono cuivre,
     liste à œuf (comme Secteur), bouton œuf (comme Compte/Devis et .rnav). */
  .zform{background:var(--papier);border-top:1px solid var(--trait)}
  .zform .tete{display:block}
  .zform h2{max-width:none;white-space:nowrap;margin-bottom:0}
  .zform .sous{max-width:none}
  @media(max-width:760px){.zform h2{white-space:normal}}

  /* --- coordonnées : une ligne en bas de section, sous le formulaire --- */
  .zform .joindre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;
    margin-top:78px;padding-top:28px;border-top:1px solid var(--trait);list-style:none}
  .zform .joindre b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--acier);margin-bottom:9px;font-weight:400}
  .zform .joindre a,.zform .joindre span{font-family:"Montserrat",sans-serif;font-size:1.02rem;font-weight:400;
    letter-spacing:.006em;color:var(--encre);text-decoration:none;transition:color .22s}
  .zform .joindre a:hover{color:var(--cuivre)}

  /* --- formulaire : des filets, pas des boîtes --- */
  .zform form{display:grid;gap:30px;margin-top:48px}
  .zform .demi{max-width:calc(50% - 17px)}
  .zform .duo{display:grid;grid-template-columns:1fr 1fr;gap:34px}
  .zform .champ{position:relative}
  .zform label{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--acier);display:block;margin-bottom:9px;transition:color .22s}
  .zform .champ:focus-within label{color:var(--cuivre)}
  .zform input,.zform textarea{width:100%;padding:0 0 11px;border:0;border-bottom:1px solid var(--trait);border-radius:0;background:transparent;
    font-family:"Montserrat",sans-serif;font-size:1.02rem;font-weight:400;letter-spacing:.006em;color:var(--encre);
    transition:border-color .22s}
  .zform textarea{padding-top:4px;resize:none;line-height:1.6}
  .zform input:focus,.zform textarea:focus{outline:0;border-bottom-color:var(--cuivre)}
  .zform input::placeholder,.zform textarea::placeholder{color:#A8A49B}

  /* --- envoi : œuf creux à la flèche (même geste que Compte/Devis et le carrousel) --- */
  .zform .envoi{margin-top:10px}
  .zform .oeuf{display:inline-flex;align-items:center;gap:20px;background:transparent;border:0;padding:0;cursor:pointer;
    color:var(--encre);font-family:inherit;text-align:left}
  .zform .oeuf .ic{flex:none;width:62px;height:50px;border:1.6px solid var(--cuivre);
    border-radius:60% 40% 42% 58% / 54% 52% 48% 46%;display:flex;align-items:center;justify-content:center;
    color:var(--cuivre);transition:background .25s,color .25s,transform .25s}
  .zform .oeuf .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .zform .oeuf:hover .ic{background:var(--cuivre);color:#fff;transform:translateX(3px)}
  .zform .oeuf .lbl{font-family:"Montserrat",sans-serif;font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.13em;
    transition:color .25s}
  .zform .oeuf:hover .lbl{color:var(--cuivre)}
  .zform .oeuf .delai{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--acier);font-weight:400}
  .zform .oeuf:focus-visible .ic{outline:1.5px solid var(--cuivre);outline-offset:4px}

  /* --- page Compte : bloc d'ouverture de compte --- */
  .zform .flabel{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cuivre)}
  /* --- page Compte : carte centrée (connexion / création) --- */
  .zform .carte{max-width:440px;margin:8px auto 0}
  .zform .carte h2{text-align:center;white-space:normal;font-size:clamp(1.55rem,2.6vw,2rem)}
  .zform .carte form{margin-top:40px;gap:26px;max-width:none}
  .zform .lien{font-family:"Montserrat",sans-serif;font-size:14.5px;font-weight:400;letter-spacing:0;
    text-transform:none;color:var(--encre);text-decoration:none;justify-self:start;margin-top:-14px;
    transition:color .22s}
  .zform .lien:hover{color:var(--cuivre)}
  .zform .check{display:flex;align-items:center;gap:12px;margin:-6px 0 0;cursor:pointer;
    font-family:"Montserrat",sans-serif;font-size:14.5px;font-weight:400;letter-spacing:0;
    text-transform:none;color:var(--encre)}
  .zform .check input{flex:none;width:15px;height:15px;margin:0;accent-color:var(--cuivre);cursor:pointer}
  .zform .actions{display:grid;gap:14px;margin-top:8px}
  .zform .pilule{width:100%;padding:19px 24px;cursor:pointer;
    border:1.6px solid var(--cuivre);background:transparent;color:var(--encre);
    border-radius:38px 32px 36px 40px / 32px 30px 33px 29px;
    font-family:"Montserrat",sans-serif;font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
    transition:background .25s,color .25s,border-color .25s}
  .zform .pilule:hover{background:var(--cuivre);color:#fff}
  .zform .pilule.plein{background:var(--cuivre);color:#fff}
  .zform .pilule.plein:hover{background:var(--encre);border-color:var(--encre)}
  .zform .carte .delai{text-align:center}
  .zform .delai:empty{display:none}

  /* --- formulaires actifs : intro/pied de la carte Compte, leurre anti-robot, retours d'envoi --- */
  .zform .carte .intro-compte{text-align:center;font-size:1rem;line-height:1.65;margin-top:18px}
  .zform .carte .note-compte{text-align:center;font-size:.92rem;line-height:1.6;margin-top:26px;color:var(--acier)}
  .zform .carte .note-compte a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--trait)}
  .zform .carte .note-compte a:hover{color:var(--cuivre);border-bottom-color:var(--cuivre)}
  .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .zform .delai.ok{color:var(--cuivre)}
  .zform .delai.ko{color:#B03A2E}
  .zform form.envoi-encours{opacity:.55;pointer-events:none}
  [hidden]{display:none!important}

  @media(max-width:860px){.zform .joindre{grid-template-columns:1fr;gap:26px}}
  @media(max-width:640px){.zform .duo{grid-template-columns:1fr}.zform .demi{max-width:none}}
  .zform .etroit{max-width:430px}

  /* --- état actif du menu (page courante) --- */
  nav a.on{border-color:var(--cuivre)}
  .acct a.on .ic{background:var(--cuivre);border-color:var(--cuivre);color:#fff}


/* ---------- PAGE SERVICES ---------- */
#services-page h1{max-width:none}
#services-page .tete .sous{max-width:none}
.svc-anch{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:11px clamp(19px,2.4vw,34px);
  margin-top:40px;padding-bottom:8px}
.svc-anch a{position:relative;display:inline-block;white-space:nowrap;text-decoration:none;font-family:"Montserrat",sans-serif;
  font-size:clamp(11px,1.10vw,15.8px);font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--acier);
  padding-bottom:0;border-bottom:0}
/* filet identique aux maillons du hero : rien d'autre ne bouge */
.svc-anch a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--cuivre);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  transition:right .4s cubic-bezier(.2,.7,.3,1)}
.svc-anch a:hover::after,.svc-anch a:focus-visible::after{right:0}
.svc-liste{display:grid;gap:clamp(4px,1vw,14px);margin-top:30px}
.svc-b{scroll-margin-top:110px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,86px);align-items:center;padding:clamp(28px,4vh,54px) 0}
.svc-b .sym{order:2;display:flex;justify-content:center}
.svc-b:nth-of-type(even) .sym{order:-1}
.svc-b .sym svg{width:clamp(150px,15vw,208px);height:auto;fill:none;stroke:var(--encre);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-b .sym .cu{stroke:var(--cuivre)}
.svc-b h2{font-family:"Montserrat",sans-serif;font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.12;max-width:none}
.svc-b p{margin-top:26px;padding-top:26px;border-top:1px solid var(--trait);
  max-width:44ch;color:var(--acier);font-size:16.5px;line-height:1.74}
.svc-pill{display:inline-flex;align-items:center;gap:16px;margin-top:26px;background:#EBE8E1;border:0;border-radius:100px;
  padding:15px 27px;text-decoration:none;font-family:"Montserrat",sans-serif;font-size:12.2px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre);transition:.2s}
.svc-pill:hover{background:var(--encre);color:var(--papier)}
.svc-pill svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media(max-width:1300px){.svc-anch{gap:clamp(16px,1.85vw,27px)}}
@media(max-width:900px){#services-page .tete .sous br,#services .sous br{display:none}}
@media(max-width:860px){.svc-anch{flex-wrap:wrap;justify-content:flex-start;gap:9px 22px}.svc-anch a{font-size:13.4px}}
@media(max-width:900px){.svc-b{grid-template-columns:1fr;gap:30px}.svc-b .sym,.svc-b:nth-of-type(even) .sym{order:-1;justify-content:flex-start}}

/* Les intitules traduits sont plus longs qu'en francais : sur telephone, la rangee
   d'ancres de la page Services passe a la ligne au lieu de deborder. */
@media(max-width:480px){.svc-anch a{white-space:normal}}

/* Sur les petits telephones, aucun titre ne reste sur une ligne forcee :
   « Nos realisations. » debordait a 320 px. */
@media(max-width:520px){.bloc h2,.tete h2,#realisations h2{white-space:normal}}

/* Sur telephone, la hauteur du hero se reduit et le repere « defiler » venait
   se poser sur la signature : on l'enleve, le geste est evident sur mobile. */
@media(max-width:640px){.scroll-hint{display:none}}

/* Les intitules de menu allemands, italiens et espagnols sont plus larges que les
   francais : ils debordaient la barre juste au-dessus du seuil de bascule au burger.
   On resserre la rangee pour ces langues, et uniquement la ou la nav est affichee :
   en dessous de 1281 px c'est le burger, et les reglages mobiles doivent primer. */
@media(min-width:1281px){
  html[lang="de"] nav ul,
  html[lang="it"] nav ul,
  html[lang="es"] nav ul{gap:clamp(18px,1.9vw,26px)}
  html[lang="de"] nav a,
  html[lang="it"] nav a,
  html[lang="es"] nav a{font-size:13.2px;letter-spacing:.10em}
  html[lang="de"] .acct,
  html[lang="it"] .acct,
  html[lang="es"] .acct{gap:20px;margin-left:22px}
}