/* NormaPlate – feuille de style */
:root{
  --ink:#1a1b1e; --muted:#6a6e75; --line:#e6e7e9; --bg:#fff; --soft:#f6f6f7;
  --charcoal:#2a2c30; --charcoal-2:#18191c; --charcoal-3:#222327;
  --metal:linear-gradient(135deg,#f2f3f5 0%,#c5c9ce 42%,#eceef0 58%,#a5aab0 100%);
  --radius:4px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Manrope","Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;font-size:16.5px}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:110px 0}
h1,h2,h3{line-height:1.12;font-weight:600;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:16px}
h3{font-size:1.2rem}
.eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:18px}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.lead{color:var(--muted);max-width:640px;font-size:1.05rem}
.head{margin-bottom:56px}
.metal-text{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Boutons */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:var(--metal);color:var(--charcoal-2);text-decoration:none;font-weight:600;padding:15px 28px;border-radius:var(--radius);border:0;cursor:pointer;font:600 .95rem/1 "Manrope",sans-serif;letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(0,0,0,.25);transition:transform .3s var(--ease)}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn:hover:after{left:130%}
.btn:hover{transform:translateY(-1px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.dark{background:var(--charcoal);color:#fff;box-shadow:none}
.btn.ghost{background:transparent;color:#eceef0;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.btn.ghost:hover{border-color:#fff}
.link{font-weight:600;text-decoration:none;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid currentColor;padding-bottom:2px}

/* En-tête */
header{position:fixed;top:0;left:0;right:0;z-index:20;transition:background .35s,box-shadow .35s,height .35s}
header .nav{display:flex;align-items:center;justify-content:space-between;height:84px;transition:height .35s}
header.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
header.solid .nav{height:68px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo .n{height:32px;width:auto}
.logo .t{height:14px;width:auto}
header:not(.solid) .logo img{filter:invert(1) brightness(1.6)}
header:not(.solid).on-light .logo img{filter:none}
nav{display:flex;align-items:center;gap:34px}
nav ul{display:flex;gap:30px;list-style:none}
nav ul a{text-decoration:none;font-weight:500;font-size:.93rem;color:#d2d5d9;transition:color .2s}
nav ul a:hover,nav ul a.on{color:#fff}
header.solid nav ul a,header.on-light nav ul a{color:var(--muted)}
header.solid nav ul a:hover,header.solid nav ul a.on,header.on-light nav ul a.on{color:var(--ink)}
.lang{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-decoration:none;border:1px solid rgba(255,255,255,.35);color:#fff;padding:7px 10px;border-radius:3px}
header.solid .lang,header.on-light .lang{border-color:var(--line);color:var(--ink)}
.nav .btn{padding:11px 18px;font-size:.85rem}
.menu-btn{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative}
.menu-btn span,.menu-btn:before,.menu-btn:after{content:"";position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:.3s}
.menu-btn:before{top:13px}.menu-btn span{top:19px}.menu-btn:after{top:25px}
header.solid .menu-btn span,header.solid .menu-btn:before,header.solid .menu-btn:after,header.on-light .menu-btn span,header.on-light .menu-btn:before,header.on-light .menu-btn:after{background:var(--ink)}

/* Héros */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 78% 35%,#3c3f45 0%,var(--charcoal) 42%,var(--charcoal-2) 100%);color:#fff;padding:170px 0 120px}
.hero:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero .eyebrow{color:#9ea3aa}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem);margin-bottom:24px;font-weight:600}
.hero p{color:#b6bac0;font-size:1.12rem;margin-bottom:38px;max-width:520px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:44px;margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.stats b{display:block;font-size:1rem;color:#fff;font-weight:600}
.stats span{font-size:.85rem;color:#959aa1}
.hero-art{position:relative}
.hero-art svg{filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Petit héros (pages intérieures) */
.page-hero{background:radial-gradient(900px 500px at 80% 30%,#3a3d43 0%,var(--charcoal) 45%,var(--charcoal-2) 100%);color:#fff;padding:160px 0 90px;position:relative;overflow:hidden}
.page-hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:18px}
.page-hero p{color:#b6bac0;font-size:1.08rem;max-width:560px}
.page-hero .eyebrow{color:#9ea3aa}
.crumb{font-size:.82rem;color:#8f949b;margin-bottom:22px}
.crumb a{text-decoration:none;color:#c3c7cc}
.page-hero .art svg{filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}

/* Cartes matériaux */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(0,0,0,.25);border-color:#d5d8db}
.card .pic{background:linear-gradient(180deg,#f4f5f6,#ebecee);padding:40px 26px;display:flex;align-items:center;justify-content:center;min-height:200px;position:relative;overflow:hidden}
.card .pic svg{transition:transform .6s var(--ease);filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.card:hover .pic svg{transform:scale(1.05) rotate(-1deg)}
.card .pic:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);transition:left .9s var(--ease)}
.card:hover .pic:after{left:140%}
.card .body{padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.card p{color:var(--muted);font-size:.93rem;flex:1}
.card .more{font-weight:600;font-size:.88rem;display:flex;align-items:center;gap:8px}
.card .more i{font-style:normal;transition:transform .3s var(--ease)}
.card:hover .more i{transform:translateX(5px)}

/* Bandes */
.soft{background:var(--soft)}
.dark{background:var(--charcoal-2);color:#fff}
.dark .lead{color:#9ea3aa}
.dark .eyebrow{color:#9ea3aa}

/* Atouts */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.feature{background:var(--charcoal-2);padding:40px 34px}
.feature .ic{width:42px;height:42px;border-radius:50%;background:var(--metal);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--charcoal-2);font-weight:700}
.feature h3{margin-bottom:10px}
.feature p{color:#9ea3aa;font-size:.95rem}

/* Usages */
.uses{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.use{background:#fff;padding:30px 24px;transition:background .3s}
.use:hover{background:#fafafb}
.use b{display:block;margin-bottom:8px;font-weight:600}
.use span{color:var(--muted);font-size:.92rem}

/* Étapes */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;counter-reset:s}
.step{padding-top:24px;border-top:1px solid var(--charcoal);position:relative}
.step:before{counter-increment:s;content:"0" counter(s);display:block;font-size:2.2rem;font-weight:300;letter-spacing:-.02em;margin-bottom:12px;color:#b2b6bb}
.step h3{font-size:1.08rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.94rem}

/* Galerie */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:240px 240px;gap:16px}
.gallery .ph:first-child{grid-row:span 2}
.ph{border-radius:var(--radius);background:#ececee;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.86rem;text-align:center;padding:10px;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}

/* Bandeau CTA */
.cta-band{background:linear-gradient(120deg,var(--charcoal) 0%,var(--charcoal-2) 100%);color:#fff;padding:90px 0;position:relative;overflow:hidden}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{margin:0;max-width:640px}
.cta-band p{color:#9ea3aa;margin-top:10px}

/* Pages matériau */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start}
.specs{border-top:1px solid var(--line)}
.specs div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.specs dt,.specs b{font-weight:600}
.specs span{color:var(--muted)}
.checks{list-style:none;display:grid;gap:12px;margin-top:24px}
.checks li{padding-left:30px;position:relative;color:var(--muted)}
.checks li:before{content:"";position:absolute;left:0;top:.55em;width:16px;height:2px;background:var(--charcoal)}
.prose p{color:var(--muted);margin-bottom:16px}
.prose h3{margin:30px 0 12px}
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:20px 0}
details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary:after{content:"+";font-weight:300;font-size:1.4rem;line-height:1;transition:transform .3s}
details[open] summary:after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:12px}

/* Formulaire */
.quote{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start}
form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px;display:grid;grid-template-columns:1fr 1fr;gap:20px;box-shadow:0 30px 60px -40px rgba(0,0,0,.25)}
form .full{grid-column:1/-1}
label{font-weight:600;font-size:.85rem;display:block;margin-bottom:7px}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid #d6d8db;border-radius:3px;font:inherit;font-size:.95rem;background:#fff;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(42,44,48,.08)}
input[type=file]{padding:10px;background:var(--soft)}
textarea{min-height:130px;resize:vertical}
.note{font-size:.84rem;color:var(--muted)}
.hide{display:none}
.contact-list{list-style:none;display:grid;gap:18px;margin-top:30px}
.contact-list b{display:block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.contact-list a{text-decoration:none;font-weight:600}

/* Pied */
footer{background:var(--charcoal-2);color:#8f949b;padding:80px 0 34px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px}
footer h4{color:#fff;margin-bottom:16px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
footer ul{list-style:none;display:grid;gap:9px}
footer a{color:#d2d5d9;text-decoration:none}
footer a:hover{color:#fff}
footer .flogo{width:230px;margin-bottom:22px}
footer .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #2b2d31;padding-top:24px;font-size:.84rem}

/* Animations d'apparition */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}.js .reveal.d3{transition-delay:.24s}.js .reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* Responsive */
@media (max-width:1000px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .uses{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  section{padding:76px 0}
  .hero{padding:130px 0 80px}
  .hero .wrap,.page-hero .wrap,.split,.quote{grid-template-columns:1fr}
  .hero-art{max-width:460px}
  .page-hero{padding:130px 0 70px}
  .others{grid-template-columns:1fr}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px 24px 26px;gap:16px;box-shadow:0 20px 30px -20px rgba(0,0,0,.2)}
  nav ul.open{display:flex}
  nav ul a{color:var(--ink)!important;font-size:1.05rem}
  .nav .btn{display:none}
  .menu-btn{display:block}
  form{grid-template-columns:1fr;padding:24px}
  .gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .gallery .ph{aspect-ratio:4/3}
  .gallery .ph:first-child{grid-column:span 2;grid-row:auto}
  .specs div{grid-template-columns:1fr;gap:4px}
  .stats{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:560px){
  .grid4,.uses,.steps{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .logo .t{display:none}
}

/* Couleurs et exemples (aluminium anodisé) */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.swatch svg{filter:drop-shadow(0 14px 18px rgba(0,0,0,.22));transition:transform .5s var(--ease)}
.swatch:hover svg{transform:translateY(-4px)}
.swatch figcaption{margin-top:16px;font-weight:600;font-size:.95rem;text-align:center}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.examples svg{filter:drop-shadow(0 18px 24px rgba(0,0,0,.22))}
@media (max-width:860px){.swatches{grid-template-columns:1fr 1fr}.examples{grid-template-columns:1fr}}

@media (max-width:560px){.features{grid-template-columns:1fr}}

/* En-tête : éviter que le menu touche le logo sur écrans moyens */
.logo{flex-shrink:0}
@media (max-width:1150px) and (min-width:861px){nav{gap:20px}nav ul{gap:20px}.nav .btn{display:none}}