/* ============================================================
   SOCLE DE BASE (repris des CSS par page du site statique)
   Ces regles ne sont pas dans style.css : elles vivent dans
   index.css / seo-paris.css etc. On les reprend ici pour le blog.
   ============================================================ */

body{font-family:"Inter","Inter",sans-serif;color:#1a1a2e;background:#fff}

.navbar{background:white;border:1px solid #e8edf2;border-radius:999px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:68px;position:fixed;top:54px;left:50%;transform:translateX(-50%);width:calc(100% - 40px);max-width:1280px;z-index:100;box-shadow:0 8px 30px rgba(10,31,60,0.07);transition:box-shadow 0.3s,background 0.3s}

.mobile-menu{display:none;flex-direction:column;background:white;border-top:1px solid #e8edf2;padding:12px 20px 16px}

.section-inner{width:90%;max-width:1400px;margin:0 auto}
.section-title{font-size:30px;font-weight:700;color:#0A1F3C;margin-bottom:16px;line-height:1.3;letter-spacing:-0.3px}
.section-tag{font-size:13px;font-weight:500;color:#0A1F3C;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.section-intro{font-size:17px;color:#3d4d60;line-height:1.7;max-width:100%;margin-bottom:36px}

/* Le contenu commence sous la topbar (38px) + navbar flottante (top 54px + 68px) */
main{padding-top:120px}

#back-to-top{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:#0A1F3C;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:150;opacity:0;transform:translateY(10px);transition:opacity 0.25s,transform 0.25s,background 0.15s}

@media (max-width:1100px){.nav-links{display:none}.navbar{padding:0 10px;justify-content:space-between}.hamburger{display:flex}}
@media (max-width:640px){main{padding-top:104px}.section{padding:40px 20px}.section-title{font-size:24px}}
@media (max-width:360px){.navbar{padding:0 8px}.hamburger{margin-left:4px}}

/* ============================================================
   Typographie longue lecture pour les articles du blog
   ============================================================ */

.blog-article-body {
  font-family: "Inter", "Inter", sans-serif;
  font-size: 16.5px;
  line-height: 1.75;
  color: #2a3a4c;
}
/* Les titres internes des articles sont en Bricolage Grotesque (identite) */
.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4,
.blog-article-body h5,
.blog-article-body h6 {
  font-family: "Inter", "Inter", sans-serif;
}
.blog-article-body p { margin-bottom: 20px; }
.blog-article-body h2 {
  font-size: 24px;
  font-weight: 700;
  color: #0A1F3C;
  margin: 40px 0 16px;
  letter-spacing: -0.3px;
}
.blog-article-body h3 {
  font-size: 19px;
  font-weight: 600;
  color: #0A1F3C;
  margin: 32px 0 14px;
}
.blog-article-body ul,
.blog-article-body ol {
  margin: 0 0 20px 22px;
  padding: 0;
}
.blog-article-body li { margin-bottom: 8px; }
.blog-article-body a {
  color: #0A1F3C;
  text-decoration: underline;
  text-decoration-color: rgba(10,31,60,0.18);
  text-underline-offset: 2px;
  font-weight: 600;
}
.blog-article-body a:hover { color: #00B39F; }
.blog-article-body blockquote {
  border-left: 4px solid #0A1F3C;
  background: linear-gradient(135deg,#DCF3EF 0%,#DCF3EF 100%);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  margin: 28px 0;
  font-style: italic;
  color: #1a2a3a;
}
.blog-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}
.blog-article-body code {
  background: #f0f4f8;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}
.blog-article-body pre {
  background: #0A1F3C;
  color: #e6edf3;
  padding: 18px;
  border-radius: 12px;
  overflow-x: auto;
  margin: 24px 0;
}

/* Pagination */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e7eef7;
  color: #3d4d60;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter","Inter",sans-serif;
}
.page-numbers.current { background: #0A1F3C; color: #fff; border-color: #0A1F3C; }
.page-numbers:hover:not(.current) { border-color: #0A1F3C; color: #0A1F3C; }

/* ============================================================
   Elements editoriaux complementaires (tableaux, Gutenberg...)
   ============================================================ */

/* Tableaux */
.blog-article-body table,
.blog-article-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 14px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(10,31,60,0.08);
  border: 1px solid #e7eef7;
}
.blog-article-body th {
  background: linear-gradient(135deg,#0A1F3C 0%,#14325C 100%);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.blog-article-body td {
  padding: 12px 16px;
  border-bottom: 1px solid #edf2f8;
  color: #2a3a4c;
  vertical-align: top;
}
.blog-article-body tr:last-child td { border-bottom: none; }
.blog-article-body tbody tr:nth-child(even) { background: #f6f9fd; }
.blog-article-body tbody tr:hover { background: #DCF3EF; }
.blog-article-body .wp-block-table { margin: 0; overflow-x: auto; }
.blog-article-body figcaption,
.blog-article-body .wp-element-caption {
  text-align: center;
  font-size: 12.5px;
  color: #9aabb8;
  margin-top: -14px;
  margin-bottom: 24px;
}

/* Titres h4-h6 */
.blog-article-body h4 {
  font-size: 16px;
  font-weight: 600;
  color: #0A1F3C;
  margin: 26px 0 12px;
}
.blog-article-body h5,
.blog-article-body h6 {
  font-size: 14px;
  font-weight: 600;
  color: #0A1F3C;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 22px 0 10px;
}

/* Pull quote Gutenberg */
.blog-article-body .wp-block-pullquote {
  border-top: 3px solid #0A1F3C;
  border-bottom: 3px solid #00B39F;
  padding: 28px 20px;
  margin: 36px 0;
  text-align: center;
}
.blog-article-body .wp-block-pullquote blockquote {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}
.blog-article-body .wp-block-pullquote p {
  font-size: 20px;
  font-weight: 600;
  color: #0A1F3C;
  line-height: 1.5;
  font-style: normal;
}
.blog-article-body .wp-block-pullquote cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: #9aabb8;
  font-style: normal;
}

/* Citation avec auteur */
.blog-article-body blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: #5a6a7a;
  font-style: normal;
  font-weight: 600;
}

/* Boutons Gutenberg */
.blog-article-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0A1F3C;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter","Inter",sans-serif;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.blog-article-body .wp-block-button__link:hover {
  background: #0A1F3C;
  transform: translateY(-1px);
  color: #fff;
}

/* Separateur */
.blog-article-body hr,
.blog-article-body .wp-block-separator {
  border: none;
  height: 2px;
  background: linear-gradient(90deg,transparent 0%,#0A1F3C 30%,#00B39F 70%,transparent 100%);
  opacity: 0.25;
  margin: 40px auto;
  max-width: 320px;
}

/* Colonnes Gutenberg */
.blog-article-body .wp-block-columns { gap: 20px; }

/* Accordeons details/summary */
.blog-article-body details {
  border: 1px solid #e7eef7;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  background: #fff;
}
.blog-article-body details[open] { border-color: #0A1F3C; }
.blog-article-body summary {
  font-weight: 600;
  color: #0A1F3C;
  cursor: pointer;
  font-size: 15px;
}
.blog-article-body details p { margin: 14px 0 0; }

/* Encadre "a retenir" : classe utilitaire pour les redactrices */
.blog-article-body .encadre-cle {
  background: linear-gradient(135deg,#DCF3EF 0%,#DCF3EF 100%);
  border-left: 4px solid #0A1F3C;
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.blog-article-body .encadre-cle p { margin: 0; color: #1a2a3a; font-size: 14.5px; }

/* ============================================================
   Layout blog : grille + sidebar
   ============================================================ */

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 36px;
  align-items: start;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (min-width: 1200px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-grid .pain-card, .carousel-item .pain-card { display: flex; flex-direction: column; }
.blog-grid .pain-card h3, .carousel-item .pain-card h3 { font-size: 17px; line-height: 1.4; margin: 6px 0 10px; }
.blog-grid .pain-card p, .carousel-item .pain-card p { flex: 1; }
.card-thumb {
  display: block;
  margin: -20px -20px 16px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cat-badge {
  display: inline-block;
  background: #DCF3EF;
  color: #0A1F3C;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.cat-badge:hover { background: #0A1F3C; color: #fff; }
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 150px; }
.sidebar-widget {
  background: #fff;
  border: 1px solid #e7eef7;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 16px rgba(10,31,60,0.06);
}
.sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: #0A1F3C;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg,#0A1F3C,#00B39F) 1;
}
.sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sidebar-list li a {
  font-size: 13.5px;
  font-weight: 600;
  color: #2a3a4c;
  text-decoration: none;
  line-height: 1.45;
  display: block;
  transition: color 0.15s;
}
.sidebar-list li a:hover { color: #0A1F3C; }
.sidebar-meta { display: block; font-size: 11.5px; color: #9aabb8; margin-top: 2px; }
.sidebar-list-ranked li { display: flex; gap: 10px; align-items: flex-start; }
.sidebar-rank {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg,#0A1F3C,#00B39F);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-cats { list-style: none; margin: 0; padding: 0; }
.sidebar-cats li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #2a3a4c;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid #edf2f8;
  transition: color 0.15s;
}
.sidebar-cats li:last-child a { border-bottom: none; }
.sidebar-cats li a:hover { color: #0A1F3C; }
.sidebar-cats li a span {
  background: #f0f4f8;
  color: #5a6a7a;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
  display: inline-block;
  border: 1px solid #e7eef7;
  color: #3d4d60;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tag-pill:hover { border-color: #0A1F3C; color: #0A1F3C; background: #DCF3EF; }
.sidebar-cta {
  background: linear-gradient(135deg,#0A1F3C 0%,#14325C 100%);
  border: none;
}
.sidebar-cta-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.sidebar-cta-text { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 16px; }

/* Responsive */
@media (max-width: 980px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Navigation par categories (accueil du blog)
   ============================================================ */

.blog-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 36px;
}
.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid #e0e8f4;
  background: #fff;
  color: #3d4d60;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.blog-cat-pill:hover { border-color: #0A1F3C; color: #0A1F3C; }
.blog-cat-pill.is-active {
  background: linear-gradient(135deg, #0A1F3C 0%, #14325C 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(10,31,60,0.25);
}
@media (max-width: 640px) {
  .blog-cat-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   Page article : grille 90% + colonne de lecture + CTA sticky
   ============================================================ */

.blog-layout-article .blog-main { min-width: 0; }
.article-col { max-width: 740px; }
.blog-layout-article .blog-sidebar { gap: 0; }

.article-cta-card {
  background: linear-gradient(160deg, #0f2a52 0%, #14325C 55%, #0D3A4E 100%);
  border: none;
  padding: 26px 24px;
  text-align: left;
}
.article-cta-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #00B39F;
  margin-bottom: 12px;
}
.article-cta-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
}
.article-cta-text {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin-bottom: 20px;
}
.article-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #fff;
  color: #14325C;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter", "Inter", sans-serif;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.article-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.article-cta-note {
  display: block;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
}

@media (max-width: 980px) {
  .blog-layout-article .article-cta-sidebar { position: static; }
  .article-col { max-width: 100%; }
}

/* ============================================================
   Bande CTA : bas de la page d'accueil du blog
   ============================================================ */

.blog-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #0A1F3C 0%, #14325C 100%);
  border-radius: 20px;
  padding: 40px 44px;
  margin-top: 48px;
  position: relative;
  overflow: hidden;
}
.blog-bottom-cta::before {
  content: '';
  position: absolute;
  top: -70px; right: 18%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.blog-bottom-cta::after {
  content: '';
  position: absolute;
  bottom: -90px; left: 38%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(45,212,191,0.20) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.blog-bottom-cta-text { position: relative; z-index: 1; }
.blog-bottom-cta-text p {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  font-family: "Inter", "Inter", sans-serif;
  letter-spacing: -0.3px;
}
.blog-bottom-cta-text span {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}
.blog-bottom-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #00B39F 0%, #0A1F3C 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter", "Inter", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10,31,60,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.blog-bottom-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(10,31,60,0.32); }

@media (max-width: 700px) {
  .blog-bottom-cta { flex-direction: column; text-align: center; padding: 28px 24px; }
  .blog-bottom-cta-text p { font-size: 21px; }
  .blog-bottom-cta-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Auteur : encadre fin d'article + hero page archive
   ============================================================ */

.author-avatar { border-radius: 50%; border: 2px solid #e0e8f4; flex-shrink: 0; }

.author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #f6f9fd;
  border: 1px solid #e7eef7;
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 40px;
}
.author-box-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9aabb8;
  margin-bottom: 2px;
}
.author-box-name {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #0A1F3C;
  text-decoration: none;
}
.author-box-name:hover { color: #0A1F3C; }
.author-box-job {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #0A1F3C;
  margin: 2px 0 8px;
}
.author-box-bio {
  font-size: 13.5px;
  color: #3d4d60;
  line-height: 1.6;
  margin-bottom: 10px;
}

.author-hero {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg,#DCF3EF 0%,#DCF3EF 100%);
  border-radius: 16px;
}
.author-hero .author-avatar { border: 3px solid #fff; box-shadow: 0 4px 14px rgba(10,31,60,0.11); }
.author-bio { font-size: 14.5px; color: #2a3a4c; line-height: 1.6; margin-bottom: 10px; max-width: 640px; }
.author-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .author-box { flex-direction: column; align-items: center; text-align: center; }
  .author-hero { flex-direction: column; text-align: center; }
  .author-links { justify-content: center; }
}

/* Barre de recherche sidebar */
.sidebar-search { display: flex; gap: 8px; }
.sidebar-search input {
  flex: 1;
  border: 1px solid #e7eef7;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-family: "Inter","Inter",sans-serif;
  color: #2a3a4c;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.sidebar-search input:focus { border-color: #0A1F3C; }
.sidebar-search button {
  flex-shrink: 0;
  width: 42px;
  border: none;
  border-radius: 10px;
  background: #0A1F3C;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sidebar-search button:hover { background: #0A1F3C; }

/* ============================================================
   Sommaire + navigation entre articles
   ============================================================ */

.toc {
  background: #f6f9fd;
  border: 1px solid #e7eef7;
  border-radius: 14px;
  padding: 0;                 /* le padding passe sur summary et ol :
                                 replie, la boite doit etre une simple barre */
  margin-bottom: 32px;
}

/* La fleche native est masquee dans les deux syntaxes : Safari utilise
   encore ::-webkit-details-marker, les autres ::marker. */
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::marker { content: ""; }

.toc-title {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  font-size: 13px;
  font-weight: 700;
  color: #0A1F3C;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  -webkit-user-select: none;
  user-select: none;
}
.toc-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #5f6f82;
  font-size: 12.5px;
}
/* Chevron maison, pousse a droite par margin-left:auto. */
.toc-title::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  flex-shrink: 0;
  border-right: 2px solid #0A1F3C;
  border-bottom: 2px solid #0A1F3C;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}
.toc[open] > .toc-title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.toc[open] > .toc-title { border-bottom: 1px solid #e7eef7; }

.toc-title:focus-visible {
  outline: 2px solid #0A1F3C;
  outline-offset: -2px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .toc-title::after { transition: none; }
}

.toc ol { list-style: none; margin: 0; padding: 16px 24px 20px; counter-reset: toc; }
.toc ol li { margin-bottom: 8px; counter-increment: toc; }
.toc ol li::before {
  content: counter(toc) ".";
  color: #0A1F3C;
  font-weight: 700;
  margin-right: 8px;
  font-size: 13px;
}
.toc ol li.toc-sub { margin-left: 22px; }
.toc ol li.toc-sub::before { content: "\2013"; }
.toc a {
  font-size: 14px;
  font-weight: 500;
  color: #2a3a4c;
  text-decoration: none;
  transition: color 0.15s;
}
.toc a:hover { color: #0A1F3C; }

html { scroll-behavior: smooth; }
.blog-article-body h2[id], .blog-article-body h3[id] { scroll-margin-top: 150px; }

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 36px;
}
.post-nav-item {
  display: block;
  border: 1px solid #e7eef7;
  border-radius: 14px;
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.post-nav-item:hover { border-color: #0A1F3C; box-shadow: 0 4px 18px rgba(10,31,60,0.07); }
.post-nav-next { text-align: right; }
.post-nav-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #9aabb8;
  margin-bottom: 6px;
}
.post-nav-title {
  font-size: 14px;
  font-weight: 600;
  color: #0A1F3C;
  line-height: 1.4;
}
@media (max-width: 560px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }
}

/* ============================================================
   Cartes d'articles : style complet (le style.css partage
   n'a que des surcharges, le socle vivait dans les CSS par page)
   ============================================================ */

.blog-grid .pain-card, .carousel-item .pain-card {
  border: 1px solid #e7eef7;
  border-top: 3px solid #00B39F;
  border-radius: 14px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 2px 14px rgba(10,31,60,0.06);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
}
.blog-grid .pain-card:hover, .carousel-item .pain-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(10,31,60,0.08);
  border-color: #0A1F3C;
  border-top-color: #00B39F;
}
.blog-grid .card-thumb, .carousel-item .card-thumb {
  margin: -22px -22px 16px;
  border-radius: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: block;
  background: #f0f4f8;
}
.blog-grid .card-thumb img, .carousel-item .card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.blog-grid .pain-card:hover .card-thumb img, .carousel-item .pain-card:hover .card-thumb img { transform: scale(1.04); }

/* Placeholder quand l'article n'a pas d'image de mise en avant */
.card-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -22px -22px 16px;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg,#0A1F3C 0%,#0A1F3C 55%,#00B39F 100%);
  position: relative;
  overflow: hidden;
}
.card-thumb-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 55%);
}
.card-thumb-placeholder svg { opacity: 0.9; }

/* ============================================================
   Newsletter (sidebar + fin d'article)
   ============================================================ */

.nl-blog-form { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-blog-form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 1px solid #e7eef7;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-family: "Inter","Inter",sans-serif;
  color: #2a3a4c;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nl-blog-form input[type="email"]:focus {
  border-color: #0A1F3C;
  box-shadow: 0 0 0 3px rgba(10,31,60,0.1);
}
.nl-blog-form button {
  border: none;
  border-radius: 10px;
  background: #0A1F3C;
  color: #fff;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: "Inter","Inter",sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.nl-blog-form button:hover { background: #0A1F3C; }
.blog-sidebar .nl-blog-form { flex-direction: column; }
.blog-sidebar .nl-blog-form button { width: 100%; }

.nl-article {
  margin-top: 36px;
  background: linear-gradient(135deg,#DCF3EF 0%,#DCF3EF 100%);
  border: 1.5px solid #d5e5f7;
  border-radius: 16px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center;
}
.nl-article-title {
  font-size: 17px;
  font-weight: 700;
  color: #0A1F3C;
  margin-bottom: 6px;
}
.nl-article-sub {
  font-size: 13.5px;
  color: #3d4d60;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .nl-article { grid-template-columns: 1fr; }
}

/* Feedback inline newsletter (AJAX) */
.nl-feedback {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 0;
  font-family: "Inter","Inter",sans-serif;
}
.nl-feedback-ok { color: #38a169; }
.nl-feedback-err { color: #e53e3e; }

/* ============================================================
   Nouvelle page d'accueil du blog : recherche, sections curatees,
   carrousel, grilles pleine largeur (sans sidebar)
   ============================================================ */

.blog-search-bar {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 22px 0 0;
}
.blog-search-bar input {
  flex: 1;
  border: 1.5px solid #e0e8f4;
  border-radius: 12px;
  padding: 13px 18px;
  font-size: 14.5px;
  font-family: "Inter", "Inter", sans-serif;
  color: #1a2a3a;
  outline: none;
  transition: border-color 0.15s;
  min-width: 0;
}
.blog-search-bar input:focus { border-color: #0A1F3C; }
.blog-search-bar button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #0A1F3C;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter", "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.blog-search-bar button:hover { background: #14325C; }
@media (max-width: 640px) {
  .blog-search-bar { max-width: 100%; }
  .blog-search-bar button span { display: none; }
}

.blog-section-block { margin-top: 48px; }
.blog-section-title {
  font-size: 21px;
  font-weight: 700;
  color: #0A1F3C;
  margin-bottom: 20px;
  letter-spacing: -0.2px;
}

/* Grilles verticales (image en haut, contenu en dessous) : reutilisent .blog-grid/.pain-card */
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }
.blog-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .blog-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid-3, .blog-grid-4 { grid-template-columns: 1fr; }
}

/* A la une : cartes horizontales (miniature a gauche, contenu a droite) */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.featured-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.featured-card:hover { border-color: #0A1F3C; box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.featured-card-thumb {
  flex-shrink: 0;
  width: 108px;
  height: 108px;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  background: #DCF3EF;
}
.featured-card-thumb.card-thumb-placeholder {
  margin: 0;
  aspect-ratio: auto;
}
.featured-card-thumb.card-thumb-placeholder svg { width: 26px; height: 26px; }
.featured-card-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.featured-card-body h3 { font-size: 14.5px; line-height: 1.35; margin: 4px 0 8px; }
.featured-card-body .sidebar-meta { font-size: 12px; }
@media (max-width: 900px) {
  .featured-grid { grid-template-columns: 1fr; }
}

/* Carrousel "les plus lus" : bande pilotee par le visiteur (fleches + scroll-snap) */
.carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.carousel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  flex: 1;
  padding-bottom: 4px;
  scrollbar-width: none;
  min-width: 0;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item {
  flex: 0 0 calc(33.333% - 12px);
  scroll-snap-align: start;
  min-width: 220px;
  display: flex;
}
.carousel-item .pain-card { display: flex; flex-direction: column; width: 100%; }
.carousel-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #e0e8f4;
  background: #fff;
  color: #0A1F3C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.carousel-arrow:hover { background: #DCF3EF; border-color: #0A1F3C; }
@media (max-width: 1100px) {
  .carousel-item { flex-basis: calc(50% - 9px); }
}
@media (max-width: 640px) {
  .carousel-item { flex-basis: 78%; }
  .carousel-arrow { display: none; }
}

/* Newsletter (accueil du blog) */
.blog-newsletter-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #f6f9fd;
  border: 1.5px solid #e7eef7;
  border-radius: 16px;
  padding: 26px 28px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.blog-newsletter-text p {
  font-size: 17px;
  font-weight: 700;
  color: #0A1F3C;
  margin: 0 0 4px;
}
.blog-newsletter-text span {
  font-size: 13.5px;
  color: #3d4d60;
}
.blog-newsletter-form {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.blog-newsletter-form input {
  border: 1.5px solid #e0e8f4;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  font-family: "Inter", "Inter", sans-serif;
  outline: none;
  min-width: 220px;
  transition: border-color 0.15s;
}
.blog-newsletter-form input:focus { border-color: #0A1F3C; }
@media (max-width: 700px) {
  .blog-newsletter-block { flex-direction: column; align-items: stretch; text-align: center; }
  .blog-newsletter-form { flex-direction: column; }
  .blog-newsletter-form input { min-width: 0; }
}

/* A la une + newsletter : pile de cartes horizontales (3/4) + CTA newsletter (1/4) */
.featured-split {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.featured-list-full {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.featured-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .featured-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .featured-list { grid-template-columns: 1fr; }
}
.featured-newsletter {
  background: #f6f9fd;
  border: 1.5px solid #e7eef7;
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.featured-newsletter-title {
  font-size: 16px;
  font-weight: 700;
  color: #0A1F3C;
  margin: 0 0 6px;
}
.featured-newsletter-sub {
  display: block;
  font-size: 12.5px;
  color: #3d4d60;
  line-height: 1.5;
  margin-bottom: 16px;
}
.featured-newsletter form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.featured-newsletter input {
  border: 1.5px solid #e0e8f4;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-family: "Inter", "Inter", sans-serif;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}
.featured-newsletter input:focus { border-color: #0A1F3C; }
.featured-newsletter .blog-bottom-cta-btn { width: 100%; justify-content: center; }
@media (max-width: 900px) {
  .featured-split { grid-template-columns: 1fr; }
}

/* ── Bloc "L'essentiel" (résumé extractible en tête d'article) ── */
.essentiel-box{background:linear-gradient(135deg,#f6f9fd 0%,#f0fbff 100%);border:1.5px solid #d8e8f7;border-left:3px solid #00B39F;border-radius:0 14px 14px 0;padding:20px 24px;margin-bottom:32px}
.essentiel-title{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#00776A;margin:0 0 8px}
.essentiel-text{font-size:15px;line-height:1.75;color:#2a3a4c;margin:0}

/* ── Pastilles de certifications (encadré auteur + page auteur) ── */
.author-box-certs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.cert-pill{display:inline-block;font-size:11.5px;font-weight:600;color:#00776A;background:#DCF3EF;border-radius:999px;padding:3px 10px;white-space:nowrap}

/* ── Bandeau cookies (parité site principal) ── */
.cookie-banner{position:fixed;bottom:0;left:0;width:100%;background:#0A1F3C;border-top:2px solid #0A1F3C;z-index:9999;padding:14px 24px}
.cookie-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cookie-text{font-size:13px;color:rgba(255,255,255,0.8);margin:0;line-height:1.5;flex:1;min-width:200px}
.cookie-text a{color:#5FE3D2}
.cookie-btns{display:flex;gap:10px;flex-shrink:0}
.cookie-btn-accept{background:#0A1F3C;color:white;border:none;border-radius:20px;padding:8px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:"Inter","Inter",sans-serif}
.cookie-btn-refuse{background:transparent;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:8px 20px;font-size:13px;cursor:pointer;font-family:"Inter","Inter",sans-serif}

/* ── CTA audit gratuit (accueil blog, sous la newsletter) ── */
.featured-audit-cta{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(120,140,170,0.35);text-align:center}
.featured-audit-txt{font-size:13.5px;color:#5d6b80;margin:0 0 10px}
.featured-audit-btn{display:inline-flex;align-items:center;gap:8px;background:#0A1F3C;color:#fff;border-radius:12px;padding:12px 24px;font-size:14.5px;font-weight:700;text-decoration:none;transition:background .15s,transform .15s}
.featured-audit-btn:hover{background:#14325C;transform:translateY(-1px)}

/* Boutons flottants : plus discrets sur mobile pour ne pas couvrir le contenu */
@media (max-width:480px){
  .whatsapp-float{width:46px;height:46px;right:12px}
  .whatsapp-float svg{width:24px;height:24px}
  #back-to-top{width:40px;height:40px;right:12px}
}

/* ── Newsletter : messages et fenetre de confirmation ── */
.nl-feedback{margin-top:12px;font-size:14px;line-height:1.6}
.nl-feedback-info{color:#14325C;background:#DCF3EF;border:1px solid #cfdff2;
  border-radius:10px;padding:11px 15px}
.nl-feedback-err{color:#B3141F;background:#FDEDEE;border:1px solid #f3c9cd;
  border-radius:10px;padding:11px 15px}
.nl-feedback-ok{color:#157a33;background:#E8F8EE;border:1px solid #bde5cb;
  border-radius:10px;padding:11px 15px}

.nl-modal-overlay{display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(10,31,60,0.55);backdrop-filter:blur(2px);
  align-items:center;justify-content:center;padding:20px}
.nl-modal-overlay.open{display:flex}
.nl-modal-box{position:relative;background:#fff;border-radius:20px;
  padding:34px 30px 28px;max-width:430px;width:100%;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.32);animation:nlModalIn .22s ease-out}
@keyframes nlModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}
  to{opacity:1;transform:none}}
.nl-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;
  border:none;border-radius:50%;background:#f0f4f8;color:#3d4d60;font-size:19px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.nl-modal-close:hover{background:#e3e9f0;color:#0A1F3C}
.nl-modal-icon{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;
  background:#DCF3EF;color:#0A1F3C;display:flex;align-items:center;justify-content:center}
.nl-modal-box h3{font-size:20px;font-weight:700;color:#0A1F3C;margin:0 0 12px}
.nl-modal-box p{font-size:14.5px;color:#3d4d60;line-height:1.65;margin:0 0 10px}
.nl-modal-box strong{color:#0A1F3C;font-weight:600}
.nl-modal-spam{font-size:13.5px!important;color:#5f6f82!important;
  background:#f6f9fd;border-radius:10px;padding:11px 14px;margin-top:14px!important}
.nl-modal-btn{margin-top:20px;width:100%;background:#0A1F3C;color:#fff;border:none;
  border-radius:12px;padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:background .15s}
.nl-modal-btn:hover{background:#14325C}
@media (max-width:520px){.nl-modal-box{padding:28px 20px 22px}}

/* ============================================================
   CTA articles [seonclic_cta] : 6 formes, bouton unique degrade
   ============================================================ */
.sc-cta{margin:36px 0}
.sc-cta-title{font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:20px;font-weight:700;color:#0A1F3C;margin:0 0 8px;line-height:1.35}
.sc-cta-text{font-family:"Inter","Inter",sans-serif;font-size:16px;line-height:1.65;color:#3d4d60;margin:0 0 18px}
.sc-cta-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#00B39F 0%,#0A1F3C 100%);color:#fff!important;text-decoration:none!important;border-radius:999px;padding:15px 30px;font-size:15px;font-weight:700;font-family:"Inter","Inter",sans-serif;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.sc-cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(10,31,60,0.25)}
.sc-cta-btn svg{flex-shrink:0}
.sc-cta-box{background:#fff;border:1.5px solid #0A1F3C;border-radius:14px;padding:26px 28px}
.sc-cta-filet{border-left:4px solid #0A1F3C;border-radius:0;padding:6px 0 6px 22px}
.sc-cta-tint{background:#DCF3EF;border-radius:14px;padding:26px 28px}
.sc-cta-banner{background:linear-gradient(135deg,#0A1F3C 0%,#14325C 100%);border-radius:16px;padding:30px 32px}
.sc-cta-banner .sc-cta-title{color:#fff;font-size:21px}
.sc-cta-banner .sc-cta-text{color:rgba(255,255,255,0.88);margin-bottom:20px}
.sc-cta-banner .sc-cta-btn{background:#fff;color:#0A1F3C!important}
.sc-cta-banner .sc-cta-btn:hover{box-shadow:0 6px 18px rgba(0,0,0,0.2)}
.sc-cta-line{background:#f6f9fd;border-radius:12px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sc-cta-line-title{font-family:"Bricolage Grotesque","Inter",sans-serif;font-size:16px;font-weight:700;color:#0A1F3C;margin:0}
.sc-cta-line .sc-cta-btn{padding:11px 22px;font-size:14px}
.sc-cta-button{text-align:center}
.sc-cta-button .sc-cta-btn{padding:16px 34px;font-size:15.5px}
.sc-cta-note{font-family:"Inter","Inter",sans-serif;font-size:13.5px;color:#8a97a8;margin:10px 0 0}
@media (max-width:640px){
  .sc-cta-box,.sc-cta-tint{padding:22px 20px}
  .sc-cta-banner{padding:24px 22px}
  .sc-cta-btn{white-space:normal;text-align:center;justify-content:center;width:100%}
  .sc-cta-line{flex-direction:column;align-items:stretch}
}

/* ============================================================
   CTA — regle unique pour tout le blog
   Fond clair  -> bouton encre, texte blanc.
   Fond encre  -> bouton blanc, texte encre.
   Le turquoise ne porte jamais de texte : sur blanc il plafonne
   a 2,6:1, sous le minimum WCAG de 4,5. Il sert d'aplat, de trait
   et de motif, jamais de couleur de libelle.
   ============================================================ */

/* --- Bandes CTA sur fond encre : aplat + ondes, plus de degrade --- */
.blog-bottom-cta,
.sc-cta-banner,
.sidebar-cta {
  background: #0A1F3C;
  background-image: repeating-radial-gradient(circle at 4% 100%,
    rgba(0,179,159,0.20) 0 1.5px, transparent 1.5px 76px);
}
.blog-bottom-cta::before,
.blog-bottom-cta::after { display: none; }

.blog-bottom-cta-text p,
.sc-cta-title,
.sidebar-cta-title { font-family: "Bricolage Grotesque", "Inter", sans-serif; }

/* --- Bouton sur fond encre : blanc, texte encre --- */
.blog-bottom-cta-btn,
.sc-cta-banner .sc-cta-btn,
.sidebar-cta .sc-cta-btn,
.sidebar-cta-btn {
  background: #fff !important;
  color: #0A1F3C !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.blog-bottom-cta-btn:hover,
.sc-cta-banner .sc-cta-btn:hover,
.sidebar-cta .sc-cta-btn:hover,
.sidebar-cta-btn:hover {
  background: #DCF3EF !important;
  transform: translateY(-1px);
}

/* --- Bouton sur fond clair : encre, texte blanc --- */
.sc-cta-btn,
.featured-audit-btn,
.cookie-btn-accept {
  background: #0A1F3C !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(10,31,60,0.22);
}
.sc-cta-btn:hover,
.featured-audit-btn:hover,
.cookie-btn-accept:hover {
  background: #14325C !important;
  transform: translateY(-1px);
}

/* --- CTA en ligne et en filet : le turquoise marque, il n'ecrit pas --- */
.sc-cta-line { background: #F1FAF8; border: 1px solid #B9E6DE; }
.sc-cta-filet { border-left-color: #00B39F; }
.featured-audit-cta { border-top-color: rgba(0,179,159,0.45); }

/* --- Fleche des CTA : elle avance au survol --- */
.sc-cta-btn svg,
.blog-bottom-cta-btn svg,
.featured-audit-btn svg { transition: transform .18s ease; }
.sc-cta-btn:hover svg,
.blog-bottom-cta-btn:hover svg,
.featured-audit-btn:hover svg { transform: translateX(3px); }

/* --- Zone de clic confortable au doigt --- */
.sc-cta-btn,
.blog-bottom-cta-btn,
.featured-audit-btn { min-height: 44px; }

/* --- Mouvement, titres et menu : memes regles que le site ----------- */

:root{--sc-lift:-3px;--sc-time:.2s;--sc-ease:cubic-bezier(.22,.61,.36,1);--sc-ink:#0A1F3C;--sc-ink-soft:#14325C;--sc-signal:#00B39F;--sc-signal-deep:#007F70;--sc-signal-wash:#E6F7F4;--sc-body:"Inter",sans-serif}

.post-card,.cat-card,.article-card,.sc-card,.related-card,.featured-card{
  transition:transform var(--sc-time) var(--sc-ease),
             box-shadow var(--sc-time) var(--sc-ease),
             border-color var(--sc-time) var(--sc-ease)!important}
.post-card:hover,.cat-card:hover,.article-card:hover,.sc-card:hover,
.related-card:hover,.featured-card:hover{
  transform:translateY(var(--sc-lift))!important;
  box-shadow:0 10px 28px rgba(10,31,60,.10)!important;
  border-color:#00B39F!important}

.sc-cta-btn,.featured-audit-btn,.blog-bottom-cta-btn{
  transition:background var(--sc-time) var(--sc-ease),
             transform var(--sc-time) var(--sc-ease),
             box-shadow var(--sc-time) var(--sc-ease)!important}
.sc-cta-btn:hover,.featured-audit-btn:hover,.blog-bottom-cta-btn:hover{
  transform:translateY(-2px)!important}

h1,h2,h3,h4,h5,h6,.entry-title,.post-card-title,.blog-hero-title{
  font-family:"Bricolage Grotesque","Inter",sans-serif!important;color:#0A1F3C}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;
    animation-duration:.01ms!important;scroll-behavior:auto!important}
  .post-card:hover,.cat-card:hover,.article-card:hover,.sc-card:hover,
  .related-card:hover,.featured-card:hover,.sc-cta-btn:hover,
  .featured-audit-btn:hover,.blog-bottom-cta-btn:hover{transform:none!important}
}

/* --- Liens : meme regle que le site --------------------------------
   Texte courant : encre, souligne turquoise. Navigation : sans
   soulignement. Le turquoise souligne, il n'ecrit pas (2,6:1 sur blanc). */

.blog-article-body p > a:not([class]),
.blog-article-body li > a:not([class]),
.blog-article-body td > a:not([class]),
.inline-link{
  color:#0A1F3C!important;
  font-weight:600;
  text-decoration:underline!important;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
  text-decoration-color:rgba(0,179,159,0.55)!important;
  transition:color .2s cubic-bezier(.22,.61,.36,1),
             text-decoration-color .2s cubic-bezier(.22,.61,.36,1)}
.blog-article-body p > a:not([class]):hover,
.blog-article-body li > a:not([class]):hover,
.blog-article-body td > a:not([class]):hover,
.inline-link:hover{
  color:#007F70!important;text-decoration-color:#00B39F!important}

.blog-nav a,.post-nav a,.blog-cat-pill,.breadcrumb a,
.sidebar-widget a,.footer-col a{text-decoration:none!important}

a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid #00B39F;outline-offset:2px;border-radius:4px}

/* --- Barre de menu : reglages identiques au site -------------------- */
/* Le blog gardait l'ancien espacement : le menu ne tombait pas au meme
   endroit qu'en passant d'une page du site au blog. */

.navbar{gap:14px;padding-left:22px;padding-right:22px}
.navbar > *{min-width:0}
.logo,.navbar > a:first-child{flex-shrink:0}
.nav-links{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:0}
.nav-links li a{padding:6px 8px;font-size:14.5px;color:#4A5A6B;
  border-radius:8px;font-weight:500}
.nav-links li a:hover,.nav-links li a.nav-active{color:#0A1F3C!important;
  background:#DCF3EF!important}
.nav-devis{flex-shrink:0;margin-left:10px}

@media (max-width:1400px){
  .nav-links li a{padding:6px 6px;font-size:13.5px}
  .nav-devis{padding:8px 15px;font-size:12.5px}
}
@media (max-width:1180px){
  .nav-links li a{padding:5px 5px;font-size:12.5px}
  .nav-devis{padding:7px 13px;font-size:12px}
}

/* --- Titres : plus de degrade -------------------------------------- */
/* Un mot en degrade dans un titre n'est pas une identite, c'est un effet.
   Il coupe la lecture, il n'est pas selectionnable proprement et il
   disparait des que le navigateur ne supporte pas le decoupage de fond.
   Le mot mis en avant passe en turquoise plein. */

.accent-gradient{
  background:none!important;
  -webkit-background-clip:initial!important;background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;
  color:#007F70!important;font-style:normal}

/* --- 29. Menu : cinq entrees au lieu de dix ------------------------- */
/* Les six services sont regroupes sous une entree unique. Dix entrees,
   personne ne les lit ; cinq se parcourent d'un regard. */

.nav-links li a,.nav-sub-btn{padding:8px 12px;font-size:15px}
.nav-sub-btn{display:inline-flex;align-items:center;gap:5px;background:none;
  border:none;cursor:pointer;color:#4A5A6B;font-family:"Inter", sans-serif;
  font-weight:500;border-radius:8px;
  transition:color .2s cubic-bezier(.22,.61,.36,1),
             background .2s cubic-bezier(.22,.61,.36,1)}
.nav-sub-btn:hover,.has-sub:hover .nav-sub-btn,
.nav-sub-btn[aria-expanded="true"]{color:#0A1F3C;background:#DCF3EF}
.nav-sub-btn svg{transition:transform .2s cubic-bezier(.22,.61,.36,1)}
.has-sub:hover .nav-sub-btn svg,
.nav-sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.has-sub{position:relative}
.nav-sub{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:320px;list-style:none;margin:0;padding:10px;
  background:#fff;border:1px solid #E2ECE9;border-radius:16px;
  box-shadow:0 18px 44px rgba(10,31,60,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s cubic-bezier(.22,.61,.36,1),
             transform .2s cubic-bezier(.22,.61,.36,1),
             visibility .2s}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,
.nav-sub-btn[aria-expanded="true"] + .nav-sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* Pont invisible : la souris peut descendre du bouton vers le panneau. */
.nav-sub::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}

.nav-sub li a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none}
.nav-sub li a:hover{background:#DCF3EF}
.sm-l{display:block;font-size:14.5px;font-weight:600;color:#0A1F3C}
.sm-d{display:block;font-size:12.5px;color:#6B7C8C;margin-top:1px}

.mm-titre{margin:14px 0 4px;font-size:11.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#8A9AA8}
.mobile-menu .mm-titre:first-child{margin-top:0}

@media (max-width:1180px){.nav-links li a,.nav-sub-btn{padding:7px 9px;font-size:14px}}

/* --- 30. Hierarchie des appels a l'action -------------------------- */
/* Trois niveaux, pas quatre.
   Principal   : l'audit gratuit. Aplat, une seule fois par ecran.
   Secondaire  : le devis de la barre de navigation, et les liens de
                 service. Contour ou aplat leger.
   Tertiaire   : les liens editoriaux. Du texte souligne, pas un bouton.
   La bulle WhatsApp reste, c'est un repere permanent, pas un CTA. */

/* Secondaire : le CTA de chaque carte de service passe en contour.
   Sept aplats encre dans la meme section, c'etait sept fois la meme
   sollicitation, aucune ne ressortait. */
.svc-cta{
  background:transparent!important;color:#0A1F3C!important;
  border:1.5px solid #D5DDE8!important;
  box-shadow:none!important;font-weight:600!important}
.svc-cta:hover{background:#DCF3EF!important;
  border-color:#00B39F!important;color:#0A1F3C!important;
  box-shadow:none!important}

/* Tertiaire : « voir les etudes de cas » n'est pas une conversion,
   c'est de la navigation. Il redevient un lien. */
.avis-more{
  background:transparent!important;color:#0A1F3C!important;
  box-shadow:none!important;padding:8px 0!important;
  font-weight:600!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(0,179,159,.55)!important;
  text-underline-offset:3px}
.avis-more:hover{background:transparent!important;
  color:#007F70!important;transform:none!important;
  text-decoration-color:#00B39F!important}

/* Le bouton du bandeau mobile persistant : un seul par ecran suffit.
   Il disparait quand la barre de navigation basse est visible. */
@media (max-width:720px){
  .sticky-cta-mobile{display:none!important}
}

/* --- 31. Liens de contenu sur fond sombre -------------------------- */
/* La regle des liens force l'encre en !important, ce qui rendait
   invisibles les liens places dans un hero ou un bandeau sombre.
   Sur fond sombre ils passent au turquoise clair (10,5:1). */

.hero .inline-link,.hero-split .inline-link,.hero-tarifs .inline-link,
.hero-about .inline-link,.hero-bg-content .inline-link,
.stats-section .inline-link,.mid-cta .inline-link,.cta-band .inline-link,
.site-footer .inline-link,
.hero p > a:not([class]),.hero-split p > a:not([class]),
.hero-about p > a:not([class]),.site-footer p > a:not([class]){
  color:#5FE3D2!important;
  text-decoration-color:rgba(95,227,210,.55)!important}
.hero .inline-link:hover,.hero-split .inline-link:hover,
.hero-tarifs .inline-link:hover,.hero-about .inline-link:hover,
.hero-bg-content .inline-link:hover,.stats-section .inline-link:hover,
.mid-cta .inline-link:hover,.cta-band .inline-link:hover,
.site-footer .inline-link:hover{
  color:#8CEEE0!important;text-decoration-color:#8CEEE0!important}

/* --- 32. Barre de navigation : le menu au centre -------------------- */
/* Avec cinq entrees au lieu de dix, le menu se collait au bouton et
   laissait un vide de plusieurs centaines de pixels apres le logo.
   Logo a gauche, bouton a droite, menu centre entre les deux. */

.navbar{justify-content:space-between}
.nav-links{flex:1 1 auto;justify-content:center;gap:2px;margin:0 12px}
.nav-devis{flex-shrink:0;margin-left:0}

/* Le panneau s'aligne sur son entree, sans deborder du cote droit. */
.has-sub{position:static}
.nav-sub{left:auto;right:auto;transform:translateY(-6px)}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,
.nav-sub-btn[aria-expanded="true"] + .nav-sub{transform:translateY(0)}
@media (min-width:900px){
  .has-sub{position:relative}
  .nav-sub{left:50%;transform:translateX(-50%) translateY(-6px)}
  .has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub,
  .nav-sub-btn[aria-expanded="true"] + .nav-sub{
    transform:translateX(-50%) translateY(0)}
}

/* --- 34. Menu mobile : categorie vs sous-categorie ------------------ */
/* Le probleme : « Services » et « Agence » etaient ecrits plus petit et
   plus pale que les liens qu'ils coiffent. Un intitule moins visible que
   ses enfants ne se lit pas comme un intitule, il se lit comme une ligne
   de plus. On inverse le rapport de force, et on rattache visuellement
   chaque groupe a son titre par un filet vertical continu. */
.mobile-menu .mm-titre{
  display:flex;align-items:center;gap:9px;
  margin:20px 0 6px;padding:0;
  font-family:var(--sc-body);
  font-size:12px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--sc-ink);
}
/* Meme marqueur que les etiquettes de section du site : on ne cree pas
   un nouveau signe, on reutilise celui que le visiteur connait deja. */
.mobile-menu .mm-titre::before{
  content:"";flex:0 0 18px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--sc-ink),var(--sc-signal));
}
.mobile-menu .mm-titre:first-child{margin-top:2px}

/* Les liens du groupe : decales, et relies par un rail vertical. Le rail
   est dessine par un ::before de chaque lien : les liens etant colles,
   les segments forment une ligne continue qui s'interrompt au titre
   suivant. Pas de conteneur a ajouter dans le HTML. */
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){
  position:relative;
  margin-left:9px;padding-left:15px;
  font-size:15px;font-weight:500;color:#3D4D60;
}
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile)::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:2px;border-radius:2px;background:#DDE7F0;
}
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover,
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):focus-visible{
  color:var(--sc-ink);
}
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover::before,
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):focus-visible::before{
  background:var(--sc-signal);
}
/* Le bouton de devis n'appartient a aucun groupe : il reste pleine
   largeur, detache du rail, avec de l'air au-dessus. */
.mobile-menu .btn-devis-mobile{margin-top:18px}

/* --- 35. Sous-menu Services : du caractere ------------------------- */
/* Meme contenu, meme structure, meme balisage. On travaille uniquement
   la matiere : le panneau, la reaction au survol et l'arrivee. */

.nav-sub{
  min-width:344px;padding:8px;border-radius:18px;
  border-color:#E4EDF5;
  /* Deux ombres : une courte qui pose le panneau sur la page, une longue
     et diffuse qui le decolle. Une seule ombre fait toujours sticker. */
  box-shadow:0 2px 6px rgba(10,31,60,.06),0 24px 56px rgba(10,31,60,.16);
}
/* Filet de marque en haut du panneau. Il est rentre de 18px de chaque
   cote pour epouser l'arrondi sans avoir a couper le debordement :
   .nav-sub::before sert de pont a la souris, on ne peut pas le rogner. */
.nav-sub::after{
  content:"";position:absolute;top:0;left:18px;right:18px;height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--sc-ink),var(--sc-signal));
}

.nav-sub li a{
  position:relative;
  padding:10px 34px 10px 17px;border-radius:12px;
  transition:background var(--sc-time) var(--sc-ease),
             transform var(--sc-time) var(--sc-ease);
}
/* Accent vertical qui se deploie depuis le centre au survol. */
.nav-sub li a::before{
  content:"";position:absolute;left:7px;top:50%;
  width:3px;height:0;border-radius:3px;background:var(--sc-signal);
  transform:translateY(-50%);
  transition:height var(--sc-time) var(--sc-ease);
}
/* Fleche discrete : elle dit « ceci mene quelque part » sans le crier. */
.nav-sub li a::after{
  content:"\2192";position:absolute;right:15px;top:50%;
  color:var(--sc-signal);font-size:14px;font-weight:700;line-height:1;
  opacity:0;transform:translateY(-50%) translateX(-5px);
  transition:opacity var(--sc-time) var(--sc-ease),
             transform var(--sc-time) var(--sc-ease);
}
.nav-sub li a:hover,.nav-sub li a:focus-visible{
  background:var(--sc-signal-wash);transform:translateX(2px)}
.nav-sub li a:hover::before,.nav-sub li a:focus-visible::before{height:60%}
.nav-sub li a:hover::after,.nav-sub li a:focus-visible::after{
  opacity:1;transform:translateY(-50%) translateX(0)}

.sm-l{letter-spacing:-.1px}
.sm-d{line-height:1.4}
.nav-sub li a:hover .sm-d,.nav-sub li a:focus-visible .sm-d{color:#4A5A6B}

/* Arrivee en cascade : les entrees se posent l'une apres l'autre au lieu
   d'apparaitre en bloc. 20 ms d'ecart, assez pour donner un mouvement,
   trop peu pour faire attendre. */
.nav-sub li{
  opacity:0;transform:translateY(-5px);
  transition:opacity .18s var(--sc-ease),transform .18s var(--sc-ease)}
.has-sub:hover .nav-sub li,.has-sub:focus-within .nav-sub li,
.nav-sub-btn[aria-expanded="true"] + .nav-sub li{opacity:1;transform:none}
.nav-sub li:nth-child(1){transition-delay:.02s}
.nav-sub li:nth-child(2){transition-delay:.04s}
.nav-sub li:nth-child(3){transition-delay:.06s}
.nav-sub li:nth-child(4){transition-delay:.08s}
.nav-sub li:nth-child(5){transition-delay:.10s}
.nav-sub li:nth-child(6){transition-delay:.12s}
.nav-sub li:nth-child(7){transition-delay:.14s}

@media (prefers-reduced-motion:reduce){
  .nav-sub li{opacity:1;transform:none;transition:none;transition-delay:0s}
  .nav-sub li a,.nav-sub li a::before,.nav-sub li a::after{transition:none}
}

/* --- Menu mobile : version adoucie, identique au site --- */
/* Pas de tiret, pas de degrade : le titre se distingue par sa taille,
   sa graisse et l'air autour de lui. C'est plus calme et ca vieillit
   mieux qu'un marqueur graphique. */
.mobile-menu .mm-titre{
  margin:22px 0 2px;padding:0 0 8px;
  font-family:"Inter", sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:#93A3B2;
  border-bottom:1px solid #EDF3F1;
}
.mobile-menu .mm-titre:first-child{margin-top:2px}

/* Les liens du groupe : decales, et relies par un rail vertical. Le rail
   est dessine par un ::before de chaque lien : les liens etant colles,
   les segments forment une ligne continue qui s'interrompt au titre
   suivant. Pas de conteneur a ajouter dans le HTML. */
/* Les liens : plus de rail vertical ni de filets entre chaque ligne.
   L'espacement suffit a les separer, et la page respire. */
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){
  padding:11px 12px;margin:0 -12px;
  border-bottom:none!important;border-radius:10px;
  font-size:15.5px;font-weight:500;color:#3D4D60;
  transition:background .18s ease,color .18s ease;
}
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover,
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):focus-visible,
.mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):active{
  background:#DCF3EF;color:#0A1F3C;
}
/* Le bouton de devis n'appartient a aucun groupe : il reste pleine
   largeur, detache du rail, avec de l'air au-dessus. */
.mobile-menu .btn-devis-mobile{margin-top:18px}


/* Menu mobile en mode sombre : meme sobriete. */
[data-theme="dark"] .mobile-menu .mm-titre{color:#7C8B99;border-bottom-color:#22303C}
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){color:#B4C4D0}
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover,
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):active{
  background:#10251F;color:#5FE3D2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .mobile-menu .mm-titre{color:#7C8B99;border-bottom-color:#22303C}
  :root:not([data-theme]) .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){color:#B4C4D0}
}

/* --- Menu : version affirmee, identique au site --- */
/* --- 35. Sous-menu Services ---------------------------------------- */
/* Du caractere par la matiere, pas par les effets. Le panneau precedent
   accumulait un filet degrade, un accent qui se deployait, une fleche
   qui apparaissait et sept entrees en cascade. Beaucoup de fantaisie,
   peu d'autorite. On enleve tout ca et on gagne en presence autrement :
   un panneau plus grand, deux colonnes, une typographie plus affirmee. */

.nav-sub{
  min-width:640px;padding:14px;border-radius:16px;
  border:1px solid #E4EDF5;
  box-shadow:0 2px 8px rgba(10,31,60,.06),0 28px 64px rgba(10,31,60,.18);
  /* Deux colonnes : le panneau devient un bloc, pas une liste qui pend. */
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
}
.nav-sub::after{content:none}

.nav-sub li a{
  display:block;padding:13px 16px;border-radius:10px;
  border-left:3px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.nav-sub li a::before,.nav-sub li a::after{content:none}
.nav-sub li a:hover,.nav-sub li a:focus-visible{
  background:#DCF3EF;border-left-color:#00B39F;
  transform:none}

/* Le libelle porte le poids : Bricolage, plus grand, plus dense. */
.sm-l{
  font-family:"Bricolage Grotesque", sans-serif;font-size:16.5px;font-weight:700;
  letter-spacing:-.2px;color:#0A1F3C}
.sm-d{font-size:13px;line-height:1.45;color:#6B7C8C;margin-top:2px}
.nav-sub li a:hover .sm-d,.nav-sub li a:focus-visible .sm-d{color:#4A5A6B}

/* L'entree du menu s'aligne sur le reste : plus de fond colore, juste
   la couleur et la fleche qui pivote. */
.nav-sub-btn{font-size:15px}
.nav-sub-btn:hover,.has-sub:hover .nav-sub-btn,
.nav-sub-btn[aria-expanded="true"]{background:transparent;color:#0A1F3C}

/* Ouverture : le panneau se pose, sans cascade. */
.nav-sub li{opacity:1;transform:none;transition:none}

[data-theme="dark"] .nav-sub{border-color:#22303C}
[data-theme="dark"] .sm-l{color:#EAF2F0}
[data-theme="dark"] .nav-sub li a:hover{background:#10251F;border-left-color:#00B39F}

@media (max-width:1080px){
  .nav-sub{min-width:0;width:calc(100vw - 48px);max-width:620px}
}
@media (prefers-reduced-motion:reduce){
  .nav-sub li a{transition:none}
}

/* Menu mobile en mode sombre : meme sobriete. */
[data-theme="dark"] .mobile-menu .mm-titre{color:#7C8B99;border-bottom-color:#22303C}
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){color:#B4C4D0}
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):hover,
[data-theme="dark"] .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile):active{
  background:#10251F;color:#5FE3D2}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .mobile-menu .mm-titre{color:#7C8B99;border-bottom-color:#22303C}
  :root:not([data-theme]) .mobile-menu a:not(.btn-devis-mobile):not(.btn-contact-mobile){color:#B4C4D0}
}

/* --- 36. Barre de navigation : plus de presence -------------------- */
/* Le menu doit peser autant que le logo et le bouton. On monte la
   taille, on affirme la graisse, on donne de la hauteur a la pilule. */

.navbar{height:74px}
.nav-links li a,.nav-sub-btn{
  font-size:15.5px;font-weight:600;color:#3D4D60;padding:9px 14px}
.nav-links li a:hover,.nav-links li a.nav-active{
  color:#0A1F3C!important;background:transparent!important}
.nav-devis{font-size:14.5px;font-weight:700;padding:13px 24px}

@media (max-width:1400px){
  .nav-links li a,.nav-sub-btn{font-size:14.5px;padding:8px 11px}
  .nav-devis{font-size:13.5px;padding:11px 19px}
}
@media (max-width:1180px){
  .nav-links li a,.nav-sub-btn{font-size:13.5px;padding:7px 9px}
  .nav-devis{font-size:13px;padding:10px 16px}
}

[data-theme="dark"] .nav-links li a,[data-theme="dark"] .nav-sub-btn{color:#A8B6C2}
[data-theme="dark"] .nav-links li a:hover,
[data-theme="dark"] .nav-sub-btn:hover{color:#5FE3D2!important}