@font-face{font-family:'Switzer';src:url(fonts/switzer-variable.woff2) format('woff2-variations'),url(fonts/switzer-variable.woff2) format('woff2');font-weight:300 700;font-display:swap;}
@font-face{font-family:'Hanken Grotesk';src:url(fonts/hanken-grotesk-latin.woff2) format('woff2');font-weight:300 700;font-display:swap;}
@font-face{font-family:'Fragment Mono';src:url(fonts/fragment-mono-latin.woff2) format('woff2');font-display:swap;}
:root{--nav-h:64px;--ink:#0b0b0c;--paper:#fff;--paper2:#eef0f4;--accent:#728BFA;--muted:#6f7076;--hair:#dcdde0;--pad:clamp(20px,4vw,56px);--ease-out:cubic-bezier(.16,1,.3,1);}
*{box-sizing:border-box}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body{font-family:'Hanken Grotesk',"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px;}
a{color:inherit;}
img{max-width:100%;display:block;}
/* bandeau */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);}
.logo{display:flex;align-items:center;color:#fff;text-decoration:none;flex:none;}
.logo svg{display:block;width:clamp(74px,6vw,92px);height:auto;}
.nav ul{display:flex;gap:clamp(18px,2.6vw,40px);list-style:none;margin:0;padding:0;white-space:nowrap;}
.nav a.link{position:relative;display:inline-block;padding:.5rem 0;color:rgba(255,255,255,.62);text-decoration:none;font-size:15px;letter-spacing:.005em;transition:color .24s linear;--brk-bras:.4375rem;--brk-marge:.3125rem;--brk-coin:linear-gradient(#000 0 0) no-repeat;}
.nav a.link:hover,.nav a.link[aria-current]{color:#fff;}
.nav a.link::before,.nav a.link::after{content:"";position:absolute;inset:calc(var(--brk-marge) * -1);border:max(1.4px,calc(var(--brk-bras) * .233)) solid #fff;border-radius:calc(var(--brk-bras) * .444 + var(--brk-marge));opacity:0;pointer-events:none;scale:.94;transition:opacity .24s linear,scale .48s var(--ease-out);}
.nav a.link::before{-webkit-mask:var(--brk-coin) top left/var(--brk-bras) var(--brk-bras),var(--brk-coin) top right/var(--brk-bras) var(--brk-bras),var(--brk-coin) bottom left/var(--brk-bras) var(--brk-bras);mask:var(--brk-coin) top left/var(--brk-bras) var(--brk-bras),var(--brk-coin) top right/var(--brk-bras) var(--brk-bras),var(--brk-coin) bottom left/var(--brk-bras) var(--brk-bras);}
.nav a.link::after{border-color:var(--accent);-webkit-mask:var(--brk-coin) bottom right/var(--brk-bras) var(--brk-bras);mask:var(--brk-coin) bottom right/var(--brk-bras) var(--brk-bras);}
@media (hover:hover){.nav a.link:hover::before,.nav a.link:hover::after{opacity:1;scale:1;}}
/* typographie */
.label{font-family:'Fragment Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;}
.mono{font-family:'Fragment Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;}
.display{font-family:'Switzer',"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance;}
h1.display{font-size:clamp(38px,5.4vw,72px);letter-spacing:-.04em;line-height:1;}
h2.display{font-size:clamp(28px,3.4vw,46px);}
h3.display{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;}
.lead{font-size:clamp(17px,1.25vw,20px);line-height:1.5;color:var(--muted);max-width:52ch;margin:0;text-wrap:pretty;}
.prose p{margin:0 0 1em;color:var(--muted);max-width:60ch;text-wrap:pretty;}
.prose p:last-child{margin-bottom:0;}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;font-weight:500;text-decoration:none;transition:transform .24s cubic-bezier(.25,1,.5,1),opacity .24s linear;}
@media (hover:hover){.btn:hover{transform:translateY(-1px);}}
.btn:active{transform:translateY(0);opacity:.85;}
.lien{position:relative;display:inline-block;padding-bottom:2px;color:inherit;text-decoration:none;}
.lien::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);}
@media (hover:hover){.lien:hover::after{transform-origin:left;animation:lien-balayage .48s var(--ease-out);}}
@keyframes lien-balayage{0%{transform:scaleX(1);transform-origin:right;}49%{transform:scaleX(0);transform-origin:right;}51%{transform:scaleX(0);transform-origin:left;}100%{transform:scaleX(1);transform-origin:left;}}
/* gabarit de page */
main{padding-top:var(--nav-h);}
.entete-page{padding:clamp(48px,8vh,96px) var(--pad) clamp(32px,5vh,56px);display:grid;gap:clamp(18px,2vw,28px);max-width:1180px;margin:0 auto;}
.entete-page .lead{max-width:46ch;}
@media (min-width:64rem){.entete-page{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;}.entete-page .lead{justify-self:end;}}
.section{padding:clamp(40px,7vh,80px) var(--pad);}
.section--gris{background:var(--paper2);}
.shell{max-width:1180px;margin:0 auto;}
.tete{display:grid;gap:clamp(16px,2vw,32px);margin-bottom:clamp(28px,4vh,44px);}
@media (min-width:64rem){.tete{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:end;}}
/* pied */
.pied{position:relative;z-index:1;background:var(--paper);padding:clamp(48px,7vh,80px) var(--pad) clamp(28px,4vh,40px);color:var(--ink);}
.pied__rule{border:0;border-top:1px solid var(--hair);margin:0 0 clamp(40px,6vh,64px);}
.pied__haut{display:grid;gap:clamp(40px,6vw,64px);grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);align-items:start;}
.pied__marque svg{display:block;width:140px;height:auto;color:var(--ink);}
.pied__baseline{margin-top:16px;max-width:24ch;text-transform:none;letter-spacing:.02em;}
.pied__apropos{margin:20px 0 0;max-width:38ch;font-size:16px;line-height:1.5;color:var(--muted);}
.pied__cols{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;margin-left:auto;}
.pied__liste{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:16px;}
.pied__zone{color:var(--muted);}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:clamp(40px,7vh,64px);padding-top:20px;border-top:1px solid var(--hair);}
.pied__bas .mono{text-transform:none;letter-spacing:.04em;}
/* réalisations */
.projets{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,6vh,72px);max-width:960px;}
.projet figure{margin:0;display:grid;gap:16px;}
.projet__scene{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper2);border:1px solid var(--hair);}
.projet__scene img{width:100%;height:100%;object-fit:contain;}
.projet__meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:baseline;}
.projet__nom{font-family:'Switzer',"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;}
.projet__secteur{color:var(--muted);}
/* tarifs */
.paliers{display:grid;gap:0;border-top:1px solid var(--hair);}
.palier{display:grid;gap:10px;padding:clamp(24px,3vh,32px) 0;border-bottom:1px solid var(--hair);}
.palier__prix{font-family:'Switzer',"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1;}
.palier__detail{color:var(--muted);max-width:34ch;}
@media (min-width:48rem){.paliers{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,40px);}.palier{border-bottom:1px solid var(--hair);}}
.note{margin:20px 0 0;text-transform:none;letter-spacing:.02em;}
.abos{display:grid;gap:0;border-top:1px solid var(--hair);}
.abo{display:grid;gap:14px;padding:clamp(24px,3vh,32px) 0;border-bottom:1px solid var(--hair);align-content:start;}
.abo__prix{font-family:'Switzer',"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;line-height:1;}
.abo__prix small{font-family:'Hanken Grotesk',sans-serif;font-size:16px;letter-spacing:0;color:var(--muted);margin-left:8px;font-weight:400;}
.abo ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--muted);font-size:16px;}
@media (min-width:48rem){.abos{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,40px);}}
.suite{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;}
.suite p{margin:0;color:var(--muted);}
/* about */
.about-grille{display:grid;gap:clamp(16px,2vw,32px);}
@media (min-width:64rem){.about-grille{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;}}
.section--encre{background:var(--ink);color:#fff;}
.section--encre .display{color:#fff;}
.arguments{list-style:none;margin:0;padding:0;}
.arguments li{display:grid;gap:8px;padding:clamp(18px,2vh,24px) 0;border-top:1px solid rgba(255,255,255,.14);}
.arguments li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.arguments strong{font-family:'Switzer',"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;font-size:clamp(18px,1.3vw,21px);letter-spacing:-.015em;line-height:1.3;}
.arguments span{color:rgba(255,255,255,.66);font-size:16px;line-height:1.5;max-width:56ch;}
@media (max-width:48rem){
  :root{--nav-h:56px;}
  .logo svg{width:70px;}
  .nav ul{gap:16px;}
  .nav a.link{font-size:14px;padding:.75rem 0;}
  .pied__haut{grid-template-columns:1fr;}
  .pied__cols{grid-template-columns:1fr 1fr;}
}
@media (max-width:22rem){.nav a.link{font-size:13px;}.nav ul{gap:12px;}}

/* contact */
.contact{display:grid;gap:clamp(32px,5vw,64px);padding:clamp(48px,8vh,96px) var(--pad) clamp(48px,8vh,96px);max-width:1180px;margin:0 auto;}
@media (min-width:64rem){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}}
.faits{list-style:none;margin:clamp(28px,4vh,40px) 0 0;padding:0;display:grid;}
.faits li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-top:1px solid var(--hair);font-size:16px;}
.faits li:last-child{border-bottom:1px solid var(--hair);}
.form{display:grid;gap:22px;max-width:34rem;}
.champ{display:grid;gap:8px;}
.champ label{font-family:'Fragment Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.champ label small{text-transform:none;letter-spacing:0;}
.champ input,.champ textarea{width:100%;background:var(--paper2);border:0;border-bottom:1px solid var(--hair);border-radius:2px 2px 0 0;padding:.75rem .75rem;font:inherit;font-size:max(1rem,16px);color:var(--ink);}
.champ input:focus-visible,.champ textarea:focus-visible{outline:none;border-color:var(--ink);}
.champ textarea{min-height:7rem;resize:vertical;}
.champ input::placeholder{color:color-mix(in oklab,var(--ink) 44%,var(--paper));}
.form__pied{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:6px;}
.form__pied p{margin:0;font-size:15px;color:var(--muted);}
.leurre{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
/* appel de fin */
.appel{padding:clamp(48px,9vh,96px) var(--pad);}
.appel .shell{display:grid;gap:clamp(18px,2.4vh,28px);justify-items:start;max-width:1180px;}
.appel h2{font-size:clamp(26px,3vw,40px);}
@media (max-width:48rem){.nav ul{gap:12px;}.nav a.link{font-size:13.5px;}.pied__cols{margin-left:0;max-width:none;}}

/* réalisations : visuel et texte en alternance */
.realisations{list-style:none;margin:0;padding:0;display:grid;gap:0;}
/* un projet par écran : chaque bloc occupe la hauteur de la fenêtre, contenu centré */
.realisation{display:grid;gap:clamp(20px,3vw,48px);align-items:center;align-content:center;min-height:calc(100svh - var(--nav-h));padding-block:clamp(24px,4vh,48px);}
.realisation__visuel{aspect-ratio:16/10;background:var(--paper2);border:1px solid var(--hair);border-radius:2px;position:relative;}
.realisation__visuel .mono{position:absolute;left:14px;bottom:12px;font-size:11px;color:color-mix(in oklab,var(--ink) 45%,var(--paper));text-transform:uppercase;}
.realisation__texte{display:grid;gap:14px;max-width:44ch;}
.realisation__texte .mono{color:var(--accent);}
.realisation__texte h2.display{font-size:clamp(24px,2.4vw,34px);}
.realisation__texte p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;}
@media (min-width:64rem){
  .realisation{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .realisation--inverse .realisation__visuel{order:2;}
  .realisation--inverse .realisation__texte{order:1;justify-self:end;}
}

/* services */
.services{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(2,minmax(0,1fr));}
.services--trois{grid-template-columns:repeat(3,minmax(0,1fr));}
.services--quatre{grid-template-columns:repeat(4,minmax(0,1fr));}
.service{display:grid;gap:12px;align-content:start;padding:clamp(20px,2.4vw,32px);background:var(--paper);border:1px solid var(--hair);border-radius:2px;}
.section--gris .service{background:var(--paper);}
.section:not(.section--gris) .service{background:var(--paper2);border-color:transparent;}
.service .mono{color:var(--accent);}
.service h3.display{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;}
.service p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;}
.service--court h3.display{font-size:clamp(18px,1.4vw,21px);}
@media (max-width:64rem){.services,.services--trois,.services--quatre{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:48rem){.services,.services--trois,.services--quatre{grid-template-columns:1fr;}}

/* écrans : un bloc par écran et ancrage obligatoire, même principe que l'accueil et les réalisations */
.ecran{box-sizing:border-box;min-height:calc(100svh - var(--nav-h));display:grid;align-content:center;padding:clamp(24px,4vh,48px) var(--pad);}
.ecran > .shell{width:100%;}
.ecran--gris{background:var(--paper2);}
.ecran--encre{background:var(--ink);color:#fff;}
.ecran--encre .display,.ecran--encre .lead{color:#fff;}
.ecran--encre .lead{color:rgba(255,255,255,.66);}
.ecran .entete-page{padding:0;}
.ecran .tete{margin-bottom:clamp(18px,3vh,32px);}
.ecran--entete{position:relative;}
.ecran--entete .fleche{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);}
.fleche{display:block;color:var(--accent);}
.fleche svg{display:block;animation:fleche-descend 2s ease-in-out infinite;}
@keyframes fleche-descend{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(5px);opacity:1;}}
html.snap{scroll-snap-type:y mandatory;}
html.snap .ecran{scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:var(--nav-h);}
html.snap .pied{scroll-snap-align:end;}
[data-parallaxe]{will-change:transform;}
@media (prefers-reduced-motion:reduce){html.snap{scroll-snap-type:y proximity;}[data-parallaxe]{transform:none !important;}.fleche svg{animation:none;}}

/* cartes compactes, comme la section « approche » de l'accueil */
.services--six{grid-template-columns:repeat(3,minmax(0,1fr));}
.ecran .service{gap:8px;padding:clamp(16px,1.6vw,22px);}
.ecran .service h3.display{font-size:clamp(17px,1.2vw,20px);line-height:1.15;}
.ecran .service p{font-size:14.5px;line-height:1.5;}
.ecran .service .mono{font-size:11px;}
.ecran--gris .service{background:var(--paper);border-color:var(--hair);}
.ecran--encre .service{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);}
.ecran--encre .service h3.display{color:#fff;}
.ecran--encre .service p{color:rgba(255,255,255,.66);}
@media (max-width:64rem){.services--six{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:48rem){.services--six{grid-template-columns:1fr;}}

/* duo : visuel gris et texte côte à côte, comme une réalisation */
.duo{display:grid;gap:clamp(20px,3vw,48px);align-items:center;}
.duo__visuel{aspect-ratio:16/10;background:var(--paper2);border:1px solid var(--hair);border-radius:2px;position:relative;}
.duo__visuel--portrait{aspect-ratio:4/5;width:min(100%,360px);}
.duo__visuel .mono{position:absolute;left:14px;bottom:12px;font-size:11px;color:color-mix(in oklab,var(--ink) 45%,var(--paper));}
.duo__texte{display:grid;gap:14px;max-width:48ch;}
.duo__texte .mono{color:var(--accent);}
.duo__texte h2.display{font-size:clamp(24px,2.4vw,34px);}
.duo__texte p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;}
@media (min-width:64rem){.duo{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}.duo__visuel--portrait{height:clamp(360px,calc(100svh - var(--nav-h) - 2*clamp(24px,4vh,48px) - 48px),640px);width:auto;max-width:100%;justify-self:start;}}
.ecran--encre .duo__visuel{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}

/* appel final : label et titre à gauche, texte et bouton à droite, comme sur l'accueil */
.appel__grille{display:grid;gap:clamp(18px,2.4vw,40px);align-items:end;}
.appel__grille h2.display{font-size:clamp(28px,3.4vw,46px);margin-top:14px;}
.appel__droite{display:grid;gap:clamp(18px,2vh,26px);justify-items:start;}
.appel__droite p{margin:0;color:var(--muted);font-size:clamp(17px,1.25vw,20px);line-height:1.5;max-width:46ch;}
@media (min-width:64rem){.appel__grille{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}}

/* contact : la grille tient dans l'écran */
.ecran .contact{padding:0;width:100%;}
.ecran .form{gap:14px;}
.ecran .champ{gap:6px;}
.ecran .champ input,.ecran .champ textarea{padding:.6rem .7rem;}
.ecran .champ textarea{min-height:5.5rem;}
.ecran .faits{margin-top:clamp(20px,3vh,32px);}
.ecran .faits li{padding:.6rem 0;}

/* contact sur écran bas : titre et champs resserrés pour rester sur un écran */
@media (max-height:820px) and (min-width:64rem){.ecran .contact h1.display{font-size:clamp(32px,4vw,52px);}.ecran .contact .lead{font-size:16px;margin-top:16px !important;}.ecran .champ textarea{min-height:4.5rem;}.ecran .faits li{padding:.45rem 0;font-size:15px;}}
.champ{margin:0;}
.champ input,.champ textarea{line-height:1.3;}
@media (max-width:48rem){[data-parallaxe]{transform:none !important;}.ecran--entete .fleche{bottom:16px;}}