/* ==========================================================================
   NOLT DIGITAL
   Papier chaud, cartes blanches, bandeau taupe ; accents lavande et jaune
   repris du logotype (deux barres arrondies).
   ========================================================================== */

:root{
  --paper:    #F4F1EC;
  --card:     #FFFFFF;
  --sand:     #E9E3D8;
  --taupe:    #B7AD9A;
  --taupe-lt: #D7D0C3;
  --ink:      #1E1B16;
  --ink-dim:  #5F594F;
  --lav:      #A39BF3;
  --lav-soft: #ECEAFD;
  --lav-deep: #4F45C9;
  --yel:      #F9DF3F;
  --yel-soft: #FDF6C8;
  --rule:     rgba(30,27,22,.12);

  --radius:   18px;
  --radius-s: 10px;
  --wrap:     1200px;
  --gut:      clamp(16px, 4vw, 48px);
  --navh:     80px;
  --ff-d:     "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-t:     "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:var(--navh); -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-t); font-size:clamp(16.5px,.3vw + 15.5px,18.5px); line-height:1.75;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--ff-d); font-weight:700; line-height:1.14; letter-spacing:-.01em; margin:0 }
p{ margin:0 }
a{ color:inherit }
img,svg{ display:block }
.sprite{ position:absolute; width:0; height:0; overflow:hidden }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut) }

.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:8px 14px; border-radius:8px }
.skip:focus{ left:8px }
:focus-visible{ outline:3px solid var(--lav-deep); outline-offset:3px; border-radius:4px }

.eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:26px;
}

/* --- boutons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border-radius:999px; border:1.5px solid var(--ink);
  background:var(--ink); color:#fff; font:600 1rem/1 var(--ff-t); text-decoration:none;
  cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px) }
.btn--ghost{ background:transparent; color:var(--ink) }
.btn--ghost:hover{ background:var(--card) }
.btn--yel{ background:var(--yel); border-color:var(--yel); color:var(--ink) }
.btn--sm{ min-height:40px; padding:0 18px; font-size:.92rem }

/* --- navigation ------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--navh);
  background:var(--paper);
  transition:box-shadow .2s ease;
}
.nav.is-stuck{ box-shadow:0 10px 24px -20px rgba(60,48,30,.45) }
.nav__in{ height:100%; display:flex; align-items:center; gap:32px }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none }
.brand__tile{ display:grid; place-items:center }
.brand__tile svg{ width:50px; height:47px }
.brand__txt{ font:700 1.45rem/1 var(--ff-d); letter-spacing:-.015em }
.nav__links{ display:flex; gap:28px; margin-left:auto }
.nav__links a{ text-decoration:none; font-weight:500; font-size:.96rem; color:var(--ink-dim); transition:color .2s }
.nav__links a:hover{ color:var(--ink) }
.nav__cta-m{ display:none }
.nav__act{ display:flex; align-items:center; gap:14px }
.burger{ display:none; margin-left:auto; width:44px; height:44px; border:0; background:none; cursor:pointer; position:relative }
.burger span{ position:absolute; left:11px; right:11px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease }
.burger span:first-child{ top:17px }
.burger span:last-child{ top:25px }
.nav.is-open .burger span:first-child{ transform:translateY(4px) rotate(45deg) }
.nav.is-open .burger span:last-child{ transform:translateY(-4px) rotate(-45deg) }

/* --- héros ------------------------------------------------------------------ */
.hero{ padding:clamp(96px,13vw,184px) 0 clamp(72px,9vw,128px); overflow:hidden }
.hero__txt{ max-width:940px }
.hero h1{ font-size:clamp(2.5rem,5vw + .4rem,4.6rem); line-height:1.12; letter-spacing:-.02em }
.hero h1 mark{
  background:linear-gradient(transparent 58%, var(--yel) 58%, var(--yel) 90%, transparent 90%);
  color:inherit; padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero__sub{ margin-top:36px; max-width:38em; color:var(--ink-dim); font-size:1.08em }
.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:48px }

/* --- sections --------------------------------------------------------------- */
.sec{ padding:clamp(96px,12vw,176px) 0 }
.sec--sand{ background:var(--sand) }
.sec--ink{ background:var(--ink); color:#F4F1EC }
.sec--ink .eyebrow{ color:#B8B1A4 }
.sec__head{ max-width:760px; margin-bottom:clamp(48px,6vw,88px) }
.sec__head h2,.contact h2{ font-size:clamp(2rem,3.4vw + .5rem,3.3rem) }
.sec__lead{ margin-top:28px; color:var(--ink-dim); font-size:1.05em }

/* grille des expertises */
.grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px }
.xp{
  display:flex; flex-direction:column; background:var(--card); border-radius:var(--radius);
  padding:40px 36px 36px; box-shadow:0 0 0 1px var(--rule); transition:transform .25s ease, box-shadow .25s ease;
}
.xp:hover{ transform:translateY(-4px); box-shadow:0 0 0 1px var(--rule), 0 22px 40px -26px rgba(60,48,30,.45) }
.xp__top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:36px }
.xp__ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center }
.xp__ic svg{ width:26px; height:26px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.xp__ic--lav{ background:var(--lav-soft) }
.xp__ic--lav svg{ stroke:var(--lav-deep) }
.xp__ic--yel{ background:var(--yel-soft) }
.xp__n{ font:600 .85rem/1 var(--ff-d); color:var(--ink-dim); letter-spacing:.06em }
.xp h3{ font-size:1.4rem; line-height:1.25; letter-spacing:-.005em }
.xp p{ margin-top:18px; color:var(--ink-dim); font-size:.98rem; line-height:1.75; flex:1 }
.chips{ list-style:none; margin:32px 0 0; padding:24px 0 0; border-top:1px dashed var(--rule); display:flex; flex-wrap:wrap; gap:8px }
.chips li{ padding:6px 12px; border-radius:999px; background:var(--paper); font-size:.84rem; font-weight:500; line-height:1.3 }

/* méthode */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; counter-reset:none }
.steps li{ position:relative; padding-top:36px; border-top:2px solid var(--ink) }
.steps__n{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px; margin-bottom:22px;
  font:700 1.1rem/1 var(--ff-d); background:var(--card); transform:rotate(-8deg);
}
.steps li:nth-child(odd) .steps__n{ background:var(--lav); color:var(--ink) }
.steps li:nth-child(even) .steps__n{ background:var(--yel) }
.steps h3{ font-size:1.3rem }
.steps p{ margin-top:14px; color:var(--ink-dim); font-size:.97rem }

/* pourquoi */
.why{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(32px,6vw,80px); align-items:start }
.why .sec__head{ margin-bottom:0; position:sticky; top:calc(var(--navh) + 32px) }
.why__list{ list-style:none; margin:0; padding:0 }
.why__list li{ padding:40px 0; border-top:1px solid var(--rule) }
.why__list li:last-child{ border-bottom:1px solid var(--rule) }
.why__list h3{ font-size:1.45rem; display:flex; align-items:center; gap:14px }
.why__list h3::before{ content:""; flex:none; width:22px; height:8px; border-radius:6px; background:var(--lav); transform:rotate(-24deg) }
.why__list li:nth-child(2) h3::before{ background:var(--yel) }
.why__list p{ margin-top:14px; padding-left:36px; color:var(--ink-dim) }

/* contact */
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(36px,6vw,80px); align-items:start }
.contact__txt > p:not(.eyebrow){ margin-top:28px; color:#C9C2B5; max-width:28em }
.contact__mail{ display:inline-block; margin-top:28px; font:600 1.15rem/1.2 var(--ff-d); text-decoration:none; border-bottom:3px solid var(--yel); padding-bottom:4px; word-break:break-all }
.form{ display:grid; gap:22px; background:#2A261F; border-radius:var(--radius); padding:clamp(22px,3vw,34px) }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px }
.form label{ display:grid; gap:8px; font-size:.88rem; font-weight:500; color:#D8D1C4 }
.form input,.form select,.form textarea{
  width:100%; font:400 1rem/1.4 var(--ff-t); color:#fff; background:#1E1B16;
  border:1px solid #47413A; border-radius:var(--radius-s); padding:12px 14px; transition:border-color .2s;
}
.form select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,#B8B1A4 50%),linear-gradient(135deg,#B8B1A4 50%,transparent 50%); background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--lav) }
.form textarea{ resize:vertical; min-height:130px }
.form .btn{ justify-self:start; margin-top:6px }
.hp{ position:absolute; left:-9999px }

/* pied */
.foot{ background:var(--ink); color:#B8B1A4; border-top:1px solid #36312A }
.foot__in{ padding-top:28px; padding-bottom:28px; text-align:center; font-size:.88rem }

/* page merci */
.thanks{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:40px var(--gut) }
.thanks .brand__tile{ margin:0 auto 28px }
.thanks .brand__tile svg{ width:86px; height:80px }
.thanks h1{ font-size:clamp(2rem,5vw,3rem) }
.thanks p{ margin:16px auto 30px; color:var(--ink-dim); max-width:30em }

/* révélation */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } }

/* --- responsive ------------------------------------------------------------- */
@media (max-width:1020px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:56px }
}
@media (max-width:880px){
  .hero__in{ grid-template-columns:1fr }
  .why,.contact{ grid-template-columns:1fr }
  .why .sec__head{ position:static }
}
@media (max-width:760px){
  .burger{ display:block }
  .nav__act .btn{ display:none }
  .nav__act{ margin-left:auto; order:2 }
  .burger{ margin-left:0; order:3 }
  .nav__links{
    position:fixed; top:var(--navh); left:0; right:0; margin:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule); padding:8px var(--gut) 20px;
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:all .2s ease;
  }
  .nav.is-open .nav__links{ transform:none; opacity:1; visibility:visible }
  .nav__links a{ padding:14px 0; font-size:1.1rem; color:var(--ink); border-bottom:1px solid var(--rule) }
  .nav__cta-m{ display:block }
}
@media (max-width:620px){
  .grid,.steps{ grid-template-columns:1fr }
  .form__row{ grid-template-columns:1fr }
  .xp{ padding:30px 26px }
  .grid{ gap:20px }
  .hero__cta .btn{ flex:1 1 100% }
}