/* ============================================================
   PUTZMANN : site vitrine one page
   Charte : #231F20 charbon · #F2EA23 jaune · #CA204D framboise
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#231F20;
  --ink-deep:#14100F;
  --ink-soft:#3A3536;
  --yellow:#F2EA23;
  --yellow-deep:#D9D115;
  --crimson:#CA204D;
  --paper:#FAFAFA;
  --paper-2:#F1F0EE;
  --white:#FFFFFF;
  --line:#E2E0DD;
  --line-dark:rgba(250,250,250,.14);
  --muted:#6C6765;
  --muted-light:rgba(250,250,250,.62);

  --shell:1240px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --sec-y:clamp(4.5rem, 9vw, 8.5rem);
  --radius:2px;

  --font-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(35,31,32,.05), 0 12px 32px -12px rgba(35,31,32,.16);
  --shadow-lg:0 2px 4px rgba(35,31,32,.06), 0 32px 64px -24px rgba(35,31,32,.26);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.022em; margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}

:focus-visible{outline:3px solid var(--crimson); outline-offset:3px}

.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.skip-link{
  position:absolute; top:0; left:50%; transform:translate(-50%,-120%);
  background:var(--ink); color:var(--white); padding:.85rem 1.4rem;
  z-index:200; font-weight:600; transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0)}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}

/* ---------- 3. Boutons & liens ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display); font-weight:600; font-size:.9375rem;
  letter-spacing:.01em; line-height:1;
  padding:.9rem 1.5rem; border:1.5px solid transparent; border-radius:var(--radius);
  cursor:pointer; white-space:nowrap;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn--lg{padding:1.125rem 2rem; font-size:1rem}
.btn--block{width:100%}
.btn--accent{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.btn--accent:hover{background:var(--ink); border-color:var(--ink); color:var(--yellow); transform:translateY(-2px)}
.btn--ghost{background:transparent; color:var(--paper); border-color:rgba(250,250,250,.4)}
.btn--ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:auto;
  font-family:var(--font-display); font-weight:600; font-size:.9375rem;
  border-bottom:2px solid var(--ink); padding-bottom:.15rem; align-self:flex-start;
  transition:gap .2s var(--ease);
}
.link-arrow::after{content:"→"}
.link-arrow:hover{gap:.85rem}

/* ---------- 4. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 1px 24px rgba(35,31,32,.07);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:2rem; height:88px}
.brand img{width:auto; height:36px; transition:height .3s var(--ease)}
.site-header.is-stuck .brand img{height:32px}
/* logo couleur sur fond sombre en haut de page : on inverse en blanc */
.site-header:not(.is-stuck) .brand img{filter:brightness(0) invert(1)}

.nav{display:flex; align-items:center; gap:2.25rem}
.nav__list{display:flex; align-items:center; gap:1.85rem}
.nav__list a{
  position:relative; font-family:var(--font-display); font-weight:500;
  font-size:.9375rem; color:var(--paper); padding-block:.35rem;
  transition:color .22s var(--ease);
}
.site-header.is-stuck .nav__list a{color:var(--ink-soft)}
.nav__list a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--crimson); transition:right .28s var(--ease);
}
.nav__list a:hover::after, .nav__list a.is-active::after{right:0}
.site-header.is-stuck .nav__list a:hover, .site-header.is-stuck .nav__list a.is-active{color:var(--ink)}

.burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0; background:none; border:0; cursor:pointer}
.burger span{display:block; height:2px; width:24px; margin-inline:auto; background:var(--paper); transition:transform .28s var(--ease), opacity .2s var(--ease)}
.site-header.is-stuck .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 5. Hero ---------- */
.hero{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:min(100svh,860px); padding-top:140px; color:var(--paper); overflow:hidden}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,15,.86) 0%, rgba(20,16,15,.55) 38%, rgba(20,16,15,.88) 100%),
    linear-gradient(90deg, rgba(20,16,15,.75) 0%, rgba(20,16,15,.2) 65%);
}
.hero__inner{position:relative; z-index:1; padding-block:clamp(3rem,7vw,6rem) clamp(3.5rem,7vw,6rem)}
.hero__title{
  font-size:clamp(2.6rem,6.2vw,5.25rem); font-weight:800; max-width:17ch;
  margin-block:1.1rem 1.5rem; letter-spacing:-.035em;
}
.hero__title .hl{
  color:var(--yellow);
  background:linear-gradient(transparent 74%, var(--crimson) 74%, var(--crimson) 92%, transparent 92%);
  padding-inline:.06em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero__lede{max-width:56ch; font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem); color:rgba(250,250,250,.86); line-height:1.6}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.25rem}

.hero__stats{position:relative; z-index:1; border-top:1px solid var(--line-dark); background:rgba(20,16,15,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.stats{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:1.9rem 1.5rem 2rem; border-left:1px solid var(--line-dark)}
.stat:first-child{border-left:0; padding-left:0}
.stat__num{display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.75rem,3.2vw,2.75rem); line-height:1; letter-spacing:-.03em; color:var(--yellow); font-variant-numeric:tabular-nums}
.stat__label{display:block; margin-top:.6rem; font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-light)}

/* ---------- 6. Sections génériques ---------- */
.section{padding-block:var(--sec-y)}
.section--alt{background:var(--paper); border-block:1px solid var(--line)}
.section--dark{background:var(--ink-deep); color:var(--paper)}
.section--dark .sec-title{color:var(--paper)}
.section--dark .sec-lede{color:var(--muted-light)}

.sec-head{max-width:62ch; margin-bottom:clamp(2.75rem,5vw,4.5rem)}
.eyebrow{
  display:flex; align-items:center; gap:.85rem; margin:0 0 1.15rem;
  font-family:var(--font-display); font-weight:600; font-size:.8125rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--crimson);
}
.eyebrow--light{color:var(--yellow)}
.eyebrow .idx{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.15rem; height:1.6rem; padding-inline:.4rem;
  background:var(--crimson); color:var(--white); letter-spacing:.06em; border-radius:var(--radius);
}
.eyebrow--light .idx{background:var(--yellow); color:var(--ink)}
.eyebrow::after{content:""; flex:1; height:1px; background:currentColor; opacity:.25}

.sec-title{font-size:clamp(1.95rem,1.2rem + 2.6vw,3.35rem); font-weight:800; letter-spacing:-.032em}
.sec-lede{margin-top:1.25rem; font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); color:var(--muted); line-height:1.65}
.lede{font-size:1.1875rem; line-height:1.6}

/* ---------- 7. L'entreprise ---------- */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.split__text p{color:var(--ink-soft)}
.split__text strong{color:var(--ink); font-weight:600}
.facts{margin-top:2.25rem; border-top:1px solid var(--line)}
.facts li{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--line)}
.facts span{font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.facts strong{font-family:var(--font-display); font-weight:600; font-size:1.0625rem; text-align:right}

.split__media{margin:0; position:relative}
.split__media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius)}
.split__media::before{
  content:""; position:absolute; top:-14px; right:-14px; width:96px; height:96px;
  border-top:5px solid var(--yellow); border-right:5px solid var(--yellow);
}
.split__media figcaption{margin-top:.9rem; font-size:.875rem; color:var(--muted); border-left:3px solid var(--crimson); padding-left:.8rem}

/* ---------- 8. Cartes savoir-faire ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem}
.card{
  position:relative; display:flex; flex-direction:column;
  padding:2.15rem 1.85rem 1.85rem; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card::before{content:""; position:absolute; inset:0 auto auto 0; width:0; height:4px; background:var(--crimson); transition:width .35s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.card:hover::before{width:100%}
.card__idx{font-family:var(--font-display); font-weight:700; font-size:.8125rem; letter-spacing:.12em; color:var(--crimson)}
.card h3{margin:.65rem 0 .75rem; font-size:1.4375rem}
.card p{color:var(--muted); font-size:.9688rem; margin-bottom:1.35rem}
.card--accent{background:var(--ink-deep); border-color:var(--ink-deep); color:var(--paper)}
.card--accent .card__idx{color:var(--yellow)}
.card--accent p{color:var(--muted-light)}
.card--accent .link-arrow{color:var(--yellow); border-bottom-color:var(--yellow)}

.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto}
.tags li{
  font-size:.75rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
  padding:.32rem .6rem; background:var(--paper-2); color:var(--ink-soft); border-radius:var(--radius);
}

.typologies{margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:2.25rem; border-top:1px solid var(--line)}
.typologies__title{font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1.1rem}
.chips{display:flex; flex-wrap:wrap; gap:.6rem}
.chips li{
  font-family:var(--font-display); font-weight:500; font-size:.9375rem;
  padding:.55rem 1.05rem; border:1px solid var(--ink); border-radius:100px;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.chips li:hover{background:var(--ink); color:var(--yellow)}

/* ---------- 9. Moyens ---------- */
.means{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line-dark); border-left:1px solid var(--line-dark)}
.mean{padding:2.25rem 1.85rem 2.5rem; border-right:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); transition:background-color .3s var(--ease)}
.mean:hover{background:rgba(242,234,35,.05)}
.mean__num{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.4vw,2.85rem); line-height:1; letter-spacing:-.035em; color:var(--yellow)}
.mean h3{margin:.9rem 0 .6rem; font-size:1.1875rem; font-weight:600}
.mean p{font-size:.9375rem; color:var(--muted-light); margin:0}

/* Variantes sombres pour la section Moyens */
.section--dark .typologies{border-top-color:var(--line-dark)}
.section--dark .typologies__title{color:var(--muted-light)}
.section--dark .chips li{border-color:var(--line-dark); color:var(--paper)}
.section--dark .chips li:hover{background:var(--yellow); color:var(--ink); border-color:var(--yellow)}
.section--dark .certs__note{margin-top:1.75rem; padding:0; background:none}

/* ---------- 10. Références ---------- */
.refs{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1.5rem}
.ref{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ref:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.ref__media{overflow:hidden; background:var(--paper-2)}
.ref__media img{width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s var(--ease)}
.ref:hover .ref__media img{transform:scale(1.05)}
.ref__body{display:flex; flex-direction:column; flex:1; padding:1.6rem 1.6rem 1.75rem}
.ref__meta{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .7rem}
.ref__meta span{font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .6rem; border-radius:var(--radius)}
.ref__meta span:first-child{background:var(--ink); color:var(--yellow)}
.ref__meta span:last-child{background:var(--paper-2); color:var(--ink-soft)}
.ref h3{font-size:1.25rem; margin-bottom:.6rem}
.ref__desc{font-size:.9375rem; color:var(--muted); margin-bottom:1.25rem}
.ref__specs{display:grid; grid-template-columns:1fr 1fr; gap:.85rem 1rem; margin:auto 0 0; padding-top:1.15rem; border-top:1px solid var(--line)}
.ref__specs dt{font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:.2rem}
.ref__specs dd{margin:0; font-family:var(--font-display); font-weight:600; font-size:.9375rem}
.ref__specs dd:empty::after{content:"\00a0"}
.ref__specs > div:nth-child(3){grid-column:1 / -1}
.ref__meta span.is-flag{background:var(--ink); color:var(--yellow)}

.flagship{
  margin-top:1.5rem; padding:clamp(2rem,4vw,3.25rem);
  background:var(--ink-deep); color:var(--paper); border-radius:var(--radius);
  border-left:6px solid var(--yellow);
}
.flagship__tag{display:inline-block; margin-bottom:1.35rem; font-family:var(--font-display); font-weight:600; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); background:var(--yellow); padding:.4rem .8rem; border-radius:var(--radius)}
.flagship__grid{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:start}
.flagship h3{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem); margin-bottom:1rem}
.flagship p{color:var(--muted-light); margin:0}
.flagship__specs{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 1rem; margin:0}
.flagship__specs dt{font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-light); margin-bottom:.3rem}
.flagship__specs dd{margin:0; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--yellow); letter-spacing:-.02em}

.clients{margin-top:clamp(3rem,5vw,4.5rem); padding-top:2.5rem; border-top:1px solid var(--line); text-align:center}
.clients__title{font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1.75rem}
.clients__list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; max-width:860px; margin-inline:auto}
.clients__list li{
  display:flex; align-items:center; justify-content:center;
  min-width:0; height:96px; padding:1rem;
  background:var(--paper); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:.875rem; color:var(--muted);
  border-radius:var(--radius);
}
.clients__logo{width:auto; height:var(--h,28px); max-width:100%; object-fit:contain}
.clients__note{margin-top:1.5rem; font-size:.9375rem; color:var(--muted)}

/* ---------- 11. Qualifications ---------- */
.split + .quals{margin-top:clamp(3rem,5vw,4.5rem)}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
.quals{display:grid; min-width:0; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.qual-table{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.qual-table th{
  text-align:left; padding:1rem 1.25rem; background:var(--ink-deep); color:var(--paper);
  font-family:var(--font-display); font-weight:600; font-size:.75rem; letter-spacing:.11em; text-transform:uppercase;
}
.qual-table td{padding:1.05rem 1.25rem; border-top:1px solid var(--line); font-size:.9688rem; vertical-align:middle}
.qual-table tbody tr{transition:background-color .2s var(--ease)}
.qual-table tbody tr:hover{background:var(--paper)}
.qual-table .code{font-family:var(--font-display); font-weight:700; color:var(--crimson); width:1%; white-space:nowrap}
.badge{display:inline-block; padding:.35rem .7rem; background:var(--paper-2); border-left:3px solid var(--yellow); font-size:.8438rem; font-weight:500}

.certs h3{font-size:1.25rem; margin-bottom:1.25rem}
.cert-list li{display:flex; flex-direction:column; gap:.2rem; padding:1rem 0; border-top:1px solid var(--line)}
.cert-list li:last-child{border-bottom:1px solid var(--line)}
.cert-list strong{font-family:var(--font-display); font-size:1.0625rem; font-weight:700}
.cert-list span{font-size:.9063rem; color:var(--muted)}
.certs__note{margin-top:1.5rem; padding:1.15rem 1.25rem; background:var(--ink-deep); color:var(--muted-light); font-size:.9063rem; border-radius:var(--radius)}

/* ---------- 12. Manifeste ---------- */
.section--manifesto .sec-head{margin-bottom:2.5rem}
.manifesto{margin:0 0 clamp(3rem,5vw,4.5rem)}
.manifesto p{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.5rem,1rem + 2.2vw,2.75rem); line-height:1.22; letter-spacing:-.028em;
  max-width:20ch; margin:0;
}
.manifesto footer{display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem 1rem; margin-top:1.75rem; padding-left:1.15rem; border-left:3px solid var(--crimson)}
.manifesto__name{font-family:var(--font-display); font-weight:600; font-size:1rem}
.manifesto__role{font-size:.875rem; color:var(--muted-light)}

.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2.25rem; padding-top:clamp(2.5rem,4vw,3.5rem); border-top:1px solid var(--line-dark)}
.pillar h3{font-size:1.1875rem; font-weight:600; margin-bottom:.7rem; padding-top:1.15rem; border-top:3px solid var(--yellow); display:inline-block}
.pillar p{font-size:.9688rem; color:var(--muted-light); margin:0}

.proud{margin-top:clamp(3rem,5vw,4.5rem); padding-top:clamp(2.5rem,4vw,3.5rem); border-top:1px solid var(--line-dark)}
.proud__tag{font-family:var(--font-display); font-weight:600; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:1.75rem}
.proud__grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.75rem,4vw,3.5rem); align-items:center}
.proud__media{margin:0}
.proud__media img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--radius)}
.proud__text h3{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem); margin-bottom:1.1rem}
.proud__text p{color:var(--muted-light)}

/* ---------- 13. Contact ---------- */
.section--contact{background:var(--paper); border-top:1px solid var(--line)}
.contact{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start}
.contact__aside .sec-title{font-size:clamp(1.85rem,1.2rem + 2.2vw,3rem)}
.contact__info{margin-top:2.5rem; border-top:1px solid var(--line)}
.contact__info li{display:flex; flex-direction:column; gap:.25rem; padding:1.1rem 0; border-bottom:1px solid var(--line)}
.contact__label{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.contact__info a, .contact__info address, .contact__info span:last-child{font-family:var(--font-display); font-weight:600; font-size:1.0625rem; font-style:normal; line-height:1.5}
.contact__info a{border-bottom:2px solid transparent; align-self:flex-start; transition:border-color .2s var(--ease)}
.contact__info a:hover{border-bottom-color:var(--crimson)}

.form{background:var(--white); padding:clamp(1.6rem,3.5vw,2.75rem); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem}
.field{display:flex; flex-direction:column; margin-bottom:1.15rem}
.field label{font-size:.8125rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.5rem}
.field label span{color:var(--crimson)}
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem; background:var(--white);
  border:1.5px solid var(--line); border-radius:var(--radius);
  font-size:1rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{resize:vertical; min-height:120px}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236C6765' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; padding-right:2.5rem;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(242,234,35,.35)}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:var(--crimson)}
.field__error{margin:.4rem 0 0; font-size:.8125rem; color:var(--crimson); min-height:0}
.field__error:empty{display:none}

.field--check{flex-direction:row; align-items:flex-start; gap:.7rem; flex-wrap:wrap; margin-top:.35rem}
.field--check input{width:20px; height:20px; flex:0 0 auto; margin-top:.15rem; accent-color:var(--crimson)}
.field--check label{flex:1; min-width:200px; text-transform:none; letter-spacing:0; font-size:.875rem; font-weight:400; line-height:1.5; color:var(--muted); margin:0}
.field--check .field__error{flex-basis:100%}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form__status{margin:1.15rem 0 0; padding:0; font-size:.9375rem; font-weight:500}
.form__status:empty{display:none}
.form__status.is-ok{padding:1rem 1.15rem; background:rgba(35,31,32,.04); border-left:4px solid var(--yellow); color:var(--ink)}
.form__status.is-err{padding:1rem 1.15rem; background:rgba(202,32,77,.07); border-left:4px solid var(--crimson); color:var(--crimson)}

/* ---------- 14. Footer ---------- */
.site-footer{background:var(--ink-deep); color:var(--muted-light); padding-block:clamp(3rem,5vw,4.5rem) 2.25rem}
.footer__inner{display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem 3rem}
.footer__logo{height:40px; width:auto; filter:brightness(0) invert(1); opacity:.92}
.footer__brand p{margin-top:1.1rem; font-size:.875rem; letter-spacing:.05em}
.footer__nav{display:flex; flex-wrap:wrap; align-content:flex-start; gap:.75rem 1.75rem}
.footer__nav a{font-family:var(--font-display); font-weight:500; font-size:.9375rem; color:var(--paper); border-bottom:1px solid transparent; transition:border-color .2s var(--ease)}
.footer__nav a:hover{border-bottom-color:var(--yellow)}
.footer__legal{grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; padding-top:2rem; margin-top:1rem; border-top:1px solid var(--line-dark); font-size:.8125rem}
.footer__legal p{margin:0}

/* ---------- 15. Retour en haut ---------- */
.to-top{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90;
  display:grid; place-items:center; width:48px; height:48px;
  background:var(--yellow); color:var(--ink); font-size:1.15rem; border-radius:50%;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.to-top.is-visible{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--ink); color:var(--yellow)}

/* ---------- 16. Animations d'apparition ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
.cards .reveal:nth-child(2), .refs .reveal:nth-child(2), .means .reveal:nth-child(2), .pillars .reveal:nth-child(2){transition-delay:.08s}
.cards .reveal:nth-child(3), .refs .reveal:nth-child(3), .means .reveal:nth-child(3), .pillars .reveal:nth-child(3){transition-delay:.16s}
.cards .reveal:nth-child(5), .refs .reveal:nth-child(5), .means .reveal:nth-child(5){transition-delay:.08s}
.cards .reveal:nth-child(6), .refs .reveal:nth-child(6), .means .reveal:nth-child(6){transition-delay:.16s}

/* ---------- 17. Responsive ---------- */
@media (max-width:1040px){
  .split, .quals, .contact, .flagship__grid, .proud__grid{grid-template-columns:1fr}
  .means{grid-template-columns:repeat(2,1fr)}
  .split__media{max-width:520px}
  .split__media img{aspect-ratio:16/11}
  .proud__grid{gap:2rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:1.5rem 1.25rem; border-left:1px solid var(--line-dark); border-top:1px solid var(--line-dark)}
  .stat:nth-child(odd){padding-left:0; border-left:0}
  .stat:nth-child(-n+2){border-top:0}
  .footer__inner{grid-template-columns:1fr}
}

@media (max-width:880px){
  html{scroll-padding-top:76px}
  .header__inner{height:72px}
  .burger{display:flex}
  .nav{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:1rem var(--gutter) 2rem;
    background:var(--white); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height:calc(100svh - 72px); overflow-y:auto;
  }
  .nav.is-open{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .nav__list{flex-direction:column; align-items:stretch; gap:0}
  .nav__list a, .site-header:not(.is-stuck) .nav__list a{
    display:block; padding:1rem 0; color:var(--ink);
    font-size:1.0625rem; border-bottom:1px solid var(--line);
  }
  .nav__list a::after{display:none}
  .nav__cta{margin-top:1.35rem; width:100%}
  .site-header.is-open{background:var(--white); border-bottom-color:transparent}
  .site-header.is-open .brand img{filter:none}
  .site-header.is-open .burger span{background:var(--ink)}
  .hero{padding-top:110px; min-height:auto}
  .flagship__specs, .ref__specs{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .form__row{grid-template-columns:1fr; gap:0}
  .qual-table, .qual-table tbody, .qual-table tr, .qual-table td{display:block; width:100%}
  .qual-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .qual-table tr{padding:1rem 1.1rem; border-top:1px solid var(--line)}
  .qual-table tbody tr:first-child{border-top:0}
  .qual-table td{padding:0; border-top:0}
  .qual-table .code{width:auto; font-size:.75rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:.3rem}
  .qual-table td + td + td{margin-top:.6rem}
  .badge{white-space:normal}
  .hero__actions .btn{width:100%}
  .facts li{flex-direction:column; align-items:flex-start}
  .facts strong{text-align:left}
  .means{border-left:0; grid-template-columns:1fr}
  .mean{padding:1.85rem 0 2rem; border-right:0}
  .flagship{border-left-width:4px}
  .clients__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__legal{flex-direction:column}
  .sec-title br{display:none}
}

/* ---------- 18. Préférences & impression ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .reveal{opacity:1; transform:none}
}

@media print{
  .site-header,.to-top,.hero__media,.form,.burger{display:none!important}
  body{color:#000; background:#fff}
  .section{padding-block:1.5rem; page-break-inside:avoid}
  .reveal{opacity:1; transform:none}
}