/* ============================================================
   Cohesif Négoce — Industrial Luxury (clair)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --bg: #F7F5F2;
  --bg-secondary: #EDECEA;
  --green: #2D6A4F;
  --green-bright: #3D9970;
  --red: #C0392B;
  --text: #1A1A1A;
  --text-secondary: #5C5C5C;
  --blue-slate: #46637A;
  --ochre: #B7791F;
  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(26,26,26,.06);
  --shadow-md: 0 12px 32px rgba(26,26,26,.10);
  --shadow-lg: 0 20px 48px rgba(26,26,26,.14);
  --container: 1240px;
  --font-title: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration:none; }

/* Visible keyboard focus across all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible{ border-radius: 999px; }
.featured-article:focus-within,
.article-card:focus-within{
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
  border-radius: var(--radius);
}

ul{ list-style:none; }

h1,h2,h3,h4{
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section{ padding: 80px 0; }

.section-head{
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head h2{ font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p{ color: var(--text-secondary); font-size: 17px; }

.eyebrow{
  display:inline-block;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-bright);
  margin-bottom: 12px;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ background: var(--green-bright); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline{
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn-outline:hover{ background: var(--green); color:#fff; transform: translateY(-2px); }

.btn-white{
  background: #fff;
  color: var(--green);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-ghost-white{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.btn-ghost-white:hover{ background: rgba(255,255,255,.14); border-color:#fff; }

.btn-sm{ padding: 10px 20px; font-size: 14px; }
.btn-block{ width:100%; }

/* ============ Navbar ============ */
.navbar{
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(247,245,242,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(26,26,26,.07);
}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 78px;
  gap: 24px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo img{
  display:block;
  height: 48px;
  width: auto;
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 32px;
}
.nav-links a{
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  position: relative;
  padding: 6px 0;
  transition: color .15s ease;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-2px;
  height:2px;
  background: var(--green-bright);
  transition: right .2s ease;
}
.nav-links a:hover{ color: var(--green); }
.nav-links a:hover::after{ right:0; }

.nav-actions{ display:flex; align-items:center; gap:12px; }

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width: 40px;
  height: 40px;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(26,26,26,.12);
  background: transparent;
  cursor:pointer;
}
.burger span{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--text);
  transition: transform .25s ease, opacity .25s ease;
}
.burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  flex-direction:column;
  gap: 4px;
  background: var(--bg);
  border-bottom: 1px solid rgba(26,26,26,.08);
  padding: 12px 24px 24px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  padding: 14px 6px;
  font-weight: 500;
  font-size: 16px;
  border-bottom: 1px solid rgba(26,26,26,.06);
}
.mobile-menu .nav-actions{
  flex-direction: column;
  align-items: stretch;
  margin-top: 14px;
  gap: 10px;
}
.mobile-menu .nav-actions .btn{ width:100%; }

/* ============ Ticker ============ */
.ticker-wrap{
  background: var(--green);
  color:#fff;
  overflow:hidden;
  position: relative;
  display:flex;
  align-items:center;
  height: 44px;
}
.ticker-track{
  display:flex;
  gap: 48px;
  white-space:nowrap;
  animation: ticker-scroll 38s linear infinite;
  padding-left: 100%;
}
.ticker-track span{ font-size: 14px; font-weight: 500; letter-spacing:.01em; }
.ticker-track .up{ color:#BFE9D6; font-weight:700; }
.ticker-track .down{ color:#F4C7C0; font-weight:700; }
.ticker-note{
  position:absolute;
  right:0; top:0; bottom:0;
  display:flex; align-items:center;
  background: linear-gradient(90deg, rgba(45,106,79,0) 0%, var(--green) 38%);
  padding: 0 20px 0 60px;
  font-size: 12px;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: rgba(255,255,255,.85);
}
@keyframes ticker-scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}

/* ============ Hero ============ */
.hero{
  padding: 72px 0 96px;
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items:center;
}
.hero h1{
  font-size: clamp(36px, 5.4vw, 58px);
  margin-bottom: 22px;
}
.hero h1 span{ color: var(--green); }
.hero p.lead{
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-media{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3.6;
}
.hero-visual{ position:relative; width:100%; height:100%; }
.hv-mosaic{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width:100%; height:100%;
  gap: 2px;
}
.hv-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width: min(72%, 270px);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: var(--shadow-md);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap: 6px;
}
.hv-mark{ height: 32px; width:auto; margin-bottom: 4px; }
.hv-center strong{ font-family: var(--font-title); font-weight:800; font-size: 21px; color: var(--text); letter-spacing:-0.01em; }
.hv-center span{ font-size: 12.5px; line-height:1.5; color: var(--text-secondary); }
.hero-badge{
  position:absolute;
  left: -18px; bottom: 28px;
  background:#fff;
  border-radius: 16px;
  padding: 16px 22px;
  box-shadow: var(--shadow-md);
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight:700;
  font-size: 14px;
  max-width: 240px;
}
.hero-badge .dot{
  width: 12px; height:12px;
  border-radius:50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 5px rgba(61,153,112,.18);
  flex-shrink:0;
}

/* ============ Stats ============ */
.stats{
  background: var(--bg-secondary);
}
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align:center;
}
.stat-num{
  font-family: var(--font-title);
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight:800;
  color: var(--green);
}
.stat-label{
  margin-top:8px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* ============ Cards grid generic ============ */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.grid-2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Category cards */
.cat-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 28px;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.cat-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-bright);
}
.cat-card .cat-icon{
  width: 52px; height:52px;
  border-radius: 14px;
  background: var(--bg-secondary);
  display:flex; align-items:center; justify-content:center;
  font-size: 24px;
  color: var(--green);
}
.cat-card h3{ font-size: 19px; }
.cat-card p{ color: var(--text-secondary); font-size: 14.5px; }
.cat-card .cat-link{
  margin-top: auto;
  font-weight:700;
  font-size: 14px;
  color: var(--green);
  display:flex; align-items:center; gap:6px;
}

/* Product cards */
.product-card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
}
.product-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ============ Visual tiles (branded article visuals) ============ */
/* Cohesive technical-illustration system used in place of stock photography:
   each category gets a distinct gradient + glyph, drawn from the brand palette. */
.visual-tile{
  position:relative;
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  color:#fff;
  transition: transform .35s ease;
}
.visual-tile::before{
  content:"";
  position:absolute; inset:0;
  background: var(--vt-grad);
}
.visual-tile::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 32px);
}
.visual-tile .vt-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size: clamp(36px, 7vw, 84px);
  line-height:1;
  opacity:.24;
  font-family: var(--font-title);
}
.visual-tile .vt-meta{
  position:relative; z-index:1;
  padding: 16px 18px;
  display:flex; flex-direction:column; gap:3px;
}
.visual-tile .vt-cat{
  font-family: var(--font-title);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.visual-tile .vt-ref{
  font-size:11.5px;
  letter-spacing:.05em;
  opacity:.7;
  font-variant-numeric: tabular-nums;
}
/* Product-family tiles: replaced by hand-drawn material illustrations
   (real stock photography is rarely a true match for a specific reference,
   so each family gets an accurate technical illustration of its actual
   material — wood grain, copper sheen, plasterboard layering, etc.) */
.visual-tile.vt-bois{ --vt-grad: linear-gradient(155deg, #c9a273 0%, #7d6240 100%); }
.visual-tile.vt-metaux{ --vt-grad: linear-gradient(155deg, #7d99ad 0%, #44596d 100%); }
.visual-tile.vt-cuivre{ --vt-grad: linear-gradient(155deg, #c17955 0%, #874935 100%); }
.visual-tile.vt-cloisons{ --vt-grad: linear-gradient(155deg, #b3a48d 0%, #7c6f59 100%); }
.visual-tile.vt-isolants{ --vt-grad: linear-gradient(155deg, #8bc4a4 0%, #2D6A4F 100%); }
.visual-tile.vt-fixations{ --vt-grad: linear-gradient(155deg, #707a87 0%, #383d44 100%); }
.visual-tile.vt-marches{ --vt-grad: linear-gradient(155deg, #4faf80 0%, #2D6A4F 100%); }
.visual-tile.vt-conseils{ --vt-grad: linear-gradient(155deg, #d2a35a 0%, #a8721f 100%); }
.visual-tile.vt-btp{ --vt-grad: linear-gradient(155deg, #7d99ad 0%, #46637A 100%); }
.visual-tile.vt-cohesif{ --vt-grad: linear-gradient(155deg, #3c4b45 0%, #1f2b26 100%); }

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: 12px;
  font-weight:700;
  letter-spacing:.02em;
  padding: 6px 12px;
  border-radius: 999px;
}
.badge-stock{ background: rgba(45,106,79,.12); color: var(--green); }
.badge-partner{ background: rgba(70,99,122,.13); color: var(--blue-slate); }
.badge-import{ background: rgba(183,121,31,.14); color: var(--ochre); }
.pc-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.pc-body{
  padding: 20px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex:1;
}
.pc-cat{ font-size: 12px; color: var(--text-secondary); text-transform:uppercase; letter-spacing:.06em; }
.pc-title{ font-size: 17px; font-family: var(--font-title); font-weight:700; }
.pc-ref{ font-size: 13px; color: var(--text-secondary); }
.pc-price-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-top:auto;
  padding-top: 8px;
}
.pc-price{
  font-family: var(--font-title);
  font-size: 22px;
  font-weight:800;
  color: var(--green-bright);
}
.pc-price small{ font-size:13px; font-weight:500; color: var(--text-secondary); }
.pc-delai{ font-size: 13px; color: var(--text-secondary); }
.pc-actions{
  display:flex;
  gap: 10px;
  margin-top: 6px;
}
.pc-actions .btn{ flex:1; padding: 11px 14px; font-size:13.5px; }

/* ============ Toggle HT/TTC ============ */
.htttc-toggle{
  display:inline-flex;
  align-items:center;
  background: #fff;
  border: 1px solid rgba(26,26,26,.12);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.htttc-toggle button{
  border:none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 999px;
  cursor:pointer;
  color: var(--text-secondary);
  transition: background .18s ease, color .18s ease;
}
.htttc-toggle button.active{
  background: var(--green);
  color: #fff;
}

/* ============ Supplier / pricing section ============ */
.supplier-section{
  background: var(--green);
  color:#fff;
}
.supplier-section .section-head h2,
.supplier-section .section-head p{ color:#fff; }
.supplier-section .section-head p{ color: rgba(255,255,255,.8); }

.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.price-card{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  padding: 32px 28px;
  display:flex;
  flex-direction:column;
  gap: 16px;
  transition: transform .22s ease, background .22s ease;
  position:relative;
}
.price-card:hover{ transform: translateY(-6px); background: rgba(255,255,255,.12); }
.price-card.featured{
  background: #fff;
  color: var(--text);
  border-color: #fff;
  transform: scale(1.04);
  box-shadow: var(--shadow-lg);
}
.price-card.featured:hover{ transform: scale(1.04) translateY(-6px); }
.price-card .ribbon{
  position:absolute;
  top: -14px; left: 28px;
  background: var(--green-bright);
  color:#fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.price-card h3{ font-family: var(--font-title); font-size: 22px; }
.price-card .price{
  font-family: var(--font-title);
  font-size: 38px;
  font-weight:800;
}
.price-card .price small{ font-size: 14px; font-weight:500; opacity:.7; }
.price-card ul{ display:flex; flex-direction:column; gap:10px; font-size:14.5px; }
.price-card ul li{ display:flex; gap: 10px; align-items:flex-start; }
.price-card ul li::before{ content:"✓"; font-weight:800; color: var(--green-bright); flex-shrink:0; }
.price-card.featured ul li::before{ color: var(--green); }

/* ============ Why / arguments ============ */
.arguments-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.arg-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display:flex;
  gap: 18px;
  align-items:flex-start;
  transition: transform .2s ease, box-shadow .2s ease;
}
.arg-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.arg-card .arg-icon{
  width: 48px; height:48px;
  border-radius:12px;
  background: rgba(45,106,79,.1);
  color: var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size: 22px;
  flex-shrink:0;
}
.arg-card h3{ font-size: 17px; margin-bottom:6px; }
.arg-card p{ color: var(--text-secondary); font-size: 14.5px; }

/* ============ Particuliers band ============ */
.band-particuliers{
  background: var(--bg-secondary);
  text-align:center;
}
.band-particuliers .container{ max-width: 720px; }
.band-particuliers h2{ font-size: clamp(26px,4vw,38px); margin-bottom:16px; }
.band-particuliers p{ color: var(--text-secondary); font-size: 17px; margin-bottom: 28px; }

/* ============ Footer ============ */
footer{
  background: #fff;
  border-top: 1px solid rgba(26,26,26,.08);
  padding-top: 64px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.footer-grid h4{
  font-size: 14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom: 18px;
  color: var(--text-secondary);
}
.footer-grid ul{ display:flex; flex-direction:column; gap: 11px; }
.footer-grid ul a{ font-size: 14.5px; color: var(--text); transition: color .15s ease; }
.footer-grid ul a:hover{ color: var(--green); }
.footer-about p{ color: var(--text-secondary); font-size: 14.5px; margin: 14px 0; max-width: 280px; }
.footer-about .logo{ margin-bottom: 6px; }
.footer-about .logo img{ height: 44px; }
.footer-bottom{
  border-top: 1px solid rgba(26,26,26,.08);
  padding: 22px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.footer-bottom .legal-links{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-bottom .legal-links a:hover{ color: var(--green); }

/* ============ Page header (inner pages) ============ */
.page-header{
  padding: 56px 0 36px;
  border-bottom: 1px solid rgba(26,26,26,.08);
}
.page-header .head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 24px;
  flex-wrap:wrap;
}
.page-header h1{ font-size: clamp(30px,4.6vw,44px); margin-bottom:10px; }
.page-header p{ color: var(--text-secondary); font-size: 16px; max-width: 620px; }

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.breadcrumb a{ color: var(--text-secondary); }
.breadcrumb a:hover{ color: var(--green); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color: var(--text); font-weight:600; }

/* ============ Filters bar ============ */
.filters-bar{
  position: sticky;
  top: 78px;
  z-index: 90;
  background: rgba(247,245,242,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(26,26,26,.08);
  padding: 18px 0;
}
.filters-row{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
}
.filters-row select,
.filters-row input[type="search"],
.filters-row input[type="text"]{
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid rgba(26,26,26,.16);
  background: #fff;
  color: var(--text);
}
.filters-row select{ cursor:pointer; min-width: 150px; }
.filters-row input[type="search"]{ flex:1; min-width: 200px; }
.filters-toggle{ display:none; }
.results-count{ font-size: 14px; color: var(--text-secondary); margin-top: 14px; }

/* ============ Catalogue grid ============ */
.catalogue-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 36px;
}
.empty-state{
  text-align:center;
  padding: 64px 20px;
  color: var(--text-secondary);
}

/* ============ Sticky mobile bars ============ */
.sticky-mobile-bar{
  display:none;
  position: fixed;
  left:16px; right:16px; bottom: 16px;
  z-index: 250;
  background: linear-gradient(135deg, #3D9970 0%, #1F3B30 100%);
  color:#fff;
  border-radius: 20px;
  padding: 16px 18px 16px 22px;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  box-shadow: 0 20px 48px -8px rgba(15,33,26,.4), 0 2px 8px rgba(15,33,26,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.sticky-mobile-bar .smb-text{
  display:flex;
  align-items:center;
  gap: 13px;
  font-size: 13px;
  line-height:1.25;
  flex: 1;
  min-width: 0;
}
.sticky-mobile-bar .smb-dot{
  width: 9px; height:9px;
  border-radius:50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
  flex-shrink:0;
}
.sticky-mobile-bar .smb-copy{ display:flex; flex-direction:column; gap: 3px; min-width:0; }
.sticky-mobile-bar .smb-copy strong{
  font-size: 15px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.sticky-mobile-bar .smb-sub{
  color: rgba(255,255,255,.62);
  font-size: 12px;
  letter-spacing:.005em;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.sticky-mobile-bar .btn{
  flex-shrink:0;
  width: auto;
  padding: 12px 24px;
  font-size: 14px;
  letter-spacing:.01em;
}
.sticky-mobile-bar .count-pill{
  display:inline-block;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  white-space: nowrap;
  margin: 0 6px;
}

/* ============ Reassurance band ============ */
.reassurance{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 28px;
  margin-top: 56px;
}
.reassurance .item{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
}
.reassurance .item .ico{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  color: var(--green);
  flex-shrink:0;
  box-shadow: var(--shadow-sm);
}

/* ============ Product detail page ============ */
.product-detail{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items:start;
}
.product-detail--no-visual{
  grid-template-columns: 1fr;
  max-width: 760px;
}

.pd-info h1{ font-size: clamp(26px,3.6vw,34px); margin: 10px 0 6px; }
.pd-ref{ color: var(--text-secondary); font-size: 14px; margin-bottom: 18px; }
.pd-price-block{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 14px;
  background:#fff;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.pd-price-main{ font-family: var(--font-title); font-size: 34px; font-weight:800; color: var(--green-bright); }
.pd-price-sub{ font-size: 13.5px; color: var(--text-secondary); }
.pd-meta-row{ display:flex; gap: 24px; flex-wrap:wrap; margin-bottom: 22px; font-size: 14.5px; }
.pd-meta-row .meta-item{ color: var(--text-secondary); }
.pd-meta-row .meta-item strong{ color: var(--text); display:block; font-size:15px; }

.qty-selector{
  display:inline-flex;
  align-items:center;
  border: 1px solid rgba(26,26,26,.16);
  border-radius: 12px;
  overflow:hidden;
  background:#fff;
}
.qty-selector button{
  border:none;
  background: var(--bg-secondary);
  width: 42px; height: 42px;
  font-size: 18px;
  font-weight:700;
  cursor:pointer;
  color: var(--green);
}
.qty-selector input{
  width: 56px;
  text-align:center;
  border:none;
  font-family: var(--font-body);
  font-weight:700;
  font-size: 15px;
  -moz-appearance: textfield;
}
.qty-row{ display:flex; align-items:center; gap: 18px; flex-wrap:wrap; margin-bottom: 22px; }
.qty-total{ font-weight:700; font-size: 15px; }
.qty-total span{ color: var(--green-bright); font-family: var(--font-title); font-size: 18px; }

.pd-ctas{ display:flex; gap: 14px; flex-wrap:wrap; margin-bottom: 24px; }

.mini-reassurance{
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-bottom: 36px;
}
.mini-reassurance span{ display:flex; align-items:center; gap:7px; }
.mini-reassurance span::before{ content:"✓"; color: var(--green-bright); font-weight:800; }

/* Tabs / accordion */
.pd-tabs-nav{ display:flex; gap: 8px; border-bottom: 1px solid rgba(26,26,26,.1); margin-bottom: 22px; flex-wrap:wrap; }
.pd-tabs-nav button{
  border:none;
  background:transparent;
  font-family: var(--font-body);
  font-weight:700;
  font-size: 14.5px;
  padding: 12px 18px;
  cursor:pointer;
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  margin-bottom:-1px;
}
.pd-tabs-nav button.active{ color: var(--green); border-color: var(--green-bright); }
.pd-tab-panel{ display:none; font-size: 15px; color: var(--text-secondary); line-height:1.7; }
.pd-tab-panel.active{ display:block; }
.pd-tab-panel ul{ display:flex; flex-direction:column; gap:8px; }
.pd-tab-panel ul li{ display:flex; gap:10px; }
.pd-tab-panel ul li strong{ color: var(--text); min-width: 150px; }

.accordion-item{ border-bottom: 1px solid rgba(26,26,26,.1); }
.accordion-trigger{
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  font-family: var(--font-body);
  font-weight:700;
  font-size: 15.5px;
  padding: 18px 4px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: var(--text);
}
.accordion-trigger .chev{ transition: transform .22s ease; color: var(--green); }
.accordion-item.open .accordion-trigger .chev{ transform: rotate(180deg); }
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .28s ease;
}
.accordion-item.open .accordion-panel{ max-height: 600px; }
.accordion-panel-inner{ padding: 0 4px 20px; color: var(--text-secondary); font-size: 14.5px; line-height:1.7; }

/* Quote block on product page */
.quote-express{
  background: rgba(45,106,79,.07);
  border: 1px solid rgba(45,106,79,.18);
  border-radius: var(--radius);
  padding: 28px;
  margin: 40px 0;
}
.quote-express h3{ font-size: 19px; margin-bottom: 6px; }
.quote-express p{ color: var(--text-secondary); font-size: 14.5px; margin-bottom: 18px; }
.quote-express form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.quote-express form .full{ grid-column: 1 / -1; }

/* Carousel */
.carousel{
  display:flex;
  gap: 20px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.carousel::-webkit-scrollbar{ height: 6px; }
.carousel::-webkit-scrollbar-thumb{ background: rgba(26,26,26,.16); border-radius: 6px; }
.carousel .product-card{ min-width: 270px; scroll-snap-align: start; flex-shrink:0; }

/* ============ Forms ============ */
.field-group{ display:flex; flex-direction:column; gap: 6px; }
.field-group label{ font-size: 13.5px; font-weight:700; color: var(--text); }
.field-group input,
.field-group select,
.field-group textarea{
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(26,26,26,.16);
  background: #fff;
  color: var(--text);
  width: 100%;
}
.field-group textarea{ resize: vertical; min-height: 110px; }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus{ outline: 2px solid var(--green-bright); outline-offset: 1px; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row .full{ grid-column: 1/-1; }

.toggle-pair{ display:flex; gap: 12px; }
.toggle-pill{
  flex:1;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid rgba(26,26,26,.14);
  background:#fff;
  font-family: var(--font-body);
  font-weight:700;
  font-size: 15px;
  cursor:pointer;
  text-align:center;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.toggle-pill.active{ border-color: var(--green); background: rgba(45,106,79,.08); color: var(--green); }

/* ============ Devis page ============ */
.devis-hero{ text-align:center; padding-bottom: 30px; }
.devis-hero h1{ font-size: clamp(30px,5vw,46px); margin-bottom: 14px; }
.devis-hero p{ color: var(--text-secondary); font-size: 17px; max-width: 560px; margin: 0 auto 28px; }
.reassure-badges{
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap:wrap;
}
.reassure-badges span{
  background:#fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight:700;
  box-shadow: var(--shadow-sm);
  color: var(--green);
}

.devis-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items:start;
  max-width: 1080px;
  margin: 0 auto;
}
.devis-form-card{
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 36px;
}
.form-step{ margin-bottom: 28px; }
.form-step h3{ font-size: 16px; margin-bottom: 14px; display:flex; align-items:center; gap:10px; }
.form-step h3 .step-num{
  width: 28px; height:28px;
  border-radius:50%;
  background: var(--green);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 13px;
}
.field-stack{ display:flex; flex-direction:column; gap: 16px; }
.confirmation-box{
  text-align:center;
  padding: 48px 24px;
}
.confirmation-box .check{
  width: 64px; height:64px;
  border-radius:50%;
  background: rgba(45,106,79,.12);
  color: var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size: 30px;
  margin: 0 auto 18px;
}
.confirmation-box h3{ font-size: 22px; margin-bottom: 10px; }
.confirmation-box p{ color: var(--text-secondary); }

.devis-side{ display:flex; flex-direction:column; gap: 18px; }
.side-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.side-card h4{ font-size: 14px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-secondary); margin-bottom: 14px; }
.side-card ul{ display:flex; flex-direction:column; gap: 12px; font-size: 14.5px; }
.side-card ul li{ display:flex; gap: 10px; }
.side-card ul li::before{ content:"✓"; color: var(--green-bright); font-weight:800; }

/* ============ Actualités ============ */
.actu-filters{ display:flex; gap: 10px; flex-wrap:wrap; margin-bottom: 36px; }
.actu-filters button{
  border: 1px solid rgba(26,26,26,.16);
  background: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight:600;
  font-size: 14px;
  cursor:pointer;
  color: var(--text-secondary);
  transition: all .18s ease;
}
.actu-filters button.active{ background: var(--green); color:#fff; border-color: var(--green); }

.featured-article{
  background: #fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 48px;
}
.fa-link{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
}
.featured-article .fa-media{ background: var(--bg-secondary); aspect-ratio: 16/11; overflow:hidden; border-radius: var(--radius); }
.featured-article .fa-body{ padding: 36px 36px 36px 0; display:flex; flex-direction:column; justify-content:center; gap: 12px; }
.fa-meta{ display:flex; gap: 14px; font-size: 13px; color: var(--text-secondary); }
.featured-article h2{ font-size: clamp(22px,3.4vw,30px); }
.featured-article p{ color: var(--text-secondary); }

.article-card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ac-link{ display:flex; flex-direction:column; height:100%; }
.article-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.article-card .ac-media{ aspect-ratio: 16/10; background: var(--bg-secondary); overflow:hidden; }
.article-card .ac-body{ padding: 22px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.article-card h3{ font-size: 17px; }
.article-card p{ color: var(--text-secondary); font-size: 14px; }

.fa-link, .ac-link{ color:inherit; text-decoration:none; }
.fa-link:hover h2, .ac-link:hover h3{ color: var(--green); }
.featured-article h2, .article-card h3{ transition: color .15s ease; }

/* ---------- Article detail ---------- */
.article-detail{ max-width: 760px; margin: 0 auto; }
.article-detail > .cat-pill{ margin-bottom: 14px; }
.article-detail h1{ font-size: clamp(28px, 4.4vw, 40px); line-height:1.18; margin-bottom: 14px; }
.article-visual{ aspect-ratio: 16/9; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); margin: 28px 0 8px; }
.article-body{ margin-top: 28px; display:flex; flex-direction:column; gap: 20px; }
.article-body p{ font-size: 16.5px; line-height:1.75; color: var(--text-secondary); }
.article-body h2{ font-size: clamp(20px, 2.6vw, 24px); margin-top: 6px; }
.article-cta{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  margin-top: 44px; padding: 26px 30px; border-radius: var(--radius);
  background: var(--bg-secondary);
}
.article-cta strong{ display:block; font-size: 16px; margin-bottom: 4px; }
.article-cta span{ color: var(--text-secondary); font-size: 14px; }
.cat-pill{
  align-self:flex-start;
  font-size: 12px;
  font-weight:700;
  color: var(--green);
  background: rgba(45,106,79,.1);
  padding: 5px 12px;
  border-radius: 999px;
}
.pagination{ display:flex; justify-content:center; gap: 8px; margin-top: 48px; }
.pagination button{
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(26,26,26,.14);
  background:#fff;
  font-weight:700;
  cursor:pointer;
  color: var(--text);
}
.pagination button.active{ background: var(--green); color:#fff; border-color: var(--green); }

.newsletter-block{
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 40px;
  text-align:center;
  margin-top: 64px;
}
.newsletter-block h3{ font-size: 22px; margin-bottom: 8px; }
.newsletter-block p{ color: var(--text-secondary); margin-bottom: 22px; font-size: 14.5px; }
.newsletter-form{ display:flex; gap: 12px; max-width: 460px; margin: 0 auto; }
.newsletter-form input{
  flex:1;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(26,26,26,.16);
  background: #fff;
  color: var(--text);
  min-width: 0;
}
.newsletter-form input:focus{ outline: 2px solid var(--green-bright); outline-offset: 1px; }
.newsletter-rgpd{ font-size: 12.5px; color: var(--text-secondary); margin-top: 14px; }

/* ============ Steps (fournisseurs) ============ */
.steps-row{ display:flex; gap: 0; position:relative; }
.step-item{ flex:1; text-align:center; position:relative; padding: 0 16px; }
.step-item .step-circle{
  width: 56px; height:56px;
  border-radius:50%;
  background: var(--green);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-title);
  font-weight:800;
  font-size: 20px;
  margin: 0 auto 16px;
  position:relative;
  z-index:2;
}
.step-item .step-line{
  position:absolute;
  top: 28px; left: 50%; right: -50%;
  height: 2px;
  background: rgba(45,106,79,.25);
  z-index:1;
}
.step-item:last-child .step-line{ display:none; }
.step-item h3{ font-size: 17px; margin-bottom: 8px; }
.step-item p{ color: var(--text-secondary); font-size: 14px; }

/* Comparison table */
.table-wrap{ overflow-x:auto; }
table.compare{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  min-width: 640px;
}
table.compare th, table.compare td{
  padding: 16px 20px;
  text-align:left;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(26,26,26,.08);
}
table.compare th{
  font-family: var(--font-title);
  font-weight:700;
  background: var(--bg-secondary);
}
table.compare td:first-child, table.compare th:first-child{
  position: sticky; left:0;
  background: var(--bg-secondary);
  font-weight:700;
  z-index: 2;
}
table.compare th:first-child{ z-index:3; }
table.compare td.yes{ color: var(--green); font-weight:800; }
table.compare td.no{ color: var(--text-secondary); }

/* Generic content table (legal pages) */
table.simple{ width:100%; border-collapse:collapse; margin: 20px 0; }
table.simple th, table.simple td{ padding: 12px 16px; border: 1px solid rgba(26,26,26,.12); font-size: 14.5px; text-align:left; }
table.simple th{ background: var(--bg-secondary); font-family: var(--font-title); }

/* Annuaire fournisseurs */
.supplier-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.supplier-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.supplier-card .sc-top{ display:flex; align-items:center; gap: 14px; }
.supplier-card .sc-logo{
  width: 52px; height:52px;
  border-radius: 12px;
  background: var(--bg-secondary);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-title);
  font-weight:800;
  color: var(--green);
  font-size: 18px;
}
.supplier-card h3{ font-size: 17px; }
.supplier-card .sc-loc{ font-size: 13px; color: var(--text-secondary); }
.supplier-card p{ color: var(--text-secondary); font-size: 14px; }
.supplier-card .sc-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.supplier-card .sc-tags span{ font-size: 12px; background: var(--bg-secondary); padding: 5px 10px; border-radius: 999px; color: var(--text-secondary); }

/* Pôles cards (a-propos) */
.poles-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pole-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: 22px;
  text-align:center;
  transition: transform .2s ease, background .2s ease;
}
.pole-card:hover{ transform: translateY(-5px); background: rgba(255,255,255,.16); }
.pole-card--parent{ background: rgba(255,255,255,.16); border-color: var(--green-bright); }
.pole-card--parent:hover{ background: rgba(255,255,255,.22); }
.pole-card .pole-name{ font-family: var(--font-title); font-weight:700; font-size:16px; margin-bottom: 6px; }
.pole-card .pole-domain{ font-size: 13px; opacity: .8; }

.engagement-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.engagement-card{
  background:#fff;
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  text-align:center;
}
.engagement-card .e-icon{
  width: 50px; height:50px;
  border-radius: 12px;
  background: rgba(45,106,79,.1);
  color: var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size: 22px;
  margin: 0 auto 14px;
}
.engagement-card h3{ font-size: 16px; margin-bottom:6px; }
.engagement-card p{ font-size: 13.5px; color: var(--text-secondary); }

.contact-table{ width:100%; border-collapse:collapse; }
.contact-table td{ padding: 14px 0; border-bottom: 1px solid rgba(26,26,26,.08); font-size: 15px; }
.contact-table td:first-child{ font-weight:700; width: 200px; color: var(--text-secondary); }

/* ============ Legal pages ============ */
.legal-content{ max-width: 820px; margin: 0 auto; }
.legal-content h2{ font-size: 22px; margin: 36px 0 14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size: 17px; margin: 22px 0 10px; }
.legal-content p{ color: var(--text-secondary); margin-bottom: 14px; }
.legal-content ul{ margin: 0 0 14px 0; display:flex; flex-direction:column; gap: 8px; }
.legal-content ul li{ color: var(--text-secondary); padding-left: 22px; position:relative; }
.legal-content ul li::before{ content:"—"; position:absolute; left:0; color: var(--green); }
.legal-content .updated{ color: var(--text-secondary); font-size: 13.5px; margin-bottom: 30px; }

/* FAQ */
.faq-list{ max-width: 760px; margin: 0 auto; }

/* Animated counter helper */
.count-target{ display:inline-block; }

/* ============ Responsive ============ */
@media (max-width: 1080px){
  .grid-3, .grid-4, .pricing-grid, .reassurance, .arguments-grid, .engagement-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 36px; }
  .catalogue-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .poles-grid{ grid-template-columns: repeat(3,1fr); }
  .devis-layout{ grid-template-columns: 1fr; }
  .devis-side{ flex-direction:row; flex-wrap:wrap; }
  .devis-side .side-card{ flex: 1 1 260px; }
}

@media (max-width: 880px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; }
  .product-detail{ grid-template-columns: 1fr; }
  .fa-link{ grid-template-columns: 1fr; gap: 0; }
  .featured-article .fa-media{ aspect-ratio: 16/10; border-radius: 0; }
  .featured-article .fa-body{ padding: 28px; }
}

@media (max-width: 760px){
  section{ padding: 56px 0; }
  .ticker-note{ display:none; }
  .nav-links{ display:none; }
  .nav-actions{ display:none; }
  .burger{ display:flex; }
  .navbar .container{ height: 68px; }
  .filters-bar{ top: 68px; }
  .navbar .logo img{ height: 38px; }

  .grid-3, .grid-4, .grid-2, .pricing-grid, .reassurance, .arguments-grid, .stats-grid,
  .catalogue-grid, .engagement-grid, .field-row, .quote-express form{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .poles-grid{ grid-template-columns: repeat(2,1fr); }

  .price-card.featured{ transform: none; }
  .price-card.featured:hover{ transform: translateY(-4px); }

  .steps-row{ flex-direction:column; gap: 28px; }
  .step-item .step-line{ display:none; }

  .sticky-mobile-bar{ display:flex; }
  body{ padding-bottom: 96px; }

  .filters-bar .container{ display:flex; flex-direction:column; align-items:stretch; }
  .filters-toggle{ display:inline-flex; align-self:flex-start; }
  .filters-row{ display:none; flex-direction:column; align-items:stretch; margin-top: 14px; }
  .filters-row.open{ display:flex; }
  .filters-row select, .filters-row input{ width:100%; }

  .hero{ padding: 40px 0 64px; }
  .hero-badge{ left: 12px; bottom: 16px; max-width: 200px; padding: 12px 16px; font-size:13px; }

  .featured-article .fa-body{ padding: 24px; }

  .article-cta{ flex-direction:column; align-items:flex-start; padding: 22px; }
  .article-cta .btn{ width:100%; text-align:center; }

  table.compare td:first-child, table.compare th:first-child{ position: static; }
}

@media (max-width: 520px){
  .container{ padding: 0 16px; }
  body{ font-size: 15px; }
  .btn{ padding: 13px 22px; font-size: 14px; width:100%; }
  .hero-ctas .btn, .pd-ctas .btn{ width:auto; }
  .hero-ctas{ flex-direction:column; }
  .hero-ctas .btn{ width:100%; }
  .pricing-grid .btn, .price-card .btn{ width:100%; }
  .devis-form-card{ padding: 22px; }
  .newsletter-form{ flex-direction:column; }
  .newsletter-form input{ width:100%; }
  .toggle-pair{ flex-direction:column; }
}