/*
Theme Name: InfosDivers Child
Theme URI: https://infosdivers.com/
Description: Child theme léger d'OceanWP, custom pour InfosDivers — Direction Bright (coral/cream, palette logo).
Author: Bekoe
Author URI: https://infosdivers.com/
Template: oceanwp
Version: 2.9.24
Text Domain: infosdivers-child
*/

/* ============================================================
   InfosDivers — Design Tokens v2 (Direction Bright · Bleu/Violet)
   Source : InfosDivers-handoff (1).zip — tokens.css officiel
   ============================================================ */
:root {
  /* Couleurs · Brand (logo bleu/violet) */
  --id-blue:         #4A5BF0;
  --id-blue-soft:    #E8EBFF;
  --id-blue-deep:    #5B3FD9;
  --id-gradient:     linear-gradient(135deg, #4F6BF0 0%, #5B3FD9 100%);

  /* Alias rétrocompatibilité */
  --id-coral:        var(--id-blue);
  --id-coral-soft:   var(--id-blue-soft);
  --id-coral-deep:   var(--id-blue-deep);

  --id-ink:          #13183A;
  --id-ink-soft:     #4A5170;
  --id-ink-mute:     #8A8FA8;

  /* Couleurs · Surfaces */
  --id-cream:        #F7F6FB;
  --id-paper:        #FFFFFF;
  --id-rule:         #E5E3F0;
  --id-rule-soft:    #EFEDF7;

  /* Couleurs · Accents fonctionnels */
  --id-mint:         #1FAB7A;
  --id-mint-soft:    #E8F7EF;
  --id-amber:        #F4B942;
  --id-amber-soft:   #FEF5E0;
  --id-rose:         #E84A6B;

  /* Typographie */
  --id-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --id-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --id-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --id-text-xs:   12px;
  --id-text-sm:   14px;
  --id-text-md:   16px;
  --id-text-lg:   18px;
  --id-text-xl:   22px;
  --id-text-2xl:  28px;
  --id-text-3xl:  36px;
  --id-text-4xl:  44px;
  --id-text-5xl:  56px;
  --id-text-6xl:  72px;

  --id-leading-tight: 1.05;
  --id-leading-snug:  1.2;
  --id-leading-body:  1.55;

  --id-track-tight: -0.035em;
  --id-track-snug:  -0.02em;

  /* Espacement */
  --id-s1:  4px;
  --id-s2:  8px;
  --id-s3:  12px;
  --id-s4:  16px;
  --id-s5:  24px;
  --id-s6:  32px;
  --id-s7:  48px;
  --id-s8:  64px;
  --id-s9:  96px;

  /* Rayons */
  --id-r-sm:   8px;
  --id-r-md:   14px;
  --id-r-lg:   20px;
  --id-r-xl:   28px;
  --id-r-pill: 999px;

  /* Ombres */
  --id-shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.06);
  --id-shadow-md: 0 4px 16px rgba(15, 23, 41, 0.08);
  --id-shadow-lg: 0 20px 60px rgba(15, 23, 41, 0.12);
  --id-shadow-blue:  0 6px 24px rgba(74, 91, 240, 0.30);
  --id-shadow-coral: var(--id-shadow-blue);

  /* Largeurs */
  --id-container: 1240px;
  --id-container-narrow: 760px;

  /* Transitions */
  --id-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --id-dur:  220ms;
}

@media (max-width: 768px) {
  :root {
    --id-text-6xl: 44px;
    --id-text-5xl: 36px;
    --id-text-4xl: 30px;
    --id-text-3xl: 26px;
  }
}

/* ============================================================
   Base — appliqué uniquement quand le child est actif
   (on évite de toucher OceanWP)
   ============================================================ */
body.id-child-active,
body.id-child-active.home {
  font-family: var(--id-font-body);
  color: var(--id-ink);
  -webkit-font-smoothing: antialiased;
  /* On garde le background du thème actuel (#f8fafc OceanWP) */
}

body.id-child-active h1,
body.id-child-active h2,
body.id-child-active h3,
body.id-child-active h4 {
  font-family: var(--id-font-display);
  font-weight: 800;
  letter-spacing: var(--id-track-tight);
  line-height: var(--id-leading-tight);
  /* color volontairement non forcee : herite de body, laisse les blocs sombres surcharger */
}

body.id-child-active p {
  text-wrap: pretty;
  color: var(--id-ink-soft);
}

body.id-child-active a {
  color: var(--id-coral);
  text-decoration: none;
}
body.id-child-active a:hover { color: var(--id-coral-deep); }

/* Marqueur preview discret */
body.id-preview-mode::before {
  content: "👁 PREVIEW v2";
  position: fixed;
  top: 32px;
  right: 0;
  background: var(--id-gradient);
  color: #fff;
  font: 600 10px/1 var(--id-font-body);
  padding: 6px 12px;
  border-radius: 0 0 0 6px;
  z-index: 99999;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: var(--id-shadow-blue);
}

/* ============================================================
   HEADER v2 — BrNav (sticky renforcé)
   ============================================================ */
body.id-child-active #site-header.id-header,
body.id-child-active .id-header {
  background: #ffffff;
  border-bottom: 1px solid var(--id-rule);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 9999;
  transition: box-shadow var(--id-dur) var(--id-ease),
              padding var(--id-dur) var(--id-ease);
  will-change: transform;
}
/* Légère ombre quand on scroll (état "scrolled") */
body.id-child-active.is-scrolled #site-header.id-header,
body.id-child-active.is-scrolled .id-header {
  box-shadow: 0 4px 20px rgba(15, 23, 41, 0.06);
  border-bottom-color: transparent;
}
/* Header un peu plus compact quand on a scrollé */
body.id-child-active.is-scrolled .id-header-inner {
  padding-top: 12px;
  padding-bottom: 12px;
}
/* Pour éviter qu'un parent overflow casse le sticky */
body.id-child-active,
body.id-child-active #outer-wrap,
body.id-child-active #main-wrap,
body.id-child-active .id-main-wrap {
  overflow-x: clip;
  overflow-y: visible;
}
/* Force radical : aucun espace au-dessus du header en mode preview */
html:has(body.id-child-active) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  --wp-admin--admin-bar--height: 0 !important;
  scroll-padding-top: 0 !important;
}
body.id-child-active,
body.id-child-active.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.id-child-active > #wpadminbar,
body.id-child-active #wpadminbar { display: none !important; }
body.id-child-active > .id-header,
body.id-child-active .id-header { margin-top: 0 !important; }
body.id-child-active.admin-bar .id-header { top: 0 !important; }

/* Si Elementor ajoute un wrapper avec margin-top */
body.id-child-active .elementor,
body.id-child-active #wrapper-navbar,
body.id-child-active #outer-wrap,
body.id-child-active #wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.id-header-inner {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--id-s6);
}

/* Logo image (custom_logo PNG) */
.id-logo {
  flex-shrink: 0;
}
.id-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.id-logo-link img,
.id-logo .custom-logo,
.id-logo .custom-logo-link img {
  display: block;
  height: auto;
  max-height: 44px;
  width: auto;
  max-width: 200px;
}
/* Fallback texte si pas de custom_logo */
.id-wordmark-fallback {
  font-family: var(--id-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--id-ink);
  line-height: 1;
}

/* Navigation centrale */
.id-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.id-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 28px;
  align-items: center;
}
.id-nav-list li { position: relative; }
.id-nav-list > li > a {
  font-family: var(--id-font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--id-ink-soft);
  text-decoration: none;
  padding-bottom: 4px;
  display: inline-block;
  transition: color var(--id-dur) var(--id-ease);
  border-bottom: 2px solid transparent;
}
.id-nav-list > li > a:hover {
  color: var(--id-ink);
}
.id-nav-list > li.current-menu-item > a,
.id-nav-list > li.current-menu-ancestor > a {
  color: var(--id-ink);
  border-bottom-color: var(--id-coral);
}

/* Sous-menus */
.id-nav-list .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  background: var(--id-paper);
  list-style: none;
  margin: 0;
  padding: 8px 0;
  border-radius: var(--id-r-md);
  border: 1px solid var(--id-rule);
  box-shadow: var(--id-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--id-dur) var(--id-ease), visibility var(--id-dur), transform var(--id-dur) var(--id-ease);
  z-index: 1000;
}
.id-nav-list > li:hover > .sub-menu,
.id-nav-list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.id-nav-list .sub-menu li a {
  display: block;
  padding: 9px 18px;
  font-family: var(--id-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--id-ink);
  text-decoration: none;
  transition: background var(--id-dur), color var(--id-dur);
  border-bottom: 0;
}
.id-nav-list .sub-menu li a:hover {
  background: var(--id-rule-soft);
  color: var(--id-coral);
}

/* CTA droite */
.id-header-cta {
  display: flex;
  align-items: center;
  gap: var(--id-s3);
  flex-shrink: 0;
}
.id-header-link {
  font-family: var(--id-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--id-ink-soft);
  text-decoration: none;
  transition: color var(--id-dur);
}
.id-header-link:hover { color: var(--id-ink); }

.id-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--id-s2);
  padding: 10px 18px;
  border-radius: var(--id-r-pill);
  font-family: var(--id-font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform var(--id-dur) var(--id-ease),
              background var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease);
  white-space: nowrap;
}
.id-btn:hover { transform: translateY(-1px); }
/* On force la spécificité pour qu'aucune règle de lien parent ne masque le texte */
body.id-child-active a.id-btn,
body.id-child-active .id-btn {
  text-decoration: none;
}
body.id-child-active a.id-btn--ink,
body.id-child-active .id-btn--ink {
  background: var(--id-ink);
  color: #fff;
}
body.id-child-active a.id-btn--ink:hover,
body.id-child-active .id-btn--ink:hover {
  background: #1a2440;
  color: #fff;
}
body.id-child-active a.id-btn--coral,
body.id-child-active .id-btn--coral {
  background: var(--id-coral);
  color: #fff !important;
  box-shadow: var(--id-shadow-coral);
}
body.id-child-active a.id-btn--coral:hover,
body.id-child-active .id-btn--coral:hover {
  background: var(--id-coral-deep);
  color: #fff !important;
}
body.id-child-active a.id-btn--primary,
body.id-child-active .id-btn--primary {
  background: var(--id-gradient);
  color: #fff !important;
  box-shadow: var(--id-shadow-blue);
}
body.id-child-active a.id-btn--primary:hover,
body.id-child-active .id-btn--primary:hover {
  background: var(--id-blue-deep);
  color: #fff !important;
}
body.id-child-active a.id-btn--ghost,
body.id-child-active .id-btn--ghost {
  background: transparent;
  color: var(--id-ink) !important;
  border-color: var(--id-rule);
}
body.id-child-active a.id-btn--ghost:hover,
body.id-child-active .id-btn--ghost:hover {
  background: var(--id-rule-soft);
  color: var(--id-ink) !important;
}
.id-btn--lg {
  padding: 16px 26px;
  font-size: var(--id-text-md);
  border-radius: var(--id-r-md);
}
.id-btn--ghost {
  background: transparent;
  color: var(--id-ink);
  border-color: var(--id-rule);
}

/* Toggle mobile hamburger */
.id-nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
}
.id-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--id-ink);
  border-radius: 1px;
}

/* Mobile (< 900px) */
@media (max-width: 900px) {
  .id-header-inner {
    padding: 16px 20px;
    gap: var(--id-s3);
  }
  .id-wordmark { font-size: 17px; }

  .id-nav-toggle { display: flex; order: 3; }
  .id-header-cta { display: none; }

  .id-nav {
    order: 4;
    flex: 0 0 100%;
    justify-content: stretch;
  }
  .id-nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--id-paper);
    flex-direction: column;
    padding: 12px 20px 20px;
    gap: 0;
    border-bottom: 1px solid var(--id-rule);
    box-shadow: var(--id-shadow-md);
  }
  .id-nav-list[data-open="true"] { display: flex; }
  .id-nav-list > li {
    width: 100%;
    border-bottom: 1px solid var(--id-rule-soft);
  }
  .id-nav-list > li:last-child { border-bottom: 0; }
  .id-nav-list > li > a {
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
    color: var(--id-ink);
    border-bottom: 0;
  }
  .id-nav-list > li.current-menu-item > a {
    color: var(--id-coral);
  }
  .id-nav-list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 10px 14px;
    min-width: 0;
  }
}

/* ============================================================
   FOOTER v2
   ============================================================ */
.id-footer {
  background: #ffffff;
  border-top: 1px solid var(--id-rule);
  padding: 48px 0 32px;
  margin-top: var(--id-s8);
}
.id-footer-inner {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px;
}
.id-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.id-footer-brand .custom-logo,
.id-footer-brand .custom-logo-link img {
  display: block;
  max-height: 40px;
  width: auto;
  margin-bottom: var(--id-s3);
}
.id-footer-tagline {
  font-family: var(--id-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--id-ink-soft);
  max-width: 320px;
  margin: 0;
}
.id-footer-title {
  font-family: var(--id-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--id-ink);
  margin: 0 0 14px 0;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.id-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.id-footer-list li { margin: 0; }
.id-footer-list a {
  font-family: var(--id-font-body);
  font-size: 15px;
  color: var(--id-ink-soft);
  text-decoration: none;
  transition: color var(--id-dur);
}
.id-footer-list a:hover { color: var(--id-coral); }

.id-footer-bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--id-rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--id-font-body);
  font-size: 13px;
  color: var(--id-ink-soft);
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 900px) {
  .id-footer-inner { padding: 0 24px; }
  .id-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .id-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .id-footer-grid { grid-template-columns: 1fr; }
  .id-footer-bottom { flex-direction: column; }
}

/* ============================================================
   SINGLE ARTICLE — typo + composants
   ============================================================ */

/* H1 article */
body.id-child-active.single-post .entry-title,
body.id-child-active.single-post h1.entry-title {
  font-family: var(--id-font-display);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: var(--id-track-tight);
  line-height: 1.05;
  color: var(--id-ink);
  text-wrap: balance;
  margin-bottom: var(--id-s4);
}

/* H2/H3 dans le contenu */
body.id-child-active.single-post .entry-content h2 {
  font-family: var(--id-font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--id-ink);
  margin: 40px 0 16px;
}
body.id-child-active.single-post .entry-content h3 {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--id-ink);
  margin: 28px 0 12px;
}

/* Paragraphes */
body.id-child-active.single-post .entry-content > p,
body.id-child-active.single-post .entry-content p {
  font-family: var(--id-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--id-ink);
}

/* Premier paragraphe (lead) plus gros */
body.id-child-active.single-post .entry-content > p:first-of-type {
  font-size: 20px;
  line-height: 1.55;
  color: var(--id-ink);
  font-weight: 400;
}

/* Liens dans le contenu */
body.id-child-active.single-post .entry-content a {
  color: var(--id-coral);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(79, 70, 229, 0.4);
  transition: text-decoration-color var(--id-dur), color var(--id-dur);
}
body.id-child-active.single-post .entry-content a:hover {
  color: var(--id-coral-deep);
  text-decoration-color: var(--id-coral-deep);
}

/* Pull-quote / blockquote */
body.id-child-active.single-post .entry-content blockquote,
body.id-child-active.single-post .entry-content .wp-block-quote {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--id-coral-soft);
  border-left: 4px solid var(--id-coral);
  border-radius: 0 var(--id-r-md) var(--id-r-md) 0;
  font-family: var(--id-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--id-coral-deep);
  font-style: normal;
}
body.id-child-active.single-post .entry-content blockquote p { color: inherit; font-size: inherit; }
body.id-child-active.single-post .entry-content blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--id-font-body);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: var(--id-ink-soft);
}

/* Tip box / info box (utilise .wp-block-group avec une couleur de background mint) */
body.id-child-active.single-post .entry-content .id-tip,
body.id-child-active.single-post .entry-content .wp-block-group.is-style-tip {
  margin: 24px 0;
  padding: 20px 24px;
  background: var(--id-mint-soft);
  border-radius: var(--id-r-md);
  font-size: 15px;
  line-height: 1.6;
  color: #0a5a3c;
  border-left: 4px solid var(--id-mint);
}
body.id-child-active.single-post .entry-content .id-tip strong,
body.id-child-active.single-post .entry-content .id-tip b {
  color: #0a5a3c;
}

/* Listes */
body.id-child-active.single-post .entry-content ul li,
body.id-child-active.single-post .entry-content ol li {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 8px;
  color: var(--id-ink);
}

/* Images dans le contenu */
body.id-child-active.single-post .entry-content img {
  border-radius: var(--id-r-md);
}
body.id-child-active.single-post .entry-content figure {
  margin: 32px 0;
}
body.id-child-active.single-post .entry-content figcaption {
  margin-top: 10px;
  font-family: var(--id-font-body);
  font-size: 13px;
  color: var(--id-ink-mute);
  text-align: center;
}

/* Code inline */
body.id-child-active.single-post .entry-content code {
  font-family: var(--id-font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
  background: var(--id-rule-soft);
  border-radius: 4px;
  color: var(--id-ink);
}

/* Tableaux */
body.id-child-active.single-post .entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 28px 0;
  font-size: 14.5px;
  font-family: var(--id-font-body);
  border-radius: var(--id-r-md);
  overflow: hidden;
  box-shadow: var(--id-shadow-sm);
}
body.id-child-active.single-post .entry-content thead {
  background: var(--id-ink);
  color: #fff;
}
body.id-child-active.single-post .entry-content th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 700;
  font-family: var(--id-font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.id-child-active.single-post .entry-content td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--id-rule);
  vertical-align: top;
}
body.id-child-active.single-post .entry-content tbody tr:nth-child(even) {
  background: var(--id-rule-soft);
}

/* Méta-info (bandeau auteur + reading time + date) — déjà géré par mu-plugin template-pro */
body.id-child-active.single-post .id-meta-pro {
  /* Hérité du mu-plugin, on peut ajuster si besoin */
}

/* "L'essentiel" — déjà stylé inline par mu-plugin, on peut ajuster légèrement */
body.id-child-active.single-post .id-essentiel {
  font-family: var(--id-font-body);
}

/* Author bio (déjà présent dans OceanWP author-bio.php) */
body.id-child-active.single-post #author-bio {
  background: var(--id-paper);
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  padding: 28px;
  margin: 48px 0;
  box-shadow: var(--id-shadow-sm);
}
body.id-child-active.single-post #author-bio .author-bio-avatar img {
  border-radius: 50%;
  border: 3px solid var(--id-coral-soft);
}
body.id-child-active.single-post #author-bio .author-bio-title {
  font-family: var(--id-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--id-ink);
  margin-bottom: 8px;
}
body.id-child-active.single-post #author-bio .author-bio-title a {
  color: var(--id-ink);
  text-decoration: none;
}
body.id-child-active.single-post #author-bio .author-bio-description {
  font-family: var(--id-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--id-ink-soft);
}

/* Related posts */
body.id-child-active.single-post #related-posts {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--id-rule);
}
body.id-child-active.single-post #related-posts h3 {
  font-family: var(--id-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

/* ============================================================
   COMPOSANTS RÉUTILISABLES (pills, cards, score, comparatif…)
   À utiliser via bloc Gutenberg "HTML personnalisé".
   ============================================================ */

/* ── PILLS ───────────────────────────────────────────────── */
.id-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--id-r-pill);
  background: var(--id-blue-soft);
  color: var(--id-blue);
  font-family: var(--id-font-body);
  font-size: var(--id-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.id-pill--mint  { background: var(--id-mint-soft); color: var(--id-mint); }
.id-pill--amber { background: var(--id-amber-soft); color: #B07A0A; }
.id-pill--ink   { background: var(--id-ink); color: #fff; }
.id-pill--paper { background: #fff; color: var(--id-ink); border: 1px solid var(--id-rule); }
.id-pill--rose  { background: #FEE9EF; color: var(--id-rose); }

/* ── CARDS de base ──────────────────────────────────────── */
.id-card {
  background: var(--id-paper);
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  padding: var(--id-s5);
  transition: box-shadow var(--id-dur) var(--id-ease),
              transform var(--id-dur) var(--id-ease);
}
.id-card--hover:hover {
  box-shadow: var(--id-shadow-md);
  transform: translateY(-2px);
}

/* ── HERO COMPARATIF (H1 vs H1) ──────────────────────────── */
.id-cmp-hero {
  padding: 20px 0 56px;
}
.id-cmp-hero h1, .id-cmp-hero h2 {
  font-family: var(--id-font-display);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 20px 0 16px;
  text-wrap: balance;
}
.id-cmp-hero .id-vs {
  color: var(--id-blue);
  font-style: italic;
  font-weight: 500;
}
.id-cmp-hero p.id-cmp-lead {
  font-size: 17px;
  color: var(--id-ink-soft);
  max-width: 720px;
  line-height: 1.55;
}

/* ── CARDS SCORE (3 colonnes : loser, winner, TL;DR) ──── */
.id-cmp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin: 0 0 56px;
}
@media (max-width: 900px) {
  .id-cmp-cards { grid-template-columns: 1fr; }
}

.id-cmp-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  border: 1px solid var(--id-rule);
  position: relative;
}
.id-cmp-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.id-cmp-card__name {
  font-family: var(--id-font-display);
  font-size: 20px;
  font-weight: 700;
  color: inherit;
}
.id-cmp-card__score {
  font-family: var(--id-font-display);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: inherit;
}
.id-cmp-card__score-max {
  font-size: 24px;
  color: var(--id-ink-mute);
  font-weight: 700;
}
.id-cmp-card__bar {
  height: 6px;
  background: var(--id-rule-soft);
  border-radius: var(--id-r-pill);
  margin-top: 10px;
  overflow: hidden;
}
.id-cmp-card__bar > span {
  display: block;
  height: 100%;
  background: var(--id-amber);
  border-radius: inherit;
}
.id-cmp-card--winner .id-cmp-card__bar > span { background: var(--id-mint); }

.id-cmp-card__rows {
  margin-top: 20px;
  font-size: 13px;
  font-family: var(--id-font-body);
}
.id-cmp-card__row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--id-rule);
  color: var(--id-ink-soft);
}
.id-cmp-card__row:last-child { border-bottom: 0; }
.id-cmp-card__row b { color: var(--id-ink); font-weight: 600; }

/* Variante winner : fond navy */
.id-cmp-card--winner {
  background: var(--id-ink);
  color: #fff;
  overflow: hidden;
}
.id-cmp-card--winner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--id-blue);
  opacity: 0.35;
  filter: blur(30px);
  pointer-events: none;
}
.id-cmp-card--winner .id-cmp-card__name { color: #fff; }
.id-cmp-card--winner .id-cmp-card__score-max { color: rgba(255,255,255,0.5); }
.id-cmp-card--winner .id-cmp-card__bar { background: rgba(255,255,255,0.12); }
.id-cmp-card--winner .id-cmp-card__rows { position: relative; z-index: 1; }
.id-cmp-card--winner .id-cmp-card__row {
  border-bottom-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.id-cmp-card--winner .id-cmp-card__row b { color: #fff; }
.id-cmp-card--winner .id-btn { margin-top: 20px; width: 100%; justify-content: center; }

/* Variante TL;DR : fond bleu soft */
.id-cmp-card--tldr {
  background: var(--id-blue-soft);
  border-color: transparent;
}
.id-cmp-card--tldr .id-cmp-card__label {
  font-family: var(--id-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--id-blue-deep);
}
.id-cmp-card--tldr h3 {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 12px 0;
  line-height: 1.25;
  color: var(--id-ink);
}
.id-cmp-card--tldr p {
  font-size: 13px;
  color: var(--id-blue-deep);
  line-height: 1.6;
  margin: 0;
}

/* ── TABLEAU COMPARATIF par critère ───────────────────── */
.id-cmp-table {
  background: #fff;
  border-radius: var(--id-r-lg);
  border: 1px solid var(--id-rule);
  overflow: hidden;
  margin: 0 0 56px;
}
.id-cmp-table__head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  padding: 16px 24px;
  background: var(--id-rule-soft);
  font-family: var(--id-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--id-ink-soft);
}
.id-cmp-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  padding: 14px 24px;
  border-top: 1px solid var(--id-rule);
  font-size: 14px;
  align-items: center;
}
.id-cmp-table__row span:first-child { font-weight: 600; color: var(--id-ink); }
.id-cmp-table__row .win  { color: var(--id-mint); font-weight: 700; }
.id-cmp-table__row .lose { color: var(--id-ink-soft); font-weight: 700; }
.id-cmp-table__row .verdict { color: var(--id-ink-soft); font-size: 13px; }

@media (max-width: 700px) {
  .id-cmp-table__head { display: none; }
  .id-cmp-table__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 20px;
  }
}

/* ── PROS / CONS ─────────────────────────────────────────── */
.id-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 56px;
}
@media (max-width: 700px) {
  .id-pros-cons { grid-template-columns: 1fr; }
}
.id-pc-card {
  background: #fff;
  border-radius: var(--id-r-lg);
  padding: 28px;
  border: 1px solid var(--id-rule);
}
.id-pc-card__name {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--id-ink);
}
.id-pc-label {
  font-family: var(--id-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 16px 0 8px;
  text-transform: uppercase;
}
.id-pc-label--pros { color: var(--id-mint); }
.id-pc-label--cons { color: var(--id-rose); }
.id-pc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.id-pc-list li {
  font-family: var(--id-font-body);
  font-size: 14px;
  padding: 6px 0;
  color: var(--id-ink);
}
.id-pc-list--cons li { color: var(--id-ink-soft); }
.id-pc-list--pros li::before { content: "✓ "; color: var(--id-mint); font-weight: bold; }
.id-pc-list--cons li::before { content: "✗ "; color: var(--id-rose); font-weight: bold; }

/* ── VERDICT (encart navy avec CTA) ───────────────────── */
.id-verdict {
  background: var(--id-ink);
  color: #fff;
  border-radius: 24px;
  padding: 48px;
  margin: 0 0 56px;
}
.id-verdict h2 {
  font-family: var(--id-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 16px 0 12px;
  color: #fff;
  line-height: 1.1;
}
.id-verdict h2 .id-coral-highlight,
.id-verdict h2 .accent {
  color: var(--id-blue);
}
.id-verdict p {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  max-width: 720px;
  line-height: 1.6;
  margin: 0;
}
.id-verdict__cta {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.id-verdict .id-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.id-verdict .id-btn--ghost:hover {
  background: rgba(255,255,255,0.06);
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.id-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--id-font-body);
  font-size: 13px;
  color: var(--id-ink-soft);
  padding: 20px 0;
}
.id-breadcrumb__sep { color: var(--id-ink-mute); }
.id-breadcrumb__current { color: var(--id-ink); font-weight: 600; }

/* ============================================================
   CATALOGUE OUTILS — Cards horizontales
   ============================================================ */
.id-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 56px;
}
@media (max-width: 900px) { .id-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .id-tools-grid { grid-template-columns: 1fr; } }

.id-tool {
  background: #fff;
  border-radius: var(--id-r-lg);
  border: 1px solid var(--id-rule);
  padding: 20px;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease);
}
.id-tool:hover {
  transform: translateY(-2px);
  box-shadow: var(--id-shadow-md);
}
.id-tool__head {
  display: flex;
  gap: 14px;
  align-items: center;
}
.id-tool__logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--id-blue);
  color: #fff;
  font-family: var(--id-font-display);
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.id-tool__logo--ink   { background: var(--id-ink); }
.id-tool__logo--mint  { background: var(--id-mint); }
.id-tool__logo--amber { background: var(--id-amber); color: #6E4D0E; }

.id-tool__body { flex: 1; }
.id-tool__name {
  font-family: var(--id-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--id-ink);
  line-height: 1.2;
}
.id-tool__meta {
  font-size: 12px;
  color: var(--id-ink-soft);
  font-family: var(--id-font-body);
  margin-top: 2px;
}
.id-tool__score {
  text-align: right;
  flex-shrink: 0;
}
.id-tool__score-value {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--id-mint);
  line-height: 1;
}
.id-tool__score-max {
  font-size: 10px;
  color: var(--id-ink-mute);
  font-family: var(--id-font-mono);
}
.id-tool__tags {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.id-tool__cta {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.id-tool__cta .id-btn { padding: 9px 16px; font-size: 13px; }
.id-tool__cta .id-btn--coral { flex: 1; justify-content: center; }

/* ============================================================
   BLOG INDEX — Liste articles éditoriale
   ============================================================ */
.id-blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 56px;
}
@media (max-width: 800px) { .id-blog-grid { grid-template-columns: 1fr; } }

.id-blog-card {
  background: #fff;
  border-radius: var(--id-r-lg);
  border: 1px solid var(--id-rule);
  overflow: hidden;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease);
}
.id-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--id-shadow-md);
}
.id-blog-card__media {
  aspect-ratio: 16/9;
  background: var(--id-rule-soft) var(--id-gradient);
}
.id-blog-card__body { padding: 24px; }
.id-blog-card__cat {
  font-family: var(--id-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--id-blue);
  font-weight: 700;
}
.id-blog-card__title {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--id-ink);
  margin: 8px 0 8px;
}
.id-blog-card__excerpt {
  font-size: 14px;
  color: var(--id-ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}
.id-blog-card__meta {
  font-family: var(--id-font-mono);
  font-size: 11px;
  color: var(--id-ink-mute);
  display: flex;
  gap: 12px;
}

/* ============================================================
   FILTRES (catalogue) — pill bar
   ============================================================ */
.id-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 32px;
  font-family: var(--id-font-body);
}
.id-filter-pills {
  display: flex;
  gap: 6px;
  background: #fff;
  padding: 6px;
  border-radius: var(--id-r-pill);
  border: 1px solid var(--id-rule);
}
.id-filter-pill {
  padding: 8px 16px;
  border-radius: var(--id-r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--id-ink);
  cursor: pointer;
  transition: all var(--id-dur);
  text-decoration: none;
  background: transparent;
  border: 0;
}
.id-filter-pill.is-active,
.id-filter-pill:hover {
  background: var(--id-ink);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   MOBILE POLISH — couvre toutes les zones
   ============================================================ */
@media (max-width: 768px) {
  .id-header-inner { padding: 14px 16px; }
  .id-footer-inner { padding: 0 20px; }
  .id-cmp-hero h1, .id-cmp-hero h2 { font-size: 36px; line-height: 1.05; }
  .id-cmp-card { padding: 22px; }
  .id-cmp-card__score { font-size: 48px; }
  .id-verdict { padding: 32px 24px; }
  .id-verdict h2 { font-size: 26px; }
  body.id-child-active.single-post .entry-content blockquote {
    padding: 18px 20px;
    font-size: 17px;
  }
  body.id-child-active::before {
    top: 46px;
    font-size: 9px;
    padding: 4px 10px;
  }
}

/* ============================================================
   SINGLE.PHP — Templates complet conforme au brief PageArticle
   ============================================================ */
.id-article-wrap {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px;
}

/* Header article */
.id-article-head {
  padding: 32px 0 0;
}
.id-article-title {
  font-family: var(--id-font-display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 16px 0 20px;
  max-width: 920px;
  color: var(--id-ink);
  text-align: left;
  text-wrap: balance;
  hyphens: none;
  word-spacing: normal;
}
.id-article-lead {
  font-family: var(--id-font-body);
  font-size: 19px;
  color: var(--id-ink-soft);
  max-width: 720px;
  line-height: 1.55;
  margin: 0 0 24px;
  text-align: left;
  text-wrap: pretty;
  hyphens: none;
}

/* Méta-bar : auteur · date · reading time · actions */
.id-article-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--id-ink-soft);
  font-size: 13px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--id-rule);
  font-family: var(--id-font-body);
}
.id-article-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.id-article-author__avatar,
.id-article-author img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--id-blue-soft);
}
.id-article-author__name {
  color: var(--id-ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.id-article-author__role {
  font-size: 11px;
  color: var(--id-ink-soft);
  font-family: var(--id-font-body);
}
.id-article-date,
.id-article-readtime {
  font-family: var(--id-font-mono);
  font-size: 12px;
}
.id-article-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.id-article-actions .id-pill {
  cursor: pointer;
  border: 0;
  font-family: var(--id-font-body);
}

/* Cover image */
.id-article-cover {
  margin: 32px 0 0;
  border-radius: var(--id-r-xl);
  overflow: hidden;
  aspect-ratio: 16/8;
  background: var(--id-rule-soft);
}
.id-article-cover__img,
.id-article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--id-r-xl);
}

/* Layout 2 colonnes : TOC sticky | article (large) */
.id-article-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 820px);
  gap: 64px;
  padding: 56px 0;
  align-items: start;
  justify-content: center;
}
@media (max-width: 1100px) {
  .id-article-body {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
  }
}
@media (max-width: 800px) {
  .id-article-body {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }
  .id-toc { display: none; }
  .id-article-wrap { padding: 0 20px; }
}

/* TOC sticky */
.id-toc {
  font-family: var(--id-font-body);
}
.id-toc__inner {
  position: sticky;
  top: 100px;
}
.id-toc__label {
  font-family: var(--id-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--id-ink-mute);
  margin-bottom: 16px;
}
.id-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.id-toc__list li { margin: 0; }
.id-toc__list a {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0 9px 14px;
  border-left: 2px solid transparent;
  font-size: 13px;
  color: var(--id-ink-soft);
  text-decoration: none;
  transition: color var(--id-dur), border-left-color var(--id-dur), background var(--id-dur);
  line-height: 1.4;
}
.id-toc__list a:hover,
.id-toc__list a.is-active {
  color: var(--id-ink);
  border-left-color: var(--id-blue);
  font-weight: 600;
}
.id-toc__list a.is-active {
  background: var(--id-blue-soft);
  border-radius: 0 var(--id-r-sm) var(--id-r-sm) 0;
}
.id-toc__num {
  font-family: var(--id-font-mono);
  font-size: 11px;
  color: var(--id-ink-mute);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.id-toc__list a.is-active .id-toc__num { color: var(--id-blue); }

/* Article main */
.id-article {
  min-width: 0;
}
.id-article__content {
  font-family: var(--id-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--id-ink);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-justify: inter-word;
}
.id-article__content > p:first-of-type {
  font-size: 20px;
  line-height: 1.55;
  color: var(--id-ink);
  font-weight: 400;
  margin-top: 0;
}
/* H2/H3/H4 dans le contenu : pas de justify (titres courts mieux à gauche) */
.id-article__content h1,
.id-article__content h2,
.id-article__content h3,
.id-article__content h4 {
  text-align: left;
  hyphens: none;
}
.id-article__content h2 {
  font-family: var(--id-font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 40px 0 16px;
  scroll-margin-top: 100px;
}
.id-article__content h3 {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 28px 0 12px;
}

/* CTA Newsletter inline */
.id-newsletter-cta {
  margin: 48px 0;
  padding: 32px;
  background: var(--id-ink);
  color: #fff;
  border-radius: var(--id-r-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.id-newsletter-cta__label {
  font-family: var(--id-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}
.id-newsletter-cta__title {
  font-family: var(--id-font-display);
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.25;
  color: #fff;
}
.id-newsletter-cta__desc {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* Tags article */
.id-article-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 32px 0;
  padding-top: 24px;
  border-top: 1px solid var(--id-rule);
}
.id-article-tags .id-pill {
  text-decoration: none;
}

/* Related rail */
.id-related-rail {
  font-family: var(--id-font-body);
}
.id-related-rail__inner {
  position: sticky;
  top: 100px;
}
.id-related-rail__label {
  font-family: var(--id-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--id-ink-mute);
  margin-bottom: 16px;
}
.id-related-rail__item {
  display: block;
  padding: 14px 0;
  border-top: 1px solid var(--id-rule);
  text-decoration: none;
  color: var(--id-ink);
  transition: color var(--id-dur);
}
.id-related-rail__item:hover {
  color: var(--id-blue);
}
.id-related-rail__item:last-child {
  border-bottom: 1px solid var(--id-rule);
}
.id-related-rail__title {
  font-family: var(--id-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.id-related-rail__meta {
  font-family: var(--id-font-mono);
  font-size: 11px;
  color: var(--id-ink-mute);
  margin-top: 4px;
}

/* Author bio (réécriture custom du template) */
.id-author-bio {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--id-paper);
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  padding: 28px;
  margin: 48px 0;
  box-shadow: var(--id-shadow-sm);
}
.id-author-bio__avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}
.id-author-bio__avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--id-blue-soft);
  display: block;
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 1;
}
.id-author-bio__body { flex: 1; min-width: 0; }
.id-author-bio__name {
  font-family: var(--id-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--id-blue);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 6px;
}
.id-author-bio__name:hover { color: var(--id-blue-deep); }
.id-author-bio__desc {
  font-family: var(--id-font-body);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--id-ink-soft);
  margin: 0;
}
@media (max-width: 600px) {
  .id-author-bio {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
}

/* ============================================================
   PROS / CONS auto-stylés
   Détection : H3 qui contient "ce qu'on aime / ce qu'on regrette"
   ainsi que le <ul> qui suit
   ============================================================ */
body.id-child-active.single-post .entry-content h3 {
  /* H3 avec accent visuel pour pros/cons */
}
/* Ce qu'on aime : H3 + UL qui suit → vert */
body.id-child-active.single-post .entry-content h3:where([id*="aime"], [id*="forts"], [id*="pros"], [id*="avantages"]),
body.id-child-active.single-post .entry-content h3:has(strong):where(:has-text("aime")) {
  color: var(--id-mint);
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.id-child-active.single-post .entry-content h3:where([id*="aime"], [id*="forts"], [id*="pros"], [id*="avantages"])::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--id-mint-soft);
  color: var(--id-mint);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
/* Ce qu'on regrette / Inconvénients / Limites → rouge */
body.id-child-active.single-post .entry-content h3:where([id*="regrette"], [id*="cons"], [id*="inconv"], [id*="limites"], [id*="faibles"]) {
  color: var(--id-rose);
  font-size: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.id-child-active.single-post .entry-content h3:where([id*="regrette"], [id*="cons"], [id*="inconv"], [id*="limites"], [id*="faibles"])::before {
  content: "✕";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #FEE9EF;
  color: var(--id-rose);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

/* ============================================================
   Bloc "Notre note" — encart évaluation
   Pattern : <p><strong>★ Notre note : X/20</strong></p> + <ul>
   ============================================================ */
body.id-child-active.single-post .entry-content .id-note,
body.id-child-active.single-post .entry-content .wp-block-group.is-style-note {
  background: var(--id-blue-soft);
  border-radius: var(--id-r-md);
  padding: 22px 26px;
  margin: 32px 0;
  border-left: 4px solid var(--id-blue);
}
body.id-child-active.single-post .entry-content .id-note p:first-child,
body.id-child-active.single-post .entry-content .id-note strong:first-child {
  font-family: var(--id-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--id-ink);
  margin: 0 0 12px;
  display: block;
}
body.id-child-active.single-post .entry-content .id-note ul li {
  font-family: var(--id-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--id-ink);
}

/* ============================================================
   Related block (en bas de l'article, plein largeur)
   ============================================================ */
.id-related-block {
  max-width: var(--id-container);
  margin: 64px auto 80px;
  padding: 48px 0 0;
  border-top: 1px solid var(--id-rule);
}
.id-related-block__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 32px;
}
.id-related-block__title {
  font-family: var(--id-font-display);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--id-ink);
}

/* Comments wrap */
.id-comments-wrap {
  margin: 56px 0;
  padding: 32px 0 0;
  border-top: 1px solid var(--id-rule);
}

/* ============================================================
   FRONT PAGE / HOME V2 (stats-driven)
   ============================================================ */
.id-home {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .id-home { padding: 0 20px; }
}

/* Accent text gradient */
.id-accent {
  background: var(--id-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero style shadcn : 2 colonnes (texte + grille 3 tuiles images) */
.id-hero {
  padding: 0 0 64px;
  position: relative;
  background: var(--id-blue-soft);
  isolation: isolate;
}
/* Pleine largeur, le bg déborde le container */
.id-home .id-hero {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(48px, calc(50vw - var(--id-container) / 2));
  padding-right: max(48px, calc(50vw - var(--id-container) / 2));
}
/* Séparation nette en bas */
.id-hero::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--id-rule), transparent);
  pointer-events: none;
}
.id-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
  max-width: var(--id-container);
  margin: 32px auto 0;
  /* Hero = une seule carte blanche pleine largeur (texte + visuels) */
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  box-shadow: var(--id-shadow-md);
  padding: 48px;
}
@media (max-width: 600px) {
  .id-hero__inner { padding: 28px 22px; }
}
@media (max-width: 900px) {
  .id-hero { padding: 0 0 48px; }
  .id-home .id-hero {
    padding-left: 0;
    padding-right: 0;
  }
  .id-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* Col gauche : texte aligné en haut, boutons poussés en bas */
.id-hero__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
  min-height: 100%;
}
.id-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--id-rule);
  background: transparent;
  color: var(--id-ink-soft);
  border-radius: var(--id-r-pill);
  font-family: var(--id-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  width: fit-content;
}
.id-hero__title {
  font-family: var(--id-font-display);
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
  color: var(--id-ink);
  text-wrap: balance;
  max-width: 560px;
}
.id-hero__lead {
  font-family: var(--id-font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--id-ink-soft);
  max-width: 480px;
  margin: 0;
  letter-spacing: -0.005em;
}
.id-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}
@media (max-width: 900px) {
  .id-hero__cta { margin-top: 16px; }
}

/* Col droite : grille 3 tuiles (carré · rectangle vertical · carré) */
.id-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}
.id-hero__tile {
  background-color: var(--id-rule-soft);
  background-size: cover;
  background-position: center;
  border-radius: var(--id-r-md);
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform var(--id-dur) var(--id-ease), box-shadow var(--id-dur);
}
.id-hero__tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--id-shadow-md);
}
.id-hero__tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(to top, rgba(19, 24, 58, 0.55), transparent);
  pointer-events: none;
}
.id-hero__tile--a { aspect-ratio: 1; }
.id-hero__tile--b { grid-row: span 2; }
.id-hero__tile--c { aspect-ratio: 1; }
.id-hero__tile-cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  font-family: var(--id-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(19, 24, 58, 0.6);
  padding: 5px 9px;
  border-radius: var(--id-r-sm);
  backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
  .id-hero__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .id-hero__tile--b { grid-row: span 2; }
  .id-hero__title { font-size: clamp(36px, 9vw, 56px); }
}
@media (max-width: 540px) {
  .id-hero__grid { grid-template-columns: 1fr; }
  .id-hero__tile--b { grid-row: auto; aspect-ratio: 16/9; }
}

/* Trust strip */
.id-home__trust {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  margin-top: 32px;
  border-top: 1px solid var(--id-rule);
  border-bottom: 1px solid var(--id-rule);
  flex-wrap: wrap;
}
.id-home__trust-label {
  font-family: var(--id-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--id-ink-soft);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.id-home__trust-brand {
  font-family: var(--id-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--id-ink);
  opacity: 0.7;
  letter-spacing: -0.01em;
}
.id-home__trust-more {
  font-size: 13px;
  color: var(--id-blue);
  font-weight: 600;
  text-decoration: none;
}

/* 3 piliers — section démarquée du hero */
.id-home__pillars {
  padding: 96px 0 80px;
}
.id-home__pillars-head {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.id-home__pillars-head .id-eyebrow {
  font-family: var(--id-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--id-blue);
  margin-bottom: 4px;
}
.id-home__pillars-head h2 {
  font-family: var(--id-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.1;
}
.id-home__pillars-head p {
  font-size: 16px;
  color: var(--id-ink-soft);
  max-width: 540px;
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 768px) {
  .id-home__pillars { padding: 64px 0 56px; }
}
.id-home__pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .id-home__pillars-grid { grid-template-columns: 1fr; } }

.id-pillar {
  background: var(--id-paper);
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-xl);
  padding: 32px 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--id-dur), box-shadow var(--id-dur), border-color var(--id-dur);
  min-height: 100%;
}
.id-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--id-shadow-md);
  border-color: var(--id-blue-soft);
}
.id-pillar__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.id-pillar__icon svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
}
.id-pillar__icon--blue { background: var(--id-blue); }
.id-pillar__icon--coral { background: var(--id-gradient); }
.id-pillar__icon--mint { background: var(--id-mint); }

.id-pillar__title {
  font-family: var(--id-font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 24px 0 10px;
  color: var(--id-ink);
  line-height: 1.2;
}
.id-pillar__desc {
  font-family: var(--id-font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--id-ink-soft);
  margin: 0 0 24px;
}
.id-pillar__cta {
  font-family: var(--id-font-body);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: auto;
}
.id-pillar__cta--blue { color: var(--id-blue); }
.id-pillar__cta--coral { color: var(--id-blue-deep); }
.id-pillar__cta--mint { color: var(--id-mint); }

/* Force égalité hauteur du grid */
.id-home__pillars-grid {
  align-items: stretch;
}

/* ─── COMPARATIFS POPULAIRES (VS cards) ─── */
.id-home__compares {
  padding: 80px 0;
  border-top: 1px solid var(--id-rule);
}
.id-vs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .id-vs-grid { grid-template-columns: 1fr; } }

.id-vs-card {
  background: var(--id-paper);
  border-radius: var(--id-r-lg);
  border: 1px solid var(--id-rule);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease);
}
.id-vs-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--id-shadow-md);
}
.id-vs-card__media {
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: var(--id-rule-soft);
}
/* Overlay subtil pour lisibilité du tag (image vedette) */
.id-vs-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,24,58,0) 60%, rgba(19,24,58,0.10) 100%);
  pointer-events: none;
}
/* Fallback gradient quand pas d'image */
.id-vs-card--blue   .id-vs-card__media:not([style*="background-image"]) { background: linear-gradient(135deg, rgba(74, 91, 240, 0.18), rgba(74, 91, 240, 0.04)); }
.id-vs-card--mint   .id-vs-card__media:not([style*="background-image"]) { background: linear-gradient(135deg, rgba(31, 171, 122, 0.18), rgba(31, 171, 122, 0.04)); }
.id-vs-card--amber  .id-vs-card__media:not([style*="background-image"]) { background: linear-gradient(135deg, rgba(244, 185, 66, 0.22), rgba(244, 185, 66, 0.05)); }

.id-vs-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  border-radius: var(--id-r-pill);
  padding: 5px 11px;
  font-family: var(--id-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 2;
  box-shadow: var(--id-shadow-sm);
}
.id-vs-card--blue  .id-vs-card__tag { color: var(--id-blue); }
.id-vs-card--mint  .id-vs-card__tag { color: var(--id-mint); }
.id-vs-card--amber .id-vs-card__tag { color: #B07A0A; }

.id-vs-card__vs {
  font-family: var(--id-font-display);
  font-size: 72px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.05em;
  line-height: 1;
}
.id-vs-card--blue  .id-vs-card__vs { color: var(--id-blue); }
.id-vs-card--mint  .id-vs-card__vs { color: var(--id-mint); }
.id-vs-card--amber .id-vs-card__vs { color: #B07A0A; }

.id-vs-card__body { padding: 20px 22px 24px; }
.id-vs-card__title {
  font-family: var(--id-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--id-ink);
  margin: 0 0 8px;
}
.id-vs-card__desc {
  font-family: var(--id-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--id-ink-soft);
  margin: 0 0 14px;
}
.id-vs-card__cta {
  font-family: var(--id-font-body);
  font-size: 13px;
  font-weight: 600;
}
.id-vs-card--blue  .id-vs-card__cta { color: var(--id-blue); }
.id-vs-card--mint  .id-vs-card__cta { color: var(--id-mint); }
.id-vs-card--amber .id-vs-card__cta { color: #B07A0A; }

/* ─── NOTRE STACK 2026 (9 outils 3×3 avec vrais logos) ─── */
.id-home__stack {
  padding: 80px 0;
  border-top: 1px solid var(--id-rule);
}
.id-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .id-stack-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 600px) { .id-stack-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.id-stack-card {
  background: var(--id-paper);
  border: 1.5px solid var(--id-blue-soft);
  border-radius: var(--id-r-lg);
  padding: 24px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              border-color var(--id-dur);
}
.id-stack-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--id-shadow-md);
  border-color: var(--id-blue);
}

/* Zone logo : 16:9 ratio, fond blanc, logo centré */
.id-stack-logo {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border-radius: var(--id-r-sm);
}
.id-stack-logo__img {
  max-width: 75%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.id-stack-logo__fallback {
  font-family: var(--id-font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--id-blue);
  letter-spacing: -0.05em;
}

.id-stack-card__name {
  font-family: var(--id-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--id-ink);
}

/* ─── NEWSLETTER CTA V1 (foncé avec halo) ─── */
.id-home__newsletter-v1 {
  padding: 32px 0 96px;
}
.id-news-card {
  background: var(--id-ink);
  border-radius: 32px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.id-news-card__halo {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--id-gradient);
  opacity: 0.35;
  filter: blur(40px);
  pointer-events: none;
}
.id-news-card__left { position: relative; z-index: 1; }
.id-news-card__title {
  font-family: var(--id-font-display);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 16px 0 12px;
  line-height: 1.05;
  color: #fff;
}
.id-news-card__desc {
  font-family: var(--id-font-body);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 440px;
  margin: 0;
  line-height: 1.55;
}
.id-pill--news {
  background: rgba(74, 91, 240, 0.22) !important;
  color: #A5B3FF !important;
}
.id-news-card__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}
.id-news-card__input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--id-r-md);
  padding: 18px;
  color: #fff;
  font-family: var(--id-font-body);
  font-size: 15px;
  outline: none;
  transition: border-color var(--id-dur);
}
.id-news-card__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.id-news-card__input:focus {
  border-color: var(--id-blue);
  background: rgba(255, 255, 255, 0.12);
}
.id-news-card__submit {
  width: 100%;
  justify-content: center;
  border-radius: var(--id-r-md) !important;
}
.id-news-card__legal {
  font-family: var(--id-font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  margin-top: 4px;
}
@media (max-width: 800px) {
  .id-news-card { grid-template-columns: 1fr; padding: 36px 28px; }
}

/* ─── CATEGORIES section (gardée pour usage potentiel ailleurs) ─── */
.id-home__categories {
  padding: 80px 0;
  border-top: 1px solid var(--id-rule);
}
.id-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .id-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .id-cat-grid { grid-template-columns: 1fr; } }

.id-cat-card {
  background: var(--id-paper);
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  padding: 32px 28px;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              border-color var(--id-dur);
  min-height: 200px;
}
.id-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--id-shadow-md);
  border-color: var(--id-blue-soft);
}
.id-cat-card__icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--id-blue-soft);
}
.id-cat-card__name {
  font-family: var(--id-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--id-ink);
  margin: 0;
  line-height: 1.2;
}
.id-cat-card__desc {
  font-family: var(--id-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--id-ink-soft);
  margin: 0;
}

/* ─── OUTILS RECOMMANDÉS section (logos) ─── */
.id-home__tools {
  padding: 80px 0;
  border-top: 1px solid var(--id-rule);
}
.id-toolslogo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .id-toolslogo-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 600px) { .id-toolslogo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 360px) { .id-toolslogo-grid { grid-template-columns: 1fr; } }

.id-toolslogo-card {
  background: var(--id-paper);
  border: 1px solid var(--id-blue-soft);
  border-radius: var(--id-r-lg);
  padding: 22px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              border-color var(--id-dur);
}
.id-toolslogo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--id-shadow-md);
  border-color: var(--id-blue);
}
.id-toolslogo-card__media {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--id-rule-soft);
  border-radius: var(--id-r-md);
  overflow: hidden;
}
.id-toolslogo-card__img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.id-toolslogo-card__placeholder {
  font-family: var(--id-font-display);
  font-size: 48px;
  font-weight: 800;
  color: var(--id-blue);
  letter-spacing: -0.05em;
}
.id-toolslogo-card__name {
  font-family: var(--id-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--id-ink);
  text-align: center;
}

/* Derniers articles — démarqué */
.id-home__latest {
  padding: 80px 0;
  border-top: 1px solid var(--id-rule);
}
/* Variante 3 colonnes */
.id-blog-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .id-blog-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .id-blog-grid--3 { grid-template-columns: 1fr; } }
.id-home__section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 20px;
}
.id-home__section-head .id-eyebrow {
  display: block;
  font-family: var(--id-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--id-blue);
  margin-bottom: 8px;
}
.id-home__section-head h2 {
  font-family: var(--id-font-display);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}
@media (max-width: 768px) {
  .id-home__latest { padding: 56px 0; }
}
.id-home__see-all {
  font-family: var(--id-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--id-blue);
  text-decoration: none;
}

/* Newsletter (full width) — section démarquée */
.id-home__newsletter {
  padding: 32px 0 96px;
  border-top: 1px solid var(--id-rule);
  margin-top: 16px;
}
@media (max-width: 768px) {
  .id-home__newsletter { padding: 32px 0 64px; }
}

/* ============================================================
   ARCHIVE / SEARCH
   ============================================================ */
.id-archive,
.id-search {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .id-archive, .id-search { padding: 0 20px; }
}
.id-archive__head {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--id-rule);
  margin-bottom: 40px;
}
.id-archive__title {
  font-family: var(--id-font-display);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 16px 0 12px;
  color: var(--id-ink);
  text-wrap: balance;
}
.id-archive__desc {
  font-family: var(--id-font-body);
  font-size: 17px;
  color: var(--id-ink-soft);
  max-width: 720px;
  line-height: 1.55;
}
.id-archive__desc p { margin: 0; }

/* Pagination */
.id-pagination {
  margin: 48px 0 64px;
  display: flex;
  justify-content: center;
}
.id-pagination .nav-links,
.id-pagination .page-numbers {
  display: flex;
  gap: 6px;
  align-items: center;
}
.id-pagination .page-numbers {
  font-family: var(--id-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--id-r-sm);
  background: #fff;
  color: var(--id-ink);
  border: 1px solid var(--id-rule);
  text-decoration: none;
  transition: all var(--id-dur);
}
.id-pagination a.page-numbers:hover {
  background: var(--id-blue-soft);
  border-color: var(--id-blue);
  color: var(--id-blue-deep);
}
.id-pagination .page-numbers.current {
  background: var(--id-ink);
  color: #fff;
  border-color: var(--id-ink);
}

/* Empty state */
.id-empty {
  text-align: center;
  padding: 64px 24px;
  font-family: var(--id-font-body);
}
.id-empty p {
  font-size: 17px;
  color: var(--id-ink-soft);
  margin-bottom: 24px;
}

/* Search form (used in 404 + search) */
.id-404__search,
.id-search__form {
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin-top: 16px;
}
.id-404__search .id-input,
.id-search__form .id-input { flex: 1; }

/* ============================================================
   404 PAGE
   ============================================================ */
.id-404 {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) { .id-404 { padding: 0 20px; } }

.id-404__inner {
  padding: 64px 0 96px;
  text-align: left;
  max-width: 920px;
}
.id-404__eyebrow {
  font-family: var(--id-font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--id-ink-mute);
}
.id-404__title {
  font-family: var(--id-font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 16px 0 20px;
  color: var(--id-ink);
}
.id-404__desc {
  font-size: 18px;
  color: var(--id-ink-soft);
  max-width: 620px;
  line-height: 1.55;
  margin: 0 0 32px;
}
.id-404__suggests {
  margin-top: 56px;
}
.id-404__suggests-label {
  font-family: var(--id-font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--id-ink-mute);
  margin-bottom: 16px;
}
.id-404__back {
  margin-top: 40px;
}

/* ============================================================
   PAGE COMPARATIF (template)
   ============================================================ */
.id-page-cmp,
.id-page-outils {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 768px) {
  .id-page-cmp, .id-page-outils { padding: 0 20px; }
}
.id-cmp-content { padding-top: 16px; }

/* Skip link */
.id-skip-link.screen-reader-text:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  background: var(--id-coral);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--id-r-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 100000;
}

/* ============================================================
   PAGE GUIDES (page-guides.php) — v2 Bright
   ============================================================ */
body.id-child-active .id-guides-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 48px 80px;
  font-family: var(--id-font-body);
  color: var(--id-ink);
}

/* HERO */
.id-guides-hero {
  padding: 72px 0 64px;
  text-align: center;
}
.id-guides-hero__inner {
  max-width: 880px;
  margin: 0 auto;
}
.id-guides-hero__title {
  font-family: var(--id-font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 16px 0 20px;
  color: var(--id-ink);
  text-wrap: balance;
}
.id-guides-hero__lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--id-ink-soft);
  max-width: 720px;
  margin: 0 auto 32px;
}
.id-guides-hero__cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* SECTION HEADS */
.id-guides-section__head {
  margin: 56px 0 32px;
  max-width: 760px;
}
.id-guides-section__title {
  font-family: var(--id-font-display);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--id-ink);
}
.id-guides-section__lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--id-ink-soft);
  margin: 0;
  max-width: 720px;
}

/* THÉMATIQUES — 4 cards */
.id-guides-themes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.id-theme-card {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: 16px;
  padding: 28px 24px;
  text-decoration: none;
  color: var(--id-ink);
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              border-color var(--id-dur) var(--id-ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.id-theme-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 41, 0.08);
  border-color: transparent;
}
.id-theme-card__icon {
  color: var(--id-blue);
  margin-bottom: 6px;
}
.id-theme-card__title {
  font-family: var(--id-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
  color: var(--id-ink);
}
.id-theme-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--id-ink-soft);
  margin: 0;
}

/* CTA GRADIENT */
.id-guides-cta {
  margin: 64px 0;
}
.id-guides-cta__inner {
  background: var(--id-gradient);
  border-radius: 24px;
  padding: 56px 48px;
  color: #fff;
  text-align: left;
  max-width: 100%;
}
.id-guides-cta__title {
  font-family: var(--id-font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #fff;
}
.id-guides-cta__desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 12px;
  max-width: 720px;
}
.id-guides-cta__buttons {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* FAQ */
.id-guides-faq {
  margin: 64px auto 0;
  max-width: 880px;
}
.id-guides-faq__title {
  font-family: var(--id-font-display);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 28px;
  color: var(--id-ink);
}
.id-guides-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.id-faq-item {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: 14px;
  padding: 0;
  transition: border-color var(--id-dur), box-shadow var(--id-dur);
}
.id-faq-item[open] {
  border-color: var(--id-blue);
  box-shadow: 0 6px 16px rgba(74, 91, 240, 0.08);
}
.id-faq-item__q {
  font-family: var(--id-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--id-ink);
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.id-faq-item__q::-webkit-details-marker { display: none; }
.id-faq-item__q::before {
  content: '▸';
  color: var(--id-blue);
  font-size: 14px;
  transition: transform var(--id-dur);
}
.id-faq-item[open] .id-faq-item__q::before {
  transform: rotate(90deg);
}
.id-faq-item__a {
  padding: 0 24px 22px 44px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--id-ink-soft);
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .id-guides-themes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .id-guides-page { padding: 0 24px 64px; }
  .id-guides-hero { padding: 56px 0 48px; }
  .id-guides-cta__inner { padding: 44px 28px; }
}
@media (max-width: 540px) {
  .id-guides-themes__grid { grid-template-columns: 1fr; }
  .id-guides-hero__cta { flex-direction: column; }
  .id-guides-hero__cta .id-btn { width: 100%; justify-content: center; }
  .id-guides-cta__buttons { flex-direction: column; }
  .id-guides-cta__buttons .id-btn { width: 100%; justify-content: center; }
}

/* === FIX lisibilité CTA gradient page Guides === */
body.id-child-active .id-guides-cta__title {
  color: #ffffff !important;
}
body.id-child-active .id-guides-cta__desc,
body.id-child-active .id-guides-cta__inner p {
  color: rgba(255, 255, 255, 0.95) !important;
}
/* Le bouton "paper" devient outline blanc sur le gradient */
body.id-child-active .id-guides-cta .id-btn--paper {
  background: transparent !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
}
body.id-child-active .id-guides-cta .id-btn--paper:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #ffffff !important;
}
/* Le coral garde son fond rouge — assure que le texte reste blanc */
body.id-child-active .id-guides-cta .id-btn--coral {
  color: #ffffff !important;
}

/* === GUIDE MIN (format épuré inspiré Article.html "À lire ensuite") === */
body.id-child-active .id-guide-min-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
body.id-child-active .id-guide-min {
  display: flex;
  gap: 18px;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: 16px;
  text-decoration: none;
  color: var(--id-ink);
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              border-color var(--id-dur) var(--id-ease);
  align-items: flex-start;
}
body.id-child-active .id-guide-min:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(15, 23, 41, 0.08);
  border-color: transparent;
}
body.id-child-active .id-guide-min__num {
  font-family: var(--id-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--id-blue);
  letter-spacing: 0.5px;
  flex-shrink: 0;
  padding-top: 4px;
}
body.id-child-active .id-guide-min__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
body.id-child-active .id-guide-min__cat {
  font-family: var(--id-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--id-ink-soft);
}
body.id-child-active .id-guide-min__title {
  font-family: var(--id-font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
  color: var(--id-ink);
}
body.id-child-active .id-guide-min:hover .id-guide-min__title {
  color: var(--id-blue);
}
body.id-child-active .id-guide-min__meta {
  font-family: var(--id-font-mono);
  font-size: 12px;
  color: var(--id-ink-soft);
  letter-spacing: 0.3px;
  margin-top: 4px;
}
@media (max-width: 1000px) {
  body.id-child-active .id-guide-min-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body.id-child-active .id-guide-min-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE OUTILS IA (page-outils-ia.php) — v2 Bright
   ============================================================ */
body.id-child-active .id-tools-page {
  max-width: var(--id-container);
  margin: 0 auto;
  padding: 0 48px 80px;
  font-family: var(--id-font-body);
  color: var(--id-ink);
}

/* HERO */
body.id-child-active .id-tools-hero {
  padding: 64px 0 40px;
  max-width: 1100px;
}
body.id-child-active .id-tools-hero__eyebrow {
  display: inline-block;
  background: #ECEAFB;
  color: var(--id-blue-deep);
  font-family: var(--id-font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
body.id-child-active .id-tools-hero__title {
  font-family: var(--id-font-display);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 18px 0 18px;
  color: var(--id-ink);
}
body.id-child-active .id-tools-hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--id-ink-soft);
  margin: 0;
  max-width: 760px;
}

/* TOOLBAR */
body.id-child-active .id-tools-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 8px 0 32px;
  flex-wrap: wrap;
}
body.id-child-active .id-tools-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
body.id-child-active .id-tools-filter {
  background: transparent;
  border: none;
  font-family: var(--id-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--id-ink);
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--id-dur), color var(--id-dur);
}
body.id-child-active .id-tools-filter:hover {
  background: rgba(15, 23, 41, 0.04);
}
body.id-child-active .id-tools-filter.is-active {
  background: var(--id-ink);
  color: #fff;
  font-weight: 600;
}
body.id-child-active .id-tools-toolbar__right {
  display: flex;
  align-items: center;
  gap: 18px;
}
body.id-child-active .id-tools-search {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: 999px;
  padding: 8px 16px;
  gap: 8px;
  min-width: 240px;
}
body.id-child-active .id-tools-search__icon {
  color: var(--id-ink-soft);
  font-size: 13px;
}
body.id-child-active .id-tools-search input {
  border: none;
  background: transparent;
  font-family: var(--id-font-body);
  font-size: 14px;
  color: var(--id-ink);
  outline: none;
  width: 100%;
}
body.id-child-active .id-tools-search input::placeholder {
  color: var(--id-ink-soft);
}
body.id-child-active .id-tools-sort {
  font-family: var(--id-font-body);
  font-size: 14px;
  color: var(--id-ink-soft);
  white-space: nowrap;
}
body.id-child-active .id-tools-sort b {
  color: var(--id-ink);
  font-weight: 700;
}

/* GRILLE */
body.id-child-active .id-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
body.id-child-active .id-tool-card {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: 18px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              border-color var(--id-dur) var(--id-ease);
}
body.id-child-active .id-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 41, 0.08);
  border-color: transparent;
}

/* HEAD : logo + identité + score */
body.id-child-active .id-tool-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
body.id-child-active .id-tool-card__logo {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--id-font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
body.id-child-active .id-tool-card__id {
  min-width: 0;
}
body.id-child-active .id-tool-card__name {
  font-family: var(--id-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--id-ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
body.id-child-active .id-tool-card__sub {
  font-size: 13px;
  color: var(--id-ink-soft);
  line-height: 1.35;
}
body.id-child-active .id-tool-card__score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  text-align: right;
}
body.id-child-active .id-tool-card__score-num {
  font-family: var(--id-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1FB57A;
  line-height: 1;
}
body.id-child-active .id-tool-card__score-unit {
  font-family: var(--id-font-mono);
  font-size: 11px;
  color: var(--id-ink-soft);
}

/* BADGES */
body.id-child-active .id-tool-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 26px;
}
body.id-child-active .id-tool-card__badges--empty {
  /* placeholder pour aligner les boutons sur les cards sans badges */
}
body.id-child-active .id-tool-badge {
  font-family: var(--id-font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
}
body.id-child-active .id-tool-badge--solid {
  background: var(--id-ink);
  color: #fff;
}
body.id-child-active .id-tool-badge--soft {
  background: #F0F0F8;
  color: var(--id-ink);
}
body.id-child-active .id-tool-badge--mint {
  background: #E1F7EC;
  color: #138256;
}
body.id-child-active .id-tool-badge--promo {
  background: #FFE9D5;
  color: #B8531C;
}

/* ACTIONS */
body.id-child-active .id-tool-card__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 4px;
}
body.id-child-active .id-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--id-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--id-dur), transform var(--id-dur);
  cursor: pointer;
  border: none;
}
body.id-child-active .id-tool-btn--primary {
  background: #4A5BF0;
  color: #fff;
}
body.id-child-active .id-tool-btn--primary:hover {
  background: var(--id-blue-deep);
  transform: translateY(-1px);
}
body.id-child-active .id-tool-btn--ghost {
  background: transparent;
  color: var(--id-ink);
  border: 1px solid var(--id-rule);
  padding: 11px 22px;
}
body.id-child-active .id-tool-btn--ghost:hover {
  background: rgba(15, 23, 41, 0.04);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  body.id-child-active .id-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  body.id-child-active .id-tools-page { padding: 0 24px 64px; }
  body.id-child-active .id-tools-toolbar { flex-direction: column; align-items: stretch; }
  body.id-child-active .id-tools-toolbar__right { justify-content: space-between; }
}
@media (max-width: 600px) {
  body.id-child-active .id-tools-grid { grid-template-columns: 1fr; }
  body.id-child-active .id-tool-card__head { grid-template-columns: auto 1fr; }
  body.id-child-active .id-tool-card__score { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* === FIX page outils v2 : hover boutons + logos images === */

/* Logo en image (couvre proprement le carré) */
body.id-child-active .id-tool-card__logo--img {
  background: #ffffff;
  border: 1px solid var(--id-rule);
  padding: 6px;
  overflow: hidden;
}
body.id-child-active .id-tool-card__logo--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Bouton Tester → hover plus visible (couleur foncée + ombre + shift) */
body.id-child-active .id-tool-btn--primary {
  background: #4A5BF0 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(74, 91, 240, 0.18);
  transition: background var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease),
              transform var(--id-dur) var(--id-ease);
}
body.id-child-active .id-tool-btn--primary:hover,
body.id-child-active .id-tool-btn--primary:focus-visible {
  background: var(--id-blue-deep) !important; /* violet profond */
  box-shadow: 0 10px 24px rgba(91, 63, 217, 0.42);
  transform: translateY(-2px);
}
body.id-child-active .id-tool-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(91, 63, 217, 0.3);
}

/* Bouton Avis ghost : hover plus marqué */
body.id-child-active .id-tool-btn--ghost {
  transition: background var(--id-dur) var(--id-ease),
              border-color var(--id-dur) var(--id-ease),
              color var(--id-dur) var(--id-ease);
}
body.id-child-active .id-tool-btn--ghost:hover,
body.id-child-active .id-tool-btn--ghost:focus-visible {
  background: var(--id-ink) !important;
  border-color: var(--id-ink) !important;
  color: #fff !important;
}

/* === FIX v3 page outils : logos wordmark correctement contenus === */

/* Le conteneur logo en mode image : centrage flex + clipping safe */
body.id-child-active .id-tool-card__logo--img {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid var(--id-rule) !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* L'img elle-même : laisse le navigateur réduire en respectant le ratio.
   On force width:auto + height:auto + max-width/max-height pour battre OceanWP */
body.id-child-active .id-tool-card__logo--img img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}

/* ============================================================
   BLOG INDEX — À la une (featured) + carte compacte
   Ajout v2.3 — conforme br-page-outils-blog.jsx
   ============================================================ */
.id-blog-featured {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 24px;
  margin: 0 0 40px;
}
@media (max-width: 900px) { .id-blog-featured { grid-template-columns: 1fr; } }

.id-feat-main {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  overflow: hidden;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease);
}
.id-feat-main:hover { transform: translateY(-3px); box-shadow: var(--id-shadow-md); }
.id-feat-main__link { display: block; text-decoration: none; color: inherit; }
.id-feat-main__media {
  aspect-ratio: 16 / 9;
  background: var(--id-rule-soft) var(--id-gradient);
  background-size: cover;
  background-position: center;
}
.id-feat-main__body { padding: 28px 32px 30px; }
.id-feat-tag {
  font-family: var(--id-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--id-blue);
  font-weight: 700;
}
.id-feat-main__title {
  font-family: var(--id-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--id-ink);
  margin: 10px 0 12px;
}
.id-feat-main__excerpt {
  font-size: 15px;
  color: var(--id-ink-soft);
  line-height: 1.6;
  margin: 0 0 16px;
}
.id-feat-main__meta {
  font-family: var(--id-font-mono);
  font-size: 11px;
  color: var(--id-ink-mute);
}

.id-feat-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.id-feat-item {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  flex: 1;
  transition: transform var(--id-dur) var(--id-ease),
              box-shadow var(--id-dur) var(--id-ease);
}
.id-feat-item:hover { transform: translateY(-2px); box-shadow: var(--id-shadow-md); }
.id-feat-item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
}
.id-feat-item__cat {
  font-family: var(--id-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--id-blue);
  font-weight: 700;
}
.id-feat-item__title {
  font-family: var(--id-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--id-ink);
  margin: 7px 0 8px;
}
.id-feat-item__meta {
  font-family: var(--id-font-mono);
  font-size: 11px;
  color: var(--id-ink-mute);
}

/* Carte grille compacte — variante 3 colonnes, sans excerpt */
.id-blog-card--compact { display: block; text-decoration: none; color: inherit; }
.id-blog-card--compact .id-blog-card__body { padding: 20px; }
.id-blog-card--compact .id-blog-card__title { font-size: 18px; margin: 7px 0 10px; }

/* ============================================================
   Newsletter card — fix lisibilité + polish (2026-05-14)
   La règle globale body.id-child-active h1..h4 { color: var(--id-ink) }
   (spécificité 0,0,2,1) écrasait le titre blanc → titre navy sur fond
   navy = invisible. On force avec !important, scopé à la carte.
   ============================================================ */
.id-news-card .id-news-card__title  { color: #fff !important; }
.id-news-card .id-news-card__desc   { color: rgba(255,255,255,0.72) !important; }
.id-news-card .id-news-card__legal  { color: rgba(255,255,255,0.5) !important; }
.id-news-card p { color: rgba(255,255,255,0.72) !important; }

/* Polish : rythme vertical + champ/bouton plus nets */
.id-news-card__title { margin: 14px 0 10px; }
.id-news-card__form  { gap: 12px; }
.id-news-card__input { padding: 16px 18px; }
.id-news-card__submit { padding-top: 15px !important; padding-bottom: 15px !important; font-weight: 700 !important; }

/* ============================================================
   Articles — texte justifié avec césure FR (2026-05-14)
   text-align: justify seul = gros blancs entre les mots en
   français. hyphens: auto (html lang=fr-FR) coupe les mots
   longs → lignes pleines et régulières, sans effet « moche ».
   Le H1 reste en text-wrap: balance (justifier un titre = laid).
   ============================================================ */
body.id-child-active.single-post .entry-content > p,
body.id-child-active.single-post .entry-content p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.id-article-lead {
  text-align: justify;
  hyphens: auto;
}

/* ============================================================
   Article — 1er paragraphe à la même taille que les autres
   (2026-05-14). La règle .entry-content > p:first-of-type
   l'agrandissait en 20px façon « chapô » → doublon avec le
   vrai chapô .id-article-lead de l'en-tête. On uniformise à 17px.
   ============================================================ */
body.id-child-active.single-post .entry-content > p:first-of-type {
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
}

/* ============================================================
   Article — corps de texte 17px → 18px (2026-05-14)
   Confort de lecture long format. Chapô .id-article-lead reste
   à 19px, la hiérarchie est préservée.
   ============================================================ */
body.id-child-active.single-post .entry-content > p,
body.id-child-active.single-post .entry-content p,
body.id-child-active.single-post .entry-content > p:first-of-type,
body.id-child-active.single-post .entry-content ul li,
body.id-child-active.single-post .entry-content ol li {
  font-size: 18px;
}

/* ============================================================
   Page Newsletter (/newsletter/) — 2026-05-14
   ============================================================ */
.id-newsletter-page { padding-bottom: 48px; }
.id-newsletter-card {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  padding: 36px 40px;
  max-width: 620px;
  box-shadow: var(--id-shadow-md);
}
.id-newsletter-perks {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 620px;
}
.id-newsletter-perks li {
  font-family: var(--id-font-body);
  font-size: 15px;
  color: var(--id-ink-soft);
  padding-left: 26px;
  position: relative;
}
.id-newsletter-perks li::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--id-blue); font-weight: 800;
}
.id-newsletter-perks strong { color: var(--id-ink); }
@media (max-width: 600px) { .id-newsletter-card { padding: 28px 22px; } }

/* ============================================================
   Pages génériques — page.php (2026-05-14)
   Légal, contact, plan du site… Typo lisible, scopée .page pour
   battre les règles globales body.id-child-active p/h2.
   ============================================================ */
.id-page__content { max-width: 760px; }
body.id-child-active.page .id-page__content {
  font-family: var(--id-font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--id-ink);
}
body.id-child-active.page .id-page__content p { color: var(--id-ink); margin: 0 0 18px; }
body.id-child-active.page .id-page__content h2 {
  font-family: var(--id-font-display); font-size: 28px; font-weight: 800;
  margin: 40px 0 14px; color: var(--id-ink);
}
body.id-child-active.page .id-page__content h3 {
  font-family: var(--id-font-display); font-size: 21px; font-weight: 700;
  margin: 28px 0 10px; color: var(--id-ink);
}
body.id-child-active.page .id-page__content ul,
body.id-child-active.page .id-page__content ol { margin: 0 0 18px; padding-left: 24px; }
body.id-child-active.page .id-page__content li { margin-bottom: 8px; }
body.id-child-active.page .id-page__content a { color: var(--id-blue); text-decoration: underline; }
body.id-child-active.page .id-page__content a:hover { color: var(--id-blue-deep); }
body.id-child-active.page .id-page__content img { max-width: 100%; height: auto; border-radius: var(--id-r-sm); }
body.id-child-active.page .id-page__content table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
body.id-child-active.page .id-page__content th,
body.id-child-active.page .id-page__content td {
  border: 1px solid var(--id-rule); padding: 10px 12px; text-align: left;
}
body.id-child-active.page .id-page__content th { background: var(--id-rule-soft); }

/* ============================================================
   Page Contact — page-contact.php (2026-05-14)
   ============================================================ */
.id-contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 800px) { .id-contact-grid { grid-template-columns: 1fr; } }
.id-contact-card {
  background: #fff;
  border: 1px solid var(--id-rule);
  border-radius: var(--id-r-lg);
  padding: 32px 34px;
}
.id-contact-card--info { box-shadow: var(--id-shadow-md); }
body.id-child-active.page .id-contact-info__title {
  font-family: var(--id-font-display);
  font-size: 20px; font-weight: 800; margin: 0 0 18px; color: var(--id-ink);
}
.id-contact-info__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; }
.id-contact-info__list li { display: flex; flex-direction: column; gap: 3px; }
.id-contact-info__label {
  font-family: var(--id-font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--id-ink-mute); font-weight: 700;
}
body.id-child-active.page .id-contact-info__list a { color: var(--id-blue); text-decoration: none; font-weight: 600; }
body.id-child-active.page .id-contact-info__list a:hover { color: var(--id-blue-deep); }
body.id-child-active.page .id-contact-info__note {
  font-size: 13px; line-height: 1.6; color: var(--id-ink-soft); margin: 0;
  padding-top: 18px; border-top: 1px solid var(--id-rule);
}


/* ============================================================
   Blocs fond foncé — lisibilité texte (2026-05-14)
   Le global body.id-child-active p garde --id-ink-soft ; on
   surcharge p + bouton ghost dans les blocs sombres.
   ============================================================ */
/* Les blocs comparatif (art. 3343) sont injectés dans .entry-content :
   les règles typo d article (h2/p/a, spécificité 0,0,3,x) fuyaient dessus
   → titres navy invisibles sur fond foncé + boutons soulignés. !important. */
.id-article__content .id-btn { text-decoration: none !important; }
.id-article__content .id-btn--coral { color: #fff !important; }
.id-verdict h2 { color: #fff !important; }
.id-verdict h2 .accent,
.id-verdict h2 .id-coral-highlight { color: var(--id-blue) !important; }
.id-verdict p { color: rgba(255, 255, 255, 0.72) !important; }
body.id-child-active .id-verdict .id-btn--ghost { color: #fff !important; }
body.id-child-active .id-verdict .id-btn--ghost:hover { color: #fff !important; background: rgba(255,255,255,0.08); }

/* Composant cmp-hero (art. 3343) : titre écrasé par entry-content h2
   (32px au lieu de 76px). On ré-assert la taille hero. */
.id-cmp-hero h1, .id-cmp-hero h2 {
  font-size: clamp(40px, 6vw, 76px) !important;
  line-height: 0.98 !important;
  margin: 20px 0 16px !important;
}