/*
Theme Name: Curieux du Web
Theme URI: https://curieux-du-web.com
Author: Curieux du Web
Author URI: https://curieux-du-web.com
Description: Comparatifs et avis d'outils SaaS marketing pour TPE/PME. Chaque outil posé ouvert sur la table, note cran par cran, verdict avant la première ligne de texte.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: curieux-du-web
*/

/* ==========================================================================
   0. CUSTOM PROPERTIES — palette DIRECTION-ARTISTIQUE.md §3 (mode CLAIR UNIQUEMENT :
   consigne du chantier + GD-030 de la grille, ce site n'a délibérément aucune variante
   prefers-color-scheme:dark — ce n'est pas un oubli).
   ========================================================================== */
:root{
  --cdw-blanc:       #FBFBFD; /* fond principal */
  --cdw-blanc-pur:   #FFFFFF; /* cartes, fenêtres */
  --cdw-pervenche:   #EFF0FA; /* bandes claires alternées */
  --cdw-minuit:      #141733; /* encre, bandes sombres */
  --cdw-vert:        #7CE84A; /* accent unique électrique */
  --cdw-vert-encre:  #14530A; /* variante texte du vert sur fond clair (jamais le vert pur en texte clair) */
  --cdw-ardoise:     #5A5D7A; /* texte secondaire */
  --cdw-filet:       #D9DBEC; /* bordures, séparateurs */
  --cdw-rouge:       #E0483E; /* sémantique négative uniquement */

  --cdw-ombre:       0 8px 24px rgba(20,23,51,.08);
  --cdw-ombre-forte: 0 16px 40px rgba(20,23,51,.14);

  --cdw-rayon-carte:    14px;
  --cdw-rayon-bouton:   999px;
  --cdw-rayon-fenetre:  12px;

  --cdw-conteneur: 1240px;
  --cdw-lecture:   720px;
  --cdw-rail:      340px;
  --cdw-gouttiere: 24px;

  --font-titre: 'Parkinsans', system-ui, -apple-system, sans-serif;
  --font-corps: 'Inclusive Sans', system-ui, -apple-system, sans-serif;

  --dur: 200ms;
  --easing: ease;
}

@media (max-width: 640px){
  :root{ --cdw-gouttiere: 16px; }
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; min-width: 0; }
/* GARDE-FOU ANTI-DÉBORDEMENT (mesuré : 217px de trop à 1440, corps d'article à
   1111px sur un écran de 390). Cause n°1 d'un scrollWidth > largeur : un enfant de
   grid/flex garde par défaut min-width:auto et refuse de rétrécir sous sa largeur de
   contenu, même dans une piste 1fr. Le reset ci-dessus le neutralise PARTOUT (une
   classe précise comme .cdw-reglette-note{min-width:2.5ch} reste prioritaire, la
   spécificité d'une classe bat toujours l'universel) ; tout média et tout bloc de
   code reste dans sa colonne quelle que soit sa taille intrinsèque. */
img, svg, video, iframe, embed, object, table, pre, code{ max-width: 100%; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--cdw-blanc);
  color: var(--cdw-minuit);
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  /* ⛔ PAS de overflow-x:hidden ici : un ancêtre en overflow (x OU y, toute valeur
     sauf visible) désactive position:sticky pour TOUS ses descendants — c'est ce qui
     tuait la colonne latérale sticky des articles (point 16). L'absence de débordement
     est garantie autrement : reset min-width:0 universel + nav/tableaux en scroll
     interne + médias plafonnés à 100% (voir §0-1 plus haut). */
}
@media (max-width: 640px){ body{ font-size: 17px; } }

img{ max-width: 100%; height: auto; display: block; }
svg{ display: block; }
a{ color: var(--cdw-minuit); text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: 16px; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5,h6, .cdw-t2, .cdw-t3, .cdw-t4 { font-family: var(--font-titre); margin: 0 0 .5em; line-height: 1.15; }
p{ margin: 0 0 1.2em; }
:focus-visible{ outline: 3px solid var(--cdw-vert); outline-offset: 2px; border-radius: 4px; }

.cdw-tabular{ font-variant-numeric: tabular-nums; }

h1{ font-family: var(--font-titre); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2.375rem, 1.8rem + 2vw, 4rem); }
h2, .cdw-t2 { font-weight: 700; font-size: clamp(1.5625rem, 1.3rem + 1vw, 2rem); }
h3, .cdw-t3 { font-weight: 650; font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); }

/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
.cdw-conteneur{
  width: 100%;
  max-width: var(--cdw-conteneur);
  margin-inline: auto;
  padding-inline: var(--cdw-gouttiere);
}
.cdw-bande{ padding-block: clamp(48px, 6vw, 96px); }
.cdw-bande--blanc{ background: var(--cdw-blanc); }
.cdw-bande--blanc-pur{ background: var(--cdw-blanc-pur); }
.cdw-bande--pervenche{ background: var(--cdw-pervenche); }
.cdw-bande--minuit{ background: var(--cdw-minuit); color: var(--cdw-blanc); }
.cdw-bande--minuit a{ color: var(--cdw-blanc); }
/* Retour Mathias 26/09 : l'aplat vert plein (« pas jolie comme ça ») est remplacé
   par un lavis pervenche/vert très léger — le vert pomme reste un ACCENT (numéros,
   boutons, résultat) plutôt qu'un mur de couleur criarde. Padding resserré : la
   version pleine largeur laissait de grands vides en haut et en bas du bloc. */
.cdw-bande--vert{
  background: radial-gradient(1100px 480px at 12% 0%, rgba(124,232,74,.22), transparent 62%), var(--cdw-pervenche);
  color: var(--cdw-minuit);
  padding-block: clamp(32px,4.5vw,64px);
}

.cdw-titre-section{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom: 32px; flex-wrap: wrap; }
.cdw-titre-section h2, .cdw-titre-section .cdw-t2 { margin:0; }
.cdw-titre-section p{ margin:0; color: var(--cdw-ardoise); font-style: italic; }
.cdw-bande--minuit .cdw-titre-section p{ color: #B9BCD8; }

.cdw-grille{ display: grid; gap: var(--cdw-gouttiere); }
.cdw-grille--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
/* Passe 9 (verdict 25/09, bloquant 4, généralisé à toute grille de 2) : nombre
   d'éléments impair → le dernier prend toute la largeur plutôt que de rester
   seul (ex. « Qui écrit » avec un nombre impair d'auteurs). */
.cdw-grille--2 > :nth-child(odd):last-child{ grid-column: 1 / -1; }
.cdw-grille--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
/* Passe 7, point 6 : jamais de carte orpheline en fin de grille de 3 (rubrique
   3+3+1, page auteur 3+3+3+1…) — calculé en CSS pur (:nth-last-child), sans
   toucher aux requêtes. Reste ≡1 mod 3 → la dernière carte prend toute la ligne. */
.cdw-grille--3 > :nth-child(3n+1):nth-last-child(1){ grid-column: 1 / -1; }
/* Passe 8, point 1 : une carte pleine largeur gardait sa photo en 16/10 → ~745px
   de haut. Format HORIZONTAL : image 40% à gauche (260px de haut max, cover),
   texte à droite — jamais au-delà de 901px pour ne pas perturber le mobile/tablette
   (déjà repassé en 1-2 colonnes par les media queries ci-dessous). */
@media (min-width: 901px){
  .cdw-grille--3 > :nth-child(3n+1):nth-last-child(1){ display: flex; flex-direction: row; align-items: stretch; }
  .cdw-grille--3 > :nth-child(3n+1):nth-last-child(1) > a{ flex: 0 0 40%; max-width: 40%; }
  .cdw-grille--3 > :nth-child(3n+1):nth-last-child(1) .cdw-carte-media{ height: 100%; max-height: 260px; aspect-ratio: auto; }
  .cdw-grille--3 > :nth-child(3n+1):nth-last-child(1) .cdw-carte-corps{ flex: 1; justify-content: center; }
  /* Passe 9 (verdict 25/09, bloquant 4) : reste ≡2 mod 3 (5, 8, 11 cartes…).
     L'ancienne règle repassait TOUTE la grille en 2 colonnes, ce qui laissait
     encore une carte seule dès que le total était impair (5, 11…). Base à 6
     pistes (chaque carte normale span 2 = 33%) ; seules les deux dernières
     cartes, quand elles restent seules sur la ligne finale, s'étalent à 3
     pistes chacune (50/50) — les lignes complètes de 3 gardent leur largeur. */
  .cdw-grille--3{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  .cdw-grille--3 > *{ grid-column: span 2; }
  .cdw-grille--3 > :nth-child(3n+1):nth-last-child(1){ grid-column: 1 / -1; }
  .cdw-grille--3:has(> :nth-child(3n+2):nth-last-child(1)) > :nth-last-child(1),
  .cdw-grille--3:has(> :nth-child(3n+2):nth-last-child(1)) > :nth-last-child(2){ grid-column: span 3; }
}
.cdw-grille--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){
  .cdw-grille--3, .cdw-grille--4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cdw-grille--2, .cdw-grille--3, .cdw-grille--4{ grid-template-columns: minmax(0,1fr); }
  /* Point 2 (passe 4) : les cartes-portes restent en 2 colonnes même à 390 —
     en 1 colonne, chaque carte gardait sa hauteur desktop (220px) et la
     section devenait démesurément haute. */
  .cdw-grille--4:has(.cdw-carte-porte){ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
}

/* ==========================================================================
   3. BOUTONS & LIENS
   ========================================================================== */
.cdw-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cdw-vert); color: var(--cdw-minuit);
  font-family: var(--font-titre); font-weight: 700; font-size: 1rem;
  padding: 14px 28px; border-radius: var(--cdw-rayon-bouton); border: none;
  min-height: 48px;
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
  cursor: pointer;
}
.cdw-btn:hover{ transform: translateY(-2px); box-shadow: var(--cdw-ombre); color: var(--cdw-minuit); }
.cdw-btn--fantome{
  background: transparent; color: var(--cdw-minuit); border: 2px solid var(--cdw-minuit);
}
.cdw-bande--minuit .cdw-btn--fantome{ color: var(--cdw-blanc); border-color: var(--cdw-blanc); }
.cdw-btn--petit{ padding: 10px 20px; min-height: 40px; font-size: .9375rem; }
.cdw-btn--large{ width: 100%; }
.cdw-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }

.cdw-corps a, .cdw-article-corps a{
  color: var(--cdw-minuit);
  text-decoration: none;
  background-image: linear-gradient(var(--cdw-vert), var(--cdw-vert));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  padding-bottom: 2px;
  transition: background-size var(--dur) var(--easing), background-color var(--dur) var(--easing);
}
.cdw-corps a:hover, .cdw-article-corps a:hover{
  background-size: 100% 100%;
  background-color: rgba(124,232,74,.35);
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.cdw-topbar{
  background: var(--cdw-minuit); color: var(--cdw-blanc);
  font-family: var(--font-corps); font-weight: 600; font-size: .8125rem;
  padding-block: 8px;
}
.cdw-topbar strong{ color: var(--cdw-vert); font-family: var(--font-titre); }

.cdw-header{
  background: var(--cdw-blanc-pur);
  border-bottom: 1px solid var(--cdw-filet);
  position: sticky; top: 0; z-index: 40;
}
.cdw-header-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 76px;
}
.cdw-logo{ display: flex; align-items: center; flex-shrink: 0; }
.cdw-header-inner > .cdw-logo, .cdw-header-inner > .cdw-header-actions{ flex-shrink: 0; }
.cdw-logo svg{ height: 36px; width: auto; }

/* Passe 3 : libellés raccourcis par Mathias pour tenir à 1280/1440 SANS scroll ni
   chevauchement. Le bug précédent venait du reset universel min-width:0 (§0) qui
   laissait le <li> (item flex réel — pas le <a>) se comprimer sous la largeur de
   son texte nowrap, provoquant un chevauchement visuel : flex-shrink:0 sur le <li>
   l'empêche structurellement, quelle que soit la valeur de min-width. */
.cdw-nav{ display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow: visible; }
.cdw-nav ul{ display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.cdw-nav ul ul{ display: none; } /* structure plate imposée (HM-024) : jamais de sous-menu */
.cdw-nav ul > li{ flex-shrink: 0; white-space: nowrap; }
.cdw-nav a{
  display: inline-block; padding: 8px 10px; border-radius: 999px;
  font-family: var(--font-titre); font-weight: 600; font-size: .8125rem;
  color: var(--cdw-minuit); white-space: nowrap; flex-shrink: 0;
  transition: background var(--dur) var(--easing);
}
.cdw-nav a:hover{ background: var(--cdw-pervenche); }
@media (min-width: 1280px){ .cdw-nav a{ padding: 9px 11px; font-size: .8125rem; } }
@media (min-width: 1440px){ .cdw-nav a{ padding: 9px 11px; font-size: .84rem; } } /* ne jamais dépasser la largeur mesurée à 1280 */
.cdw-nav{ margin-right: 16px; }

.cdw-header-actions{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cdw-logo{ min-width: max-content; }
.cdw-burger{
  display: none; background: none; border: none; width: 44px; height: 44px;
  align-items: center; justify-content: center; border-radius: 10px;
}
.cdw-burger:hover{ background: var(--cdw-pervenche); }
.cdw-burger svg{ width: 24px; height: 24px; }

/* Logo + 7 items + bouton tiennent à 1280/1440 avec les libellés raccourcis ; en
   dessous (≤1180px) le nav laisse la place au menu burger plutôt que de risquer
   un chevauchement (point A, passe 3). */
@media (max-width: 1180px){
  .cdw-nav{ display: none; }
  .cdw-burger{ display: inline-flex; }
  .cdw-header-actions .cdw-btn span{ display:none; }
  .cdw-header-actions .cdw-btn{ width: 44px; height: 44px; min-height: 44px; padding: 0; }
  .cdw-header-actions .cdw-btn svg{ width: 20px; height: 20px; }
}

/* Menu mobile plein écran */
.cdw-nav-mobile{
  position: fixed; inset: 0; background: var(--cdw-blanc-pur); z-index: 60;
  display: none; flex-direction: column; padding: 24px var(--cdw-gouttiere);
  overflow-y: auto;
}
.cdw-nav-mobile.est-ouvert{ display: flex; }
.cdw-nav-mobile-entete{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 24px; }
.cdw-nav-mobile ul{ display: flex; flex-direction: column; gap: 4px; }
.cdw-nav-mobile a{
  display: block; padding: 16px 4px; font-family: var(--font-titre); font-weight: 650;
  font-size: 1.25rem; border-bottom: 1px solid var(--cdw-filet); color: var(--cdw-minuit);
}
.cdw-nav-mobile-fermer{ background: none; border: none; width: 44px; height:44px; }
.cdw-nav-mobile-fermer svg{ width: 28px; height: 28px; }

/* Barre basse mobile (P-254) */
.cdw-barre-basse{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--cdw-blanc-pur); border-top: 1px solid var(--cdw-filet);
  padding: 8px var(--cdw-gouttiere) max(8px, env(safe-area-inset-bottom));
  gap: 8px;
}
@media (max-width: 640px){
  .cdw-barre-basse{ display: flex; }
  body{ padding-bottom: 68px; }
}
.cdw-barre-basse a{
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .6875rem; font-weight: 600; color: var(--cdw-ardoise); padding: 6px 2px;
}
.cdw-barre-basse a svg{ width: 22px; height: 22px; }
.cdw-barre-basse a.cdw-barre-basse-accent{ color: var(--cdw-minuit); }
.cdw-barre-basse a.cdw-barre-basse-accent svg{ background: var(--cdw-vert); border-radius: 999px; padding: 3px; width:24px;height:24px; }

/* ==========================================================================
   5. FENÊTRE DATÉE — procédé signature n°1
   ========================================================================== */
.cdw-fenetre{
  background: var(--cdw-blanc-pur); border-radius: var(--cdw-rayon-fenetre);
  overflow: hidden; box-shadow: var(--cdw-ombre); border: 1px solid var(--cdw-filet);
}
.cdw-fenetre-barre{
  display: flex; align-items: center; gap: 8px; background: var(--cdw-pervenche);
  padding: 8px 12px;
}
.cdw-fenetre-points{ display: flex; gap: 5px; flex-shrink: 0; }
.cdw-fenetre-points span{ width: 9px; height: 9px; border-radius: 50%; display:block; }
.cdw-fenetre-points span:nth-child(1){ background: var(--cdw-minuit); }
.cdw-fenetre-points span:nth-child(2){ background: var(--cdw-ardoise); }
.cdw-fenetre-points span:nth-child(3){ background: var(--cdw-filet); }
.cdw-fenetre-url{
  flex: 1; background: var(--cdw-blanc-pur); border-radius: 999px; padding: 4px 12px;
  font-size: .75rem; color: var(--cdw-ardoise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdw-fenetre-url b{ color: var(--cdw-minuit); }
.cdw-fenetre-corps{ aspect-ratio: 16/10; overflow: hidden; background: var(--cdw-pervenche); }
.cdw-fenetre-corps img{ width: 100%; height: 100%; object-fit: cover; }
.cdw-fenetre-corps.cdw-sans-image{ display:flex; align-items:center; justify-content:center; }
.cdw-fenetre-corps.cdw-sans-image span{ font-family: var(--font-titre); font-weight: 700; color: var(--cdw-ardoise); }
/* Monogramme (passe 7, point 3) : jamais de case vide sur une carte-outil sans
   image ni page d'avis publiée — initiales sur aplat de la palette du site. */
.cdw-monogramme{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--cdw-minuit); }
.cdw-monogramme span{ font-family: var(--font-titre); font-weight: 800; font-size: 1.75rem; color: var(--cdw-vert); letter-spacing: .02em; }
/* Petit monogramme (mini-carte rail, « À lire aussi » sans image — passe 8 pt 6) */
.cdw-monogramme--mini{ background: var(--cdw-pervenche); }
.cdw-monogramme--mini span{ color: var(--cdw-minuit); font-size: 1rem; }

/* Logo éditeur dans une carte-outil (passe 8, point 5) : fond blanc, contain,
   jamais étiré ni recadré — différent d'une capture d'écran d'outil. */
.cdw-fenetre-corps.cdw-a-logo{ background: var(--cdw-blanc-pur); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cdw-fenetre-corps.cdw-a-logo img{ width: auto; height: auto; max-height: 96px; max-width: 100%; object-fit: contain; }

/* <details class="cdw-detail-outil"> — approfondissements collés dans le contenu
   des tops (passe 8, point 4) : même famille visuelle que la FAQ. */
.cdw-detail-outil{ background: var(--cdw-pervenche); border: 1px solid var(--cdw-filet); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.cdw-detail-outil summary{ font-family: var(--font-titre); font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cdw-detail-outil summary::-webkit-details-marker{ display: none; }
.cdw-detail-outil summary::after{ content: "+"; font-size: 1.5rem; color: var(--cdw-ardoise); flex-shrink: 0; transition: transform var(--dur); }
.cdw-detail-outil[open] summary::after{ transform: rotate(45deg); }
.cdw-detail-outil p{ margin: 12px 0 0; color: var(--cdw-minuit); }

/* ==========================================================================
   6. RÉGLETTE À 10 CRANS — procédé signature n°2
   ========================================================================== */
.cdw-reglette{ display: flex; align-items: center; gap: 12px; }
.cdw-reglette-note{
  font-family: var(--font-titre); font-weight: 800; font-size: 1.5rem; flex-shrink: 0;
  min-width: 2.5ch;
}
.cdw-reglette-crans{ display: flex; gap: 3px; flex: 1; }
.cdw-reglette-cran{ height: 10px; border-radius: 3px; flex: 1; background: var(--cdw-filet); }
.cdw-reglette-cran.est-rempli{ background: var(--cdw-vert); }
.cdw-reglette--geante .cdw-reglette-note{ font-size: clamp(3.5rem, 3rem + 3vw, 6rem); line-height:1; }
.cdw-reglette--geante .cdw-reglette-crans{ display: none; }
.cdw-reglette--fine .cdw-reglette-note{ font-size: 1rem; min-width: 2ch; }
.cdw-reglette--fine .cdw-reglette-cran{ height: 6px; }
.cdw-reglette-critere{ display:flex; align-items:center; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--cdw-filet); }
.cdw-reglette-critere:last-child{ border-bottom: none; }
.cdw-reglette-critere-libelle{ flex-shrink: 0; width: 40%; font-weight: 600; }
.cdw-reglette-critere .cdw-reglette{ flex: 1; }

/* ==========================================================================
   7. BANDEAU VERDICT — procédé signature n°3
   ========================================================================== */
.cdw-verdict{
  background: var(--cdw-minuit); color: var(--cdw-blanc); border-radius: var(--cdw-rayon-carte);
  padding: 28px; margin-block: 32px;
}
.cdw-verdict-etiquette{ font-family: var(--font-titre); font-weight: 700; text-transform: uppercase; letter-spacing:.08em; font-size:.75rem; color: var(--cdw-vert); margin-bottom: 8px; display:block; }
.cdw-verdict-phrase{ font-family: var(--font-titre); font-weight: 650; font-size: clamp(1.25rem,1.1rem + .6vw,1.625rem); margin-bottom: 20px; }
.cdw-verdict-grille{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 640px){ .cdw-verdict-grille{ grid-template-columns: 1fr; } }
/* Passe 9 (verdict 25/09, bloquant 1) : quand une seule des deux demi-cartes est
   servie (l'autre meta est vide), elle prend toute la largeur au lieu de laisser
   un trou — le bloc entier ne s'affiche déjà pas si les DEUX sont vides
   (cdw_bandeau_verdict ne l'émet pas). */
.cdw-verdict-demicarte:only-child{ grid-column: 1 / -1; }
.cdw-verdict-demicarte{ background: rgba(255,255,255,.06); border-radius: 10px; padding: 16px; }
.cdw-verdict-demicarte strong{ display:block; font-family: var(--font-titre); font-size:.8125rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.cdw-verdict-demicarte.pour strong{ color: var(--cdw-vert); }
.cdw-verdict-demicarte.contre strong{ color: #F1948B; }
.cdw-verdict-bas{ display:flex; align-items:center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cdw-verdict-prix{ font-family: var(--font-titre); font-weight: 800; font-size: 1.5rem; }
.cdw-verdict-prix small{ font-family: var(--font-corps); font-weight: 400; font-size: .875rem; color: #B9BCD8; }

/* ==========================================================================
   8. BARRE DE BASCULE (versus) — procédé signature n°4
   ========================================================================== */
.cdw-vs-identites{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-block: 24px; }
@media (max-width: 640px){ .cdw-vs-identites{ grid-template-columns: 1fr; } }
.cdw-vs-carte{ background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte); padding: 20px; text-align: center; }
.cdw-vs-carte img{ height: 40px; width: auto; margin: 0 auto 12px; }
.cdw-vs-disque{
  width: 56px; height: 56px; border-radius: 50%; background: var(--cdw-vert);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre); font-weight: 800; color: var(--cdw-minuit); flex-shrink: 0;
  margin-inline: auto;
}
.cdw-vs-ligne{ margin-block: 4px; }
.cdw-vs-etiquette{ text-align: center; font-family: var(--font-titre); font-weight: 650; font-size: .9375rem; margin-bottom: 6px; }
.cdw-vs-barre{ display: flex; height: 32px; border-radius: 8px; overflow: hidden; background: var(--cdw-filet); }
.cdw-vs-barre-gagnant{ background: var(--cdw-vert); }
.cdw-vs-barre-perdant{ background: var(--cdw-pervenche); }
.cdw-vs-verdict-final{ display:flex; align-items:center; justify-content:center; gap: 32px; flex-wrap: wrap; text-align:center; padding: 32px 0; }
@media (max-width: 640px){ .cdw-vs-verdict-final{ gap: 16px; } }

/* ==========================================================================
   9. ÉCHELLE DES PRIX — procédé signature n°5
   ========================================================================== */
.cdw-marches{ display: flex; align-items: stretch; gap: 16px; margin-block: 32px; } /* 26/09 : stretch, sinon des cartes de hauteurs différentes font un escalier aléatoire */
@media (max-width: 780px){ .cdw-marches{ flex-direction: column-reverse; align-items: stretch; } }
.cdw-marche{
  flex: 1; background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet);
  border-radius: var(--cdw-rayon-carte); padding: 24px 18px; text-align: center; position: relative;
}
.cdw-marche.cdw-marche--conseillee{ background: var(--cdw-minuit); color: var(--cdw-blanc); transform: translateY(-16px); box-shadow: var(--cdw-ombre-forte); }
@media (max-width: 780px){ .cdw-marche.cdw-marche--conseillee{ transform: none; order: -1; } }
.cdw-marche-badge{
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--cdw-vert); color: var(--cdw-minuit); font-family: var(--font-titre);
  font-weight: 700; font-size: .75rem; padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.cdw-marche-nom{ font-family: var(--font-titre); font-weight: 650; margin-bottom: 8px; }
.cdw-marche-prix{ font-family: var(--font-titre); font-weight: 800; font-size: clamp(1.75rem,1.5rem+1vw,2.5rem); margin-bottom: 4px; }
.cdw-marche-prix small{ display: block; font-family: var(--font-corps); font-size: .875rem; font-weight:400; } /* 26/09 : unité sous le prix, sinon « ≈ 10 » / « $ » se coupaient */
.cdw-marche-pour{ font-size: .9375rem; opacity: .85; }

/* ==========================================================================
   10. CARTE DU MARCHÉ (quadrant) — procédé signature n°6
   ========================================================================== */
.cdw-quadrant{ position: relative; background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte); padding: 32px; margin-block: 32px; }
.cdw-quadrant svg{ width: 100%; height: auto; }
.cdw-quadrant-axe{ font-family: var(--font-titre); font-size: .75rem; font-weight: 700; fill: var(--cdw-ardoise); }
.cdw-quadrant-pastille{ cursor: pointer; }
.cdw-quadrant-pastille circle{ fill: var(--cdw-blanc-pur); stroke: var(--cdw-minuit); stroke-width: 2; }
.cdw-quadrant-pastille text{ font-family: var(--font-titre); font-size: 11px; font-weight: 700; fill: var(--cdw-minuit); }
.cdw-quadrant-pastille:hover circle{ stroke: var(--cdw-vert); }

/* ==========================================================================
   11. LE TROUVEUR — procédé signature n°7
   ========================================================================== */
/* Retour 26/09 : carte blanche sur le lavis pervenche/vert de la bande (plus
   d'aplat vert sur aplat vert) — le vert redevient un accent (badges, boutons). */
.cdw-trouveur{
  background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet);
  border-radius: var(--cdw-rayon-carte); box-shadow: var(--cdw-ombre);
  padding: clamp(24px,3.5vw,40px);
}
.cdw-trouveur-entete{ margin-bottom: 20px; }
.cdw-trouveur-titre{ margin-bottom: 0; }
.cdw-trouveur-soustitre{ color: var(--cdw-ardoise); font-style: italic; margin: 4px 0 0; }
.cdw-trouveur-questions{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
@media (max-width: 780px){ .cdw-trouveur-questions{ grid-template-columns: 1fr; } }
/* Colonne étroite (rail d'article, ~300px) : toujours empilé, quel que soit le
   viewport — une media query sur la largeur d'ÉCRAN ne voit pas la largeur du
   conteneur. */
.cdw-trouveur--compact{ padding: 18px; }
.cdw-trouveur--compact .cdw-trouveur-entete{ margin-bottom: 14px; }
.cdw-trouveur--compact .cdw-trouveur-questions{ grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
.cdw-trouveur--compact .cdw-trouveur-q{ padding: 12px; }
.cdw-trouveur--compact .cdw-trouveur-q-num{ width: 20px; height: 20px; font-size: .6875rem; margin-bottom: 6px; }
.cdw-trouveur--compact .cdw-trouveur-titre{ font-size: 1.0625rem; margin-bottom: 0; }
/* Étape numérotée (retour 26/09 : « une vraie composition de quiz, étapes 1-2-3 »).
   Chip pervenche (pas blanc sur blanc) pour se détacher de la carte et de la bande. */
.cdw-trouveur-q{ background: var(--cdw-pervenche); border-radius: 12px; padding: 16px 18px; }
.cdw-trouveur-q-num{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--cdw-vert);
  color: var(--cdw-minuit); font-family: var(--font-titre); font-weight: 800;
  font-size: .8125rem; margin-bottom: 10px;
}
.cdw-trouveur-q p{ font-family: var(--font-titre); font-weight: 650; margin-bottom: 12px; }
.cdw-trouveur-reponses{ display: flex; gap: 8px; }
.cdw-trouveur-reponses button{
  flex: 1; background: var(--cdw-blanc-pur); border: 2px solid var(--cdw-minuit); border-radius: 999px;
  padding: 10px; font-family: var(--font-titre); font-weight: 700; min-height: 44px;
  transition: background var(--dur), color var(--dur);
}
.cdw-trouveur-reponses button.est-choisi{ background: var(--cdw-minuit); color: var(--cdw-blanc); }
/* Zone de résultat mise en valeur (retour 26/09) : même famille visuelle que le
   bandeau verdict (procédé n°3) — carte minuit, étiquette vert pomme. */
.cdw-trouveur-resultat{ background: var(--cdw-minuit); color: var(--cdw-blanc); border-radius: 12px; padding: 22px 24px; display: none; }
.cdw-trouveur-resultat.est-visible{ display: block; }
.cdw-trouveur-resultat-etiquette{
  display: block; font-family: var(--font-titre); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .75rem; color: var(--cdw-vert); margin-bottom: 8px;
}
.cdw-trouveur-resultat p{ margin: 0; font-family: var(--font-titre); font-weight: 650; font-size: 1.0625rem; }
.cdw-trouveur-resultat-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.cdw-trouveur-resultat .cdw-btn--fantome{ color: var(--cdw-blanc); border-color: var(--cdw-blanc); }

/* ==========================================================================
   12. CARTES GÉNÉRIQUES
   ========================================================================== */
.cdw-carte{
  background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--cdw-ombre);
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
  height: 100%;
}
.cdw-carte:hover{ transform: translateY(-4px); box-shadow: var(--cdw-ombre-forte); }
.cdw-carte-media{ aspect-ratio: 16/10; overflow: hidden; position: relative; background: var(--cdw-pervenche); }
.cdw-carte-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s var(--easing); }
.cdw-carte:hover .cdw-carte-media img{ transform: scale(1.04); }
.cdw-carte-media.cdw-sans-image{ display:flex; align-items:center; justify-content:center; }
.cdw-carte-media.cdw-sans-image span{ font-family: var(--font-titre); font-weight: 800; font-size: 1.5rem; color: var(--cdw-ardoise); text-align:center; padding: 16px; }
.cdw-carte-pastille{
  position: absolute; top: 12px; left: 12px; background: var(--cdw-minuit); color: var(--cdw-blanc);
  font-family: var(--font-titre); font-weight: 700; font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.cdw-carte-corps{ padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cdw-carte-meta{ font-size: .8125rem; color: var(--cdw-ardoise); display:flex; gap: 8px; align-items:center; }
.cdw-carte-corps h3, .cdw-carte-corps .cdw-t3 { margin: 0; }
.cdw-carte-corps h3 a, .cdw-carte-corps .cdw-t3 a { background: none; }
.cdw-carte-extrait{ color: var(--cdw-ardoise); font-size: .9375rem; margin: 0; flex: 1; }
.cdw-carte-porte{ position: relative; border-radius: var(--cdw-rayon-carte); overflow: hidden; min-height: 220px; display: flex; align-items: flex-end; }
@media (max-width: 640px){ .cdw-carte-porte{ min-height: 140px; } .cdw-carte-porte-texte{ padding: 12px; } .cdw-carte-porte-texte h3, .cdw-carte-porte-texte .cdw-t3 { font-size: 1rem; } }
.cdw-carte-porte img{ position: absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index: 0; }
.cdw-carte-porte::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(20,23,51,.85), rgba(20,23,51,.1) 60%); z-index: 1; }
/* Point 5 (passe 5) : le contrôle de contraste ne voit qu'un background-color
   déclaré, jamais un dégradé porté par un ::after voisin — le bandeau de texte
   porte donc lui-même un fond sombre RÉEL (pas seulement l'illusion visuelle du
   dégradé), lisible même si l'image ne charge pas. */
.cdw-carte-porte-texte{ position: relative; z-index: 2; padding: 20px; color: var(--cdw-blanc); background: rgba(20,23,51,.72); }
.cdw-carte-porte-texte span{ font-size: .8125rem; color: #C7E9C0; }
.cdw-carte-porte-texte h3, .cdw-carte-porte-texte .cdw-t3 { color: var(--cdw-blanc); margin: 4px 0 0; }

/* Cartes pictogramme (accueil, « par type d'entreprise », passe 7 point 5) —
   jamais de photo hors sujet : icône SVG sur aplat pervenche. */
.cdw-carte-picto{ align-items: center; text-align: center; padding: 32px 16px; gap: 14px; text-decoration: none; }
.cdw-carte-picto-icone{ width: 56px; height: 56px; border-radius: 50%; background: var(--cdw-pervenche); display: flex; align-items: center; justify-content: center; }
.cdw-carte-picto-icone svg{ width: 28px; height: 28px; color: var(--cdw-minuit); }
.cdw-carte-picto:hover .cdw-carte-picto-icone{ background: var(--cdw-vert); }
.cdw-carte-picto-titre h3, .cdw-carte-picto-titre .cdw-t3 { margin: 0; font-size: 1rem; }

/* Podium (page top) */
.cdw-podium{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--cdw-gouttiere); align-items: end; margin-bottom: 32px; }
@media (max-width: 780px){ .cdw-podium{ grid-template-columns: 1fr; } }
.cdw-podium .cdw-carte.cdw-rang-1{ order: 2; transform: scale(1.04); box-shadow: var(--cdw-ombre-forte); }
@media (max-width: 780px){ .cdw-podium .cdw-carte.cdw-rang-1{ transform:none; order: -1; } }
.cdw-podium .cdw-carte.cdw-rang-2{ order: 1; }
.cdw-podium .cdw-carte.cdw-rang-3{ order: 3; }
.cdw-rang-numero{ font-family: var(--font-titre); font-weight: 800; font-size: 2rem; color: var(--cdw-filet); }

/* Classement numéroté */
.cdw-classement-item{ display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: stretch; margin-bottom: 20px; }
@media (max-width: 640px){ .cdw-classement-item{ grid-template-columns: 40px 1fr; } }
.cdw-classement-numero{ font-family: var(--font-titre); font-weight: 800; font-size: 2.5rem; color: var(--cdw-filet); line-height: 1; }
@media (max-width: 640px){ .cdw-classement-numero{ font-size: 1.5rem; } }

/* Cartes d'énumération (contenu article, cf. COMPOSANTS.md) — colonne de lecture
   à 720px : JAMAIS plus de 2 colonnes (verdict 25/09, bloquant : 4 colonnes dans
   720px = un mot par ligne, texte qui sort de la carte). Robuste à toute longueur
   de texte : la carte ne fixe aucune largeur, seul le nombre de pistes compte. */
.cdw-liste-cartes{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-block: 24px; }
.cdw-liste-cartes:has(> :nth-child(1):last-child){ grid-template-columns: minmax(0,1fr); }
/* Passe 9 (verdict 25/09, bloquant 4) : nombre de cartes impair → la dernière
   prend toute la largeur au lieu de rester seule dans sa colonne (hubspot-avis,
   crm-gratuit « trois repères », tableau rapide 7 cartes). Pas de variante
   horizontale-avec-image ici : .cdw-liste-carte n'affiche jamais d'image
   (ligne ci-dessus) — la variante horizontale vit dans .cdw-grille--3. */
.cdw-liste-cartes > :nth-child(odd):last-child{ grid-column: 1 / -1; }
@media (max-width: 640px){ .cdw-liste-cartes{ grid-template-columns: 1fr !important; } }
.cdw-liste-carte{ background: var(--cdw-pervenche); border-radius: 12px; padding: 18px; display: grid; grid-template-columns: 32px minmax(0,1fr); column-gap: 12px; row-gap: 0; align-items: start; align-content: start; min-width: 0; }
/* row-gap à 0 : l'icône s'étend sur 12 pistes implicites, un row-gap non nul les
   transformait en ~66 px de vide sous chaque carte (cartes « Sources », 25/09). */
.cdw-liste-carte > p + p{ margin-top: 6px; }
/* Passe 10 : une carte peut porter plusieurs paragraphes (tableau rapide) — icône à
   gauche sur toute la hauteur, paragraphes EMPILÉS à droite (en flex, chaque <p>
   devenait une colonne étroite et le nom s'empilait lettre par lettre). */
.cdw-liste-carte > .cdw-liste-carte-icone{ grid-column: 1; grid-row: 1 / span 12; }
.cdw-liste-carte > :not(.cdw-liste-carte-icone){ grid-column: 2; }
.cdw-liste-carte-icone{ width: 32px; height: 32px; flex: 0 0 32px; background: var(--cdw-blanc-pur); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; }
.cdw-liste-carte-icone svg{ width: 18px; height: 18px; }
.cdw-liste-carte p{ margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Jamais d'image DANS une carte d'énumération (verdict : vignette qui réduit le
   texte à un mot par ligne) — filet CSS en plus du filtre PHP qui les retire. */
.cdw-liste-carte > img, .cdw-liste-carte figure, .cdw-liste-carte picture{ display: none; }

/* Variante « limite / à surveiller » (H2 « coince », « limite », « inconvénient »,
   « à surveiller », « risque ») : icône d'alerte rouge à la place de la coche verte,
   posée par cdw_marquer_attention() (functions.php), jamais un simple choix visuel
   sans rapport avec le sens (la coche verte sur un défaut trompait le lecteur). */
.cdw-liste-cartes--attention .cdw-liste-carte{ background: #FBEAE8; }
.cdw-liste-cartes--attention .cdw-liste-carte-icone{ background: var(--cdw-rouge); }
.cdw-liste-cartes--attention .cdw-liste-carte-icone svg{ display: none; }
.cdw-liste-cartes--attention .cdw-liste-carte-icone::after{
  content: "!"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--cdw-blanc-pur); font-family: var(--font-titre); font-weight: 800; font-size: .9375rem;
}

/* Utilitaire anti-tiret cassé (U+2011 remplacé, cdw_normaliser_tirets()) */
.cdw-nowrap{ white-space: nowrap; }

/* Passe 7, point 2 (bloquant) : un « tableau comparatif » collé en HTML brut dans
   un article de gabarit VERSUS retombe en .cdw-liste-cartes à 3-4 colonnes dans
   les 720px de la colonne de lecture → un libellé par colonne de 80px se casse
   lettre par lettre. Sur ce gabarit précis, la carte reste TOUJOURS pleine
   largeur (jamais de colonne < 220px) ; si le contenu porte deux parties
   (« Critère » puis « A / B »), elles s'empilent proprement au lieu de se
   comprimer dans une piste de grille trop étroite. */
.cdw-article-content--versus .cdw-liste-cartes{ grid-template-columns: minmax(0,1fr) !important; }
.cdw-article-content--versus .cdw-liste-carte{ flex-wrap: wrap; }
.cdw-article-content--versus .cdw-liste-carte p{ min-width: 220px; }

/* ==========================================================================
   13. FORMULAIRES (habillage — la plomberie vient du socle)
   ========================================================================== */
.cdw-formulaire{ background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte); padding: clamp(20px,3vw,32px); box-shadow: var(--cdw-ombre); }
.cdw-formulaire-etapes{ display:flex; gap: 6px; margin-bottom: 20px; }
.cdw-formulaire-etapes span{ height: 4px; flex: 1; border-radius: 999px; background: var(--cdw-filet); }
.cdw-formulaire-etapes span.est-active,.cdw-formulaire-etapes span.est-faite{ background: var(--cdw-vert); }
.cdw-champ{ margin-bottom: 18px; }
.cdw-champ label{ display: block; font-family: var(--font-titre); font-weight: 650; font-size: .9375rem; margin-bottom: 6px; }
.cdw-champ input, .cdw-champ textarea, .cdw-champ select{
  width: 100%; border: 1.5px solid var(--cdw-filet); border-radius: 10px; padding: 13px 16px;
  background: var(--cdw-blanc); color: var(--cdw-minuit); min-height: 48px;
  transition: border-color var(--dur);
}
.cdw-champ textarea{ min-height: 110px; resize: vertical; }
.cdw-champ input:focus, .cdw-champ textarea:focus, .cdw-champ select:focus{ border-color: var(--cdw-vert); outline: none; }
.cdw-champ-erreur{ color: var(--cdw-rouge); font-size: .8125rem; margin-top: 4px; display: block; }
.cdw-champ-choix{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
@media (max-width: 480px){ .cdw-champ-choix{ grid-template-columns: 1fr; } }
.cdw-champ-choix label{
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--cdw-filet); border-radius: 10px;
  padding: 12px 14px; font-weight: 500; cursor: pointer; min-height: 44px;
}
.cdw-champ-choix input{ width: auto; min-height: auto; accent-color: var(--cdw-minuit); }
.cdw-rgpd{ font-size: .8125rem; color: var(--cdw-ardoise); margin-top: 16px; }
.cdw-rgpd a{ color: var(--cdw-minuit); }
.cdw-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cdw-message-etat{
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100;
  background: var(--cdw-blanc-pur); border-radius: var(--cdw-rayon-carte); padding: 24px 28px;
  box-shadow: var(--cdw-ombre-forte); max-width: 90vw; text-align: center;
}

/* ==========================================================================
   14. HERO ACCUEIL
   ========================================================================== */
/* Retour Mathias 26/09 : padding resserré pour que le hero (header compris)
   tienne dans un écran de 1440×900 — le header sticky pèse ~108px (topbar +
   barre logo/nav), il ne reste donc jamais plus de ~790px pour cette bande. */
.cdw-hero{ padding-block: clamp(32px,4.5vw,56px) clamp(24px,3.5vw,40px); }
/* Retour 26/09 : « équilibre mieux gauche/droite ». align-items:center (plus
   start) pour que les deux colonnes soient alignées sur le même axe vertical ;
   la colonne visuelle est désormais CONTENUE (2 fenêtres, pas 3) pour que sa
   hauteur réelle se rapproche de celle de la colonne texte au lieu de la
   dépasser et laisser un vide dessous. */
.cdw-hero-grille{ display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 980px){ .cdw-hero-grille{ grid-template-columns: 1fr; } }
/* Titre moins massif (retour 26/09) : l'échelle générique du h1 (jusqu'à 64px)
   faisait 4 lignes et écrasait la colonne de gauche. Toujours un h1 (règle Hn),
   juste redimensionné pour CE gabarit précis. */
.cdw-hero h1{ font-size: clamp(2rem, 1.55rem + 2vw, 2.75rem); max-width: 16ch; }
.cdw-hero-accroche{ font-family: var(--font-corps); font-style: italic; color: var(--cdw-ardoise); font-size: 1.25rem; margin-bottom: 16px; }
.cdw-hero-oui-non{ margin-top: 28px; }
.cdw-hero-oui-non p{ font-family: var(--font-titre); font-weight: 650; margin-bottom: 12px; }
/* Composition compacte à 2 fenêtres (retour 26/09, remplace l'escalier de 3) :
   une pile de 3 fenêtres 16:10 dépassait toujours la hauteur de la colonne de
   texte, même resserrée — 2 fenêtres, plus petites, avec un chevauchement léger
   gardent une hauteur totale proche de celle du texte, sans vide dessous. */
.cdw-hero-visuel{ display: flex; flex-direction: column; justify-content: center; }
.cdw-hero-visuel .cdw-fenetre{ width: min(320px, 82%); }
.cdw-hero-visuel .cdw-fenetre .cdw-fenetre-corps{ aspect-ratio: 16/10; height: auto; }
.cdw-hero-visuel .cdw-fenetre:nth-child(1){ align-self: flex-start; transform: rotate(-1.5deg); z-index: 2; }
.cdw-hero-visuel .cdw-fenetre:nth-child(2){ align-self: flex-end; transform: rotate(1.5deg); z-index: 1; margin-top: -64px; }

@media (max-width: 768px){
  .cdw-hero-visuel{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .cdw-hero-visuel .cdw-fenetre{ width: min(280px, 45%); }
  .cdw-hero-visuel .cdw-fenetre:nth-child(1),
  .cdw-hero-visuel .cdw-fenetre:nth-child(2){ align-self: center; margin-top: 0; transform: none; }
}
@media (max-width: 480px){
  .cdw-hero-visuel .cdw-fenetre{ width: 100%; max-width: 320px; }
}

.cdw-portes{ margin-top: 40px; }

.cdw-onglets{ display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.cdw-onglet{
  background: var(--cdw-blanc-pur); border: 1.5px solid var(--cdw-filet); border-radius: 999px;
  padding: 10px 18px; font-family: var(--font-titre); font-weight: 650; font-size: .9375rem;
  min-height: 44px;
}
.cdw-onglet.est-actif{ background: var(--cdw-minuit); color: var(--cdw-blanc); border-color: var(--cdw-minuit); }
.cdw-onglet-panneau{ display: none; }
.cdw-onglet-panneau.est-actif{ display: block; }

/* Point 3 (passe 4) : chiffre et libellé étaient deux <span> INLINE, donc collés
   sur la même ligne (« 7outils comparés »). Chaque tuile devient une colonne
   flex : chiffre en grand au-dessus, libellé en dessous, jamais l'inverse. */
.cdw-tuiles-chiffres{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--cdw-gouttiere); text-align:center; }
.cdw-tuiles-chiffres > div{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (max-width: 780px){ .cdw-tuiles-chiffres{ grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 32px; } }
.cdw-tuile-chiffre{ display: block; font-family: var(--font-titre); font-weight: 800; color: var(--cdw-vert); font-size: 6rem; line-height: 1; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 780px){ .cdw-tuile-chiffre{ font-size: 4rem; } }
/* Passe 7, point 1 (bloquant : défilement horizontal) : la date n'est PAS un
   compteur, elle garde une taille de « chiffre secondaire », jamais 96px. */
.cdw-tuile-chiffre--date{ font-size: 3rem; }
@media (max-width: 780px){ .cdw-tuile-chiffre--date{ font-size: 1.75rem; } }
.cdw-tuile-libelle{ display: block; color: #C4C7E4; font-size: .875rem; max-width: 18ch; }

/* Retour 26/09 : l'ancien format « 1 grande photo + 1 seul titre en fil » est
   remplacé par une rangée de cartes compactes de même hauteur (.cdw-grille--4
   générique). Seul ajout propre à cette bande : titre plafonné à 2 lignes pour
   que les 4 cartes restent visuellement alignées quelle que soit la longueur
   du titre de l'article. */
.cdw-carte--actu .cdw-carte-corps .cdw-t3{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ==========================================================================
   15. PIED DE PAGE
   ========================================================================== */
.cdw-footer{ background: var(--cdw-minuit); color: var(--cdw-blanc); padding-block: clamp(40px,6vw,64px) 24px; }
.cdw-footer a{ color: #C4C7E4; }
.cdw-footer a:hover{ color: var(--cdw-vert); }
/* Bande haute de réassurance (retour 26/09) : évite un footer qui démarre à
   froid sur des colonnes de liens, et donne au Trouveur un dernier rappel. */
.cdw-footer-cta{
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.cdw-footer-cta .cdw-t3{ color: var(--cdw-blanc); margin-bottom: 4px; }
.cdw-footer-cta p{ color: #A9ACD0; margin: 0; max-width: 46ch; }
.cdw-footer-grille{ display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
@media (max-width: 980px){ .cdw-footer-grille{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .cdw-footer-grille{ grid-template-columns: 1fr; } }
.cdw-footer-colonne h4, .cdw-footer-colonne .cdw-t4 { font-family: var(--font-titre); font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: #8B8FB5; margin-bottom: 14px; }
/* Retour 26/09 : liens du footer en gros caractères (taille du corps), serrés
   ici en .875rem et gap réduit — un footer se lit dense, pas comme un article. */
.cdw-footer-colonne ul{ display: flex; flex-direction: column; gap: 8px; }
.cdw-footer-colonne ul a{ font-size: .875rem; }
/* Colonne « Comparatifs & duels » : libellé COURT (4 mots max, cf. wp_trim_words
   côté PHP) + line-clamp à 1 ligne en filet de sécurité — un titre d'article
   complet ne doit plus jamais s'étirer sur 3 lignes dans cette colonne. */
.cdw-footer-liste-courte a{
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
}
.cdw-footer-logo svg{ height: 32px; width: auto; }
.cdw-footer-brand-desc{ color: #A9ACD0; font-size: .9375rem; margin-block: 14px 18px; max-width: 32ch; }
.cdw-footer-contact{ display: flex; flex-direction: column; gap: 8px; font-size: .875rem; }
.cdw-footer-contact p{ color: #A9ACD0; margin: 0 0 2px; }
.cdw-footer-newsletter form{ display: flex; gap: 8px; margin-top: 8px; }
.cdw-footer-newsletter input{ flex:1; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--cdw-blanc); padding: 10px 16px; min-height: 44px; }
.cdw-footer-bas{ display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; font-size: .8125rem; color: #8B8FB5; }
.cdw-footer-bas ul{ display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 560px){ .cdw-footer-cta{ flex-direction: column; align-items: flex-start; } .cdw-footer-cta .cdw-btn{ width: 100%; } }

/* ==========================================================================
   16. ARTICLE
   ========================================================================== */
.cdw-fil-ariane{ font-size: .8125rem; color: var(--cdw-ardoise); display: flex; gap: 6px; flex-wrap: wrap; padding-block: 16px; }
.cdw-fil-ariane a{ background: none; color: var(--cdw-ardoise); }
.cdw-fil-ariane a:hover{ color: var(--cdw-minuit); }

.cdw-article-entete{ padding-block: 8px 24px; }
.cdw-article-pastille{ display: inline-block; background: var(--cdw-pervenche); color: var(--cdw-minuit); font-family: var(--font-titre); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.cdw-article-chapo{ font-family: var(--font-corps); font-style: italic; font-size: clamp(1.0625rem,1rem+.3vw,1.3125rem); color: var(--cdw-ardoise); margin-top: 16px; }
.cdw-article-meta{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; font-size: .875rem; color: var(--cdw-ardoise); }
.cdw-article-meta img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.cdw-article-une{ max-width: var(--cdw-conteneur); margin-inline: auto; padding-inline: var(--cdw-gouttiere); margin-top: 28px; margin-bottom: 32px; }
/* Plafonnée à ~340px (point 7) : à 1440×900, titre + chapô + début du texte
   restent visibles sans défiler (R-0509). Respiration + ombre portée (point 21). */
.cdw-article-une-cadre{ aspect-ratio: 2.4 / 1; max-height: 520px; overflow: hidden; border-radius: var(--cdw-rayon-carte); box-shadow: var(--cdw-ombre); }
.cdw-article-une-cadre img{ width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 640px){ .cdw-article-une-cadre{ aspect-ratio: auto; height: 220px; max-height: 220px; } }

/* Colonne-gap à 0 (point 16) : la séparation texte/sidebar vient du filet interne
   de .cdw-rail (border-left+padding), jamais d'un blanc entre les deux colonnes
   (retour Mathias AR-059 ×2 : « elle s'y colle »). */
.cdw-article-mise-en-page{ display: grid; grid-template-columns: minmax(0, var(--cdw-lecture)) var(--cdw-rail); column-gap: 0; row-gap: var(--cdw-gouttiere); max-width: var(--cdw-conteneur); margin-inline: auto; padding: 32px var(--cdw-gouttiere) 64px; align-items: start; justify-content: center; }
@media (max-width: 1080px){ .cdw-article-mise-en-page{ grid-template-columns: 1fr; } }

.cdw-article-corps{ font-size: 1.0625rem; line-height: 1.7; }
.cdw-article-corps h2, .cdw-article-corps .cdw-t2 { margin-top: 2.2em; }
.cdw-article-corps h3, .cdw-article-corps .cdw-t3 { margin-top: 1.8em; }
.cdw-article-corps p{ margin-bottom: 1.3em; }
.cdw-article-corps strong{ color: var(--cdw-minuit); }
.cdw-article-corps img{ border-radius: var(--cdw-rayon-carte); margin-block: 1.6em; aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.cdw-article-corps figure{ margin: 1.6em 0; }
.cdw-article-corps figcaption{ font-size: .8125rem; color: var(--cdw-ardoise); margin-top: 8px; }
.cdw-article-corps em{ color: var(--cdw-ardoise); }
/* Filet anti-couleur-hors-palette (passe 7, point 7 : infographie « Quatre façons
   d'apprendre » restée en bleu, vestige d'un ancien thème) — toute couleur inline
   bleue résiduelle dans un article retombe sur la palette du site. */
.cdw-article-corps [style*="blue" i], .cdw-article-corps [style*="#00f" i], .cdw-article-corps [style*="#0000ff" i]{ color: var(--cdw-minuit) !important; border-color: var(--cdw-vert) !important; }
.cdw-article-corps blockquote{ margin: 1.8em 0; padding: 18px 24px; border-left: 4px solid var(--cdw-vert); background: var(--cdw-pervenche); border-radius: 8px; font-style: italic; font-size: 1.0625rem; }
.cdw-article-corps blockquote p:last-child{ margin-bottom: 0; }
.cdw-article-corps hr{ border: none; border-top: 1px solid var(--cdw-filet); margin: 2.4em 0; }
/* Sortie brute de la plume (h2/p/details sans classe) : même soin qu'un composant habillé. */
.cdw-article-corps details:not(.cdw-faq details){
  background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: 12px;
  padding: 16px 18px; margin: 1.6em 0;
}
.cdw-article-corps details:not(.cdw-faq details) summary{
  font-family: var(--font-titre); font-weight: 650; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cdw-article-corps details:not(.cdw-faq details) summary::-webkit-details-marker{ display: none; }
.cdw-article-corps details:not(.cdw-faq details) summary::after{ content: "+"; font-size: 1.5rem; color: var(--cdw-ardoise); flex-shrink: 0; transition: transform var(--dur); }
.cdw-article-corps details:not(.cdw-faq details)[open] summary::after{ transform: rotate(45deg); }
.cdw-article-corps details:not(.cdw-faq details) p:last-child{ margin-bottom: 0; margin-top: 12px; }
/* Filet de sécurité : si une liste brute échappe à la règle éditoriale (interdite en principe, cf. AR-002),
   elle reste au moins présentable plutôt que la puce noire par défaut du navigateur (GD-073/AR-109). */
.cdw-article-corps ul:not([class]) li, .cdw-article-corps ol:not([class]) li{
  position: relative; padding-left: 1.4em; margin-bottom: .6em;
}
.cdw-article-corps ul:not([class]) li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--cdw-vert); }
.cdw-article-corps ol:not([class]){ counter-reset: cdw-ol; }
.cdw-article-corps ol:not([class]) li{ counter-increment: cdw-ol; }
.cdw-article-corps ol:not([class]) li::before{ content: counter(cdw-ol) "."; position: absolute; left: 0; font-family: var(--font-titre); font-weight: 700; color: var(--cdw-ardoise); }

/* Sommaire (point 17) : plus qu'une liste grise — carte à accent vert, numéros en
   pastille, hover net. */
.cdw-sommaire{
  background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-left: 4px solid var(--cdw-vert);
  border-radius: 12px; padding: 18px 22px; margin-bottom: 24px; box-shadow: var(--cdw-ombre);
}
.cdw-sommaire strong{ display:block; font-family: var(--font-titre); font-weight: 700; font-size: .9375rem; margin-bottom: 12px; }
.cdw-sommaire ol{ display: flex; flex-direction: column; gap: 8px; counter-reset: sommaire; }
.cdw-sommaire li{ counter-increment: sommaire; font-size: .9375rem; display: flex; gap: 10px; align-items: baseline; }
.cdw-sommaire li::before{
  content: counter(sommaire); font-family: var(--font-titre); font-weight: 700; font-size: .75rem;
  color: var(--cdw-minuit); background: var(--cdw-pervenche); border-radius: 50%;
  width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.cdw-sommaire a{ background: none; color: var(--cdw-minuit); font-weight: 500; transition: color var(--dur); }
.cdw-sommaire a:hover{ color: var(--cdw-vert-encre); text-decoration: underline; }

/* Rail sticky (point 16) : collé à la colonne de texte, pas d'écart blanc — la
   séparation se fait par un filet interne, pas par le gap de la grille. Aucun
   ancêtre ne porte plus d'overflow-x:hidden (cf. body), le sticky tient sur toute
   la hauteur du contenu. */
.cdw-rail{ position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 20px;
  border-left: 1px solid var(--cdw-filet); padding-left: 20px; }
/* ⛔ jamais de overflow-y ni de max-height ici : la colonne reste collante et
   accompagne la lecture jusqu'en bas, sans sa propre barre de défilement (retour
   Mathias ×3). */
.cdw-rail-carte{ background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte); padding: 18px; }
.cdw-rail-carte h4, .cdw-rail-carte .cdw-t4 { font-family: var(--font-titre); font-size: .875rem; text-transform: uppercase; letter-spacing:.04em; color: var(--cdw-ardoise); margin-bottom: 10px; }
.cdw-rail-pub{ margin-top: auto; }

/* Sources */
.cdw-sources{ background: var(--cdw-pervenche); border-radius: 12px; padding: 20px 22px; margin-top: 40px; }
.cdw-sources strong{ display:block; font-family: var(--font-titre); font-size: .9375rem; margin-bottom: 10px; }
.cdw-sources ol{ display: flex; flex-direction: column; gap: 6px; }
.cdw-sources li{ font-size: .875rem; color: var(--cdw-ardoise); padding-left: 1.2em; position: relative; }
.cdw-sources li::before{ content: "—"; position: absolute; left: 0; }

/* Bloc auteur */
.cdw-auteur-bloc{ display: flex; gap: 16px; align-items: flex-start; background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte); padding: 22px; margin-top: 32px; }
.cdw-auteur-bloc img{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cdw-auteur-bloc-texte{ flex: 1; }
.cdw-auteur-bloc-nom{ font-family: var(--font-titre); font-weight: 700; font-size: 1.0625rem; display: inline-block; }
.cdw-auteur-bloc-nom:hover{ text-decoration: underline; }
.cdw-auteur-bloc-role{ color: var(--cdw-ardoise); font-size: .875rem; margin-bottom: 8px; }
.cdw-auteur-bloc-bio{ color: var(--cdw-ardoise); font-size: .9375rem; margin-bottom: 8px; }
.cdw-auteur-bloc a.cdw-auteur-lien{ background: none; font-weight: 650; font-size: .875rem; }

.cdw-a-lire{ margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--cdw-filet); }
.cdw-a-lire h4, .cdw-a-lire .cdw-t4 { font-family: var(--font-titre); font-size: .9375rem; margin-bottom: 12px; }

/* Alternatives */
.cdw-alternatives{ margin-top: 32px; }

/* Historique des mises à jour */
.cdw-historique{ margin-top: 32px; background: var(--cdw-pervenche); border-radius: 12px; padding: 18px 20px; }
.cdw-historique strong{ display:block; font-family: var(--font-titre); font-size: .9375rem; margin-bottom: 10px; }
.cdw-historique-ligne{ display: flex; gap: 12px; padding-block: 6px; border-bottom: 1px dashed var(--cdw-filet); font-size: .875rem; }
.cdw-historique-ligne:last-child{ border-bottom: none; }
.cdw-historique-ligne time{ flex-shrink:0; font-family: var(--font-titre); font-weight: 700; }

/* FAQ */
.cdw-faq{ margin-top: 32px; }
.cdw-faq details{ background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; }
.cdw-faq summary{ font-family: var(--font-titre); font-weight: 650; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cdw-faq summary::-webkit-details-marker{ display: none; }
.cdw-faq summary::after{ content: "+"; font-size: 1.5rem; color: var(--cdw-ardoise); flex-shrink: 0; transition: transform var(--dur); }
.cdw-faq details[open] summary::after{ transform: rotate(45deg); }
.cdw-faq details p{ margin-top: 12px; color: var(--cdw-ardoise); }

/* Encadrés */
.cdw-encadre{ background: var(--cdw-pervenche); border-left: 4px solid var(--cdw-vert); border-radius: 8px; padding: 18px 20px; margin: 1.6em 0; }
.cdw-encadre--sombre{ background: var(--cdw-minuit); color: var(--cdw-blanc); border-left-color: var(--cdw-vert); }
.cdw-encadre--sombre a{ color: var(--cdw-vert); }
.cdw-encadre-cta{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--cdw-minuit); color: var(--cdw-blanc); border-radius: var(--cdw-rayon-carte); padding: 24px; margin: 2em 0; }
.cdw-encadre-cta p{ margin: 0; }

/* Progression lecture */
.cdw-progression{ position: fixed; top: 0; left: 0; height: 3px; background: var(--cdw-vert); z-index: 55; width: 0%; }
@media (max-width: 640px){ .cdw-progression{ top: 0; } }

/* Tableaux publiés (habille .sbs_tableau du socle) */
.sbs_tableau{ overflow-x: auto; margin: 1.6em 0; border-radius: 12px; border: 1px solid var(--cdw-filet); -webkit-overflow-scrolling: touch; }
.sbs_tableau table{ border-collapse: collapse; width: 100%; min-width: 480px; }
.sbs_tableau th, .sbs_tableau td{ padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--cdw-filet); white-space: nowrap; }
.sbs_tableau th{ background: var(--cdw-pervenche); font-family: var(--font-titre); font-weight: 700; }
.sbs_tableau tr:last-child td{ border-bottom: none; }

/* Composants socle infographies — habillage (aucune couleur dans le socle lui-même).
   Point 7 (passe 4) : les 3px de débordement observés sur un article venaient très
   probablement du <meter> natif (barre de prix) — les moteurs webkit lui gardent un
   liseré/une ombre par défaut que width:100% ne couvre pas ; overflow-x:hidden sur
   chaque conteneur en garantit l'absence quelle que soit la cause exacte. */
sbs-tarifs, sbs-frise, sbs-jauges, sbs-lieu{ display: block; background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); border-radius: var(--cdw-rayon-carte); padding: 20px 22px; margin: 1.8em 0; overflow-x: hidden; }
.sbs_tarifs_titre, .sbs_frise_titre, .sbs_jauges_titre{ display:block; font-family: var(--font-titre); font-weight: 700; font-size: 1.0625rem; margin-bottom: 14px; }
sbs-tarif{ display: block; margin-bottom: 12px; max-width: 100%; }
.sbs_tarif_libelle{ display:block; font-size: .875rem; color: var(--cdw-ardoise); margin-bottom: 4px; }
.sbs_tarif_barre{ -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 100%; height: 28px; border-radius: 6px; border: none; box-shadow: none; }
.sbs_tarif_barre::-webkit-meter-bar{ background: var(--cdw-filet); border-radius:6px; border:none; box-shadow:none; }
.sbs_tarif_barre::-webkit-meter-optimum-value{ background: var(--cdw-vert); border-radius:6px; }
/* Frise (26/09) : date à gauche, titre + description empilés à droite. L'ancienne
   rangée flex à 3 colonnes écrasait le titre en une colonne d'un mot par ligne dès que
   la « date » était un libellé (étapes non datées) ou que la description était longue. */
sbs-frise{ container-type: inline-size; }
sbs-etape{ display: grid; grid-template-columns: 10.5em minmax(0,1fr); column-gap: 18px; row-gap: 2px; align-items: start; padding-block: 10px; border-left: 2px solid var(--cdw-filet); padding-left: 18px; margin-left: 6px; position: relative; max-width: 100%; }
sbs-etape::before{ content:""; position:absolute; left:-7px; top: 14px; width:12px; height:12px; border-radius:50%; background: var(--cdw-vert); }
.sbs_etape_date{ grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-titre); font-weight: 700; min-width: 0; }
.sbs_etape_titre, .sbs_etape_desc{ grid-column: 2; display: block; min-width: 0; }
@container (max-width: 520px){
  sbs-etape{ grid-template-columns: minmax(0,1fr); }
  .sbs_etape_date, .sbs_etape_titre, .sbs_etape_desc{ grid-column: 1; grid-row: auto; }
}
.sbs_etape_desc{ color: var(--cdw-ardoise); font-size: .9375rem; }
/* Jauges (26/09) : en flex centré. En grille auto-fit, le titre en 1/-1 empêchait les
   colonnes vides de se replier : 1 ou 2 chiffres restaient tassés à gauche de la carte. */
sbs-jauges{ display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 28px; text-align: center; }
.sbs_jauges_titre, sbs-jauges .sbs_source{ flex: 0 0 100%; }
sbs-jauge{ display: block; flex: 1 1 140px; max-width: 240px; }
.sbs_jauge_unite{ display:block; font-size: .875rem; color: var(--cdw-ardoise); }
.sbs_jauge_valeur{ display:block; font-family: var(--font-titre); font-weight: 800; font-size: 2rem; color: var(--cdw-minuit); }
.sbs_jauge_libelle{ display:block; font-size: .8125rem; color: var(--cdw-ardoise); }
.sbs_source{ display: block; margin-top: 12px; font-size: .75rem; color: var(--cdw-ardoise); }
sbs-lieu .sbs_lieu_nom{ display:block; font-family: var(--font-titre); font-size: 1.0625rem; margin-bottom: 6px; }
sbs-lieu address{ font-style: normal; color: var(--cdw-ardoise); }
sbs-lieu .sbs_lieu_carte{ display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: none; font-weight: 650; }
.sbs_icone_repere{ fill: var(--cdw-minuit); }

/* ==========================================================================
   17. RUBRIQUE / CATÉGORIE / HUB
   ========================================================================== */
.cdw-rubrique-entete{ position: relative; background: var(--cdw-minuit); color: var(--cdw-blanc); padding-block: 64px; overflow: hidden; }
.cdw-rubrique-entete-fond{ position: absolute; inset: 0; z-index: 0; }
.cdw-rubrique-entete-fond img{ width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cdw-rubrique-entete-fond::after{ content:""; position:absolute; inset:0; background: rgba(20,23,51,.55); }
.cdw-rubrique-entete .cdw-conteneur{ position: relative; z-index: 1; }
.cdw-rubrique-entete p{ color: #C4C7E4; max-width: 60ch; margin: 0; }

.cdw-recommandation{ background: var(--cdw-pervenche); border-radius: var(--cdw-rayon-carte); padding: 28px; margin-block: 32px; }
.cdw-recommandation-grille{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; margin-top: 16px; }
.cdw-recommandation-item{ background: var(--cdw-blanc-pur); border-radius: 12px; padding: 16px; }
.cdw-recommandation-item strong{ display:block; font-family: var(--font-titre); margin-bottom: 6px; }

.cdw-pagination{ display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.cdw-pagination a, .cdw-pagination span{ min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--cdw-filet); font-family: var(--font-titre); font-weight: 650; }
.cdw-pagination .current{ background: var(--cdw-minuit); color: var(--cdw-blanc); border-color: var(--cdw-minuit); }

.cdw-bientot{ text-align: center; padding: 64px 24px; color: var(--cdw-ardoise); }

/* ==========================================================================
   18. AUTEUR / À PROPOS / CONTACT
   ========================================================================== */
.cdw-auteur-entete{ display: flex; gap: 24px; align-items: center; padding-block: 48px; flex-wrap: wrap; }
.cdw-auteur-entete img{ width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.cdw-auteur-entete-texte{ flex: 1; min-width: 240px; }
.cdw-auteur-ancien{ display: inline-block; font-size: .8125rem; color: var(--cdw-ardoise); margin-top: 8px; }

.cdw-contact-page{ min-height: calc(100vh - 300px); display: flex; align-items: center; padding-block: 40px; }
.cdw-contact-grille{ display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--cdw-gouttiere); width: 100%; align-items: stretch; }
@media (max-width: 900px){ .cdw-contact-grille{ grid-template-columns: 1fr; } }
.cdw-contact-coord{ background: var(--cdw-minuit); color: var(--cdw-blanc); border-radius: var(--cdw-rayon-carte); padding: 32px; display:flex; flex-direction:column; justify-content: center; gap: 18px; }
.cdw-contact-coord a{ color: var(--cdw-blanc); }
.cdw-contact-item{ display: flex; gap: 12px; align-items: center; }
.cdw-contact-item svg{ width: 22px; height: 22px; flex-shrink: 0; color: var(--cdw-vert); }

/* ==========================================================================
   19. PAGE ACCOMPAGNEMENT
   ========================================================================== */
.cdw-accompagnement-hero{ position: relative; min-height: 60vh; display: flex; align-items: center; color: var(--cdw-blanc); }
.cdw-accompagnement-hero-fond{ position: absolute; inset: 0; z-index: 0; }
.cdw-accompagnement-hero-fond img{ width:100%; height:100%; object-fit: cover; }
.cdw-accompagnement-hero-fond::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg, rgba(20,23,51,.92) 40%, rgba(20,23,51,.55)); }
.cdw-accompagnement-hero .cdw-conteneur{ position: relative; z-index: 1; }
.cdw-accompagnement-hero p{ color: #C4C7E4; max-width: 50ch; }

/* ==========================================================================
   20. MÉTHODOLOGIE
   ========================================================================== */
.cdw-methode-grille{ counter-reset: methode; }
.cdw-methode-critere{ display: flex; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--cdw-filet); }
.cdw-methode-critere:last-child{ border-bottom: none; }
.cdw-methode-numero{ counter-increment: methode; font-family: var(--font-titre); font-weight: 800; font-size: 1.75rem; color: var(--cdw-filet); flex-shrink: 0; width: 48px; }
.cdw-methode-numero::before{ content: counter(methode); }

/* ==========================================================================
   21. 404 / SEARCH
   ========================================================================== */
.cdw-404{ min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px var(--cdw-gouttiere); }
.cdw-404 .cdw-fenetre{ max-width: 420px; margin-bottom: 24px; }
.cdw-recherche-form{ display:flex; gap: 8px; max-width: 480px; margin: 24px auto; }
.cdw-recherche-form input{ flex:1; }

/* ==========================================================================
   22. ANIMATIONS DOUCES (respect reduced-motion via §1)
   ========================================================================== */
.cdw-reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s var(--easing), transform .5s var(--easing); }
.cdw-reveal.est-visible{ opacity: 1; transform: none; }

/* Popup sortie */
.cdw-popup-sortie{ position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.cdw-popup-sortie.est-ouvert{ display: flex; }
.cdw-popup-sortie-fond{ position: absolute; inset: 0; background: rgba(20,23,51,.7); }
.cdw-popup-sortie-boite{ position: relative; z-index: 1; background: var(--cdw-blanc-pur); border-radius: var(--cdw-rayon-carte); max-width: 720px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; box-shadow: var(--cdw-ombre-forte); max-height: 90vh; }
@media (max-width: 640px){ .cdw-popup-sortie-boite{ grid-template-columns: 1fr; max-height: 85vh; overflow-y: auto; } }
.cdw-popup-sortie-image{ min-height: 220px; }
.cdw-popup-sortie-image img{ width: 100%; height: 100%; object-fit: cover; }
.cdw-popup-sortie-texte{ padding: 28px; }
.cdw-popup-sortie-fermer{ position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--cdw-blanc-pur); border: 1px solid var(--cdw-filet); display:flex; align-items:center; justify-content:center; }
.cdw-popup-sortie-fermer svg{ width: 20px; height: 20px; }

/* Bandeau cookies — RGPD (art. 82 loi Informatique et Libertés, ajout orchestrateur
   25/09) : deux choix de MÊME POIDS (Accepter/Refuser, jamais un seul « J'ai compris »
   qui vaut acceptation forcée) ; mesure d'audience UNIQUEMENT (ce site ne pose aucun
   cookie d'affiliation) ; barre COMPACTE, ≤64px à 1440, ≤120px cumulés avec la barre
   basse à 390. */
.cdw-cookies{
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80;
  background: var(--cdw-minuit); color: var(--cdw-blanc); border-radius: 12px;
  padding: 10px 14px; display: none; align-items: center; gap: 12px;
  box-shadow: var(--cdw-ombre-forte); max-height: 64px; overflow: hidden;
}
.cdw-cookies.est-visible{ display: flex; }
.cdw-cookies p{ margin: 0; flex: 1; min-width: 0; font-size: .75rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cdw-cookies-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.cdw-cookies .cdw-btn{ flex-shrink: 0; padding: 8px 14px; min-height: 32px; font-size: .8125rem; }
.cdw-cookies .cdw-btn--fantome{ border-width: 1.5px; }
.cdw-bande--minuit.cdw-cookies .cdw-btn--fantome, .cdw-cookies .cdw-btn--fantome{ color: var(--cdw-blanc); border-color: rgba(255,255,255,.5); }
@media (max-width: 640px){
  .cdw-cookies{ bottom: 64px; max-height: 48px; flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  .cdw-cookies p{ font-size: .6875rem; -webkit-line-clamp: 1; }
  .cdw-cookies-actions{ margin-left: auto; }
  .cdw-cookies .cdw-btn{ padding: 6px 12px; min-height: 28px; font-size: .75rem; }
}

/* Mini-cartes « Dans la même rubrique » (rail d'article) — jamais un rail vide sous
   le formulaire d'aide (verdict 25/09). */
.cdw-rail-mini-liste{ display: flex; flex-direction: column; gap: 10px; }
.cdw-rail-mini{ display: flex; gap: 10px; align-items: center; }
.cdw-rail-mini-media{ width: 56px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--cdw-pervenche); }
.cdw-rail-mini-media img{ width: 100%; height: 100%; object-fit: cover; }
.cdw-rail-mini-titre{ font-size: .8125rem; font-weight: 600; line-height: 1.3; background: none; }

/* Illustration (carte minuit contact / en-tête à-propos) — jamais une carte vide */
.cdw-illustration{ display: flex; align-items: center; justify-content: center; }
.cdw-illustration svg{ width: 100%; max-width: 220px; height: auto; }
.cdw-apropos-hero{ position: relative; min-height: 260px; border-radius: var(--cdw-rayon-carte); overflow: hidden; margin-bottom: 8px; }
.cdw-apropos-hero img{ width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ==========================================================================
   23. COMMENTAIRES (formulaire natif WP, honeypot cdw_piege côté functions.php)
   ========================================================================== */
.comment-respond, #comments{ margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cdw-filet); }
.comment-reply-title, .comments-title{ font-family: var(--font-titre); font-size: 1.25rem; }
#commentform p{ margin-bottom: 14px; }
#commentform label{ display:block; font-family: var(--font-titre); font-weight: 650; font-size: .9375rem; margin-bottom: 6px; }
#commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"], #commentform textarea{
  width: 100%; border: 1.5px solid var(--cdw-filet); border-radius: 10px; padding: 12px 14px; min-height: 44px;
}
#commentform textarea{ min-height: 110px; }
#commentform #submit{
  background: var(--cdw-vert); color: var(--cdw-minuit); font-family: var(--font-titre); font-weight: 700;
  border: none; border-radius: 999px; padding: 12px 26px; min-height: 44px; cursor: pointer;
}
.comment-list{ list-style: none; margin: 20px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comment-list .comment-body{ background: var(--cdw-pervenche); border-radius: 12px; padding: 16px 18px; }
.comment-author .fn{ font-family: var(--font-titre); font-weight: 650; font-style: normal; }
.comment-metadata{ font-size: .75rem; color: var(--cdw-ardoise); }
.comment-metadata a{ background: none; color: var(--cdw-ardoise); }

/* Zéro puce brute : neutralise toute liste de contenu non stylée hors zone éditoriale volontaire */
.cdw-article-corps ul:not([class]), .cdw-article-corps ol:not([class]){ padding-left: 0; }

/* Priorité sur .cdw-carte-media.cdw-sans-image span (règle §12, texte gris) —
   le monogramme mini (passe 8, point 6) doit garder ses couleurs de marque. */
.cdw-carte-media .cdw-monogramme--mini span{ color: var(--cdw-minuit); font-size: 1rem; font-weight: 800; padding: 0; }

/* Photos de corps d'article (R-0851) — crédit discret sous l'image (R-0849) */
.cdw-figure-corps{margin:32px 0;padding:0}
.cdw-figure-corps img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 10px 28px rgba(20,23,51,.12)}
.cdw-figure-corps .cdw-credit{margin-top:6px;font-size:.72rem;line-height:1.3;color:var(--cdw-ardoise,#5b5f7a);text-align:right;opacity:.8}

/* ==========================================================================
   24. CORRECTIFS PROPRES À UN POST (verdict 25/09, passe 9) — jamais de
   modification du contenu (post 911 porte un lien client), uniquement du CSS
   scopé par postid-911 (classe posée par body_class()).
   ========================================================================== */
/* Bloquant 5 : les visages de la une sont en BAS de cette photo précise, le
   cadrage global à 30% (ligne 694) remonte vers le mur blanc. Réglage propre à
   ce post seulement — aucun autre article n'est concerné par ce fichier. */
.postid-911 .cdw-article-une-cadre img{ object-position: center 58%; }

/* Bloquant 5bis : l'infographie « Quatre façons d'apprendre » (et l'encadré
   « Le saviez-vous ? » juste après, même origine) sont du HTML brut collé dans
   le corps avec des couleurs bleues codées en dur — vestige d'un ancien thème,
   sans aucune classe cdw- ni sbs-. Confirmé sur le HTML source du post
   (reservoir/accompagnement-numerique-seniors-par-ou-commencer.html) : mêmes
   valeurs hexadécimales exactes partout, donc ciblables sans toucher au texte.
   Contenu intouché (P-407/consigne chantier) : on ramène juste ces teintes à
   la palette du site, ciblé sur ce post pour ne rien risquer ailleurs. */
.postid-911 .cdw-article-corps [style*="#155bd7" i],
.postid-911 .cdw-article-corps [style*="#7da6ec" i],
.postid-911 .cdw-article-corps [style*="#4a82e3" i],
.postid-911 .cdw-article-corps [style*="#2a6be0" i]{
  border-color: var(--cdw-vert) !important;
  color: var(--cdw-vert-encre) !important;
}
.postid-911 .cdw-article-corps [style*="#d6e2f8" i]{ border-color: var(--cdw-filet) !important; }
.postid-911 .cdw-article-corps [style*="#f4f7fd" i]{ background: var(--cdw-pervenche) !important; }
.postid-911 .cdw-article-corps [style*="#14253b" i],
.postid-911 .cdw-article-corps [style*="#33445c" i],
.postid-911 .cdw-article-corps [style*="#4a5a70" i]{ color: var(--cdw-minuit) !important; }

/* Passe 10 bis : barres du graphique Insee de la page seniors (fond bleu codé en dur
   dans le contenu client, qu'on ne modifie pas) ramenées aux couleurs du site. */
.postid-911 .cdw-article-corps [style*="background:#155bd7" i],
.postid-911 .cdw-article-corps [style*="background:#7da6ec" i],
.postid-911 .cdw-article-corps [style*="background:#4a82e3" i],
.postid-911 .cdw-article-corps [style*="background:#2a6be0" i]{ background: var(--cdw-vert) !important; }
.postid-911 .cdw-article-corps [style*="background:#e4ecfb" i]{ background: var(--cdw-pervenche) !important; }
.postid-911 .cdw-article-corps [style*="border-top:1px solid #e4ecfb" i]{ border-top-color: var(--cdw-filet) !important; }

/* Titres de blocs hors contenu (barre latérale, cartes, footer, pop-up) : ce ne sont
   pas des Hn, pour garder une structure H1 > H2 > H3 propre (retour Mathias 25/09). */
.cdw-t2, .cdw-t3, .cdw-t4{ display: block; font-weight: 700; }
.cdw-popup-sortie-boite--sans-image{ grid-template-columns: 1fr; max-width: 480px; }

/* Maillage interne rendu en cartes DANS le corps (cdw_maillage_en_cartes) : les
   styles de lien et d'image du texte courant ne s'y appliquent pas. */
.cdw-article-corps .cdw-a-lire a{ text-decoration: none; background: none; border: 0; }
.cdw-article-corps .cdw-a-lire img{ margin: 0; border-radius: 0; box-shadow: none; }
.cdw-article-corps .cdw-a-lire .cdw-carte-corps .cdw-t3{ font-size: 1.0625rem; margin: 0; }
.cdw-a-lire-rubrique{ margin: 16px 0 0; font-weight: 600; }
.cdw-a-lire-rubrique a{ color: var(--cdw-minuit); }

/* Passe 11 bis (retours Mathias 26/09, vus sur la page rendue) */
.cdw-footer-cta .cdw-btn, .cdw-footer-cta .cdw-btn:hover{ color: var(--cdw-minuit); }
.cdw-footer-liste-courte a{ display: inline; -webkit-line-clamp: unset; overflow: visible; }
.cdw-carte--actu .cdw-carte-corps .cdw-t3{ -webkit-line-clamp: 3; }
.cdw-carte-picto{ align-items: flex-start; text-align: left; padding: 28px 26px; gap: 12px; }
.cdw-carte-picto-icone{ width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--cdw-vert) 22%, #fff); }
.cdw-carte-picto-titre h3, .cdw-carte-picto-titre .cdw-t3{ font-size: 1.1875rem; }
.cdw-carte-picto .cdw-carte-extrait{ margin: 0; }
.cdw-carte-picto-action{ margin-top: auto; padding-top: 6px; font-family: var(--font-titre); font-weight: 700; font-size: .9375rem; color: var(--cdw-minuit); }
.cdw-carte-picto:hover .cdw-carte-picto-action{ text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px){ .cdw-hero-visuel .cdw-fenetre:nth-child(n+2){ display: none; } } /* mobile : une seule fenêtre, la suite de la page remonte (26/09) */

/* ==========================================================================
   CLASSEMENT TOP 10 (cdw_classement_top) — retour Mathias 26/09.
   Lignes en grille (pas un <table>), en-tête minuit, lignes alternées, n°1
   surligné vert, badges de rang colorés, logo sur pastille blanche.
   ========================================================================== */
.cdw-top10{ border-radius: var(--cdw-rayon-carte); overflow: hidden; box-shadow: var(--cdw-ombre); border: 1px solid var(--cdw-filet); background: var(--cdw-blanc-pur); margin: 12px 0 32px; }
.cdw-top10-entete, .cdw-top10-ligne{ display: grid; grid-template-columns: 76px minmax(0,1fr) 190px 150px; align-items: center; column-gap: 18px; padding: 0 22px 0 14px; }
.cdw-top10--sans-prix .cdw-top10-entete, .cdw-top10--sans-prix .cdw-top10-ligne{ grid-template-columns: 76px minmax(0,1fr) 0 150px; }
.cdw-top10-entete{ background: var(--cdw-minuit); color: #C9CCEA; font-family: var(--font-titre); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; min-height: 44px; }
.cdw-top10-entete span:first-child{ text-align: center; }
.cdw-top10-ligne{ position: relative; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid var(--cdw-filet); transition: background .2s ease; }
.cdw-top10-ligne:nth-child(odd){ background: #F7F8FD; }
.cdw-top10-ligne:hover{ background: color-mix(in srgb, var(--cdw-vert) 8%, #fff); }
.cdw-top10-rang-1{ background: color-mix(in srgb, var(--cdw-vert) 16%, #fff) !important; box-shadow: inset 5px 0 0 var(--cdw-vert); padding-top: 26px; }
.cdw-top10-rang{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cdw-top10-rang b{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-titre); font-size: 1.25rem; background: var(--cdw-blanc-pur); color: var(--cdw-minuit); border: 2px solid var(--cdw-filet); }
.cdw-top10-rang-1 .cdw-top10-rang b{ background: var(--cdw-vert); border-color: var(--cdw-vert); width: 54px; height: 54px; font-size: 1.5rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--cdw-vert) 45%, transparent); }
.cdw-top10-rang-2 .cdw-top10-rang b{ background: var(--cdw-minuit); border-color: var(--cdw-minuit); color: #fff; }
.cdw-top10-rang-3 .cdw-top10-rang b{ background: #DCDFF7; border-color: #C3C7EE; }
.cdw-top10-choix{ position: absolute; top: 0; left: 14px; background: var(--cdw-minuit); color: var(--cdw-vert); font-family: var(--font-titre); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 0 0 8px 8px; white-space: nowrap; }
.cdw-top10-outil{ display: flex; align-items: center; gap: 16px; min-width: 0; }
.cdw-top10-logo{ flex: 0 0 60px; width: 60px; height: 60px; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(20,23,51,.10); display: grid; place-items: center; overflow: hidden; }
.cdw-top10-logo img{ width: 44px; height: 44px; object-fit: contain; margin: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.cdw-top10-logo .cdw-monogramme{ width: 100%; height: 100%; min-height: 0; border-radius: 0; font-size: 1rem; }
.cdw-top10-texte{ min-width: 0; }
.cdw-top10-nom{ font-family: var(--font-titre); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: var(--cdw-minuit); }
.cdw-top10-nom a{ color: inherit; text-decoration: none; background: none; }
.cdw-top10-nom a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.cdw-top10-ideal{ display: inline-block; margin-top: 5px; font-size: .75rem; font-weight: 700; color: var(--cdw-vert-encre); background: color-mix(in srgb, var(--cdw-vert) 22%, #fff); padding: 2px 9px; border-radius: 999px; }
.cdw-top10-bref{ margin: 6px 0 0; font-size: .875rem; line-height: 1.45; color: var(--cdw-ardoise); }
.cdw-top10-pastille{ display: inline-block; font-family: var(--font-titre); font-weight: 700; font-size: .875rem; color: var(--cdw-minuit); background: var(--cdw-pervenche); border: 1px solid #D5D8F1; padding: 6px 12px; border-radius: 10px; }
.cdw-top10-pastille--gratuit{ background: var(--cdw-vert); border-color: var(--cdw-vert); }
.cdw-top10-action{ display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.cdw-top10-action .cdw-btn{ justify-content: center; }
.cdw-top10-offre{ font-size: .8125rem; font-weight: 600; color: var(--cdw-ardoise); }
.cdw-article-corps .cdw-top10 a, .cdw-article-content .cdw-top10 a{ background-image: none; }
@media (max-width: 760px){
  .cdw-top10-entete{ display: none; }
  .cdw-top10-ligne, .cdw-top10--sans-prix .cdw-top10-ligne{ grid-template-columns: 52px minmax(0,1fr); grid-template-areas: "rang outil" "rang prix" "action action"; row-gap: 10px; padding: 18px 14px; }
  .cdw-top10-rang-1{ padding-top: 30px; }
  .cdw-top10-rang{ grid-area: rang; align-self: start; }
  .cdw-top10-rang b{ width: 40px; height: 40px; font-size: 1.0625rem; }
  .cdw-top10-rang-1 .cdw-top10-rang b{ width: 44px; height: 44px; font-size: 1.25rem; }
  .cdw-top10-outil{ grid-area: outil; align-items: flex-start; }
  .cdw-top10-logo{ flex-basis: 48px; width: 48px; height: 48px; }
  .cdw-top10-logo img{ width: 36px; height: 36px; }
  .cdw-top10-prix{ grid-area: prix; }
  .cdw-top10-prix:empty{ display: none; }
  .cdw-top10-action{ grid-area: action; }
}

/* Classement : le composant vit dans une colonne de ~670 px — 3 colonnes seulement
   (rang | outil | prix + bouton empilés), sinon le texte s'écrasait mot par mot. */
@media (min-width: 761px){
  .cdw-top10-entete, .cdw-top10-ligne, .cdw-top10--sans-prix .cdw-top10-ligne{ grid-template-columns: 64px minmax(0,1fr) 168px; }
  .cdw-top10-entete span:nth-child(4){ display: none; }
  .cdw-top10-ligne{ grid-template-areas: "rang outil prix" "rang outil action"; row-gap: 10px; }
  .cdw-top10-rang{ grid-area: rang; }
  .cdw-top10-outil{ grid-area: outil; }
  .cdw-top10-prix{ grid-area: prix; align-self: end; text-align: center; }
  .cdw-top10-action{ grid-area: action; align-self: start; }
  .cdw-top10-prix:empty{ display: none; }
  .cdw-top10-ligne:has(.cdw-top10-prix:empty){ grid-template-areas: "rang outil action"; }
  .cdw-top10-ligne:has(.cdw-top10-prix:empty) .cdw-top10-action{ align-self: center; }
}
.cdw-top10-pastille{ white-space: nowrap; font-size: .8125rem; padding: 6px 10px; } @media (min-width: 761px){ .cdw-top10-entete, .cdw-top10-ligne, .cdw-top10--sans-prix .cdw-top10-ligne{ grid-template-columns: 64px minmax(0,1fr) 182px; } }

/* ==========================================================================
   TROUVEUR v2 (26/09) — questionnaire pas à pas, un vrai outil en résultat.
   ========================================================================== */
.cdw-trouveur-progression{ height: 6px; border-radius: 999px; background: var(--cdw-pervenche); overflow: hidden; margin: 0 0 22px; }
.cdw-trouveur-progression span{ display: block; height: 100%; background: linear-gradient(90deg, var(--cdw-vert), color-mix(in srgb, var(--cdw-vert) 60%, var(--cdw-minuit))); border-radius: inherit; transition: width .35s ease; }
.cdw-trouveur-question{ display: flex; align-items: center; gap: 12px; font-family: var(--font-titre); font-weight: 700; font-size: 1.25rem; color: var(--cdw-minuit); margin: 0 0 16px; }
.cdw-trouveur-question .cdw-trouveur-q-num{ margin: 0; flex: 0 0 auto; }
.cdw-trouveur-choix{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cdw-trouveur-choix button{ text-align: left; font: inherit; font-weight: 600; font-size: .9375rem; color: var(--cdw-minuit); background: var(--cdw-pervenche); border: 2px solid transparent; border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cdw-trouveur-choix button:hover, .cdw-trouveur-choix button:focus-visible{ border-color: var(--cdw-vert); background: color-mix(in srgb, var(--cdw-vert) 14%, #fff); transform: translateY(-1px); outline: none; }
.cdw-trouveur-retour{ margin-top: 14px; background: none; border: 0; padding: 4px 0; font: inherit; font-size: .875rem; font-weight: 600; color: var(--cdw-ardoise); cursor: pointer; }
.cdw-trouveur-retour:hover{ color: var(--cdw-minuit); text-decoration: underline; }
.cdw-trouveur-resultat{ display: none; }
.cdw-trouveur-resultat.est-visible{ display: block; animation: cdwApparition .35s ease; }
@keyframes cdwApparition{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.cdw-trouveur-reco{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
.cdw-trouveur-reco .cdw-trouveur-alt{ font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; color: var(--cdw-blanc); }
.cdw-trouveur-alt{ display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.cdw-trouveur-alt small{ display: block; font-size: .75rem; font-weight: 600; opacity: .75; font-family: var(--font-texte, inherit); }
a.cdw-trouveur-alt:hover span:last-child{ text-decoration: underline; text-underline-offset: 3px; }
.cdw-trouveur-logo{ width: 56px; height: 56px; border-radius: 14px; background: #fff; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; }
.cdw-trouveur-logo.est-petit{ width: 36px; height: 36px; border-radius: 10px; }
.cdw-trouveur-logo img{ width: 72%; height: 72%; object-fit: contain; margin: 0; box-shadow: none; border-radius: 0; aspect-ratio: auto; }
.cdw-trouveur-mono{ font-family: var(--font-titre); font-weight: 700; color: var(--cdw-minuit); }
.cdw-trouveur-raison{ font-family: inherit !important; font-weight: 500 !important; font-size: 1rem !important; line-height: 1.55; color: #D9DBF0; margin: 10px 0 0 !important; }
.cdw-trouveur-alts{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: .875rem; color: #C9CCEA; }
.cdw-trouveur-alts .cdw-trouveur-alt{ color: var(--cdw-blanc); font-weight: 600; }
.cdw-trouveur-resultat .cdw-trouveur-retour{ color: #C9CCEA; }
.cdw-trouveur-resultat .cdw-top10-pastille{ background: var(--cdw-vert); border-color: var(--cdw-vert); }
.cdw-trouveur--compact .cdw-trouveur-choix{ grid-template-columns: 1fr; }
.cdw-trouveur--compact .cdw-trouveur-question{ font-size: 1rem; }
.cdw-trouveur--compact .cdw-trouveur-reco .cdw-trouveur-alt{ font-size: 1.125rem; }
.cdw-trouveur--compact .cdw-trouveur-resultat{ padding: 18px; }
.cdw-trouveur--compact .cdw-trouveur-resultat-actions .cdw-btn{ width: 100%; justify-content: center; }