/* ============================================================
   FLOW-VALVE — THÈME "FLUX"
   Feuille de style partagée, utilisée par toutes les pages du site.
   Basée sur le design validé par le client (direction 3).
   ============================================================ */

:root{
  --ocean-deep:#0A3D66;
  --ocean:#12558C;
  --brand:#1B6FB8;
  --aqua:#6FD1E8;
  --foam:#F0F8FC;
  --white:#FFFFFF;
  --ink:#0E2438;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--foam);
  line-height:1.6;
}
h1,h2,h3{font-family:'Sora', sans-serif; line-height:1.15; color:var(--ocean-deep);}
a{text-decoration:none; color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* --- header --- */
header{position:sticky; top:0; z-index:50; background:rgba(240,248,252,.85); backdrop-filter:blur(10px); border-bottom:1px solid rgba(27,111,184,.12);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 24px;}
.logo{display:block;}
.logo img{height:36px; width:auto; display:block;}
nav ul{list-style:none; display:flex; gap:8px;}
nav a{font-size:14px; font-weight:600; color:var(--ocean); padding:10px 16px; border-radius:100px; transition:background .2s;}
nav a:hover{background:rgba(27,111,184,.08);}
.nav-cta{background:var(--brand); color:white !important; padding:10px 22px !important; border-radius:100px;}
.nav-cta:hover{background:var(--ocean-deep) !important;}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;}
.burger span{width:24px; height:2px; background:var(--ocean-deep);}
nav ul.current a[aria-current]{background:rgba(27,111,184,.1);}

/* --- hero (page d'accueil) --- */
.hero{position:relative; overflow:hidden; padding:100px 0 40px;}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(111,209,232,.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at -10% 40%, rgba(27,111,184,.15), transparent 60%);
}
.hero-inner{text-align:center; max-width:760px; margin:0 auto;}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:white; border:1px solid rgba(27,111,184,.15);
  border-radius:100px; padding:8px 18px; font-size:13px; font-weight:600; color:var(--ocean);
  box-shadow:0 4px 16px -6px rgba(14,36,56,.15); margin-bottom:28px;
}
.badge::before{content:"●"; color:var(--aqua); font-size:10px;}
.hero h1{font-size:clamp(36px,6.4vw,64px); font-weight:800; letter-spacing:-0.02em; margin-bottom:22px;}
.hero h1 .flowtext{
  background:linear-gradient(90deg, var(--brand), var(--aqua));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{font-size:18px; color:#3A5164; max-width:52ch; margin:0 auto 36px;}
.cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.btn{padding:15px 30px; border-radius:100px; font-weight:700; font-size:15px; transition:all .2s; display:inline-block; border:none; cursor:pointer;}
.btn-primary{background:var(--brand); color:white; box-shadow:0 10px 26px -10px rgba(27,111,184,.6);}
.btn-primary:hover{background:var(--ocean-deep); transform:translateY(-1px);}
.btn-ghost{background:white; color:var(--ocean); border:1px solid rgba(27,111,184,.2);}
.btn-ghost:hover{border-color:var(--brand);}

/* --- bannière de page (pages intérieures : contact, devis, produits...) --- */
.page-banner{
  position:relative; overflow:hidden; padding:64px 0 56px; text-align:center;
  background:
    radial-gradient(ellipse 800px 400px at 85% -20%, rgba(111,209,232,.3), transparent 60%),
    var(--foam);
}
.page-banner .badge{margin-bottom:20px;}
.page-banner h1{font-size:clamp(30px,4.4vw,46px); font-weight:800; margin-bottom:14px;}
.page-banner p{color:#3A5164; max-width:52ch; margin:0 auto; font-size:16px;}
.breadcrumb{font-size:13px; color:#6B8299; margin-bottom:16px;}
.breadcrumb a{color:var(--brand); font-weight:600;}

/* --- flow line animée --- */
.flow-hero-art{margin-top:50px; position:relative;}
.flow-hero-art svg{width:100%; height:auto; display:block;}
.flow-dash{stroke-dasharray:12 10; animation:flowmove 3s linear infinite;}
@keyframes flowmove{to{stroke-dashoffset:-44;}}
@media (prefers-reduced-motion: reduce){.flow-dash{animation:none;}}

/* --- wave divider --- */
.wave{display:block; width:100%; height:auto; margin-top:-2px;}

/* --- sections génériques --- */
.section{padding:10px 0;}
.products{background:linear-gradient(180deg, var(--ocean-deep), var(--ocean)); padding:10px 0 100px; color:white;}
.section-head{text-align:center; max-width:600px; margin:0 auto 56px;}
.section-head .eyebrow, .eyebrow{color:var(--aqua); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; display:block;}
.about .eyebrow{color:var(--brand);}
.section-head h2{color:white; font-size:clamp(28px,3.6vw,40px); margin-bottom:14px;}
.section-head p{color:#C7E4F2; font-size:15px;}

.pill-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.pill-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:28px;
  padding:34px 26px; backdrop-filter:blur(6px); transition:transform .25s, background .25s;
}
.pill-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.1);}
.pill-icon{
  width:52px; height:52px; border-radius:16px; background:rgba(111,209,232,.15);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.pill-card h3{color:white; font-size:19px; margin-bottom:10px;}
.pill-card p{color:#C7E4F2; font-size:14px;}

.meter-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}

/* --- galerie photo produits : cartes propres --- */
.product-row{display:flex; gap:18px; margin-top:32px; flex-wrap:wrap; justify-content:center;}
.product-row.center{justify-content:center;}
.product-card{
  background:var(--white); border:1px solid rgba(27,111,184,.15); border-radius:16px;
  padding:16px; width:132px; text-align:center; transition:transform .2s, box-shadow .2s;
}
.product-card:hover{transform:translateY(-4px); box-shadow:0 14px 26px -12px rgba(14,36,56,.25);}
.product-card img{width:100%; height:90px; object-fit:contain; display:block; margin-bottom:10px;}
.product-card span{font-size:12px; color:#3A5164; line-height:1.3; display:block;}
.product-row.on-dark .product-card{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14);}
.product-row.on-dark .product-card:hover{background:rgba(255,255,255,.14);}
.product-row.on-dark .product-card img{border-radius:10px; background:white;}
.product-row.on-dark .product-card span{color:#C7E4F2;}

/* --- about / split --- */
.about{padding:100px 0;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.split-media{
  aspect-ratio:1/1; border-radius:32px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--brand), var(--aqua));
  display:flex; align-items:center; justify-content:center;
}
.split-media svg{width:55%;}
.about h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:18px;}
.about p{color:#3A5164; margin-bottom:16px; font-size:15.5px;}

/* --- CTA banner --- */
.cta-banner{
  background:linear-gradient(120deg, var(--brand), var(--ocean-deep));
  border-radius:32px; margin:0 24px 100px; padding:64px 40px; text-align:center; color:white;
  max-width:1132px; margin-left:auto; margin-right:auto; position:relative; overflow:hidden;
}
.cta-banner h2{color:white; font-size:clamp(26px,3.6vw,38px); margin-bottom:16px;}
.cta-banner p{color:#D5ECF7; max-width:44ch; margin:0 auto 30px;}

/* --- cartes / contenu générique (pages produit, catalogue, galerie) --- */
.content-card{
  background:var(--white); border:1px solid rgba(27,111,184,.12); border-radius:24px;
  padding:36px; box-shadow:0 20px 40px -30px rgba(14,36,56,.25);
}
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.info-grid img{width:100%; border-radius:20px;}
.tag-pill{
  display:inline-block; background:rgba(27,111,184,.1); color:var(--brand); font-size:12px; font-weight:700;
  padding:6px 14px; border-radius:100px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px;
}

/* --- formulaires (contact, devis, catalogue) --- */
.form-card{
  background:var(--white); border:1px solid rgba(27,111,184,.12); border-radius:28px;
  padding:40px; max-width:640px; margin:0 auto;
  box-shadow:0 24px 48px -30px rgba(14,36,56,.25);
}
.form-card label{display:block; font-size:13px; font-weight:700; color:var(--ocean-deep); margin-bottom:6px;}
.form-card .field{margin-bottom:20px;}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="url"],
.form-card input[type="number"],
.form-card textarea{
  width:100%; border:1.5px solid rgba(27,111,184,.2); border-radius:14px;
  padding:13px 16px; font-family:'Manrope'; font-size:15px; color:var(--ink);
  background:var(--foam); transition:border-color .2s;
}
.form-card input:focus, .form-card textarea:focus{outline:none; border-color:var(--brand); background:white;}
.form-card textarea{resize:vertical; min-height:110px;}
.form-card .required-note{font-size:12px; color:#6B8299; margin-top:6px;}
.form-success{
  background:#E7F6EC; border:1px solid #34A853; color:#1E7E34; padding:14px 20px;
  border-radius:16px; font-size:14px; font-weight:600; margin-bottom:24px; text-align:center;
}
.sidebar-card{
  background:var(--white); border:1px solid rgba(27,111,184,.12); border-radius:24px; padding:28px; margin-bottom:24px;
}
.sidebar-card h3{font-size:16px; margin-bottom:14px;}
.sidebar-card ul{list-style:none;}
.sidebar-card li{margin-bottom:10px; font-size:14px;}
.sidebar-card a{color:var(--brand); font-weight:600;}

/* --- footer --- */
footer{background:var(--ocean-deep); color:#BFDCEB; padding:56px 0 28px;}
.footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:44px;}
footer h4{color:white; font-family:'Sora'; font-size:15px; margin-bottom:16px;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14px;}
footer a:hover{color:white;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media (max-width: 900px){
  .split{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .pill-grid, .meter-grid{grid-template-columns:repeat(2,1fr);}
  nav ul{
    position:fixed; top:64px; left:0; right:0; background:var(--foam);
    flex-direction:column; padding:24px; gap:6px; border-bottom:1px solid rgba(27,111,184,.12);
    transform:translateY(-120%); transition:transform .25s; z-index:40;
  }
  nav ul.open{transform:translateY(0);}
  nav ul li{width:100%;}
  nav ul a{display:block;}
  .burger{display:flex;}
  .footer-grid{grid-template-columns:1fr; gap:26px;}
  .cta-banner{margin-left:16px; margin-right:16px; padding:48px 24px;}
  .form-card{padding:28px;}
}
@media (max-width: 560px){
  .pill-grid, .meter-grid{grid-template-columns:1fr;}
  .cta-row{flex-direction:column;}
  .product-card{width:calc(50% - 9px);}
}