:root{
  --orange:#DD6F01;
  --bordeaux:#5C0516;
  --rouge:#A8260C;
  --ink:#241a16;
  --ink-soft:#4a3d38;
  --muted:#6b5c55;
  --paper:#f4f1ed;
  --paper-2:#efebe6;
  --line:#e0dad3;
  --line-strong:#cbc4bc;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:Archivo,Helvetica,Arial,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--rouge);text-decoration:none}
a:hover{color:var(--orange)}
ul,ol,dl{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:76px 24px}
.band{background:#efe7e4;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center{display:flex;justify-content:center;margin-top:32px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px 24px;background:rgba(244,241,237,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);border-top:3px solid var(--bordeaux)}
.nav__logo img{height:34px;width:auto}
.nav__links{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:500}
.nav__links a:not(.btn){color:var(--ink)}
.nav__links a:not(.btn):hover{color:var(--rouge)}
.nav__cta,.nav__cta:hover{color:#fff}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav__burger span{display:block;width:22px;height:2px;background:var(--ink)}

/* buttons */
.btn{display:inline-block;font-size:14.5px;font-weight:600;padding:13px 22px;border-radius:3px;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn--accent{background:var(--orange);color:#fff}
.btn--accent:hover{background:var(--rouge);color:#fff}
.btn--light{background:#fff;color:var(--rouge)}
.btn--light:hover{background:var(--ink);color:#fff}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--paper)}
.btn--ghost-light{border-color:rgba(244,241,237,.4);color:var(--paper)}
.btn--ghost-light:hover{border-color:var(--orange);color:var(--orange)}
.link{font-size:14.5px;font-weight:600}
.link--accent{color:var(--orange)}
.link--accent:hover{color:var(--paper)}
.link--underline{font-family:var(--mono);font-size:14px;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}
.link--underline:hover{color:var(--ink)}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow--accent{color:var(--orange)}
.num{font-family:var(--mono);font-size:12px;color:var(--orange);letter-spacing:.14em}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:36px;
  border-top:2px solid var(--ink);padding-top:16px}
.sec-head--split{border-top:2px solid var(--ink);padding-top:16px}
.sec-head h2{font-size:30px;font-weight:700}
.sec-head--split{justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.sec-head__l{display:flex;align-items:baseline;gap:16px}
.sec-head__note{font-size:14.5px;color:var(--muted);max-width:46ch;text-align:right}

/* placeholders */
.ph{background:repeating-linear-gradient(115deg,#e6e1da 0 12px,#dcd5cc 12px 24px);
  display:flex;align-items:flex-end;padding:16px;border-radius:4px;min-height:160px}
.ph span{font-family:var(--mono);font-size:11px;color:#8a7c73}
.ph--220{min-height:220px;border-radius:0}
.ph--full{min-height:380px;border-radius:0}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;background:var(--bordeaux);color:var(--paper)}
.hero__text{padding:88px 56px 80px;display:flex;flex-direction:column;gap:26px;justify-content:center;max-width:720px;margin-left:auto}
.hero h1{font-size:clamp(38px,5vw,62px);line-height:1.02;font-weight:800;letter-spacing:-.025em}
.hero p{font-size:17.5px;line-height:1.6;color:#e3d5d5;max-width:46ch}
.hero__media{min-height:480px}
.hero__media .ph{height:100%;border-radius:0;background:repeating-linear-gradient(115deg,#6b1220 0 14px,#5C0516 14px 28px)}
.hero__media .ph span{color:rgba(244,241,237,.6)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper-2);border-bottom:1px solid var(--line)}
.stats div{padding:22px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.stats div:last-child{border-right:0}
.stats strong{font-family:var(--mono);font-size:20px;color:var(--rouge)}
.stats span{font-size:13px;color:var(--muted)}

/* poles */
.poles{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.card{border:1px solid var(--line-strong);border-radius:5px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card__body{padding:28px 30px 30px;display:flex;flex-direction:column;gap:14px;flex:1}
.card h3{font-size:24px;font-weight:700}
.card p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.card--dark{background:var(--bordeaux);color:#f4ece9;border-color:var(--bordeaux)}
.card--dark p{color:#dcc4c4}
.card--dark .pricelist{color:#c3a5a5}
.card--dark .pricelist div{border-bottom-color:#7a1f2e}
.card--dark .refbox{border-color:#7a1f2e}
.card--dark .refbox>span:last-child{color:#c3a5a5}
.card--dark .refbox a{color:#f4ece9}
.card--dark .refbox a:hover{color:var(--orange)}
.card--dark .refbox+.refbox{margin-top:-4px}
.card--dark .footer__label{color:#b08a8a}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-family:var(--mono);font-size:11.5px;border:1px solid #d5cec6;color:var(--muted);padding:6px 10px;border-radius:2px}
.pricelist{display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:12.5px;color:#a99c94}
.pricelist div{display:flex;justify-content:space-between;border-bottom:1px solid #3a2c26;padding-bottom:8px}
.pricelist dd{margin:0;color:var(--orange)}
.refbox{padding:14px;border:1px solid #3a2c26;border-radius:3px;display:flex;flex-direction:column;gap:4px}
.refbox strong{font-size:14.5px}
.refbox>span:last-child{font-size:13px;color:#a99c94}
.card .link{margin-top:auto}

/* filters + products */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.chip{font-family:var(--mono);font-size:12px;border:1px solid var(--line-strong);background:none;color:var(--ink-soft);padding:8px 13px;border-radius:2px;cursor:pointer}
.chip:hover{border-color:var(--orange);color:var(--rouge)}
.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product{background:#fff;border:1px solid var(--line-strong);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;color:var(--ink)}
.product:hover{border-color:var(--orange);color:var(--ink)}
.product .ph{min-height:168px;border-radius:0;padding:12px}
.product__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.product__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rouge)}
.product__name{font-size:16px;font-weight:600;line-height:1.25}
.product__desc{font-size:13.5px;color:var(--muted);line-height:1.5}
.product__price{font-family:var(--mono);font-size:13.5px;font-weight:500;margin-top:auto;padding-top:12px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);border-radius:5px;overflow:hidden}
.steps li{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.steps__n{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--bordeaux)}
.steps strong{font-size:16.5px}
.steps li>span:last-child{font-size:14px;color:var(--muted);line-height:1.55}

/* mosaic */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:160px 160px;gap:14px}
.mosaic .ph{min-height:0}
.ph--tall{grid-row:span 2}

/* about */
.about{display:grid;grid-template-columns:1fr 1.2fr;border-top:1px solid var(--line)}
.about__text{padding:72px 40px;display:flex;flex-direction:column;gap:18px;justify-content:center;max-width:640px}
.about h2{font-size:32px;font-weight:700;max-width:24ch}
.about p{font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:52ch}

/* cta */
.cta{background:var(--rouge);color:#fff;padding:68px 24px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;max-width:none}
.cta>div:first-child{display:flex;flex-direction:column;gap:12px;padding-left:max(24px,calc((100vw - var(--wrap))/2))}
.cta h2{font-size:38px;font-weight:800}
.cta p{font-size:17px;color:#ffe0d4}
.cta .row{padding-right:max(24px,calc((100vw - var(--wrap))/2))}

/* footer */
.footer{background:var(--bordeaux);color:#c3a5a5;padding:48px 24px 28px;display:flex;flex-direction:column;gap:34px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;max-width:var(--wrap);margin:0 auto;width:100%}
.footer__brand{display:flex;flex-direction:column;gap:14px}
.footer__brand img{height:32px;width:auto;filter:brightness(1.15)}
.footer__brand p{font-size:13.5px;line-height:1.6}
.footer__col{display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.footer__col a{color:#e3d5d5}
.footer__col a:hover{color:var(--orange)}
.footer__label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b08a8a}
.footer__bar{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #7a1f2e;padding-top:20px;
  font-family:var(--mono);font-size:11.5px;max-width:var(--wrap);margin:0 auto;width:100%}

/* pages internes */
.page-head{background:var(--bordeaux);color:var(--paper);padding:72px 24px 64px}
.page-head__in{max-width:var(--wrap);margin:0 auto;display:flex;flex-direction:column;gap:16px}
.page-head h1{font-size:clamp(32px,4vw,48px);font-weight:800}
.page-head p{font-size:17px;color:#e3d5d5;max-width:60ch}
.prose{max-width:70ch}
.prose h2{font-size:24px;font-weight:700;margin:40px 0 12px}
.prose h3{font-size:18px;font-weight:600;margin:24px 0 8px}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.prose ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:6px;margin:10px 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-bottom:56px}
.split--rev>*:first-child{order:2}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
.field{display:flex;flex-direction:column;gap:6px}
.field--wide{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:15px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:3px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange);outline-offset:-1px}
.field textarea{min-height:140px;resize:vertical}
.form__note{grid-column:1/-1;font-size:13px;color:var(--muted)}

@media(max-width:1000px){
  .hero,.poles,.about,.split{grid-template-columns:1fr}
  .hero__text{padding:64px 24px;margin:0}
  .hero__media{min-height:280px}
  .about__text{padding:48px 24px}
  .split--rev>*:first-child{order:0}
  .stats,.grid-4,.steps{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr 1fr}
  .ph--tall{grid-row:span 1}
  .sec-head__note{text-align:left}
  .form{grid-template-columns:1fr}
}
@media(max-width:700px){
  .nav__burger{display:flex}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px 20px;display:none}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line)}
  .nav__cta{border-bottom:0;margin-top:12px;text-align:center}
  .wrap{padding:56px 20px}
  .stats,.grid-4,.steps,.footer__grid,.mosaic{grid-template-columns:1fr}
  .stats div{border-right:0;border-bottom:1px solid var(--line)}
  .cta{padding:48px 20px}
  .cta>div:first-child,.cta .row{padding:0}
  .footer__bar{flex-direction:column;gap:8px}
}

/* ============================================================
   ANIMATIONS
   Tout est désactivé si le visiteur préfère réduire les
   animations (réglage système). Voir le bloc en fin de fichier.
   ============================================================ */

/* Apparition au défilement — appliqué par js/main.js */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}

/* Entrée du hero, sans attendre le défilement */
.hero__text>*{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.22,.61,.36,1) forwards}
.hero__text>*:nth-child(1){animation-delay:.05s}
.hero__text>*:nth-child(2){animation-delay:.14s}
.hero__text>*:nth-child(3){animation-delay:.23s}
.hero__text>*:nth-child(4){animation-delay:.32s}
@keyframes rise{to{opacity:1;transform:none}}

/* Balayage laser sur le visuel du hero */
.hero__media{position:relative;overflow:hidden}
.hero__media::after{content:'';position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);
  box-shadow:0 0 18px 2px rgba(221,111,1,.55);
  animation:scan 7s cubic-bezier(.5,0,.5,1) infinite}
@keyframes scan{
  0%{top:-2%;opacity:0}
  8%{opacity:1}
  46%{top:100%;opacity:1}
  54%{top:100%;opacity:0}
  100%{top:-2%;opacity:0}
}

/* Nav : se compacte au défilement */
.nav{transition:padding .25s ease,box-shadow .25s ease}
.nav.is-scrolled{padding:9px 24px;box-shadow:0 6px 24px -14px rgba(36,26,22,.5)}
.nav__logo img{transition:height .25s ease}
.nav.is-scrolled .nav__logo img{height:27px}

/* Liens de navigation : soulignement qui se déploie */
.nav__links>a:not(.btn){position:relative}
.nav__links>a:not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav__links>a:not(.btn):hover::after{transform:scaleX(1)}

/* Cartes produit : légère élévation + zoom du visuel */
.product{transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease}
.product:hover{transform:translateY(-4px);box-shadow:0 18px 30px -22px rgba(36,26,22,.65)}
.product .ph,.product img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.product:hover .ph,.product:hover img{transform:scale(1.045)}

/* Mosaïque : le placeholder s'éclaire au survol */
.mosaic .ph{transition:filter .3s ease,transform .4s cubic-bezier(.22,.61,.36,1);overflow:hidden}
.mosaic .ph:hover{filter:brightness(1.06) saturate(1.1);transform:scale(1.012)}

/* Étapes : la puce numérotée réagit */
.steps li{transition:background .25s ease}
.steps li:hover{background:#fff}
.steps__n{transition:color .25s ease,transform .25s ease;display:inline-block}
.steps li:hover .steps__n{color:var(--orange);transform:translateY(-2px)}

/* Boutons : léger appui */
.btn{transform:translateZ(0)}
.btn:active{transform:translateY(1px)}

/* Chips de filtre */
.chip{transition:background .2s ease,color .2s ease,border-color .2s ease}

/* Liens fléchés : la flèche avance */
.link{display:inline-block}
.link:hover{transform:translateX(2px)}
.link{transition:transform .2s ease,color .15s ease}

/* Compteurs : chiffres tabulaires pour éviter le tremblement */
.stats strong{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__text>*{opacity:1;transform:none}
  .hero__media::after{display:none}
}