/* =========================================================
   GREENSTART — Feuille de style partagée (site.css)
   Chargée par TOUTES les pages du site.
   Automatisation & contrôle de procédés (PLC / DCS / ICSS)
   ---------------------------------------------------------
   Pour changer la couleur principale du site : modifier --primary.
   ========================================================= */

:root{
  /* --- Couleurs de marque --- */
  --primary:      #0C8A4D;   /* vert GreenStart */
  --primary-600:  #0A7643;   /* vert foncé (hover) */
  --primary-050:  #E8F5EE;   /* vert très clair (fonds) */
  --accent:       #F5A623;   /* ambre sécurité (CTA / signaux) */
  --accent-600:   #E0940E;

  --dark:         #0F1B24;   /* acier / petrol foncé (footer, sections) */
  --dark-2:       #16262F;

  --ink:          #142019;   /* texte principal */
  --muted:        #5B6B62;   /* texte secondaire */
  --line:         #E4EAE6;   /* filets / bordures */

  --bg:           #FFFFFF;
  --bg-soft:      #F5F8F6;   /* section alternée */
  --bg-soft-2:    #EEF3F0;

  /* --- Typo --- */
  --font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head: 'Space Grotesk', 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Divers --- */
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px rgba(15,27,36,.10);
  --shadow-sm: 0 8px 22px rgba(15,27,36,.08);
  --container: 1320px;
}

*{ box-sizing:border-box; }
html,body{ overflow-x:clip; max-width:100%; }
html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.65;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{ font-family:var(--font-head); font-weight:700; line-height:1.15; color:var(--ink); letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,4.6vw,3.5rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1rem; }
a{ text-decoration:none; color:var(--primary); }
a:hover{ color:var(--primary-600); }
img{ max-width:100%; height:auto; display:block; }

.container-xl,.container{ max-width:var(--container); }

/* --- Eyebrow / labels techniques (signature datasheet) --- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.92rem;
  *font-size:.72rem;
  letter-spacing:.19em;
  *letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--primary-600);
  font-weight:600;
  display:inline-flex; align-items:center; gap:.55rem;
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--primary); display:inline-block;
}

/* Chips "spec" en monospace (SIL 3, PROFIBUS, IEC 61511…) */
.spec-tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.74rem; font-weight:600;
  letter-spacing:.02em;
  color:var(--dark); background:#fff;
  border:1px solid var(--line);
  padding:.34rem .6rem; border-radius:8px;
}
.spec-tag i{ color:var(--primary); font-size:.8rem; }
.spec-tag.on-dark{ color:#DDE7E1; background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.spec-tag.on-dark i{ color:var(--accent); }

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{ font-weight:600; border-radius:12px; padding:.8rem 1.4rem; transition:.2s; border:2px solid transparent; }
.btn-lg{ padding:.95rem 1.7rem; font-size:1.02rem; }

.btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-600); border-color:var(--primary-600); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }

.btn-accent{ background:var(--accent); border-color:var(--accent); color:#1c1300; }
.btn-accent:hover{ background:var(--accent-600); border-color:var(--accent-600); color:#1c1300; transform:translateY(-2px); box-shadow:var(--shadow-sm); }

.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--primary); color:var(--primary-600); }

.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.28); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; color:#fff; }

/* =========================================================
   NAVBAR
   ========================================================= */
.topbar{ background:var(--dark); color:#B9C6BE; font-size:.83rem; }
.topbar a{ color:#DDE7E1; }
.topbar a:hover{ color:#fff; }

.navbar{ background:#fff; box-shadow:0 1px 0 var(--line); padding:.6rem 0; }
.navbar-brand{ font-family:var(--font-head); font-weight:700; font-size:1.8rem; color:var(--ink); display:flex; align-items:center; gap:.55rem; }
.navbar-brand:hover{ color:var(--ink); }
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-600));
  display:grid; place-items:center; color:#fff; font-size:1rem; box-shadow:0 6px 14px rgba(12,138,77,.35);
}
.brand-name .accent{ color:var(--primary); }

.navbar .nav-link{ font-weight:500; color:var(--ink) !important; padding:.55rem .95rem !important; border-radius:8px; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--primary-600) !important; background:var(--primary-050); }

.dropdown-menu{ border:none; box-shadow:var(--shadow); border-radius:14px; padding:.5rem; margin-top:.5rem; min-width:290px; }
.dropdown-item{ padding:.6rem .8rem; border-radius:9px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:.6rem; }
.dropdown-item i{ color:var(--primary); width:18px; text-align:center; }
.dropdown-item:hover{ background:var(--primary-050); color:var(--primary-600); }
.dropdown-divider{ margin:.35rem .4rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ background:
      radial-gradient(1100px 500px at 88% -10%, rgba(12,138,77,.10), transparent 60%),
      linear-gradient(180deg,#FBFDFC, #F2F7F4);
  padding:4.4rem 0 3.6rem; position:relative; overflow:hidden; }
.hero .badge-soft{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:.4rem .8rem; border-radius:999px; font-size:.85rem; font-weight:500; margin-bottom:1.3rem;
}
.hero .badge-soft i{ color:var(--primary); }
.hero h1{ margin-bottom:1rem; }
.hero-lead{ font-size:1.12rem; color:var(--muted); margin-bottom:1.4rem; }
.hero-bullets{ list-style:none; padding:0; margin:0 0 1.8rem; }
.hero-bullets li{ display:flex; gap:.65rem; align-items:flex-start; margin-bottom:.6rem; font-weight:500; }
.hero-bullets i{ color:var(--primary); margin-top:.28rem; }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.hero-img-wrap{ position:relative; }
.hero-img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover; }
.hero-chip{
  position:absolute; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  border-radius:12px; padding:.6rem .85rem; font-family:var(--font-mono); font-size:.76rem; font-weight:600;
  display:flex; align-items:center; gap:.5rem;
}
.hero-chip i{ color:var(--primary); }
.hero-chip.c1{ top:14px; left:-10px; }
.hero-chip.c2{ bottom:18px; right:-8px; }

/* Bandeau logos / preuve */
.trust{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust .lab{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.trust .std{ font-family:var(--font-mono); font-weight:600; color:var(--dark); opacity:.75; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:4.4rem 0; }
.section.alt{ background:var(--bg-soft); }
.section.dark{ background:var(--dark); color:#DDE7E1; }
.section.dark h1,.section.dark h2,.section.dark h3{ color:#fff; }
.section-head{ max-width:720px; margin:0 auto 2.6rem; text-align:center; }
.section-head p{ color:var(--muted); font-size:1.05rem; }
.section.dark .section-head p{ color:#AEBFB6; }

/* Secteurs strip */
.sector-grid{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.sector-pill{
  display:inline-flex; align-items:center; gap:.55rem;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:.6rem 1.05rem; font-weight:500; font-size:.95rem; transition:.2s;
}
.sector-pill i{ color:var(--primary); }
.sector-pill:hover{ border-color:var(--primary); color:var(--primary-600); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* Cartes services */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); gap:1.4rem; }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem; transition:.22s; height:100%; position:relative;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.svc-ico{
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center;
  background:var(--primary-050); color:var(--primary-600); font-size:1.25rem; margin-bottom:1rem;
}
.svc-card h3{ font-size:1.18rem; margin-bottom:.5rem; }
.svc-card p{ color:var(--muted); font-size:.96rem; margin-bottom:.9rem; }
.svc-card .more{ font-weight:600; font-family:var(--font-mono); font-size:.8rem; letter-spacing:.03em; }
.svc-card .more i{ transition:.2s; }
.svc-card:hover .more i{ transform:translateX(4px); }

/* Bloc "problèmes" */
.pain-card{ background:#fff; /*border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px;*/ padding:1.2rem 1.3rem; height:100%; }
.pain-card .ico{ font-size:1.4rem; margin-bottom:.5rem; }
.pain-card h3{ font-size:1.05rem; margin-bottom:.35rem; }
.pain-card p{ color:var(--muted); font-size:.92rem; margin:0; }

/* Promesse (features) */
.feat{ display:flex; gap:1rem; align-items:flex-start; }
.feat .ico{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; background:var(--primary-050); color:var(--primary-600); display:grid; place-items:center; font-size:1.15rem; }
.section.dark .feat .ico{ background:rgba(245,166,35,.14); color:var(--accent); }
.feat h3{ font-size:1.08rem; margin-bottom:.3rem; }
.feat p{ color:var(--muted); font-size:.94rem; margin:0; }
.section.dark .feat p{ color:#AEBFB6; }

/* Cas clients */
.case-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:100%; transition:.2s; }
.case-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.case-img{ width:100%; height:190px; object-fit:cover; }
.case-body{ padding:1.3rem 1.4rem 1.5rem; }
.case-tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--primary-600); font-weight:600; }
.case-card h3{ font-size:1.12rem; margin:.5rem 0 .5rem; }
.case-card p{ color:var(--muted); font-size:.93rem; margin-bottom:1rem; }
.case-metric{ display:flex; gap:1.2rem; border-top:1px solid var(--line); padding-top:.9rem; }
.case-metric .n{ font-family:var(--font-head); font-weight:700; font-size:1.25rem; color:var(--primary-600); }
.case-metric .l{ font-size:.78rem; color:var(--muted); }

/* Pourquoi nous */
.why-card{ text-align:center; padding:1.8rem 1.3rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:.22s; height:100%; }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
.why-card .ico{ width:58px; height:58px; border-radius:15px; background:var(--primary-050); color:var(--primary-600); display:grid; place-items:center; font-size:1.4rem; margin:0 auto 1rem; }
.why-card h3{ font-size:1.08rem; margin-bottom:.4rem; }
.why-card p{ color:var(--muted); font-size:.92rem; margin:0; }

/* Processus */
.step{ position:relative; padding:1.6rem 1.4rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); height:100%; }
.step .num{ font-family:var(--font-mono); font-weight:700; font-size:.9rem; color:#fff; background:var(--primary); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:.9rem; }
.step h3{ font-size:1.08rem; margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:.93rem; margin:0; }

/* Bandeau CTA */
.cta-band{ background:linear-gradient(120deg,var(--primary-600),var(--primary)); color:#fff; border-radius:22px; padding:2.6rem; text-align:center; box-shadow:var(--shadow); }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.9); }
.cta-mini{ font-family:var(--font-mono); font-size:.8rem; color:rgba(255,255,255,.9); margin-top:.9rem; }

/* =========================================================
   FORMULAIRE CONTACT / DIAGNOSTIC
   ========================================================= */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:2rem; }
.form-card h3{ font-size:1.35rem; margin-bottom:.3rem; }
.form-card .sub{ color:var(--muted); font-size:.95rem; margin-bottom:1.3rem; }
.form-label{ font-weight:500; font-size:.9rem; margin-bottom:.3rem; }
.form-control,.form-select{ border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem; }
.form-control:focus,.form-select:focus{ border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(12,138,77,.15); }
.form-note{ font-size:.8rem; color:var(--muted); }

.include-card{ background:var(--primary-050); border:1px solid #CFE9DB; border-radius:var(--radius); padding:1.6rem; }
.include-card h4{ font-family:var(--font-head); font-size:1.05rem; margin-bottom:1rem; }
.include-card ul{ list-style:none; padding:0; margin:0; }
.include-card li{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:.6rem; font-size:.93rem; }
.include-card li i{ color:var(--primary); margin-top:.25rem; }

.expert-card{ background:var(--bg-soft); color:var(--muted); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }
.expert-photo{ width:68px; height:68px; flex:0 0 auto; border-radius:50%; object-fit:cover; background:var(--primary-050); border:3px solid #fff; box-shadow:0 0 0 1px var(--line), var(--shadow-sm); display:grid; place-items:center; color:var(--primary-600); font-size:1.5rem; }
.expert-card h4{ color:var(--ink); font-size:1.1rem; margin:0; }
.expert-card .role{ color:var(--primary-600); font-family:var(--font-mono); font-size:.78rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--dark); color:#AEBFB6; padding:3.4rem 0 1.6rem; }
.footer h5{ color:#fff; font-family:var(--font-head); font-size:.95rem; letter-spacing:.02em; margin-bottom:1rem; }
.footer a{ color:#AEBFB6; font-size:.92rem; }
.footer a:hover{ color:#fff; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:.55rem; }
.footer .brand-mark{ width:38px; height:38px; }
.footer .navbar-brand{ color:#fff; font-size:1.4rem; }
.footer-desc{ font-size:.92rem; color:#93A69C; max-width:34ch; }
.footer-contact a{ display:inline-flex; align-items:center; gap:.5rem; color:#DDE7E1; font-weight:500; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.09); margin-top:2.4rem; padding-top:1.4rem; font-size:.83rem; color:#7E9188; }

/* =========================================================
   PAGES INTERNES (legal / article)
   ========================================================= */
.page-hero{ background:var(--dark); color:#DDE7E1; padding:3.2rem 0; }
.page-hero h1{ color:#fff; }
.page-hero .eyebrow{ color:var(--accent); }
.page-hero .eyebrow::before{ background:var(--accent); }
.legal-content{ max-width:820px; margin:0 auto; }
.legal-content h2{ font-size:1.4rem; margin:2rem 0 .8rem; }
.legal-content p,.legal-content li{ color:var(--muted); }

/* =========================================================
   RESPONSIVE & ACCESSIBILITÉ
   ========================================================= */
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

@media (max-width:991px){
  .hero{ padding:3rem 0 2.4rem; }
  .hero-img{ margin-top:2rem; }
  .hero-chip{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* =========================================================
   TARIFS
   ========================================================= */
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.4rem; align-items:stretch; }
.price-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.5rem; display:flex; flex-direction:column; position:relative; transition:.2s; }
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.price-card.featured{ border:2px solid var(--primary); box-shadow:var(--shadow); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#1c1300; font-family:var(--font-head); font-size:.72rem; font-weight:600; padding:.3rem .75rem; border-radius:999px; letter-spacing:.03em; white-space:nowrap; }
.price-name{ font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:var(--primary-600); margin-bottom:.35rem; }
.price-desc{ color:var(--muted); font-size:.9rem; min-height:2.6rem; margin-bottom:1rem; }
.price-amount{ font-family:var(--font-head); font-weight:700; font-size:1.2rem; }
.price-period{ color:var(--muted); font-size:.85rem; margin-bottom:1.1rem; }
.price-features{ list-style:none; padding:0; margin:0 0 1.4rem; }
.price-features li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; margin-bottom:.55rem; }
.price-features li i{ margin-top:.25rem; }
.price-features li i.yes{ color:var(--primary); }
.price-features li i.no{ color:#C3CEC7; }
.price-features li.off{ color:#9AA8A0; }
.price-card .btn{ margin-top:auto; }

/* =========================================================
   COMPARATIF TARIFS
   ========================================================= */
.cmp-wrap{ max-width:1000px; margin:0 auto; }
.cmp{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:.92rem; }
.cmp th,.cmp td{ padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:middle; }
.cmp thead th{ background:var(--bg-soft); font-family:var(--font-head); font-weight:700; text-align:center; }
.cmp thead th:first-child{ text-align:left; }
.cmp thead th.hot{ color:var(--primary-600); position:relative; }
.cmp td.c{ text-align:center; }
.cmp td.feat-name{ font-weight:600; }
.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp col.hot,.cmp td.hot{ background:rgba(12,138,77,.045); }
.cmp .yes{ color:var(--primary); }
.cmp .no{ color:#C3CEC7; }
.cmp .val{ font-family:var(--font-mono); font-size:.82rem; color:var(--dark); }
@media(max-width:820px){ .cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .cmp{ min-width:680px; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-aside .lead{ font-size:1.05rem; color:var(--muted); }
.contact-points{ list-style:none; padding:0; margin:1.6rem 0 1.8rem; }
.contact-points li{ display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.95rem; font-size:.96rem; }
.contact-points li i{ color:var(--primary); margin-top:.15rem; font-size:1.05rem; flex:0 0 auto; }
.contact-methods{ border-top:1px solid var(--line); }
.contact-method{ display:flex; gap:.9rem; align-items:center; padding:.95rem 0; border-bottom:1px solid var(--line); }
.contact-method>i{ width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:11px; background:var(--bg-soft); color:var(--primary-600); font-size:1.05rem; }
.contact-method .k{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.contact-method .v{ font-weight:600; }
.contact-method .v a{ color:inherit; text-decoration:none; }
.contact-method .v a:hover{ color:var(--primary-600); }

/* why-card sur fond foncé */
.why-card.on-dark p{ color:#AEBFB6; }
.why-card.on-dark .ico{ background:rgba(245,166,35,.14); color:var(--accent); }

/* =========================================================
   BLOG
   ========================================================= */
.blog-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:100%; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:.2s; }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.blog-card .blog-img{ height:200px; width:100%; object-fit:cover; }
.blog-card .blog-body{ padding:1.4rem; display:flex; flex-direction:column; flex-grow:1; }
.blog-cat{ display:inline-block; font-family:var(--font-mono); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--primary-600); background:var(--primary-050); border-radius:100px; padding:.3rem .8rem; margin-bottom:.6rem; align-self:flex-start; }
.blog-card h3{ font-size:1.12rem; line-height:1.3; margin-bottom:.4rem; }
.blog-meta{ color:var(--muted); font-size:.82rem; margin-bottom:.6rem; }
.blog-card p{ color:var(--muted); font-size:.93rem; flex-grow:1; margin-bottom:.9rem; }
.blog-read{ color:var(--primary-600); font-weight:600; font-size:.9rem; display:inline-flex; gap:.4rem; align-items:center; }
.blog-read i{ transition:.2s; }
.blog-card:hover .blog-read i{ transform:translateX(4px); }
.blog-featured{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; }
.blog-featured:hover{ box-shadow:var(--shadow); }
.blog-featured .fimg{ height:100%; min-height:300px; width:100%; object-fit:cover; }
.blog-filter{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.4rem; }
.blog-filter button{ border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:.45rem 1.05rem; font-size:.88rem; font-weight:500; cursor:pointer; transition:.18s; font-family:inherit; }
.blog-filter button:hover{ border-color:var(--primary); color:var(--primary-600); }
.blog-filter button.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* =========================================================
   ARTICLE
   ========================================================= */
.breadcrumb-bar{ font-size:.85rem; color:var(--muted); padding-top:1.4rem; }
.breadcrumb-bar a{ color:var(--muted); }
.breadcrumb-bar a:hover{ color:var(--primary-600); }
.article-wrap{ max-width:100%; margin:0; }
.article-title{ font-size:2.1rem; line-height:1.18; margin:.5rem 0 .9rem; }
.article-sign{ display:flex; align-items:center; gap:.7rem; color:var(--muted); font-size:.9rem; margin-bottom:1rem; }
.article-sign .av{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-600)); color:#fff; display:grid; place-items:center; font-weight:700; }
.article-cover{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow); margin:.2rem 0 1.4rem; object-fit:cover; max-height:430px; }
.article-body{ max-width:100%; margin:0; }
.article-body .chapo{ font-size:1.14rem; color:var(--ink); font-weight:500; line-height:1.6; margin-bottom:1.2rem; }
.article-body h2{ font-size:1.5rem; margin:2rem 0 .7rem; scroll-margin-top:90px; }
.article-body h3{ font-size:1.18rem; margin:1.4rem 0 .5rem; }
.article-body .accordion-header{ margin:0; } 
.article-body p,.article-body li{ color:var(--muted); font-size:1.02rem; line-height:1.75; }
.article-body ul{ padding-left:1.2rem; }
.article-body li{ margin-bottom:.4rem; }
.toc{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem; margin:1.2rem 0 2rem; }
.toc h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.6rem; }
.toc ol{ margin:0; padding-left:1.1rem; }
.toc li{ margin-bottom:.3rem; }
.toc a{ color:var(--primary-600); font-size:.95rem; }
.callout{ border-radius:14px; padding:1.1rem 1.3rem; margin:1.4rem 0; border:1px solid var(--line); }
.callout .c-h{ font-weight:700; font-family:var(--font-head); margin-bottom:.3rem; display:flex; gap:.5rem; align-items:center; }
.callout p{ margin:0; color:var(--ink); }
.callout.tip{ background:var(--primary-050); border-color:#CFE9DB; }
.callout.stat{ background:#FFF7EA; border-color:#F6E3BF; }
.callout.warning{ background:#FDEEEE; border-color:#F5CFCF; }
.callout.example{ background:var(--bg-soft); }
.callout.checklist{ background:var(--primary-050); border-color:#CFE9DB; }
.callout.checklist ul{ list-style:none; padding-left:0; margin:.3rem 0 0; }
.callout.checklist li{ display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.4rem; color:var(--ink); font-size:1rem; }
.callout.checklist li i{ color:var(--primary); margin-top:.28rem; }
.author-box{ display:flex; gap:1.2rem; align-items:flex-start; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; margin-top:2.5rem; }
.author-box .avatar{ width:64px; height:64px; border-radius:50%; font-size:1.3rem; background:linear-gradient(135deg,var(--primary),var(--primary-600)); color:#fff; font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.author-box h3{ font-size:1.05rem; margin:0 0 .3rem; color:var(--ink); }
.author-box p{ color:var(--muted); font-size:.92rem; margin:0; line-height:1.7; }

/* ---- Blog : article à la une horizontal (moins haut) ---- */
.blog-card.row-card{ flex-direction:column; }
@media (min-width:992px){
  .blog-card.row-card{ flex-direction:row; align-items:stretch; }
  .blog-card.row-card .blog-img{ width:50%; max-width:560px; height:auto; min-height:270px; }
  .blog-card.row-card .blog-body{ justify-content:center; padding:2rem; }
}
.blog-hero-ic{ width:64px; height:64px; border-radius:18px; margin:0 auto 1rem; background:var(--primary-050); color:var(--primary-600); display:grid; place-items:center; font-size:1.6rem; }

/* ---- Navigation par ancres des pages légales / FAQ ---- */
.legal-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.legal-nav a{font-family:var(--font-mono);font-size:.74rem;padding:.34rem .7rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none;background:#fff;transition:all .15s ease}
.legal-nav a:hover{border-color:var(--primary);color:var(--primary-600);background:var(--primary-050)}
.legal-note{background:var(--primary-050);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:12px;padding:1rem 1.2rem;margin:0 0 1.8rem;font-size:.92rem;color:var(--ink)}
.legal-section{scroll-margin-top:100px}
.legal-section+.legal-section{margin-top:.4rem}

/* ---- Champ téléphone international (intl-tel-input, hébergé localement) ---- */
.iti{display:block;width:100%}
.iti input,.iti input.form-control{width:100%}
.iti__dropdown-content{z-index:1000}

/* ---- Bouton "retour en haut" ---- */
.scroll-top{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s ease;z-index:1040;display:flex;align-items:center;justify-content:center}
.scroll-top:hover{background:var(--primary-600)}
.scroll-top.show{opacity:1;visibility:visible;transform:translateY(0)}

/* ---- Statut d'envoi des formulaires ---- */
.form-status{margin-top:.9rem;padding:.7rem .95rem;border-radius:10px;font-size:.92rem;line-height:1.5}
.form-status.is-loading{background:var(--primary-050);color:var(--primary-600)}
.form-status.is-ok{background:var(--primary-050);color:var(--primary-600);border:1px solid var(--primary)}
.form-status.is-err{background:#FDECEC;color:#B42318;border:1px solid #F0B4B4}