/* ==========================================================================
   korbyx-design.css - v1
   Design system Korbyx (classes kx-) pour les gabarits Gutenberg.
   Reference = la DA de la page d'accueil validee (charte Thomas). Les ecarts
   theme signales par Aurore (README d'integration, section 9) sont couverts,
   mais styles selon la charte HP (tokens, ombres, ratios), pas des valeurs ad hoc.
   Reequilibrage Nicolas : violet reserve aux titres/accents, respiration
   mint/lime (checks cyan plein, etoiles lime, accents mint sur fond sombre).
   ========================================================================== */

:root {
  --kx-violet: #5B26FE;
  --kx-violet-40: #BDA8FF;
  --kx-mint: #1AECDE;
  --kx-lime: #EFFF00;
  --kx-navy: #12012D;
  --kx-navy-deep: #0F0226;
  --kx-surface-dark: #241B47;   /* cartes sur section sombre (contraste) */
  --kx-lavender: #CFC0FF;
  --kx-lavender-soft: #E9E5FF;
  --kx-lavender-90: #F1EEFF;
  --kx-ghost: #FBFAFD;
  --kx-ghost-100: #F8F7FB;
  --kx-navy-50: rgba(18, 1, 45, 0.62);
  --kx-radius-card: 1rem;
  --kx-radius-lg: 1.25rem;
  --kx-radius-btn: 0.75rem;
  --kx-content: 90rem;
  --kx-font-sans: "Inter", system-ui, sans-serif;
  --kx-font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Blob de marque (contour, trace de Blob.tsx) : partage par les decors ::after */
  --kx-blob: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='70%20123%20369%20527'%3E%3Cpath%20d='M358.33,489h0c-51.74-3-93.01-45.36-97.44-98.59-.24-2.92-.24-5.87.05-8.79,4.94-53,46.34-94.84,97.93-97.51h0c39.06-2,69.89-36.75,67.82-78.53-1.85-37.41-30.59-67.97-66.37-70.5-38.33-2.72-70.75,26.16-75.76,64.18h0c-7.44,55.75-54.56,96.23-108.37,93.11h0c-1.65-.08-3.31-.15-4.97-.15-49.33,0-89.33,41.78-89.33,93.32s39.99,93.32,89.33,93.32c1.49,0,2.95-.03,4.43-.12h0c54.02-2.8,101,38.28,107.88,94.32h0c4.65,38.33,37.13,67.6,75.64,65,35.82-2.43,64.68-32.95,66.6-70.4,2.14-41.69-28.5-76.42-67.41-78.63l-.02-.02Z'%20fill='none'%20stroke='black'%20stroke-width='9'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Sections : rythme clair / sombre --------------------------------------- */
.kx-section { padding-block: 6rem; }
@media (min-width: 640px) { .kx-section { padding-block: 7rem; } }
/* Sans modificateur : blanc casse par defaut (jamais de blanc pur, regle charte).
   Les gabarits Aurore laissent certaines sections nues. */
.kx-section           { background: var(--kx-ghost-100); color: var(--kx-navy); }
.kx-section--light    { background: var(--kx-ghost-100); color: var(--kx-navy); }
.kx-section--lavender { background: var(--kx-lavender-90); color: var(--kx-navy); }
.kx-section--dark     { background: var(--kx-navy); color: #fff; }

/* Conteneur : le contenu des sections s'aligne EXACTEMENT sur le header/footer
   (largeur 90rem, marge 1.5rem). Sinon Astra/WP imposent une autre largeur = decalage. */
.kx-container { max-width: var(--kx-content); margin-inline: auto; padding-inline: 1.5rem; }
/* Sections full-bleed (bandes de couleur jusqu'au bord), contenu centre a 90rem avec
   gouttiere 1.5rem = EXACTEMENT l'alignement du header/footer, a toutes les largeurs. */
/* Cible UNIQUEMENT l'article principal (enfant direct de site-main), pas les
   cartes <article> imbriquees (ex. .kx-souv__card) sinon leur padding tombe a 0. */
.kx-body .site-main > article { padding-left: 0 !important; padding-right: 0 !important; }
.kx-body .kx-section {
  padding-left: max(1.5rem, calc((100% - var(--kx-content)) / 2 + 1.5rem)) !important;
  padding-right: max(1.5rem, calc((100% - var(--kx-content)) / 2 + 1.5rem)) !important;
}

/* Colonnes core : gap genereux (~3rem), sauf les grilles de cartes (kx-grid). */
.kx-section .wp-block-columns:not(.kx-grid) { gap: clamp(2rem, 4vw, 3rem); }

/* --- En-tete de section : titre a gauche, intro a droite -------------------- */
.kx-head { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .kx-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.kx-head--center { max-width: 48rem; margin-inline: auto; margin-bottom: 2.5rem; text-align: center; grid-template-columns: 1fr; }
.kx-head .kx-eyebrow { justify-self: start; }
.kx-head--center .kx-eyebrow { justify-self: center; }

/* --- Eyebrow (pastille) ------------------------------------------------------ */
.kx-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.875rem; border-radius: 9999px;
  font-family: var(--kx-font-mono);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--kx-lavender-soft); color: var(--kx-violet);
}
.kx-eyebrow--dark { background: rgba(255, 255, 255, 0.1); color: var(--kx-mint); }
/* Icone Korbyx (signature de la home) devant le libelle, coloree comme le texte */
.kx-eyebrow::before {
  content: ""; width: 0.85rem; height: 0.85rem; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='47.5%20220%20132%20132'%3E%3Cpath%20d='m69.55,251.28c7.81-2.96,17.44.92,20.47,8.26,2.99,7.24-1.1,16.83-8.73,19.4-9.47,3.2-17.4-.95-20.72-8.35-3.44-7.66.57-16.12,8.98-19.31Z'/%3E%3Cpath%20d='m80.33,319.95c-7.81,2.94-16.77-.62-19.71-7.82-2.88-7.05,1.2-15.65,8.77-18.52,7.41-2.81,16.78,1.01,19.77,8.05,3.01,7.1-.96,15.33-8.83,18.29Z'/%3E%3Cpath%20d='m126.38,234.86c3.09,7.27-.43,15.4-7.92,18.31-7.45,2.89-17.2-.61-19.84-7.8-2.96-8.06.33-15.07,8.61-18.49,7.51-3.1,16.07.74,19.15,7.98Z'/%3E%3Cpath%20d='m123.61,329.05c2.94,6.68-.06,13.72-7.05,16.51-6.9,2.76-15.12-.34-18.1-6.82-2.79-6.07,1.01-14.42,7.69-16.93,6.77-2.54,14.57.69,17.46,7.24Z'/%3E%3Cpath%20d='m166.55,252.96c.24,7.01-6.03,13.73-13.57,13.94-11.41.31-19.57,10.47-19.68,20.03-.09,8.37,7.33,19.45,19.3,19.81,5.08.15,9.52,1.51,13.13,5.2,4.93,5.04,4.55,12.63-1.24,18.43-4.3,4.3-13.58,4.54-18.39.57-3.39-2.8-5.16-6.26-5.68-10.44-1.08-8.61-7.01-13.35-16.64-12.81-7.46.42-13.54-1.38-18.83-6.62-6.16-6.09-6.76-18.3-1.06-24.86,5.04-5.8,11.31-8.22,19.1-8.3,9.37-.09,14.48-4.98,15.02-13.82.63-10.24,9.26-16.25,19.23-13.39,5.19,1.49,9.12,6.66,9.31,12.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='47.5%20220%20132%20132'%3E%3Cpath%20d='m69.55,251.28c7.81-2.96,17.44.92,20.47,8.26,2.99,7.24-1.1,16.83-8.73,19.4-9.47,3.2-17.4-.95-20.72-8.35-3.44-7.66.57-16.12,8.98-19.31Z'/%3E%3Cpath%20d='m80.33,319.95c-7.81,2.94-16.77-.62-19.71-7.82-2.88-7.05,1.2-15.65,8.77-18.52,7.41-2.81,16.78,1.01,19.77,8.05,3.01,7.1-.96,15.33-8.83,18.29Z'/%3E%3Cpath%20d='m126.38,234.86c3.09,7.27-.43,15.4-7.92,18.31-7.45,2.89-17.2-.61-19.84-7.8-2.96-8.06.33-15.07,8.61-18.49,7.51-3.1,16.07.74,19.15,7.98Z'/%3E%3Cpath%20d='m123.61,329.05c2.94,6.68-.06,13.72-7.05,16.51-6.9,2.76-15.12-.34-18.1-6.82-2.79-6.07,1.01-14.42,7.69-16.93,6.77-2.54,14.57.69,17.46,7.24Z'/%3E%3Cpath%20d='m166.55,252.96c.24,7.01-6.03,13.73-13.57,13.94-11.41.31-19.57,10.47-19.68,20.03-.09,8.37,7.33,19.45,19.3,19.81,5.08.15,9.52,1.51,13.13,5.2,4.93,5.04,4.55,12.63-1.24,18.43-4.3,4.3-13.58,4.54-18.39.57-3.39-2.8-5.16-6.26-5.68-10.44-1.08-8.61-7.01-13.35-16.64-12.81-7.46.42-13.54-1.38-18.83-6.62-6.16-6.09-6.76-18.3-1.06-24.86,5.04-5.8,11.31-8.22,19.1-8.3,9.37-.09,14.48-4.98,15.02-13.82.63-10.24,9.26-16.25,19.23-13.39,5.19,1.49,9.12,6.66,9.31,12.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Titres ----------------------------------------------------------------- */
.kx-h1, .kx-h2 { font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; margin: 0; color: var(--kx-navy); }
.kx-h2 { font-size: clamp(2.25rem, 4vw, 3rem); }
.kx-h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.kx-h2 strong, .kx-h1 strong { font-weight: 700; color: var(--kx-violet); }
.kx-section--dark .kx-h2 strong, .kx-section--dark .kx-h1 strong { color: var(--kx-mint); }
.kx-h3 { font-size: 1.25rem; font-weight: 600; color: var(--kx-navy); margin: 0; }
.kx-section--dark .kx-h3 { color: #fff; }
/* Lisibilite : titres blancs sur fond sombre (un style global les met en gris fonce) */
.kx-section--dark .kx-h1, .kx-section--dark .kx-h2 { color: #fff !important; }
.kx-footer h2, .kx-footer__nl h2 { color: #fff !important; }
/* Retirer le titre de page Astra (evite le 2e H1) */
.kx-body .site-main .entry-header, .kx-body .site-main .entry-title { display: none !important; }

.kx-intro { color: var(--kx-navy-50); max-width: 34rem; text-wrap: pretty; }
.kx-intro--wide { max-width: none; }
.kx-section--dark .kx-intro { color: rgba(255, 255, 255, 0.7); }

/* Espace titre -> contenu (le theme v0 collait au titre). */
.kx-h2 + .kx-intro, .kx-h2 + p, .kx-h2 + .kx-checklist, .kx-h2 + .kx-crosslist,
.kx-h1 + .kx-intro, .kx-h3 + p { margin-top: 1.25rem; }
.kx-h2 + .wp-block-columns:not(.kx-grid), .kx-intro + .wp-block-columns:not(.kx-grid) { margin-top: 2.5rem; }

/* --- Grilles de cartes (sur le bloc columns) -------------------------------- */
.kx-grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .kx-grid--2, .kx-grid--3, .kx-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kx-grid--3 { grid-template-columns: repeat(3, 1fr); } .kx-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Cartes ----------------------------------------------------------------- */
.kx-card {
  height: 100%; padding: 1.5rem; border-radius: var(--kx-radius-card);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.1), 0 6px 22px -12px rgba(18, 1, 45, 0.22);
  transition: transform 0.3s, box-shadow 0.3s;
}
.kx-card--elevated:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(18, 1, 45, 0.28); }
.kx-card--dark { background: var(--kx-surface-dark); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
/* Titres lisibles sur carte sombre (le theme les met en gris ardoise) */
.kx-body .kx-card--dark :where(h2, h3, h4, .kx-h2, .kx-h3), .kx-section--dark .kx-card :where(h2, h3, h4, .kx-h2, .kx-h3) { color: #fff; }
/* Rythme interne serre : les <p>/<h3> bruts (blocs WP) heritaient de grosses
   marges du theme. On remet a zero puis on cadence a la charte. */
.kx-body .kx-card :where(p, h2, h3, h4, ul, ol) { margin: 0; }
.kx-body .kx-card :where(p, h2, h3, h4, ul, ol) + :where(p, h2, h3, h4, ul, ol) { margin-top: 0.625rem; }
.kx-card h3, .kx-card .kx-h3 { line-height: 1.25; }

/* --- Listes cyan / croix ---------------------------------------------------- */
.kx-checklist, .kx-crosslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.15rem; }
/* Retour Thomas du 2026-08-25 : 0.875rem pour des puces de 24 px surmontees d'une
   pastille de 24 px, cela se lisait comme un bloc compact. */
.kx-checklist li, .kx-crosslist li { position: relative; padding-left: 2.25rem; line-height: 1.5; }
.kx-checklist li::before, .kx-crosslist li::before {
  content: ""; position: absolute; left: 0; top: 0.1em; width: 1.5rem; height: 1.5rem;
  border-radius: 9999px; background-repeat: no-repeat; background-position: center; background-size: 0.85rem;
}
/* Puces = cyan PLEIN (charte, check navy) - jamais le mint pale */
.kx-checklist li::before {
  background-color: var(--kx-mint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312012D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.kx-crosslist li { color: var(--kx-navy-50); }
.kx-crosslist li::before {
  background-color: rgba(18, 1, 45, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312012D' stroke-opacity='0.4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
/* Liste ordonnee : pastille numerotee */
.kx-checklist--ordered { counter-reset: kx; }
.kx-checklist--ordered li::before {
  counter-increment: kx; content: counter(kx); background-image: none;
  background-color: var(--kx-navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600;
}

/* --- Boutons (Gutenberg : styler le LIEN, neutraliser le wrapper) ----------- */
.wp-block-button.kx-btn { background: none; border: 0; padding: 0; }
.kx-btn .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: var(--kx-radius-btn);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.025em; text-transform: uppercase;
  text-decoration: none; transition: transform .3s, box-shadow .3s, border-color .3s, color .3s, background-color .3s;
}
.kx-btn--mint .wp-block-button__link { background: var(--kx-mint); color: var(--kx-navy); }
.kx-btn--outline-dark .wp-block-button__link { border: 1px solid rgba(18, 1, 45, 0.2); color: var(--kx-navy); background: transparent; }
.kx-btn--outline-light .wp-block-button__link { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; background: transparent; }
.kx-btn--gradient .wp-block-button__link { background: linear-gradient(135deg, var(--kx-violet), var(--kx-mint)); color: #fff; }
/* Survol : garder la couleur de marque. Astra force un fond/texte par defaut sur
   .wp-block-button__link:hover ; on prefixe .kx-body pour gagner en specificite. */
.kx-body .kx-btn--mint .wp-block-button__link:hover,
.kx-body .kx-btn--mint .wp-block-button__link:focus {
  background: var(--kx-mint); color: var(--kx-navy); border-color: transparent;
  transform: translateY(-1px); box-shadow: 0 0 24px rgba(26, 236, 222, 0.5);
}
.kx-body .kx-btn--outline-dark .wp-block-button__link:hover,
.kx-body .kx-btn--outline-dark .wp-block-button__link:focus {
  background: transparent; border-color: var(--kx-violet); color: var(--kx-violet);
}
.kx-body .kx-btn--outline-light .wp-block-button__link:hover,
.kx-body .kx-btn--outline-light .wp-block-button__link:focus {
  background: transparent; border-color: var(--kx-mint); color: var(--kx-mint);
}
.kx-body .kx-btn--gradient .wp-block-button__link:hover,
.kx-body .kx-btn--gradient .wp-block-button__link:focus {
  background: linear-gradient(135deg, var(--kx-violet), var(--kx-mint)); color: #fff; border-color: transparent;
}

/* --- Chiffres-cles (style de la home : marque Korbyx + chiffre gras) --------- */
/* .kx-body prefixe : le theme force .entry-content p{margin-bottom:1.6em} (marge
   en em qui explose sous les gros chiffres). On la bat en specificite. */
.kx-body .kx-stat__num { margin: 0; }
.kx-stat__num { font-size: clamp(2.75rem, 5vw, 3.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--kx-navy); }
/* Motif Korbyx au-dessus du chiffre (signature de la home, cf. section Impact) */
.kx-stat__num::before {
  content: ""; display: block; width: 1.75rem; height: 1.75rem; margin-bottom: 1.25rem;
  background-color: var(--kx-violet);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='47.5%20220%20132%20132'%3E%3Cpath%20d='m69.55,251.28c7.81-2.96,17.44.92,20.47,8.26,2.99,7.24-1.1,16.83-8.73,19.4-9.47,3.2-17.4-.95-20.72-8.35-3.44-7.66.57-16.12,8.98-19.31Z'/%3E%3Cpath%20d='m80.33,319.95c-7.81,2.94-16.77-.62-19.71-7.82-2.88-7.05,1.2-15.65,8.77-18.52,7.41-2.81,16.78,1.01,19.77,8.05,3.01,7.1-.96,15.33-8.83,18.29Z'/%3E%3Cpath%20d='m126.38,234.86c3.09,7.27-.43,15.4-7.92,18.31-7.45,2.89-17.2-.61-19.84-7.8-2.96-8.06.33-15.07,8.61-18.49,7.51-3.1,16.07.74,19.15,7.98Z'/%3E%3Cpath%20d='m123.61,329.05c2.94,6.68-.06,13.72-7.05,16.51-6.9,2.76-15.12-.34-18.1-6.82-2.79-6.07,1.01-14.42,7.69-16.93,6.77-2.54,14.57.69,17.46,7.24Z'/%3E%3Cpath%20d='m166.55,252.96c.24,7.01-6.03,13.73-13.57,13.94-11.41.31-19.57,10.47-19.68,20.03-.09,8.37,7.33,19.45,19.3,19.81,5.08.15,9.52,1.51,13.13,5.2,4.93,5.04,4.55,12.63-1.24,18.43-4.3,4.3-13.58,4.54-18.39.57-3.39-2.8-5.16-6.26-5.68-10.44-1.08-8.61-7.01-13.35-16.64-12.81-7.46.42-13.54-1.38-18.83-6.62-6.16-6.09-6.76-18.3-1.06-24.86,5.04-5.8,11.31-8.22,19.1-8.3,9.37-.09,14.48-4.98,15.02-13.82.63-10.24,9.26-16.25,19.23-13.39,5.19,1.49,9.12,6.66,9.31,12.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='47.5%20220%20132%20132'%3E%3Cpath%20d='m69.55,251.28c7.81-2.96,17.44.92,20.47,8.26,2.99,7.24-1.1,16.83-8.73,19.4-9.47,3.2-17.4-.95-20.72-8.35-3.44-7.66.57-16.12,8.98-19.31Z'/%3E%3Cpath%20d='m80.33,319.95c-7.81,2.94-16.77-.62-19.71-7.82-2.88-7.05,1.2-15.65,8.77-18.52,7.41-2.81,16.78,1.01,19.77,8.05,3.01,7.1-.96,15.33-8.83,18.29Z'/%3E%3Cpath%20d='m126.38,234.86c3.09,7.27-.43,15.4-7.92,18.31-7.45,2.89-17.2-.61-19.84-7.8-2.96-8.06.33-15.07,8.61-18.49,7.51-3.1,16.07.74,19.15,7.98Z'/%3E%3Cpath%20d='m123.61,329.05c2.94,6.68-.06,13.72-7.05,16.51-6.9,2.76-15.12-.34-18.1-6.82-2.79-6.07,1.01-14.42,7.69-16.93,6.77-2.54,14.57.69,17.46,7.24Z'/%3E%3Cpath%20d='m166.55,252.96c.24,7.01-6.03,13.73-13.57,13.94-11.41.31-19.57,10.47-19.68,20.03-.09,8.37,7.33,19.45,19.3,19.81,5.08.15,9.52,1.51,13.13,5.2,4.93,5.04,4.55,12.63-1.24,18.43-4.3,4.3-13.58,4.54-18.39.57-3.39-2.8-5.16-6.26-5.68-10.44-1.08-8.61-7.01-13.35-16.64-12.81-7.46.42-13.54-1.38-18.83-6.62-6.16-6.09-6.76-18.3-1.06-24.86,5.04-5.8,11.31-8.22,19.1-8.3,9.37-.09,14.48-4.98,15.02-13.82.63-10.24,9.26-16.25,19.23-13.39,5.19,1.49,9.12,6.66,9.31,12.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kx-section--dark .kx-stat__num { color: #fff; }
.kx-section--dark .kx-stat__num::before { background-color: var(--kx-mint); }
.kx-stat__label { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.5; color: var(--kx-navy-50); }
.kx-section--dark .kx-stat__label { color: rgba(255, 255, 255, 0.72); }

/* --- FAQ (bloc core Details) ------------------------------------------------ */
.kx-faq__item { border-bottom: 1px solid rgba(18, 1, 45, 0.1); }
.kx-faq__item > summary {
  cursor: pointer; list-style: none; padding: 1.25rem 0;
  font-size: 1.125rem; font-weight: 600; color: var(--kx-navy);
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}
.kx-faq__item > summary::-webkit-details-marker { display: none; }
/* Marqueur = badge rond comme la home (navy pale ferme -> violet plein ouvert) */
.kx-faq__item > summary::after {
  content: "+"; flex: none; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; border-radius: 9999px; line-height: 1;
  font-size: 1.125rem; font-weight: 400;
  background: rgba(18, 1, 45, 0.05); color: var(--kx-navy-50);
  transition: transform 0.3s, background-color 0.3s, color 0.3s;
}
.kx-faq__item[open] > summary::after { transform: rotate(45deg); background: var(--kx-violet); color: #fff; }
/* Reponse : espacement propre + apparition douce (la home anime la hauteur) */
.kx-faq__item > *:not(summary) {
  margin: 0; padding: 0 3rem 1.5rem 0; max-width: 46rem;
  color: var(--kx-navy-50); line-height: 1.6;
}
.kx-faq__item[open] > *:not(summary) { animation: kxReveal 0.35s ease; }
@keyframes kxReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Une seule colonne centree : titre au-dessus, questions dessous (retour Thomas).
   On borne les questions a la meme largeur que l'en-tete pour eviter le texte
   perdu sur toute la largeur de section. */
.kx-section:has(> .kx-faq__item) > .kx-faq__item { max-width: 52rem; margin-inline: auto; }

/* --- Media ------------------------------------------------------------------ */
.kx-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--kx-radius-card); }
/* Image de heros de landing : 4:3 (source unique fournie par Amira/Nico) */
.kx-media--hero img { aspect-ratio: 4 / 3; border-radius: var(--kx-radius-card); }
/* Vignette 16:10. Hors carte (en-tete de famille sur un hub de silo), le ratio
   doit etre porte par l'image : sans lui, height:100% s'effondre a 0. */
.kx-media--card img { aspect-ratio: 16 / 10; }
/* Dans une carte : la vignette deborde le padding et arrondit le haut seulement */
.kx-card .kx-media--card { margin: -1.5rem -1.5rem 1.25rem; }
.kx-card .kx-media--card img { aspect-ratio: 16 / 10; border-radius: var(--kx-radius-card) var(--kx-radius-card) 0 0; }
/* Image qui remplit la hauteur d'une colonne (section 2 col equilibree) */
.kx-media--fill, .kx-media--fill img { height: 100%; }
.kx-media--fill img { aspect-ratio: auto; }
/* Colonnes empilees (WP casse a 781px) : sans colonne a remplir, height:100% ecrase
   l'image a quelques pixels -> on lui rend un ratio. */
@media (max-width: 781px) {
  .kx-media--fill, .kx-media--fill img { height: auto; }
  .kx-media--fill img { aspect-ratio: 4 / 3; }
}

/* --- Citation bloc (fondateur / verbatim) ----------------------------------- */
.kx-quote { font-weight: 300; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.4; color: var(--kx-navy); text-wrap: pretty; margin: 0; }
.kx-section--dark .kx-quote { color: #fff; }
.kx-quote__author { display: block; margin-top: 1.25rem; font-size: 0.95rem; font-weight: 600; color: var(--kx-violet); }
.kx-section--dark .kx-quote__author { color: var(--kx-mint); }
/* Citation experte : carte premium (comme la home) - photo ronde + texte */
.kx-quote-row {
  display: flex; align-items: center; gap: 2rem;
  max-width: 60rem; margin-inline: auto;
  padding: 2.25rem 2.5rem; border-radius: var(--kx-radius-lg); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.08), 0 22px 50px -30px rgba(18, 1, 45, 0.32);
}
.kx-section--dark .kx-quote-row { background: var(--kx-surface-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.kx-quote-avatar { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 9999px; overflow: hidden; margin: 0; box-shadow: 0 0 0 4px rgba(91, 38, 254, 0.12); }
.kx-quote-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kx-quote-text { flex: 1; min-width: 0; }
@media (max-width: 640px) { .kx-quote-row { flex-direction: column; align-items: flex-start; padding: 1.75rem; gap: 1.25rem; } }

/* --- Bande CTA finale (contenu centre) -------------------------------------- */
.kx-cta { max-width: 46rem; margin-inline: auto; text-align: center; }
/* Intro et bouton reellement centres (WP les alignait a gauche) */
.kx-cta .kx-intro { margin-inline: auto; }
.kx-cta .wp-block-buttons { justify-content: center; }

/* CTA final sur fond clair (retour Thomas) : blanc casse + halo violet diffus */
.kx-section:has(.kx-cta) { background: var(--kx-ghost-100) !important; position: relative; overflow: hidden; padding-block: 8rem !important; }
.kx-section:has(.kx-cta)::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(55% 120% at 50% 100%, rgba(91, 38, 254, 0.16), transparent 70%); pointer-events: none; }
.kx-section:has(.kx-cta) > * { position: relative; z-index: 1; }
.kx-section:has(.kx-cta) .kx-h2 { font-size: clamp(2.5rem, 5vw, 3.75rem); }

/* --- Corrections finales (retours Thomas) --- */
/* Intro alignee a gauche sous le titre (WP la centrait) */
.kx-section > .kx-intro { margin-left: 0 !important; margin-right: auto !important; }
/* Boutons : effet "scan" balaye au survol, comme la home */
.kx-btn .wp-block-button__link { position: relative; overflow: hidden; }
.kx-btn .wp-block-button__link::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  transform: translateX(-140%) skewX(-12deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  opacity: 0; pointer-events: none;
}
.kx-btn .wp-block-button__link:hover::after { opacity: 1; animation: kxScan .9s ease; }
@keyframes kxScan { to { transform: translateX(360%) skewX(-12deg); } }
/* Bouton "haut de page" Astra a la charte (etait bleu par defaut) */
#ast-scroll-top {
  background: var(--kx-navy) !important; color: #fff !important; border-radius: 9999px !important;
  width: 2.75rem !important; height: 2.75rem !important; line-height: 2.75rem !important;
  box-shadow: 0 10px 26px -10px rgba(18, 1, 45, 0.55) !important;
  transition: transform .25s, background-color .25s !important;
}
#ast-scroll-top:hover { background: var(--kx-violet) !important; transform: translateY(-3px) !important; }

/* --- Encart "La donnee" (section benefices) : carte sombre, hauteur naturelle */
.kx-databox { align-self: flex-start; }

/* --- Maillage interne (cocons SEO) ------------------------------------------ */
/* .kx-body : bat le padding-left 20px et la marge que le theme force sur les <ul> */
.kx-body .kx-mesh { display: grid; gap: 0.75rem; grid-template-columns: 1fr; margin: 2.5rem 0 0; list-style: none; padding: 0; }
/* Meme specificite (.kx-body) que la regle de base, sinon elle ecrase les colonnes */
@media (min-width: 640px) { .kx-body .kx-mesh { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kx-body .kx-mesh { grid-template-columns: repeat(3, 1fr); } }
/* Les <li> sont les cellules de la grille : on etire le lien pour des cartes
   d'egale hauteur, texte centre verticalement (le theme force sinon un decalage). */
.kx-mesh > li { display: flex; }
.kx-mesh__link {
  display: flex; align-items: center; flex: 1;
  padding: 0.875rem 1.125rem; border-radius: var(--kx-radius-btn);
  background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.1);
  color: var(--kx-navy); text-decoration: none !important; font-weight: 500;
  transition: box-shadow 0.25s, transform 0.25s, color 0.25s;
}
.kx-mesh__link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--kx-violet); color: var(--kx-violet); }
/* Variante fond sombre (sections "On va plus loin" en --dark) */
.kx-section--dark .kx-mesh__link { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: #fff; }
.kx-section--dark .kx-mesh__link:hover { box-shadow: inset 0 0 0 1px var(--kx-mint); color: var(--kx-mint); }

/* --- Chaine de traitement (flow / steps) ------------------------------------ */
.kx-flow { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 3.5rem; }
@media (min-width: 768px) { .kx-flow { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.kx-step { position: relative; padding: 1.5rem; border-radius: var(--kx-radius-card); background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.1); }
.kx-section--dark .kx-step { background: var(--kx-surface-dark); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
/* Gutenberg (is-layout-flow) ajoute un margin-top aux freres 2..n -> cartes
   decalees dans la grille. On remet tout le monde au meme niveau. */
.kx-body .kx-flow > .kx-step { margin-top: 0; }

/* --- Pastilles d'outils / integrations -------------------------------------- */
.kx-pills { display: flex; flex-wrap: wrap; gap: 0.625rem; list-style: none; margin: 0; padding: 0; }
.kx-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.875rem; border-radius: 9999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.1);
  font-size: 0.875rem; font-weight: 500; color: var(--kx-navy);
}

/* --- Bloc avis (CPT Temoignage en prod ; provisionne/masque en dev) --------- */
.kx-stars { color: var(--kx-lime); letter-spacing: 2px; }
.kx-review__who { font-size: 0.85rem; color: var(--kx-navy-50); }
.kx-section--dark .kx-review__who { color: rgba(255, 255, 255, 0.6); }
.kx-avis-hidden, .is-hidden { display: none; }
.kx-note-dev { display: none; }

/* --- Bande CTA en cours de page (rappel, DA signature) ---------------------- */
/* Vraie section navy : rupture visuelle dans le fil de la page, halo violet +
   blob de marque, comme la hero. Se pose en `kx-section kx-cta-band`. */
.kx-cta-band {
  position: relative; overflow: hidden;
  background: var(--kx-navy-deep) !important; color: #fff;
  padding-block: 5rem !important;
}
/* Halo violet (source de lumiere haute, comme la hero) */
.kx-cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 130% at 50% 0%, rgba(91, 38, 254, 0.45), transparent 70%);
}
/* Blob de marque en filigrane, deborde a droite */
.kx-cta-band::after {
  content: ""; position: absolute; z-index: 0; top: 50%; right: -7rem; translate: 0 -50%;
  width: 26rem; aspect-ratio: 369 / 527; opacity: 0.1; pointer-events: none;
  background-color: var(--kx-mint);
  -webkit-mask: var(--kx-blob) center / contain no-repeat;
  mask: var(--kx-blob) center / contain no-repeat;
}
.kx-cta-band > * { position: relative; z-index: 1; }
.kx-cta-band__in { max-width: 46rem; margin-inline: auto; text-align: center; }
.kx-cta-band .kx-eyebrow { background: rgba(255, 255, 255, 0.1); color: var(--kx-mint); }
.kx-cta-band .kx-h2 { margin-top: 1.5rem; font-size: clamp(1.75rem, 3vw, 2.5rem); color: #fff !important; }
.kx-cta-band .kx-h2 strong { color: var(--kx-mint) !important; }
.kx-body .kx-cta-band .kx-intro { margin: 1rem auto 0; max-width: 34rem; color: rgba(255, 255, 255, 0.72); }
.kx-cta-band .wp-block-buttons { margin-top: 2rem; justify-content: center; }
/* Ligne de reassurance : 3 reperes separes par une puce mint */
.kx-body .kx-cta-band__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem;
  margin: 1.75rem 0 0; padding: 0; list-style: none;
  font-family: var(--kx-font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.66);
}
.kx-cta-band__meta li { display: inline-flex; align-items: center; gap: 0.5rem; }
.kx-cta-band__meta li::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 9999px;
  background: var(--kx-mint); flex: none;
}
/* Variante claire (meme structure, lecture douce) : a alterner avec la navy */
.kx-cta-band--light { background: var(--kx-lavender-90) !important; color: var(--kx-navy); }
.kx-cta-band--light::before { background: radial-gradient(58% 130% at 50% 0%, rgba(91, 38, 254, 0.16), transparent 70%); }
.kx-cta-band--light::after { background-color: var(--kx-violet); opacity: 0.12; }
.kx-cta-band--light .kx-eyebrow { background: var(--kx-lavender-soft); color: var(--kx-violet); }
.kx-cta-band--light .kx-h2 { color: var(--kx-navy) !important; }
.kx-cta-band--light .kx-h2 strong { color: var(--kx-violet) !important; }
.kx-body .kx-cta-band--light .kx-intro { color: var(--kx-navy-50); }
.kx-body .kx-cta-band--light .kx-cta-band__meta { color: var(--kx-navy-50); }
.kx-cta-band--light .kx-cta-band__meta li::before { background: var(--kx-violet); }

@media (max-width: 781px) {
  .kx-cta-band { padding-block: 3.5rem !important; }
  .kx-cta-band::after { width: 18rem; right: -8rem; opacity: 0.07; }
  .kx-cta-band--light::after { opacity: 0.1; }
}

/* --- Blob : classe utilitaire posable sur n'importe quelle section ----------- */
/* .kx-blob--l / --r (cote) + .kx-blob--mint / --violet (teinte, mint par defaut) */
[class*="kx-blob--"] { position: relative; overflow: hidden; }
[class*="kx-blob--"] > * { position: relative; z-index: 1; }
[class*="kx-blob--"]::after {
  content: ""; position: absolute; z-index: 0; top: -6rem;
  width: 28rem; aspect-ratio: 369 / 527; opacity: 0.13; pointer-events: none;
  background-color: var(--kx-mint);
  -webkit-mask: var(--kx-blob) center / contain no-repeat;
  mask: var(--kx-blob) center / contain no-repeat;
}
.kx-blob--r::after { right: -9rem; }
.kx-blob--l::after { left: -9rem; transform: scaleX(-1); }
.kx-blob--violet::after { background-color: var(--kx-violet); opacity: 0.11; }
.kx-section--dark[class*="kx-blob--"]::after { opacity: 0.09; }
@media (max-width: 1023px) { [class*="kx-blob--"]::after { display: none; } }

/* --- Prise de RDV Cal.com (shortcode [kx_calcom]) ---------------------------- */
.kx-cal {
  margin-top: 2.5rem; min-height: 40rem;
  border-radius: var(--kx-radius-lg); overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.08), 0 22px 50px -30px rgba(18, 1, 45, 0.25);
}
.kx-cal iframe { display: block; }

/* --- Carte Google Maps (page Local) : remplit la colonne -------------------- */
.kx-map { height: 100%; display: block; margin: 0; }
.kx-map iframe { height: 100%; width: 100%; min-height: 340px; border: 0; border-radius: var(--kx-radius-card); }

/* --- Gabarit Blog / Article ------------------------------------------------- */
/* Colonne de lecture : le gabarit Aurore ne fournit PAS de conteneur, il compte
   sur le theme. Sur un post, on borne donc le contenu a ~44rem (60-80 signes
   par ligne) ; les blocs alignfull (bande CTA) gardent la pleine largeur. */
/* Colonne de lecture, cible : corps a 18px et ~74 signes/ligne (Bringhurst recommande 45-75),
   soit 42rem. Le width:min() sert aussi de gouttiere mobile (le layout pleine
   largeur supprime le padding d'Astra). */
.kx-body.single-post:not(.kx-da-v3) .entry-content > *:not(.alignfull):not(.alignwide) {
  width: min(42rem, 100% - 3rem); max-width: none; margin-inline: auto;
}
.kx-body.single-post:not(.kx-da-v3) .entry-content p:not([class*="kx-"]),
.kx-body.single-post:not(.kx-da-v3) .entry-content li { font-size: 1.125rem; line-height: 1.7; }
/* Chapo : doit dominer le corps (il etait plus petit et plus dense que lui) */
.kx-body.single-post:not(.kx-da-v3) .entry-content > .kx-intro {
  font-size: 1.3125rem; line-height: 1.6; color: var(--kx-navy-50); margin-bottom: 2rem;
}
/* En-tete d'article (rendu par le theme, classes kx-) */
.kx-article-head { margin-bottom: 2rem; }
.kx-article-head .kx-eyebrow { margin-bottom: 1.25rem; }
.kx-body.single-post:not(.kx-da-v3) .kx-article-head .kx-h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
/* Image a la une : deborde la colonne de lecture pour respirer.
   Selecteur a 5 classes pour battre la regle de colonne (44rem) ci-dessus. */
/* Image a la une : ~1.33x la colonne de texte (respiration sans rompre l'axe) */
.kx-body.single-post:not(.kx-da-v3) .entry-content > .kx-media.kx-article-img {
  width: min(56rem, 100% - 3rem); max-width: none; margin: 0 auto 2.5rem; aspect-ratio: 16 / 7;
}
/* Chapo + meta (date / temps de lecture) */
.kx-article-meta {
  font-family: var(--kx-font-mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--kx-navy-50); margin: 1rem 0 0;
}
/* Rythme de lecture + couleur des titres (retour Thomas : trop monochrome).
   H2 = navy surmonte d'un filet violet court ; H3 = violet plein. */
.kx-body.single-post:not(.kx-da-v3) .entry-content h2 {
  position: relative; margin-top: 3.5rem; padding-top: 1rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--kx-navy);
}
.kx-body.single-post:not(.kx-da-v3) .entry-content h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 3px;
  border-radius: 3px; background: linear-gradient(90deg, var(--kx-violet), var(--kx-mint));
}
.kx-body.single-post:not(.kx-da-v3) .entry-content h3 {
  margin-top: 2.25rem; font-size: 1.25rem; font-weight: 600; color: var(--kx-violet);
}
.kx-body.single-post:not(.kx-da-v3) .entry-content h2 + p, .kx-body.single-post:not(.kx-da-v3) .entry-content h3 + p { margin-top: 0.75rem; }
/* Liens dans le corps : visibles, a la charte */
.kx-body.single-post:not(.kx-da-v3) .entry-content p a, .kx-body.single-post:not(.kx-da-v3) .entry-content li a {
  color: var(--kx-violet); text-decoration: underline; text-underline-offset: 0.15em;
  text-decoration-thickness: 1px; text-decoration-color: rgba(91, 38, 254, 0.35);
}
.kx-body.single-post:not(.kx-da-v3) .entry-content p a:hover, .kx-body.single-post:not(.kx-da-v3) .entry-content li a:hover {
  text-decoration-color: var(--kx-violet);
}

/* --- Blocs d'article : padding resserre (le theme imposait 3rem) ------------- */
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-toc,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-callout,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-sources,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-author,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-card {
  padding: 1.25rem 1.5rem !important;
}
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-toc,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-sources,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-author { margin-block: 2rem; }
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-callout { margin-block: 1.75rem; padding: 1.25rem 1.5rem !important; }
/* premiers/derniers enfants : pas de marge qui double le padding du bloc */
.kx-body.single-post:not(.kx-da-v3) .entry-content :where(.kx-toc,.kx-callout,.kx-sources,.kx-author,.kx-card) > *:first-child { margin-top: 0; }
.kx-body.single-post:not(.kx-da-v3) .entry-content :where(.kx-toc,.kx-callout,.kx-sources,.kx-author,.kx-card) > *:last-child { margin-bottom: 0; }

/* --- Listes : puces alignees sur la colonne de texte ------------------------- */
/* Le theme ajoutait un padding-left qui decalait les listes vers la droite. */
.kx-body.single-post:not(.kx-da-v3) .entry-content ul:not([class*="kx-"]),
.kx-body.single-post:not(.kx-da-v3) .entry-content ol:not([class*="kx-"]) {
  padding-left: 1.15em; margin-left: 0;
}
.kx-body.single-post:not(.kx-da-v3) .entry-content ul:not([class*="kx-"]) li,
.kx-body.single-post:not(.kx-da-v3) .entry-content ol:not([class*="kx-"]) li { padding-left: 0.35em; margin-bottom: 0.5rem; }
.kx-body.single-post:not(.kx-da-v3) .entry-content ul:not([class*="kx-"]) li::marker { color: var(--kx-violet); }
.kx-body.single-post:not(.kx-da-v3) .entry-content ol:not([class*="kx-"]) li::marker { color: var(--kx-violet); font-weight: 600; }
/* Checklists kx : la pastille se cale sur le bord de colonne (padding ul a 0) */
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-checklist,
.kx-body.single-post:not(.kx-da-v3) .entry-content .kx-crosslist { padding-left: 0 !important; margin-left: 0; }
/* ⚠️ Astra centre TOUS les petits-enfants de .entry-content (margin-inline:auto).
   Sur une <ul> en flex-column, chaque <li> devient un item centre et retrecit a
   son contenu => effet d'escalier. On annule les marges auto sur les items. */
.kx-body .entry-content ul > li,
.kx-body .entry-content ol > li { margin-left: 0 !important; margin-right: 0 !important; }

/* --- Fin de page : pas de blanc entre le dernier bloc et le footer -----------
   Astra pose margin-bottom:2em sur .entry-content ; comme aucun conteneur au-dessus
   n'a de padding/bordure, cette marge "traverse" (margin collapsing) et ressort
   sous <main> -> bande blanche avant le footer. */
/* Astra gagne avec `.single.ast-page-builder-template .entry-header + .entry-content`
   (4 classes) : on neutralise explicitement. */
.kx-body .entry-content,
.kx-body .entry-header + .entry-content { margin-bottom: 0 !important; }
.kx-body .entry-content > *:last-child { margin-bottom: 0; }
.kx-body .site-main > article { margin-bottom: 0; padding-bottom: 0; }
.kx-body .site-content, .kx-body .ast-container { padding-bottom: 0; }

/* --- Fil d'ariane (rendu par le theme, cf. korbyx_breadcrumb) ---------------- */
.kx-breadcrumb {
  width: min(42rem, 100% - 3rem); margin: 0 auto 1.5rem;
  font-size: 0.8125rem; color: var(--kx-navy-50);
}
.kx-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.kx-breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.kx-breadcrumb li + li::before { content: "/"; color: rgba(18, 1, 45, 0.3); }
.kx-breadcrumb a { color: var(--kx-navy-50); text-decoration: none; }
.kx-breadcrumb a:hover { color: var(--kx-violet); text-decoration: underline; }
.kx-breadcrumb [aria-current] { color: var(--kx-navy); }
.kx-article { max-width: 44rem; margin-inline: auto; }
.kx-article p, .kx-article li { font-size: 1.05rem; line-height: 1.75; }
.kx-callout {
  border-left: 3px solid var(--kx-mint); background: var(--kx-lavender-90);
  padding: 1.25rem 1.5rem; border-radius: 0; margin: 1.75rem 0;
}
.kx-toc { background: var(--kx-ghost-100); box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.08); border-radius: var(--kx-radius-card); padding: 1.25rem 1.5rem; }
.kx-toc a { color: var(--kx-violet); text-decoration: none; }
.kx-toc a:hover { text-decoration: underline; }
.kx-table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.95rem; }
.kx-table th, .kx-table td { border: 1px solid rgba(18, 1, 45, 0.12); padding: 0.75rem 1rem; text-align: left; }
.kx-table th { background: var(--kx-lavender-90); font-weight: 600; }
.kx-sources { font-size: 0.9rem; color: var(--kx-navy-50); }
.kx-sources a { color: var(--kx-violet); }
.kx-author { display: flex; gap: 1rem; align-items: center; background: var(--kx-ghost-100); border-radius: var(--kx-radius-card); padding: 1.25rem 1.5rem; }
.kx-sep { border: 0; border-top: 1px solid rgba(18, 1, 45, 0.1); margin: 2.5rem 0; }

/* --- Motion (korbyx-motion.js) : memes reglages que la home ------------------ */
/* .kx-r est pose par JS (sans JS : rien n'est masque) */
.kx-r { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.kx-r-in { opacity: 1; transform: none; }

/* CTA principal : pulse discret (mint), suspendu au survol pour laisser le glow hover */
@keyframes kxPulse { 0%, 100% { box-shadow: 0 0 0 rgba(26, 236, 222, 0); } 50% { box-shadow: 0 0 22px rgba(26, 236, 222, 0.35); } }
.kx-btn--mint .wp-block-button__link { animation: kxPulse 3.4s ease-in-out infinite; }
.kx-body .kx-btn--mint .wp-block-button__link:hover,
.kx-body .kx-btn--mint .wp-block-button__link:focus { animation: none; }

/* Hero (1re section sombre, classe posee par JS) : halo violet radial comme la home */
.kx-hero { position: relative; overflow: hidden; }
.kx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 120% at 28% 0%, rgba(91, 38, 254, 0.38), transparent 68%);
}
.kx-hero > * { position: relative; z-index: 1; }

/* Demarche : trait de liaison entre les etapes (lecture sequentielle) */
@media (min-width: 768px) {
  .kx-flow .kx-step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -1.25rem; width: 1.25rem; height: 2px;
    background: linear-gradient(90deg, var(--kx-violet-40), var(--kx-mint));
  }
}

/* Souverainete : glyphes qui se dessinent a l'apparition (draw SVG, comme la home ;
   pathLength="100" pose dans le shortcode) */
.kx-r .kx-souv__glyph path { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s cubic-bezier(.16, 1, .3, 1) .15s; }
.kx-r-in .kx-souv__glyph path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .kx-card, .kx-mesh__link, .kx-btn .wp-block-button__link { transition: none; }
  .kx-r { opacity: 1; transform: none; transition: none; }
  .kx-btn--mint .wp-block-button__link { animation: none; }
  .kx-r .kx-souv__glyph path { stroke-dashoffset: 0; transition: none; }
}

/* --- Bloc "Confiance & souverainete" : reprise exacte de la home --- */
.kx-souv__grid { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 640px) { .kx-souv__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kx-souv__grid { grid-template-columns: repeat(4, 1fr); } }
/* Survol = celui de la home : le wrapper (.kx-souv__item) porte le hover, le halo
   est un FRERE de la carte (le transform de la carte ne l'aspire pas au-dessus). */
.kx-souv__item { position: relative; }
.kx-souv__card {
  position: relative; height: 100%; display: flex; flex-direction: column; padding: 1.5rem;
  border-radius: var(--kx-radius-card); background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.1), 0 2px 14px -8px rgba(18, 1, 45, 0.15);
  transition: transform .3s, box-shadow .3s;
}
.kx-souv__item:hover .kx-souv__card { transform: translateY(-6px); box-shadow: 0 28px 56px -28px rgba(18, 1, 45, 0.28); }
.kx-souv__halo { position: absolute; inset: -0.5rem; z-index: -1; border-radius: 1.4rem; opacity: 0; filter: blur(30px); transition: opacity .5s; }
.kx-souv__item:hover .kx-souv__halo { opacity: 1; }
.kx-souv__med { position: relative; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; margin-bottom: 1.5rem; }
.kx-souv__med::before { content: ""; position: absolute; inset: 0; border-radius: 1rem; }
.kx-souv__orbit { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; animation: kxSpin 11s linear infinite; }
.kx-souv__glyph { position: relative; width: 1.5rem; height: 1.5rem; color: var(--kx-navy); transition: transform .3s; }
.kx-souv__item:hover .kx-souv__glyph { transform: scale(1.12); }
.kx-souv__num { font-family: var(--kx-font-mono, "JetBrains Mono", monospace); font-size: 0.8rem; letter-spacing: 0.2em; color: rgba(18, 1, 45, 0.4); }
.kx-souv__title { margin: 0.4rem 0 0.5rem; font-size: 1.125rem; font-weight: 600; color: var(--kx-navy); }
/* flex:1 -> le texte occupe la hauteur restante et pousse le filet en bas
   (aligne comme la home) ; margin:0 en .kx-body bat .entry-content p{1.6em}. */
.kx-body .kx-souv__text { flex: 1; font-size: 0.9rem; line-height: 1.55; color: var(--kx-navy-50); margin: 0; }
.kx-souv__bar { margin-top: 1.5rem; width: 2.5rem; height: 2px; border-radius: 2px; }
@keyframes kxSpin { to { transform: rotate(360deg); } }
.kx-souv--violet .kx-souv__med::before { background: linear-gradient(135deg, rgba(91, 38, 254, 0.2), transparent); box-shadow: inset 0 0 0 1px rgba(91, 38, 254, 0.25); }
.kx-souv--violet .kx-souv__orbit { color: var(--kx-violet); } .kx-souv--violet .kx-souv__bar { background: var(--kx-violet); } .kx-souv--violet .kx-souv__halo { background: rgba(91, 38, 254, 0.28); }
.kx-souv--mint .kx-souv__med::before { background: linear-gradient(135deg, rgba(26, 236, 222, 0.28), transparent); box-shadow: inset 0 0 0 1px rgba(26, 236, 222, 0.4); }
.kx-souv--mint .kx-souv__orbit { color: var(--kx-mint); } .kx-souv--mint .kx-souv__bar { background: var(--kx-mint); } .kx-souv--mint .kx-souv__halo { background: rgba(26, 236, 222, 0.28); }
.kx-souv--lime .kx-souv__med::before { background: linear-gradient(135deg, rgba(239, 255, 0, 0.32), transparent); box-shadow: inset 0 0 0 1px rgba(239, 255, 0, 0.5); }
.kx-souv--lime .kx-souv__orbit { color: #c8d400; } .kx-souv--lime .kx-souv__bar { background: var(--kx-lime); } .kx-souv--lime .kx-souv__halo { background: rgba(239, 255, 0, 0.24); }
.kx-souv--navy .kx-souv__med::before { background: linear-gradient(135deg, rgba(18, 1, 45, 0.1), transparent); box-shadow: inset 0 0 0 1px rgba(18, 1, 45, 0.2); }
.kx-souv--navy .kx-souv__orbit { color: var(--kx-navy); } .kx-souv--navy .kx-souv__bar { background: var(--kx-navy); } .kx-souv--navy .kx-souv__halo { background: rgba(18, 1, 45, 0.12); }
@media (prefers-reduced-motion: reduce) { .kx-souv__orbit { animation: none; } }

/* --- Blob de marque (motif du logo) en decor lateral, comme la home --------- */
/* Contour mint tres pale, derriere le contenu, cadre au coin haut-droit. */
/* Alignement : le contenu passe par .kx-container (comme le header/footer et les
   autres sections) ; on neutralise le padding full-bleed qui decalait le bloc. */
.kx-souv { position: relative; overflow: hidden; }
.kx-souv > * { position: relative; z-index: 1; }
/* En-tete calquee sur la home (gap plus large, intro alignee au bas du titre :
   la marge basse des <p> du theme la decalait) */
.kx-souv .kx-head .kx-intro { margin-bottom: 0; }
@media (min-width: 768px) { .kx-souv .kx-head { column-gap: 3rem; } .kx-souv .kx-head .kx-intro { font-size: 1.0625rem; max-width: 30rem; } }
.kx-souv::after {
  content: ""; position: absolute; z-index: 0; top: -7rem; right: -8rem;
  width: 30rem; aspect-ratio: 369 / 527; opacity: 0.16; pointer-events: none;
  background-color: var(--kx-mint);
  -webkit-mask: var(--kx-blob) center / contain no-repeat;
  mask: var(--kx-blob) center / contain no-repeat;
}

/* FAQ : blob violet pale a gauche (miroir) */
.kx-section:has(> .kx-faq__item) { position: relative; overflow: hidden; }
.kx-section:has(> .kx-faq__item) > * { position: relative; z-index: 1; }
.kx-section:has(> .kx-faq__item)::after {
  content: ""; position: absolute; z-index: 0; top: -6rem; left: -9rem;
  width: 28rem; aspect-ratio: 369 / 527; opacity: 0.12; pointer-events: none;
  background-color: var(--kx-violet);
  -webkit-mask: var(--kx-blob) center / contain no-repeat;
  mask: var(--kx-blob) center / contain no-repeat;
  transform: scaleX(-1);
}

/* En bref (seule section a encart "La donnee") : blob mint a droite */
.kx-section:has(.kx-databox) { position: relative; overflow: hidden; }
.kx-section:has(.kx-databox) > * { position: relative; z-index: 1; }
.kx-section:has(.kx-databox)::after {
  content: ""; position: absolute; z-index: 0; bottom: -8rem; right: -9rem;
  width: 28rem; aspect-ratio: 369 / 527; opacity: 0.14; pointer-events: none;
  background-color: var(--kx-mint);
  -webkit-mask: var(--kx-blob) center / contain no-repeat;
  mask: var(--kx-blob) center / contain no-repeat;
}

@media (max-width: 1023px) {
  .kx-souv::after,
  .kx-section:has(> .kx-faq__item)::after,
  .kx-section:has(.kx-databox)::after { display: none; }
}

/* Photos en bandeau / en colonne (sections editoriales) */
.kx-media--band { margin: 2.5rem 0 0; border-radius: var(--kx-radius-card); overflow: hidden; aspect-ratio: 16 / 6; box-shadow: 0 18px 44px -24px rgba(18, 1, 45, 0.35); }
.kx-media--band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-media--col { margin: 1.75rem 0 0; border-radius: var(--kx-radius-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 14px 34px -20px rgba(18, 1, 45, 0.3); }
.kx-media--col img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .kx-media--band { aspect-ratio: 16 / 10; } }

/* --- Calculateur de potentiel (shortcode [kx_roi]) --------------------------- */
.kx-calc {
  display: grid; gap: 1.5rem; margin: 2rem 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .kx-calc { grid-template-columns: 1.05fr 0.95fr; align-items: start; } }
.kx-calc__form { display: grid; gap: 1.125rem; }
.kx-calc__field { display: grid; gap: 0.4rem; }
.kx-calc__field label { font-size: 0.875rem; font-weight: 500; color: var(--kx-navy); }
.kx-calc__field label span { color: var(--kx-navy-50); font-weight: 400; }
.kx-calc__field input,
.kx-calc__field select {
  width: 100%; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; color: var(--kx-navy);
  background: #fff; border: 1px solid var(--kx-lavender); border-radius: var(--kx-radius-btn);
  appearance: none; transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.kx-calc__field select { background-image: linear-gradient(45deg, transparent 50%, var(--kx-violet) 50%), linear-gradient(135deg, var(--kx-violet) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - 0.8rem) 1.25rem; background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; }
.kx-calc__field input:focus-visible,
.kx-calc__field select:focus-visible { outline: none; border-color: var(--kx-violet); box-shadow: 0 0 0 3px rgba(91, 38, 254, 0.18); }
/* Carte resultat : meme langage que .kx-card--dark, accent mint sur les chiffres */
.kx-calc__result {
  background: var(--kx-surface-dark); color: #fff; border-radius: var(--kx-radius-lg);
  padding: 1.75rem; box-shadow: 0 22px 50px -28px rgba(18, 1, 45, 0.55);
}
.kx-calc__result .kx-eyebrow { color: var(--kx-mint); margin-bottom: 1rem; }
.kx-calc__num { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; line-height: 1.1; margin: 0; color: var(--kx-mint); font-variant-numeric: tabular-nums; }
.kx-calc__num--sec { color: var(--kx-lime); margin-top: 1.25rem; }
.kx-calc__label { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.72); margin: 0.35rem 0 0; }
.kx-calc__note { font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* --- Plusieurs cartes dans une meme colonne ---------------------------------
   .kx-card porte height:100% pour qu'une carte seule remplisse sa colonne et
   s'aligne avec les colonnes voisines. Des qu'on en empile plusieurs, ce 100 %
   donne a CHAQUE carte la hauteur totale de la colonne : elles se superposent
   et une seule reste lisible. On leur rend leur hauteur naturelle + un ecart. */
.wp-block-column > .kx-card:not(:only-of-type) { height: auto; }
.wp-block-column > .kx-card + .kx-card,
.wp-block-column > .wp-block-group + .kx-card { margin-top: 1.25rem; }

/* --- Cartes "secteurs" facon page d'accueil (.kx-sectors > .kx-sector) -------
   Reprend le rail Secteurs de la HP : glyphe deux cercles (le second accentue
   et hachure), puis un encart interne arrondi cale en bas avec titre + texte.
   Le glyphe est dessine en CSS (::before / ::after) : aucun SVG dans le contenu. */
.kx-sectors {
  display: grid; gap: 1.25rem; margin-top: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
.kx-sector {
  position: relative; display: flex; flex-direction: column; min-height: 21rem;
  padding: 5.75rem 1rem 1rem; background: #fff;
  border: 1px solid rgba(18, 1, 45, 0.1); border-radius: 1.5rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.kx-sector::before,
.kx-sector::after { content: ""; position: absolute; top: 1.85rem; width: 3.05rem; height: 3.05rem; border-radius: 50%; }
.kx-sector::before { left: 1.85rem; background: var(--kx-navy); }
.kx-sector::after {
  left: 3.2rem; background-color: var(--kx-mint);
  background-image: repeating-linear-gradient(45deg, rgba(18, 1, 45, 0.55) 0 2px, transparent 2px 6px);
}
.kx-sector:nth-child(4n + 2)::after { background-color: var(--kx-lime); }
.kx-sector:nth-child(4n + 3)::after { background-color: var(--kx-violet); }
.kx-sector:nth-child(4n + 4)::after { background-color: var(--kx-lavender); }
.kx-sector:hover { transform: translateY(-4px); border-color: rgba(91, 38, 254, 0.35); box-shadow: 0 26px 56px -32px rgba(18, 1, 45, 0.45); }
.kx-sector__body { margin-top: auto; padding: 1.25rem; background: var(--kx-ghost-100); border-radius: 1rem; }
.kx-body .kx-sector__body > :first-child { margin-top: 0; }
.kx-body .kx-sector__body > :last-child { margin-bottom: 0; }
.kx-body .kx-sector__body h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--kx-navy); margin: 0; }
.kx-body .kx-sector__body p { font-size: 0.875rem; line-height: 1.6; color: var(--kx-navy-50); margin: 0.5rem 0 0; }
.kx-body .kx-sector__body .kx-eyebrow { margin: 0 0 0.6rem; }
/* Carte mise en avant (une seule par grille, comme sur l'accueil) */
.kx-sector--on { background: var(--kx-violet); border-color: var(--kx-violet); box-shadow: 0 30px 70px -30px rgba(91, 38, 254, 0.5); }
.kx-sector--on::before { background: #fff; }
.kx-sector--on::after { background-color: var(--kx-mint); background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 6px); }
.kx-sector--on .kx-sector__body { background: rgba(255, 255, 255, 0.12); }
.kx-body .kx-sector--on .kx-sector__body h3 { color: #fff; }
.kx-body .kx-sector--on .kx-sector__body p { color: rgba(255, 255, 255, 0.8); }
.kx-body .kx-sector--on .kx-sector__body .kx-eyebrow { color: var(--kx-mint); }
/* Sur fond sombre */
.kx-section--dark .kx-sector { background: var(--kx-surface-dark); border-color: rgba(255, 255, 255, 0.12); }
.kx-section--dark .kx-sector::before { background: #fff; }
.kx-section--dark .kx-sector__body { background: rgba(255, 255, 255, 0.06); }
.kx-body .kx-section--dark .kx-sector__body h3 { color: #fff; }
.kx-body .kx-section--dark .kx-sector__body p { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 640px) { .kx-sectors { grid-template-columns: 1fr; } .kx-sector { min-height: 0; } }

/* --- Garde-fou sur les photos de colonne ------------------------------------
   .kx-media--fill laisse l'image prendre son ratio naturel quand la colonne ne
   s'etire pas (verticalAlignment:center). Une photo au format portrait fait
   alors exploser la rangee : 800 px de haut a cote de quatre lignes de texte.
   On borne la hauteur ; object-fit:cover recadre proprement. */
.kx-media--fill img { max-height: 30rem; object-fit: cover; }
@media (max-width: 781px) { .kx-media--fill img { max-height: 22rem; } }

/* --- Immunite aux reglages de l'editeur -------------------------------------
   Quand on choisit une variation de taille (miniature, moyenne, grande) ou qu'on
   redimensionne une image dans Gutenberg, WordPress pose des attributs width et
   height inline, parfois la classe .is-resized. Nos medias sont pilotes par la
   grille : on neutralise ces valeurs pour eviter le decalage. */
.kx-media,
.kx-media.is-resized,
.kx-quote-avatar.is-resized { width: 100%; max-width: 100%; }
.kx-media img,
.kx-media.is-resized img { width: 100% !important; max-width: 100%; }
.kx-quote-avatar,
.kx-quote-avatar img { width: 120px !important; max-width: 120px; height: 120px !important; }
/* L'image a la une reste geree par le theme, on ne touche a rien la-dessus. */

/* ============================================================================
   Retours Thomas du 2026-08-25, sur /services/cabinet-conseil-ia/.
   Trois trous du CSS, qui touchaient TOUTES les pages de service, pas seulement
   celle-ci : le rythme des fonds place les sections au fil de la page, donc une
   FAQ ou une liste ordonnee peut tomber sur navy comme sur clair.
   ========================================================================== */

/* --- 1. FAQ sur fond sombre --------------------------------------------------
   .kx-faq__item posait un texte navy et une reponse navy-50 : invisible des que
   la section tombe en --dark. On repasse tout en clair, badge compris. */
.kx-section--dark .kx-faq__item { border-bottom-color: rgba(255, 255, 255, 0.14); }
.kx-section--dark .kx-faq__item > summary { color: #fff; }
.kx-section--dark .kx-faq__item > summary:hover { color: var(--kx-mint); }
.kx-section--dark .kx-faq__item > *:not(summary) { color: rgba(255, 255, 255, 0.74); }
.kx-section--dark .kx-faq__item > summary::after {
  background: rgba(255, 255, 255, 0.1); color: #fff; }
.kx-section--dark .kx-faq__item[open] > summary::after {
  background: var(--kx-mint); color: var(--kx-navy); }

/* --- 2. Liens dans le corps des PAGES ----------------------------------------
   La regle existante ne visait que .kx-body.single-post:not(.kx-da-v3) : sur une page, les liens
   retombaient sur le bleu souligne par defaut du navigateur. On applique la meme
   charte partout, avec une variante lisible sur fond sombre. */
.kx-body .kx-section p a:not(.wp-block-button__link):not(.kx-mesh__link),
.kx-body .kx-section li a:not(.wp-block-button__link):not(.kx-mesh__link),
.kx-body .kx-section .kx-faq__item a,
.kx-body .kx-section .kx-callout a {
  color: var(--kx-violet); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(var(--kx-violet), var(--kx-violet));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 0.08em; transition: background-size 0.25s, color 0.2s; }
.kx-body .kx-section p a:not(.wp-block-button__link):not(.kx-mesh__link):hover,
.kx-body .kx-section li a:not(.wp-block-button__link):not(.kx-mesh__link):hover,
.kx-body .kx-section .kx-faq__item a:hover,
.kx-body .kx-section .kx-callout a:hover {
  background-size: 100% 2px; }
/* Cartes claires posees sur une section sombre : le violet reste lisible. */
.kx-body .kx-section--dark p a:not(.wp-block-button__link):not(.kx-mesh__link),
.kx-body .kx-section--dark li a:not(.wp-block-button__link):not(.kx-mesh__link),
.kx-body .kx-section--dark .kx-faq__item a {
  color: var(--kx-mint);
  background-image: linear-gradient(var(--kx-mint), var(--kx-mint)); }
.kx-body .kx-section--dark .kx-card--elevated a:not(.wp-block-button__link) {
  color: var(--kx-violet);
  background-image: linear-gradient(var(--kx-violet), var(--kx-violet)); }

/* --- 3. Liste ordonnee : une vraie suite d'etapes ----------------------------
   Retour Thomas : "des listes trop simples". On garde le <ul> (les guides comptent
   les listes) mais on lui donne la lecture d'un parcours : pastille numerotee plus
   grande, filet vertical entre les etapes, respiration. */
.kx-checklist--ordered { gap: 0; counter-reset: kx; }
.kx-checklist--ordered li {
  padding-left: 3.5rem; padding-block: 0.9rem 1.1rem; }
.kx-checklist--ordered li:not(:last-child) {
  border-bottom: 1px solid rgba(18, 1, 45, 0.08); }
.kx-checklist--ordered li::before {
  counter-increment: kx; content: counter(kx); background-image: none;
  top: 0.75rem; width: 2.25rem; height: 2.25rem;
  background: var(--kx-violet); color: #fff;
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0; }
/* Le filet qui relie les pastilles, comme un jalonnement. */
.kx-checklist--ordered li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.09rem; top: 3rem; bottom: -0.4rem;
  width: 2px; background: linear-gradient(180deg, var(--kx-violet-40), rgba(26, 236, 222, 0.35)); }
.kx-checklist--ordered li { position: relative; }
/* Variante sombre : pastille mint, texte clair, filets attenues. */
.kx-section--dark .kx-checklist--ordered li { border-bottom-color: rgba(255, 255, 255, 0.12); }
.kx-section--dark .kx-checklist--ordered li::before {
  background: var(--kx-mint); color: var(--kx-navy); }
.kx-section--dark .kx-checklist--ordered li::after {
  background: linear-gradient(180deg, rgba(26, 236, 222, 0.55), rgba(255, 255, 255, 0.1)); }
/* Les checklists a puces heritent aussi de la lisibilite sur fond sombre. */
.kx-section--dark .kx-checklist li, .kx-section--dark .kx-crosslist li { color: rgba(255, 255, 255, 0.82); }

/* --- 4. Bandeau de checklist sous une section a deux colonnes ----------------
   Quand une section "texte" porte une photo, la colonne de texte est bien plus
   haute que l'image : la rangee se desequilibre. Le generateur sort desormais la
   checklist SOUS les deux colonnes ; on la met alors sur deux colonnes pour
   qu'elle occupe la largeur sans faire une longue file. */
/* Corps de texte pose SOUS les deux colonnes d'une section a photo.
   Mesure au DOM le 2026-08-25 : .kx-media--fill plafonne l'image a 30rem (480 px), alors
   que la colonne de texte d'en face montait a 1 626 px sur /services/creation-agent-ia/.
   La photo flottait en haut et laissait 1 146 px de vide. Le generateur ne garde donc plus
   en colonne que l'accroche (chapo + premier paragraphe), et le corps descend ici, sur une
   largeur de lecture confortable plutot que sur toute la laize. */
.kx-textbas { margin-top: 2.5rem; }
.kx-textbas > * + * { margin-top: 1.25rem; }
@media (min-width: 782px) {
  /* Retour Thomas du 2026-08-25 : deux pavés de 992 px de large, et DECALES de 200 px
     par rapport a la photo au-dessus et a la checklist en dessous. La cause etait la
     combinaison d'un max-width maison et du `margin-inline: auto` que WordPress applique
     dans un groupe `layout: constrained` : le paragraphe se centrait au lieu de s'aligner.
     Le groupe passe en `layout: default` cote generateur, et le corps se lit ici sur DEUX
     colonnes, comme la checklist et les sous-blocs h3 juste a cote. Meme grille partout. */
  .kx-textbas { display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 3rem; row-gap: 1.5rem; align-items: start; }
  .kx-textbas > * { margin-top: 0 !important; max-width: none; margin-left: 0; margin-right: 0; }
  /* Checklist, callout, pills et grille de sous-blocs occupent les deux colonnes :
     ils ont deja leur propre mise en colonnes. */
  .kx-textbas > :not(p) { grid-column: 1 / -1; }
}

/* Les sous-blocs h3 du corps, deux par rangee : empiles, ils rallongeraient la section
   d'autant que ce qu'on vient de lui retirer. */
.kx-h3-grid { margin-top: 2.25rem; }
.kx-textbas .kx-h3-grid, .kx-textbas .kx-checklist--sous { margin-top: 0.75rem; }
.kx-h3-item + .kx-h3-item { margin-top: 2rem; }
@media (min-width: 782px) {
  .kx-h3-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 2.25rem; }
  .kx-h3-item + .kx-h3-item { margin-top: 0; }
}

.kx-checklist--sous { margin-top: 2.25rem; }
@media (min-width: 782px) {
  .kx-checklist--sous { display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 3rem; row-gap: 1.15rem; }
  /* row-gap: 0 ne vaut que pour la variante ordonnee, dont les items portent deja
     un filet de separation. Sur une liste a puces, les items se touchaient. */
  .kx-checklist--sous.kx-checklist--ordered { row-gap: 0; }
  .kx-checklist--sous.kx-checklist--ordered li:nth-last-child(2) { border-bottom: none; }
  .kx-checklist--sous.kx-checklist--ordered li:nth-last-child(2)::after { display: none; }
}

/* --- 5. Un titre de carte qui pointe ailleurs reste un TITRE ------------------
   Retour Thomas du 2026-08-25 : sur une section navy, le titre-lien sortait en
   violet #5B26FE souligne alors que les titres voisins sont blancs. Illisible sur
   le fond sombre, et le souligne alourdissait la grille de cartes. Un titre de
   carte herite donc de la couleur du titre, et l'affordance passe par le survol. */
.kx-body .kx-card :where(h2, h3, h4) a,
.kx-body .kx-card :where(h2, h3, h4) a:visited {
  color: inherit; font-weight: inherit; text-decoration: none;
  background-image: none; padding-bottom: 0; transition: color 0.2s; }
.kx-body .kx-card :where(h2, h3, h4) a:hover { color: var(--kx-violet); }
.kx-body .kx-section--dark .kx-card :where(h2, h3, h4) a:hover,
.kx-body .kx-card--dark :where(h2, h3, h4) a:hover { color: var(--kx-mint); }

/* --- 6. En-tete de tableau sur une section sombre ----------------------------
   .kx-table th porte son propre fond lavande, mais heritait du color:#fff de la
   section : blanc sur lavande, donc illisible. Les filets, eux, etaient dessines
   en navy translucide et disparaissaient sur le navy. */
.kx-body .kx-table th { color: var(--kx-navy); }
.kx-section--dark .kx-table th, .kx-section--dark .kx-table td {
  border-color: rgba(255, 255, 255, 0.18); }
.kx-section--dark .kx-table td { color: rgba(255, 255, 255, 0.86); }