@font-face{font-family:"Jost";font-weight:300;font-style:normal;font-display:swap;src:url("/assets/fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2")}

/* Layout : beaucoup d'air, titres fins, bandes alternées ; version claire uniquement, par choix */
:root{
  --ivoire:#faf8f3; --lin:#f0ebe1; --encre:#262b26; --vert:#41553d; --doux:#6b6f68; --trait:#e1dbcf;
  --sauge:#7c917d; --sauge-pale:#dfe6db; --sable:#e9dccb; --terre:#b26a49; --surligne:#f6e3b4;
  --titre:"Jost", "Futura", "Segoe UI", sans-serif; --texte:"Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ivoire);color:var(--encre);font-family:var(--texte);font-size:16px;line-height:1.7}
.in{max-width:1140px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--titre);font-weight:300;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
a{color:inherit} :focus-visible{outline:2px solid var(--sauge);outline-offset:4px}
.sur{font-family:var(--titre);font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--sauge)}
.demo{background:var(--vert);color:var(--ivoire);font-size:13px;text-align:center;padding-block:7px}
header{border-bottom:1px solid var(--trait)}
header .in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:14px}
.logo img{display:block;height:70px;width:auto}
nav{display:flex;gap:30px;font-size:14px;letter-spacing:.04em;color:var(--doux);flex-wrap:wrap}
nav a{text-decoration:none} nav a:hover,nav a.actif{color:var(--encre)}
nav a.actif{border-bottom:1px solid var(--sauge)}
.cta{display:inline-flex;align-items:center;gap:12px;font-family:var(--titre);font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:15px 26px;background:var(--vert);color:var(--ivoire);transition:background .2s;border:0;cursor:pointer}
.cta:hover{background:var(--sauge)}
.cta.fin{background:none;color:var(--encre);border:1px solid var(--encre);padding:11px 20px}
.cta.fin:hover{background:var(--vert);border-color:var(--vert);color:var(--ivoire)}
.fleche{transition:transform .2s}.cta:hover .fleche,.voir:hover .fleche{transform:translateX(4px)}
.voir{display:inline-flex;gap:10px;font-family:var(--titre);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--vert);text-decoration:none;margin-top:6px}
.hero{padding-block:72px 96px}
.hero h1{font-size:clamp(44px,6.6vw,92px);max-width:11ch;margin-top:22px}
.hero-grille{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.hv-fiche{display:grid;gap:10px;align-self:center;border-left:1px solid var(--trait);padding-left:40px}
.hv-fiche dl{margin:0;display:grid;gap:0}
.hv-fiche dl div{padding-block:12px}
.hv-fiche dl div+div{border-top:1px solid var(--trait)}
.hv-fiche dt{font-family:var(--titre);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sauge)}
.hv-fiche dd{margin:4px 0 0;font-family:var(--titre);font-size:20px;font-weight:300;line-height:1.35}

.hero h1 b{font-weight:400;color:var(--sauge)}
.hero-bas{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-top:48px;padding-top:28px;border-top:1px solid var(--trait)}
.hero-bas p{max-width:46ch;color:var(--doux);font-size:18px;margin:0}
.atouts{background:var(--lin);padding-block:72px}
.atouts .in{display:grid;grid-template-columns:1fr 2fr;gap:56px}
.atouts h2{font-size:clamp(30px,3.6vw,44px);margin-top:14px}
.puces{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0;padding:0;list-style:none}
.puces li{padding-block:15px;border-bottom:1px solid var(--trait);display:flex;gap:16px;align-items:baseline}
.puces li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sauge);flex:none;transform:translateY(-2px)}
.services{padding-block:96px}
.services .titre{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.services .titre h2{font-size:clamp(34px,4.4vw,56px)}
.service{display:grid;grid-template-columns:1fr 1fr;min-height:280px;border-top:1px solid var(--trait);text-decoration:none}
.services .service:last-child{border-bottom:1px solid var(--trait)}
.service .texte{padding:40px 48px 40px 0;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.service h3{font-size:clamp(30px,3.4vw,44px);font-weight:400;color:var(--vert)}
.accroche{font-family:var(--titre);font-weight:300;font-size:clamp(19px,1.8vw,22px);color:var(--encre)!important;margin:0!important}
.accroche b{font-weight:400;color:var(--sauge)}
.note-li{display:block;font-family:var(--texte);font-size:13px;color:var(--doux);margin-top:2px}
.service p{margin:0;color:var(--doux);max-width:42ch}
.aplat{position:relative;overflow:hidden;min-width:0;min-height:160px}
.aplat svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s}
.service:hover .aplat svg{transform:scale(1.04)}
.services .service:nth-child(even) .texte{order:2;padding:40px 0 40px 48px}
.etapes{background:var(--sauge-pale);padding-block:80px}
.etapes h2{font-size:clamp(30px,3.6vw,44px);margin:14px 0 40px}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.trois .num{font-family:var(--titre);font-weight:300;font-size:56px;line-height:1;color:var(--sauge)}
.trois h3{font-size:22px;font-weight:400;margin:14px 0 6px}
.trois p{margin:0;color:var(--doux);font-size:15px}
.contact{padding-block:96px;text-align:center;background:var(--vert);color:var(--ivoire)}
.contact .sur{color:var(--sauge-pale)}
.contact h2{font-size:clamp(36px,5.4vw,68px);max-width:16ch;margin:16px auto 22px}
.contact p{color:#d9e0d5;max-width:48ch;margin:0 auto 36px}
.coord{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.coord div{border:1px solid rgba(250,248,243,.35);padding:18px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.coord small{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#cbd5c6}
.coord b{font-weight:500;font-size:18px;user-select:all;overflow-wrap:anywhere}
.coord button{background:none;border:0;border-bottom:1px solid var(--sauge-pale);color:var(--sauge-pale);font:500 14px var(--texte);cursor:pointer;padding:2px 0}
/* relief : bandeau défilant, atouts en mots-clés, repères, apparition au défilement */
.defile{background:var(--vert);color:var(--ivoire);overflow:hidden;padding-block:16px;white-space:nowrap}
.defile .piste{display:inline-flex;gap:40px;animation:defile 38s linear infinite;font-family:var(--titre);font-weight:300;font-size:clamp(18px,2vw,24px);letter-spacing:.06em}
.defile span::after{content:"·";margin-left:40px;color:var(--sauge-pale)}
@keyframes defile{to{transform:translateX(-50%)}}
.mots{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--trait)}
.mots div{padding:26px 24px 26px 0;border-bottom:1px solid var(--trait);min-width:0}
.mots div:not(:nth-child(3n+1)){padding-left:24px;border-left:1px solid var(--trait)}
.mots strong{display:block;font-family:var(--titre);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:var(--vert)}
.mots span{color:var(--doux);font-size:15px}
.reperes{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.reperes span{font-size:13px;letter-spacing:.04em;padding:5px 12px;border:1px solid var(--trait);background:var(--ivoire);color:var(--encre)}
.p-tete h1 b{font-weight:400;color:var(--sauge)}
.rv{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.attente{opacity:.25;transform:translateY(26px)}
/* pages de service */
.fil{padding-block:28px 0;font-size:14px;color:var(--doux)}
.fil a{text-decoration:none} .fil a:hover{color:var(--encre)}
.p-tete{position:relative;padding-block:40px 24px;isolation:isolate}
.p-tete>div:first-child{max-width:760px}
.p-filigrane{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(46%,520px);aspect-ratio:4/3;z-index:-1;opacity:.35;pointer-events:none}
.p-filigrane svg{width:100%;height:100%;display:block}

.p-tete p{margin-top:22px!important}
.p-tete h1{font-size:clamp(40px,6vw,76px);margin-top:18px}
.p-tete p{font-size:18px;color:var(--doux);margin:0;max-width:40ch}
.bande{height:220px;position:relative;overflow:hidden}
.bande svg{position:absolute;inset:0;width:100%;height:100%}
.p-corps{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;padding-block:64px}
.p-corps h2{font-size:26px;margin-bottom:10px}
.p-corps .puces{grid-template-columns:1fr}
.p-corps .puces li{font-size:19px;font-family:var(--titre);font-weight:300;padding-block:18px}
.p-corps .puces li::before{content:"✓";width:auto;height:auto;background:none;color:var(--sauge);font-family:var(--texte);font-size:15px;transform:none}
.fiche{background:var(--lin);padding:28px;align-self:start;display:grid;gap:18px}
.fiche dl{margin:0;display:grid;gap:14px}
.fiche dt{font-family:var(--titre);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--sauge)}
.fiche dd{margin:4px 0 0;font-family:var(--titre);font-size:19px;font-weight:400;line-height:1.35}
.compose{margin:0 0 14px;color:var(--doux);font-size:15px}
.p-corps .puces li.option{color:var(--doux)}
.p-corps .puces li em{font-style:normal;font-family:var(--texte);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--trait);padding:2px 8px;margin-left:8px;color:var(--sauge);white-space:nowrap}
.exclu{font-size:14px;color:var(--doux);border-top:1px solid var(--trait);padding-top:14px;margin:0}
.autres{border-top:1px solid var(--trait);padding-block:40px 72px}
.autres .liens{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.autres .liens a{border:1px solid var(--trait);padding:10px 16px;text-decoration:none;font-size:15px;background:#fff}
.autres .liens a:hover{border-color:var(--sauge)}
/* mentions */
.mentions{max-width:760px;padding-block:56px 80px}
.mentions h1{font-size:clamp(36px,5vw,56px);margin:16px 0 32px}
.mentions h2{font-size:22px;font-weight:400;margin:36px 0 10px}
.mentions p{margin:0 0 6px;color:var(--encre)}
.a-remplir{background:var(--surligne);padding:0 4px}
footer{border-top:1px solid var(--trait);padding-block:36px;font-size:13px;color:var(--doux)}
footer .in{display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:start}
footer img{height:54px;width:auto;display:block}
footer .liens{display:flex;gap:10px 24px;flex-wrap:wrap}
footer .liens a{text-decoration:none} footer .liens a:hover{color:var(--encre)}
footer .legal{grid-column:2}
@media (max-width:860px){
  nav{display:none}
  .atouts .in,.p-tete,.p-corps,.hero-grille{grid-template-columns:1fr;gap:28px}
  .hv-fiche{border-left:0;padding-left:0;border-top:1px solid var(--trait);padding-top:16px}
  .p-filigrane{width:70%;top:auto;bottom:0;transform:none;opacity:.22}
  .service{grid-template-columns:1fr;min-height:0}
  .aplat{height:140px;order:-1}
  .service .texte,.services .service:nth-child(even) .texte{order:2;padding:26px 0 34px}
  .trois{grid-template-columns:1fr;gap:28px}
  footer .in{grid-template-columns:1fr} footer .legal{grid-column:1}
}
@media (max-width:860px){.mots{grid-template-columns:1fr 1fr}.mots div,.mots div:not(:nth-child(3n+1)){padding:20px 16px 20px 0;border-left:0}.mots div:nth-child(even){padding-left:16px;border-left:1px solid var(--trait)}}
@media (max-width:560px){.puces{grid-template-columns:1fr}.logo img{height:56px}.mots{grid-template-columns:1fr}.mots div:nth-child(even){padding-left:0;border-left:0}}
@media (prefers-reduced-motion:reduce){.defile .piste{animation:none}.rv,.rv.attente{transition:none;opacity:1;transform:none}html{scroll-behavior:auto}.cta,.fleche,.aplat svg{transition:none}}

.coord a{text-decoration:none}
.coord a:hover b{text-decoration:underline;text-underline-offset:4px}
body{margin:0}