/* =========================================================================
   KARIBOOK BETA — PAGES ÉDITORIALES
   =========================================================================

   POURQUOI CE FICHIER

   Les pages « Comment ça marche », « À propos », « FAQ », « Tarifs » et les
   guides ont été semées par l'extension avec un balisage propre et
   cohérent : `.kb-generic-hero`, `.kb-content-grid`, `.kb-faq-stack`,
   `.kb-offer-grid`, et tout un système `.kb-how-v2-*` pour le parcours.

   Le thème bêta n'en habillait presque aucun. Ces pages s'affichaient donc
   en texte brut empilé — d'où l'impression de pages inachevées. Le contenu
   n'était pas en cause : il ne manquait que la feuille de style.

   Ce fichier ne modifie AUCUN contenu. Il habille des classes qui existent
   déjà dans les pages, ce qui a deux avantages : les textes restent
   modifiables dans WordPress sans rien casser, et une page réécrite demain
   sera habillée sans intervention.
   ========================================================================= */

/* =========================================================================
   1. CHAPEAU DE PAGE
   =========================================================================
   Le contenu de ces pages commence par son propre chapeau. Le gabarit du
   thème en ajoutait un second au-dessus : deux titres se succédaient sans
   hiérarchie. Le gabarit n'affiche plus que le fil d'Ariane quand la page
   apporte son chapeau (voir page.php) ; celui-ci est habillé ici.
   ========================================================================= */

.kb-generic-hero {
  padding: var(--kb-space-7) 0 var(--kb-space-6);
  max-width: 74ch;
}

.kb-generic-hero .eyebrow {
  display: inline-block;
  margin: 0 0 var(--kb-space-3);
  padding: 5px 14px;
  border-radius: var(--kb-radius-pill);
  background: rgba(18, 167, 154, .12);
  color: var(--kb-turquoise-dark);
  font-family: var(--kb-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.kb-generic-hero h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  margin-bottom: var(--kb-space-4);
  text-wrap: balance;
}

.kb-generic-hero > p:not(.eyebrow) {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--kb-ink-mid);
  margin: 0;
  max-width: 66ch;
}

/* =========================================================================
   2. GRILLE ÉDITORIALE
   =========================================================================
   Le thème stylait déjà `.kb-content-grid`, mais pour des titres `h3` —
   or ces pages écrivent des `h2`. Les titres restaient donc à la taille
   par défaut, énormes dans une carte. Et `article:last-child` passait la
   dernière carte en pleine largeur : sur une page à six cartes, la
   dernière s'étalait sans raison.
   ========================================================================= */

.kb-content-grid {
  gap: var(--kb-space-5);
  margin-bottom: var(--kb-space-6);
}

.kb-content-grid article {
  padding: var(--kb-space-5) var(--kb-space-5) var(--kb-space-5) var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  box-shadow: var(--kb-shadow-card);
  transition: box-shadow var(--kb-transition), transform var(--kb-transition);
}

.kb-content-grid article:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-2px); }

.kb-content-grid article h2 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin: 0 0 var(--kb-space-2);
}

.kb-content-grid article h3 { font-size: 1.05rem; margin-bottom: var(--kb-space-2); }

.kb-content-grid article p {
  color: var(--kb-ink-mid);
  font-size: 0.95rem;
  line-height: 1.62;
  margin: 0 0 var(--kb-space-2);
}

.kb-content-grid article p:last-child { margin-bottom: 0; }

.kb-content-grid article a {
  color: var(--kb-turquoise-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-content-grid article a:hover { color: var(--kb-ink); }

@media (min-width: 900px) {
  .kb-content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* La dernière carte redevient une carte comme les autres. */
  .kb-content-grid article:last-child { grid-column: auto; }
}

@media (min-width: 700px) and (max-width: 899px) {
  .kb-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-content-grid article:last-child { grid-column: auto; }
}

/* La carte « guide recommandé » se distingue du reste de la grille. */
.kb-guide-inline-card {
  background: linear-gradient(140deg, var(--kb-brand-surface) 0%, var(--kb-navy-500) 100%) !important;
  border-color: transparent !important;
  color: var(--kb-on-dark);
}

.kb-guide-inline-card::before { display: none; }
.kb-guide-inline-card h2,
.kb-guide-inline-card h3 { color: var(--kb-on-dark); }
.kb-guide-inline-card p { color: rgba(255, 255, 255, .82) !important; }
.kb-guide-inline-card a { color: var(--kb-on-dark) !important; }

/* =========================================================================
   3. OFFRES
   ========================================================================= */

.kb-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--kb-space-5);
  margin-bottom: var(--kb-space-6);
}

.kb-offer-card {
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  border: 1px solid var(--kb-line);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-offer-step {
  display: inline-block;
  margin-bottom: var(--kb-space-3);
  padding: 4px 12px;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-brand-surface);
  color: var(--kb-on-dark);
  font-family: var(--kb-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .07em;
}

.kb-offer-card h3 { font-size: 1.9rem; margin-bottom: var(--kb-space-2); }
.kb-offer-card > p { color: var(--kb-ink-mid); line-height: 1.6; margin: 0 0 var(--kb-space-4); }

.kb-offer-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.kb-offer-card li {
  position: relative;
  padding-left: 26px;
  color: var(--kb-ink-mid);
  font-size: 0.94rem;
  line-height: 1.5;
}

/* Une coche dessinée en CSS : pas d'image à charger, et elle prend la
   couleur de la marque partout où la liste est reprise. */
.kb-offer-card li::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--kb-turquoise-dark);
  border-bottom: 2px solid var(--kb-turquoise-dark);
  transform: rotate(45deg);
}

/* =========================================================================
   4. ACCORDÉONS DE FOIRE AUX QUESTIONS
   =========================================================================
   Même habillage que la foire aux questions du thème : une question posée
   sur une page semée et une question posée par le gabarit doivent se
   ressembler.
   ========================================================================= */

.kb-faq-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kb-space-2);
  max-width: 860px;
  margin-bottom: var(--kb-space-6);
}

.kb-faq-item {
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface);
  overflow: hidden;
  transition: border-color var(--kb-transition), box-shadow var(--kb-transition);
}

.kb-faq-item[open] { border-color: var(--kb-line-strong); box-shadow: var(--kb-shadow-card); }

.kb-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-4);
  padding: var(--kb-space-4) var(--kb-space-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--kb-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--kb-ink);
  transition: background var(--kb-transition), color var(--kb-transition);
}

.kb-faq-item > summary::-webkit-details-marker { display: none; }
.kb-faq-item > summary::marker { content: ""; }
.kb-faq-item > summary:hover { background: var(--kb-surface-2); color: var(--kb-turquoise-dark); }

/* Le chevron est dessiné en CSS : le contenu semé ne contient aucune
   icône, et on ne va pas demander à l'administrateur d'en coller une. */
.kb-faq-item > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--kb-turquoise-dark);
  border-bottom: 2px solid var(--kb-turquoise-dark);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--kb-transition);
}

.kb-faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.kb-faq-item > p,
.kb-faq-item > div {
  margin: 0;
  padding: 0 var(--kb-space-5) var(--kb-space-5);
  color: var(--kb-ink-mid);
  line-height: 1.65;
  max-width: 68ch;
}

.kb-faq-item a { color: var(--kb-turquoise-dark); font-weight: 700; }

/* =========================================================================
   5. PARCOURS « COMMENT ÇA MARCHE »
   =========================================================================
   Cette page a son propre système de classes (`kb-how-v2-*`), plus riche
   que le reste : étapes numérotées, statistiques, comparatif, appel à
   l'action. La numérotation n'est pas décorative — les étapes SONT une
   séquence, et l'ordre porte une information que le lecteur doit suivre.
   ========================================================================= */

.kb-how-v2-page { display: flex; flex-direction: column; gap: var(--kb-space-8); }

.kb-how-v2-section { scroll-margin-top: 90px; }

.kb-how-v2-head { max-width: 70ch; margin-bottom: var(--kb-space-6); }

.kb-how-v2-badge {
  display: inline-block;
  margin-bottom: var(--kb-space-3);
  padding: 5px 14px;
  border-radius: var(--kb-radius-pill);
  background: rgba(18, 167, 154, .12);
  color: var(--kb-turquoise-dark);
  font-family: var(--kb-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.kb-how-v2-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: var(--kb-space-3); text-wrap: balance; }
.kb-how-v2-head p { color: var(--kb-ink-mid); font-size: 1rem; line-height: 1.65; margin: 0; }

/* --- Bloc « particuliers » : visuel + étapes --------------------------- */

.kb-how-v2-particulars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-space-6);
  align-items: start;
}

@media (min-width: 980px) {
  .kb-how-v2-particulars { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

.kb-how-v2-visual-card {
  border-radius: var(--kb-radius-lg);
  overflow: hidden;
  background: linear-gradient(140deg, var(--kb-brand-surface) 0%, var(--kb-navy-500) 100%);
  box-shadow: var(--kb-shadow-card-hover);
}

.kb-how-v2-visual-card img { width: 100%; height: auto; display: block; }

.kb-how-v2-steps { display: flex; flex-direction: column; gap: var(--kb-space-4); }

/* LA PASTILLE EST SORTIE DU FLUX, ET C'EST DÉLIBÉRÉ.
   En grille, elle imposait sa hauteur (46 px) à la première rangée : le
   titre flottait en haut d'une case trop grande et se détachait de son
   paragraphe. Sortie du flux, elle ne contraint plus rien — et l'étape
   supporte n'importe quel nombre de paragraphes, ce qu'une grille à
   rangées fixes n'aurait pas permis. */
.kb-how-v2-step {
  position: relative;
  padding: var(--kb-space-5) var(--kb-space-5) var(--kb-space-5) calc(46px + var(--kb-space-5) + var(--kb-space-4));
  border-radius: var(--kb-radius-md);
  border: 1px solid var(--kb-line);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

/* Le trait qui relie les étapes : c'est lui qui dit « il y a un ordre ».
   Il s'arrête à la dernière, qui ne mène nulle part. */
.kb-how-v2-step::after {
  content: "";
  position: absolute;
  left: calc(var(--kb-space-5) + 22px);
  top: 100%;
  width: 2px;
  height: var(--kb-space-4);
  background: var(--kb-surface-4);
}

.kb-how-v2-step:last-child::after { display: none; }

.kb-how-v2-step-icon,
.kb-how-v2-step-number {
  position: absolute;
  left: var(--kb-space-5);
  top: var(--kb-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--kb-turquoise-dark) 0%, var(--kb-lagoon) 100%);
  color: var(--kb-on-dark);
  font-family: var(--kb-font-display);
  font-weight: 800;
  font-size: 1.05rem;
}

/* Les deux pastilles se superposent dans le balisage semé : on ne garde
   que le numéro, qui porte l'information de séquence. */
.kb-how-v2-step-icon { background: var(--kb-surface-3); color: var(--kb-turquoise-dark); }

/* Le balisage semé pose DEUX pastilles au même endroit : une pour une
   icône, une pour le numéro. Si l'icône est vide — c'est le cas — elle
   disparaît et le numéro reste. Si elle porte un pictogramme, c'est
   l'inverse : deux pastilles superposées seraient illisibles. */
.kb-how-v2-step-icon:empty { display: none; }
.kb-how-v2-step-icon:not(:empty) ~ .kb-how-v2-step-number { display: none; }

.kb-how-v2-step h3 { font-size: 1.05rem; margin: 0 0 6px; }
.kb-how-v2-step p { margin: 0 0 8px; color: var(--kb-ink-mid); font-size: 0.94rem; line-height: 1.6; }
.kb-how-v2-step p:last-child { margin-bottom: 0; }
/* wpautop laisse parfois un paragraphe vide derrière les pastilles. */
.kb-how-v2-step p:empty { display: none; }

/* --- Carte professionnels --------------------------------------------- */

.kb-how-v2-pro-card {
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  background: linear-gradient(140deg, var(--kb-brand-surface) 0%, var(--kb-navy-500) 100%);
  color: var(--kb-on-dark);
}

.kb-how-v2-pro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .kb-how-v2-pro-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}

.kb-how-v2-pro-card h2,
.kb-how-v2-pro-card h3 { color: var(--kb-on-dark); }
.kb-how-v2-pro-copy p { color: rgba(255, 255, 255, .84); line-height: 1.65; }

.kb-how-v2-actions { display: flex; flex-wrap: wrap; gap: var(--kb-space-3); margin-top: var(--kb-space-4); }

.kb-how-v2-button,
.kb-how-v2-button-alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--kb-radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  transition: background var(--kb-transition), color var(--kb-transition), transform 140ms ease;
}

.kb-how-v2-button { background: var(--kb-coral); color: var(--kb-on-dark); }
.kb-how-v2-button:hover { background: var(--kb-coral-dark); }
.kb-how-v2-button-alt { background: rgba(255, 255, 255, .14); color: var(--kb-on-dark); border: 1px solid rgba(255, 255, 255, .45); }
.kb-how-v2-button-alt:hover { background: rgba(255, 255, 255, .24); }
.kb-how-v2-button:active,
.kb-how-v2-button-alt:active { transform: scale(.97); }

/* --- Atouts, processus, statistiques ---------------------------------- */

.kb-how-v2-feature-grid,
.kb-how-v2-stats-grid,
.kb-how-v2-faq-grid,
.kb-how-v2-mobile-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--kb-space-4);
}

.kb-how-v2-feature,
.kb-how-v2-stat,
.kb-how-v2-faq-item {
  padding: var(--kb-space-5);
  border-radius: var(--kb-radius-md);
  border: 1px solid var(--kb-line);
  background: var(--kb-surface);
  box-shadow: var(--kb-shadow-card);
}

.kb-how-v2-feature h3,
.kb-how-v2-stat h3,
.kb-how-v2-faq-item h3 { font-size: 1.02rem; margin: 0 0 8px; }

.kb-how-v2-feature p,
.kb-how-v2-stat p,
.kb-how-v2-faq-item p { margin: 0; color: var(--kb-ink-mid); font-size: 0.93rem; line-height: 1.6; }

.kb-how-v2-stat-icon,
.kb-how-v2-process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: var(--kb-space-3);
  border-radius: var(--kb-radius-md);
  background: rgba(18, 167, 154, .12);
  color: var(--kb-turquoise-dark);
  font-family: var(--kb-font-display);
  font-weight: 800;
}

.kb-how-v2-process-shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kb-space-4);
}

.kb-how-v2-process-step {
  padding: var(--kb-space-5);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface-2);
  border: 1px solid var(--kb-line);
}

.kb-how-v2-process-step h3 { font-size: 1rem; margin: 0 0 6px; }
.kb-how-v2-process-step p { margin: 0; color: var(--kb-ink-mid); font-size: 0.92rem; line-height: 1.58; }

/* --- Bloc mobile ------------------------------------------------------- */

.kb-how-v2-mobile-card {
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  background: var(--kb-surface-2);
  border: 1px solid var(--kb-line);
}

.kb-how-v2-mobile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-space-5);
  align-items: center;
}

@media (min-width: 900px) {
  .kb-how-v2-mobile-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

.kb-how-v2-mobile-visual img { width: 100%; height: auto; border-radius: var(--kb-radius-md); display: block; }

/* --- Appel à l'action final ------------------------------------------- */

.kb-how-v2-cta-card {
  padding: var(--kb-space-7) var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(31, 182, 201, .35) 0%, rgba(31, 182, 201, 0) 55%),
    linear-gradient(140deg, var(--kb-brand-surface) 0%, var(--kb-navy-500) 100%);
  color: var(--kb-on-dark);
  text-align: center;
}

.kb-how-v2-cta-card h2 { color: var(--kb-on-dark); font-size: clamp(1.5rem, 3vw, 2.2rem); }
.kb-how-v2-cta-copy p { color: rgba(255, 255, 255, .84); max-width: 60ch; margin-inline: auto; line-height: 1.65; }
.kb-how-v2-cta-card .kb-how-v2-actions { justify-content: center; }

/* =========================================================================
   6. FIL D'ARIANE SEUL
   =========================================================================
   Quand la page apporte son propre chapeau, le gabarit n'affiche plus que
   le fil d'Ariane : il reste utile (savoir où l'on est, remonter), sans
   dupliquer le titre.
   ========================================================================= */

.kb-page-crumbs {
  border-bottom: 1px solid var(--kb-line);
  background: var(--kb-surface);
  padding-block: var(--kb-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .kb-content-grid article:hover,
  .kb-how-v2-button:active,
  .kb-how-v2-button-alt:active { transform: none; }
}

/* =========================================================================
   7. PAGE TARIFS
   =========================================================================
   La page affichait deux cartes posées dans une colonne de 860 px calée à
   GAUCHE d'une zone de 1 232 : un tiers de l'écran restait vide à droite,
   et la grille tarifaire, qui se lit en comparant, paraissait décentrée.
   Elle n'avait par ailleurs aucun bouton — on lisait un prix sans pouvoir
   le choisir — et les deux cartes se terminaient à des hauteurs
   différentes, ce qui rend la comparaison plus difficile qu'elle ne devrait
   l'être.

   Ces règles ne s'appliquent qu'aux pages qui portent réellement une grille
   d'offres : rien ne change ailleurs.
   ========================================================================= */

.kb-content:has(.kb-offer-grid) {
  max-width: 1040px;
  margin-inline: auto;
}

.kb-content:has(.kb-offer-grid) .kb-generic-hero {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}

.kb-content:has(.kb-offer-grid) .kb-generic-hero > p:not(.eyebrow) {
  margin-inline: auto;
}

/* La colonne de questions garde sa largeur de lecture — 860 px — mais elle
   se centre au lieu de rester collee au bord gauche d'une zone elargie. */
.kb-content:has(.kb-offer-grid) .kb-faq-stack { margin-inline: auto; }

/* Les cartes se terminent à la même hauteur, bouton compris : une
   comparaison se lit sur une ligne de base commune. */
.kb-offer-grid { align-items: stretch; }

.kb-offer-card {
  display: flex;
  flex-direction: column;
}

/* Une pastille reste une pastille. En passant la carte en colonne flex,
   ses enfants s'étirent par defaut sur toute la largeur : le libelle
   « ESSENTIEL », jusque-la une petite pastille en `inline-block`, devenait
   un bandeau bleu nuit d'un bord a l'autre. On rend leur largeur de contenu
   aux seuls elements concernes. */
.kb-offer-card > .kb-offer-step,
.kb-offer-card > .kb-offer-card__flag { align-self: flex-start; }

.kb-offer-card h3 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.kb-offer-card h3 small {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--kb-ink-soft);
  letter-spacing: 0;
}

/* La promesse tarifaire, juste sous le prix : c'est la ligne que le
   lecteur cherche, elle ne doit pas se perdre dans le paragraphe. */
.kb-offer-card__claim {
  margin: 0 0 var(--kb-space-3) !important;
  padding: 8px 12px;
  border-radius: var(--kb-radius-sm, 10px);
  background: rgba(18, 167, 154, .1);
  color: var(--kb-turquoise-dark) !important;
  font-weight: 700;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
}

.kb-offer-card ul { margin-bottom: var(--kb-space-5); }

/* Le bouton est poussé en bas de la carte, quelle que soit la longueur de
   la liste au-dessus. */
.kb-offer-card__cta {
  margin: auto 0 0 !important;
  padding-top: var(--kb-space-4);
}

.kb-offer-card__cta .kb-btn { width: 100%; }

/* La formule mise en avant. La couleur ne porte pas seule l'information :
   une mention écrite l'accompagne, lisible sans distinguer les teintes. */
.kb-offer-card--featured {
  position: relative;
  border-color: var(--kb-turquoise);
  box-shadow: 0 18px 40px -24px rgba(11, 42, 74, .45);
}

.kb-offer-card--featured .kb-offer-step {
  background: var(--kb-turquoise-dark);
}

.kb-offer-card__flag {
  position: absolute;
  top: -11px;
  right: var(--kb-space-6);
  padding: 3px 12px;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-turquoise-dark);
  color: var(--kb-on-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --- Le tableau de comparaison ----------------------------------------- */

.kb-price-compare {
  margin-bottom: var(--kb-space-7);
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  border: 1px solid var(--kb-line);
  background: var(--kb-surface-2);
}

.kb-price-compare h2 { margin-top: 0 !important; }

.kb-price-compare table {
  margin-bottom: var(--kb-space-3) !important;
  background: var(--kb-surface);
  border-radius: var(--kb-radius-md, 14px);
  overflow: hidden;
}

.kb-price-compare th,
.kb-price-compare td { padding: 12px 16px; }

.kb-price-compare thead th {
  background: var(--kb-brand-surface);
  color: var(--kb-on-dark);
  font-size: 0.85rem;
  border-bottom: none;
}

.kb-price-compare tbody td {
  font-variant-numeric: tabular-nums;
  color: var(--kb-ink-mid);
}

.kb-price-compare tbody td:first-child { font-weight: 700; color: var(--kb-ink); }

/* Le point de bascule : la seule ligne que le lecteur retiendra. */
.kb-price-compare tr.is-pivot td {
  background: rgba(18, 167, 154, .12);
  font-weight: 700;
  color: var(--kb-ink);
}

.kb-price-compare tr.is-pivot td:first-child::after {
  content: " · bascule";
  font-weight: 600;
  font-size: .82em;
  color: var(--kb-turquoise-dark);
}

.kb-price-note {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--kb-ink-soft) !important;
  line-height: 1.6 !important;
}

/* --- L'appel à l'action de fin de page --------------------------------- */

.kb-price-cta {
  margin-bottom: var(--kb-space-6);
  padding: var(--kb-space-7) var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  background: linear-gradient(140deg, var(--kb-brand-surface) 0%, var(--kb-navy-500) 100%);
  color: var(--kb-on-dark);
  text-align: center;
}

.kb-price-cta h2 {
  margin: 0 0 var(--kb-space-3) !important;
  color: var(--kb-on-dark);
}

.kb-price-cta p {
  margin: 0 auto var(--kb-space-5) !important;
  max-width: 58ch;
  color: rgba(255, 255, 255, .84) !important;
}

.kb-price-cta .kb-btn { margin-inline: 6px; }

.kb-content .kb-price-cta a.kb-btn--outline,
.kb-content .kb-price-cta a.kb-btn--outline:hover {
  color: var(--kb-on-dark);
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}

@media (max-width: 640px) {
  .kb-price-compare { padding: var(--kb-space-5) var(--kb-space-4); }
  .kb-price-compare table { display: block; overflow-x: auto; }
  .kb-price-cta .kb-btn { display: flex; margin: 0 0 10px; }
}

/* =========================================================================
   8. DOCUMENTS JURIDIQUES
   =========================================================================
   CGV, mentions légales, conditions d'utilisation : ces pages étaient
   rendues avec `.kb-content-grid`, c'est-à-dire une grille de cartes sur
   trois colonnes. C'est une mise en page de rubriques, pas de contrat, et
   elle coûte trois choses au lecteur :

   — l'ordre de lecture devient ambigu. Un contrat se lit de l'article 1 au
     dernier ; réparti sur trois colonnes, l'œil doit reconstituer la suite.
   — on ne peut renvoyer personne à un article précis, faute d'ancre.
   — la dernière carte reste seule sur sa ligne, et la page paraît inachevée
     là où elle devrait paraître sérieuse.

   Ici : une colonne de lecture, des articles numérotés et ancrés, un
   sommaire qui suit le défilement, et une feuille d'impression — un
   document contractuel finit souvent imprimé ou enregistré en PDF.
   ========================================================================= */

.kb-content:has(.kb-legal) { max-width: 1120px; }

.kb-legal {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: var(--kb-space-7);
  align-items: start;
  margin-bottom: var(--kb-space-7);
}

/* --- Colonne de repères ------------------------------------------------- */

.kb-legal__aside { position: sticky; top: 96px; }

.kb-legal__updated {
  margin: 0 0 var(--kb-space-4) !important;
  padding-bottom: var(--kb-space-3);
  border-bottom: 1px solid var(--kb-line);
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: var(--kb-ink-soft) !important;
}

/* Pas de `display: block` ici : la coupure de ligne est faite par un <br>
   dans le contenu, pour que la date reste lisible meme si cette feuille
   n'est pas chargee — « Derniere mise a jour31 aout 2026 » sinon. */
.kb-legal__updated strong { color: var(--kb-ink); font-size: 0.95rem; }

.kb-legal__toc-title {
  margin: 0 0 10px !important;
  font-family: var(--kb-font-display);
  font-size: 0.74rem !important;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kb-ink-soft) !important;
}

.kb-legal__toc ol {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kb-legal__toc li { margin: 0 !important; }

.kb-content .kb-legal__toc a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink-mid);
  font-size: 0.88rem;
  line-height: 1.4;
  text-decoration: none;
  border-left: 2px solid transparent;
}

.kb-content .kb-legal__toc a:hover {
  background: var(--kb-surface-2);
  color: var(--kb-turquoise-dark);
  border-left-color: var(--kb-turquoise);
}

.kb-legal--numbered .kb-legal__toc ol { counter-reset: toc; }
.kb-legal--numbered .kb-legal__toc li { counter-increment: toc; }
.kb-legal--numbered .kb-legal__toc a::before {
  content: counter(toc) ". ";
  color: var(--kb-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Le document lui-même ---------------------------------------------- */

.kb-legal__doc { max-width: 68ch; }

.kb-legal-article {
  /* L'en-tête du site reste affiché au-dessus : sans cette réserve, cliquer
     une entrée du sommaire amène le titre visé DERRIÈRE la barre. */
  scroll-margin-top: 110px;
  padding-bottom: var(--kb-space-5);
  margin-bottom: var(--kb-space-5);
  border-bottom: 1px solid var(--kb-line);
}

.kb-legal-article:last-of-type { border-bottom: none; }

.kb-content .kb-legal-article h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 0;
  margin-bottom: var(--kb-space-3);
  font-size: 1.25rem;
  line-height: 1.3;
}

.kb-legal-article__num {
  flex: none;
  min-width: 30px;
  padding: 3px 0;
  border-radius: var(--kb-radius-sm);
  background: var(--kb-brand-surface);
  color: var(--kb-on-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.kb-legal-article p:last-child { margin-bottom: 0; }

/* --- Les informations factuelles (éditeur, hébergeur) ------------------- */

.kb-legal-facts {
  margin: var(--kb-space-4) 0 0;
  padding: var(--kb-space-4) var(--kb-space-5);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface-2);
  border: 1px solid var(--kb-line);
  display: grid;
  gap: 10px;
}

.kb-legal-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
}

.kb-legal-facts dt {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--kb-ink-soft);
}

.kb-legal-facts dd {
  margin: 0;
  color: var(--kb-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* --- Renvois vers les autres documents --------------------------------- */

.kb-legal__related {
  margin-top: var(--kb-space-6);
  padding: var(--kb-space-5);
  border-radius: var(--kb-radius-md);
  border: 1px solid var(--kb-line);
  background: var(--kb-surface);
}

.kb-content .kb-legal__related h2 {
  margin: 0 0 var(--kb-space-3);
  font-size: 1rem;
}

.kb-legal__related ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.kb-legal__related li { margin: 0 !important; }

/* --- Téléphone et écran étroit ----------------------------------------- */

@media (max-width: 900px) {
  .kb-legal { grid-template-columns: minmax(0, 1fr); gap: var(--kb-space-5); }
  .kb-legal__aside { position: static; }
  .kb-legal__doc { max-width: none; }
  .kb-legal__toc {
    padding: var(--kb-space-4);
    border-radius: var(--kb-radius-md);
    border: 1px solid var(--kb-line);
    background: var(--kb-surface-2);
  }
  .kb-legal__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-legal-facts > div { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .kb-legal__toc ol { grid-template-columns: minmax(0, 1fr); }
}

/* --- À l'impression ----------------------------------------------------- */

@media print {
  .kb-legal { display: block; }
  .kb-legal__aside { display: none; }
  .kb-legal__doc { max-width: none; }
  .kb-legal-article { break-inside: avoid; border-bottom: 1px solid #ccc; }
  .kb-legal-facts, .kb-legal__related { border: 1px solid #ccc; background: none; }
  .kb-legal-article__num { background: none; color: #000; border: 1px solid #000; }
}

/* =========================================================================
   9. ÉCRANS DU PLUGIN DANS UNE PAGE DU THÈME
   =========================================================================
   Connexion, inscription, confirmation d'e-mail, espace client : ces écrans
   sont rendus par l'extension mais posés dans le `.kb-content` du thème,
   large de 860 px et calé à GAUCHE d'une zone de 1 232. Résultat : une
   carte centrée dans sa colonne, mais la colonne elle-même décalée, avec
   370 px de vide à droite. Ce n'est pas la carte qui était mal centrée,
   c'est le contenant.
   ========================================================================= */

.kb-content:has(> .krdv-customer-space),
.kb-content:has(> .krdv-pro-space) {
  margin-inline: auto;
}

/* Deux fils d'Ariane à quatre-vingt-dix pixels l'un de l'autre — « Accueil ›
   S'inscrire » posé par le gabarit, puis « Accueil › Inscription ›
   Professionnel » posé par l'extension — disent deux fois où l'on est. Le
   gabarit ayant déjà le sien, celui de l'extension est masqué : c'est le
   thème qui sait qu'il a déjà répondu à la question. */
/* Les deux fils vivent dans des branches SŒURS du <main> — celui du thème
   dans .kb-page-hero, celui de l'extension dans .kb-content — donc aucun
   ancêtre commun plus proche que <main> ne permet de conditionner l'un à
   l'autre. C'est de là qu'on regarde. */
main:has(.kb-page-hero .kb-breadcrumb) .kb-content .krdv-breadcrumb {
  display: none;
}

/* =========================================================================
   10. COMMENT ÇA MARCHE
   =========================================================================
   Une page de pédagogie : elle se PARCOURT plus qu'elle ne se lit. D'où des
   blocs courts, une numérotation qui dit l'ordre parce que l'ordre compte
   vraiment ici, et deux entrées annoncées d'emblée — client, professionnel —
   pour que chacun saute à sa moitié sans traverser celle de l'autre.

   Aucune couleur en dur : tout passe par les jetons de rôle, donc la page
   suit le mode nuit sans une ligne de plus.
   ========================================================================= */

.kb-how__intro {
  padding-block: var(--kb-space-8) var(--kb-space-7);
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(18, 167, 154, .10) 0%, rgba(18, 167, 154, 0) 58%),
    var(--kb-surface-2);
  border-bottom: 1px solid var(--kb-line);
}

.kb-how__eyebrow,
.kb-how__surtitre {
  margin: 0 0 var(--kb-space-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kb-accent-ink);
}

.kb-how__intro h1 {
  margin: 0 0 var(--kb-space-3);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  max-width: 20ch;
}

.kb-how__lead {
  margin: 0;
  max-width: 62ch;
  font-size: 1.05rem;
  color: var(--kb-ink-mid);
}

.kb-how__acces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-3);
  margin-top: var(--kb-space-5);
}

/* --- Les chiffres, comptés ---------------------------------------------- */

.kb-how__chiffres {
  list-style: none;
  margin: var(--kb-space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--kb-space-4);
}

.kb-how__chiffres li {
  padding: var(--kb-space-4);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
}

.kb-how__chiffres strong {
  display: block;
  font-family: var(--kb-font-display);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--kb-ink);
  font-variant-numeric: tabular-nums;
}

.kb-how__chiffres span {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--kb-ink-soft);
}

/* --- Têtes de section --------------------------------------------------- */

.kb-how__tete { margin-bottom: var(--kb-space-6); max-width: 62ch; }
.kb-how__tete h2 { margin: 0 0 var(--kb-space-2); }
.kb-how__tete p { margin: 0; color: var(--kb-ink-mid); }

/* --- Deux colonnes : le texte et le visuel ------------------------------ */

.kb-how__duo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--kb-space-7);
  align-items: center;
}

/* Sur une colonne, le visuel passe DERRIÈRE le texte : on vient lire, pas
   regarder une photo. `order` seul ne suffit pas — il faut aussi défaire
   l'inversion de la seconde section. */
@media (max-width: 900px) {
  .kb-how__duo { grid-template-columns: 1fr; gap: var(--kb-space-6); }
  .kb-how__duo .kb-how__visuel { order: 2; }
}

.kb-how__duo--inverse .kb-how__visuel { order: -1; }
@media (max-width: 900px) {
  .kb-how__duo--inverse .kb-how__visuel { order: 2; }
}

.kb-how__visuel {
  margin: 0;
  border-radius: var(--kb-radius-lg);
  overflow: hidden;
  background: var(--kb-surface-3);
  box-shadow: var(--kb-shadow-card);
}

/* Le rapport est imposé ici, et l'image le remplit en se recadrant.
   L'ancienne version étirait le visuel (`object-fit: fill`) dans une boîte
   fixe : le jour où la photo change de proportions, elle se déforme. */
.kb-how__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --- Les quatre étapes client ------------------------------------------ */

.kb-how__etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--kb-space-4);
  counter-reset: kb-how;
}

.kb-how__etapes li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: var(--kb-space-3);
  padding: var(--kb-space-4);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
}

.kb-how__etape-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kb-ink);
  color: var(--kb-surface);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kb-how__etape-icone,
.kb-how__atout-icone {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(18, 167, 154, .12);
  color: var(--kb-accent-ink);
}

.kb-how__etape-corps strong {
  display: block;
  margin-bottom: 2px;
  color: var(--kb-ink);
  font-size: 1rem;
}

.kb-how__etape-corps span {
  display: block;
  color: var(--kb-ink-mid);
  font-size: 0.92rem;
  line-height: 1.55;
}

.kb-how__note {
  margin: var(--kb-space-5) 0 0;
  max-width: 70ch;
  color: var(--kb-ink-soft);
  font-size: 0.9rem;
}

.kb-how__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-3);
  margin-top: var(--kb-space-6);
}

/* --- Sur téléphone ------------------------------------------------------ */

.kb-how__mobile { background: var(--kb-surface-2); }
.kb-how__mobile-texte h2 { margin: 0 0 var(--kb-space-3); }
.kb-how__mobile-texte > p { margin: 0; color: var(--kb-ink-mid); max-width: 54ch; }

.kb-how__liste {
  list-style: none;
  margin: var(--kb-space-5) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.kb-how__liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--kb-ink-mid);
  font-size: 0.94rem;
}

.kb-how__liste .kb-icon { color: var(--kb-accent-ink); flex: none; }

/* --- Le parcours professionnel ----------------------------------------- */

.kb-how__parcours {
  list-style: none;
  margin: 0 0 var(--kb-space-7);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: var(--kb-space-4);
}

.kb-how__parcours li {
  position: relative;
  padding: var(--kb-space-5) var(--kb-space-4) var(--kb-space-4);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
}

.kb-how__parcours-num {
  position: absolute;
  top: calc(-1 * var(--kb-space-3));
  left: var(--kb-space-4);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kb-coral-cta);
  color: var(--kb-on-dark);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kb-how__parcours strong { display: block; margin-bottom: 4px; color: var(--kb-ink); }

/* La description porte SA classe, elle n'est pas « le span de la carte ».
   Écrite `.kb-how__parcours span`, la règle pesait un élément de plus que
   `.kb-how__parcours-num` et repeignait la pastille numérotée : le chiffre
   passait de blanc à gris sur fond corail, mesuré à 1,97:1 — illisible.
   Un sélecteur large finit toujours par manger un sélecteur précis. */
.kb-how__parcours-texte {
  display: block;
  color: var(--kb-ink-mid);
  font-size: 0.92rem;
  line-height: 1.55;
}

.kb-how__atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--kb-space-4);
}

.kb-how__atout {
  padding: var(--kb-space-5);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface-2);
  border: 1px solid var(--kb-line);
}

.kb-how__atout h3 { margin: var(--kb-space-3) 0 4px; font-size: 1rem; }
.kb-how__atout p { margin: 0; color: var(--kb-ink-mid); font-size: 0.92rem; line-height: 1.55; }

/* --- Les questions ------------------------------------------------------ */

.kb-how__questions {
  display: grid;
  gap: var(--kb-space-3);
  max-width: 74ch;
}

.kb-how__question {
  border: 1px solid var(--kb-line);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface);
  overflow: hidden;
}

.kb-how__question > summary {
  display: flex;
  align-items: center;
  gap: var(--kb-space-3);
  padding: 14px var(--kb-space-5);
  cursor: pointer;
  font-weight: 700;
  color: var(--kb-ink);
  list-style: none;
}

.kb-how__question > summary::-webkit-details-marker { display: none; }
.kb-how__question > summary:hover { background: var(--kb-surface-2); }

.kb-how__question > summary:focus-visible {
  outline: 2.5px solid var(--kb-turquoise-dark);
  outline-offset: -3px;
}

.kb-how__question-chevron {
  margin-left: auto;
  display: inline-flex;
  color: var(--kb-accent-ink);
  transition: transform var(--kb-transition);
}

.kb-how__question[open] > summary > .kb-how__question-chevron { transform: rotate(180deg); }

.kb-how__question > p {
  margin: 0;
  padding: 0 var(--kb-space-5) var(--kb-space-4);
  border-top: 1px solid var(--kb-line);
  padding-top: var(--kb-space-4);
  color: var(--kb-ink-mid);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .kb-how__question-chevron { transition: none; }
}

/* --- La fin ------------------------------------------------------------- */

.kb-how__fin {
  background: var(--kb-brand-surface);
  color: var(--kb-on-dark);
  text-align: center;
}

.kb-how__fin h2 { color: var(--kb-on-dark); margin: 0 0 var(--kb-space-2); }
.kb-how__fin p { margin: 0 auto; max-width: 52ch; color: rgba(255, 255, 255, .8); }
.kb-how__fin .kb-how__actions { justify-content: center; }

/* =========================================================================
   11. PARTENAIRES
   =========================================================================
   Une page courte : trois cartes et deux sorties. Tout l'enjeu est de ne
   pas la laisser flotter — un titre, trois blocs, et rien après, c'était
   une impasse. Elle se termine donc sur les deux chemins possibles.
   ========================================================================= */

.kb-partners__intro {
  padding-block: var(--kb-space-8) var(--kb-space-7);
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(31, 182, 201, .10) 0%, rgba(31, 182, 201, 0) 60%),
    var(--kb-surface-2);
  border-bottom: 1px solid var(--kb-line);
}

.kb-partners__eyebrow {
  margin: 0 0 var(--kb-space-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kb-accent-ink);
}

.kb-partners__intro h1 { margin: 0 0 var(--kb-space-3); max-width: 24ch; }
.kb-partners__lead { margin: 0; max-width: 62ch; font-size: 1.05rem; color: var(--kb-ink-mid); }

/* --- Les cartes --------------------------------------------------------- */

.kb-partners__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--kb-space-5);
}

.kb-partners__carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--kb-space-5);
  border-radius: var(--kb-radius-lg);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  box-shadow: var(--kb-shadow-card);
  transition: border-color var(--kb-transition), transform var(--kb-transition);
}

.kb-partners__carte:hover {
  border-color: var(--kb-turquoise);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .kb-partners__carte { transition: border-color var(--kb-transition); }
  .kb-partners__carte:hover { transform: none; }
}

.kb-partners__logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--kb-radius-md);
  overflow: hidden;
  /* LA PLAQUE RESTE CLAIRE, MÊME DE NUIT. Le fond était `--kb-surface-2`,
     qui devient sombre en apparence nuit. Un logo fourni par un tiers est
     presque toujours dessiné pour un fond clair — encre foncée, souvent sur
     transparence : posé sur du sombre, il disparaît purement et simplement.
     C'est du blanc fixe, donc, avec un liseré pour ne pas brûler l'écran la
     nuit. Le seul réglage qui tienne pour une image qu'on ne maîtrise pas. */
  background: #FFFFFF;
  border: 1px solid var(--kb-line-strong);
}

.kb-partners__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* `contain`, pas `cover` : un logo qu'on recadre est un logo abîmé. */
  padding: 6px;
}

/* Aucun visuel posé : une pastille à l'initiale, plutôt qu'un cadre vide ou
   une image cassée — le premier dirait « il manque quelque chose », la
   seconde « c'est cassé ». Une initiale dit « c'est ainsi ».

   Les fonds sont ceux des monogrammes d'établissements (.kb-monogram--0/1/2),
   trois dégradés SOMBRES. Le dégradé de marque, plus clair, avait été
   essayé d'abord : mesuré, il ne porte du blanc qu'à 2,4:1 — sous le seuil
   même pour du grand texte. Les trois se relaient d'une carte à l'autre,
   sinon trois partenaires sans logo forment trois pastilles identiques. */
.kb-partners__logo--initiale {
  border: 0;
  color: var(--kb-on-dark);
  font-family: var(--kb-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

/* DEUX CLASSES, ET C'EST NÉCESSAIRE. Les fonds des monogrammes vivent dans
   l'autre feuille, à une classe ; `.kb-partners__logo` en pèse autant et se
   charge après, donc c'est son fond clair qui l'emportait — pastille pâle,
   lettre blanche, 1,06:1. On redit donc les trois fonds ici, à deux classes. */
.kb-partners__logo--initiale.kb-monogram--0 { background: linear-gradient(140deg, #0B2A4A 0%, #1B4E7E 100%); }
.kb-partners__logo--initiale.kb-monogram--1 { background: linear-gradient(140deg, #0F5F55 0%, #0C8477 100%); }
.kb-partners__logo--initiale.kb-monogram--2 { background: linear-gradient(140deg, #0B5D6A 0%, #0E7C8C 100%); }

.kb-partners__carte h2 {
  margin: var(--kb-space-4) 0 var(--kb-space-2);
  font-size: 1.25rem;
}

.kb-partners__carte p {
  margin: 0 0 var(--kb-space-4);
  color: var(--kb-ink-mid);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Le lien est poussé en bas : trois cartes de textes inégaux gardent leurs
   liens sur la même ligne, ce qui rend la rangée lisible d'un coup d'œil. */
.kb-partners__lien {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kb-accent-ink);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.kb-partners__lien:hover { text-decoration: underline; }
.kb-partners__lien .kb-icon { transition: transform var(--kb-transition); }
.kb-partners__lien:hover .kb-icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .kb-partners__lien .kb-icon { transition: none; }
  .kb-partners__lien:hover .kb-icon { transform: none; }
}

.kb-partners__vide { margin: 0; color: var(--kb-ink-soft); }

/* --- Les deux chemins --------------------------------------------------- */

.kb-partners__chemins { background: var(--kb-surface-2); }
.kb-partners__chemins h2 { margin: 0 0 var(--kb-space-6); }

.kb-partners__duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--kb-space-5);
}

.kb-partners__chemin {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
}

.kb-partners__chemin-icone {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(18, 167, 154, .12);
  color: var(--kb-accent-ink);
}

.kb-partners__chemin h3 { margin: var(--kb-space-4) 0 var(--kb-space-2); font-size: 1.1rem; }

.kb-partners__chemin p {
  margin: 0 0 var(--kb-space-5);
  color: var(--kb-ink-mid);
  font-size: 0.94rem;
  line-height: 1.6;
}

.kb-partners__chemin .kb-btn { margin-top: auto; }

/* =========================================================================
   12. PAGE D'UN PARTENAIRE
   =========================================================================
   Ces trois pages passaient par le gabarit générique : leurs blocs
   tombaient dans une grille de cartes pensée pour de la prose. Résultat,
   trois défauts visibles en ligne — les liens du bloc « Maillage utile »
   se retrouvaient collés faute d'être traités comme une liste, le lien
   vers le site du partenaire (la seule action de la page) était un lien de
   texte au milieu de la troisième carte, et la marque du partenaire
   n'apparaissait nulle part.

   La page se lit maintenant en trois temps : qui c'est et où aller le voir,
   ce que le partenariat apporte, où continuer. Une colonne de lecture pour
   le corps, pas une grille : ce sont des paragraphes, pas des fiches.
   ========================================================================= */

.kb-partenaire__hero {
  padding-block: var(--kb-space-7) var(--kb-space-8);
  background:
    radial-gradient(110% 130% at 88% 0%, rgba(31, 182, 201, .10) 0%, rgba(31, 182, 201, 0) 60%),
    var(--kb-surface-2);
  border-bottom: 1px solid var(--kb-line);
}

.kb-partenaire__hero-grille {
  display: grid;
  gap: var(--kb-space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .kb-partenaire__hero-grille {
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: var(--kb-space-8);
  }
}

/* Sous 900 px, la marque passe devant le texte : sur un partenaire, la
   première question est « qui ? », et un logo y répond plus vite qu'une
   phrase. Au-delà, la grille reprend l'ordre de lecture normal. */
@media (max-width: 899px) {
  .kb-partenaire__marque { order: -1; }
}

.kb-partenaire__surtitre {
  margin: 0 0 var(--kb-space-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kb-accent-ink);
}

.kb-partenaire__titre {
  margin: 0 0 var(--kb-space-4);
  /* 24 caractères : le titre tient en trois lignes plutôt que quatre, sans
     s'étirer jusqu'à la plaque de marque. */
  max-width: 24ch;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  text-wrap: balance;
}

.kb-partenaire__accroche {
  margin: 0 0 var(--kb-space-5);
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--kb-ink-mid);
}

.kb-partenaire__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kb-space-3) var(--kb-space-4);
}

.kb-partenaire__visiter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Le domaine sous le bouton. Un bouton nommé « Visiter Moovnt » ne dit pas
   OÙ il mène ; l'écrire évite d'avoir à survoler pour le savoir, et rassure
   avant un départ du site. Chiffres et lettres alignés, d'où le tabulaire. */
.kb-partenaire__domaine {
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--kb-ink-soft);
}

/* --- La plaque de marque ------------------------------------------------ */

.kb-partenaire__plaque {
  display: grid;
  place-items: center;
  min-height: 176px;
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  /* Blanc fixe : voir le commentaire de .kb-partners__logo. Un logo tiers
     est dessiné pour un fond clair ; sur la surface sombre du mode nuit il
     disparaît. Le liseré l'empêche de brûler l'écran la nuit. */
  background: #FFFFFF;
  border: 1px solid var(--kb-line-strong);
  box-shadow: var(--kb-shadow-card);
}

.kb-partenaire__plaque img {
  max-width: 100%;
  /* Une hauteur plafonnée, pas une taille imposée : les logos arrivent en
     carré, en large, en haut — `contain` les met à l'échelle sans jamais
     les recadrer, un logo recadré étant un logo abîmé. */
  max-height: 112px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Aucune image posée : la plaque devient une pastille à l'initiale. Le
   dégradé sombre est celui des monogrammes d'établissements — mesuré, il
   porte le blanc bien au-dessus du seuil, ce que le dégradé de marque
   (2,4:1) ne fait pas. */
.kb-partenaire__plaque--vide {
  background: linear-gradient(140deg, #0B2A4A 0%, #1B4E7E 100%);
  border-color: transparent;
}

.kb-partenaire__monogramme {
  font-family: var(--kb-font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--kb-on-dark);
}

/* --- Le corps ----------------------------------------------------------- */

/* Une colonne, pas une grille de cartes. Ces blocs sont des paragraphes
   qui s'enchaînent : les mettre côte à côte obligeait à choisir un ordre
   de lecture à chaque rangée. 68 caractères, la largeur où l'œil retrouve
   le début de la ligne suivante sans effort. */
.kb-partenaire__colonne {
  max-width: 68ch;
}

.kb-partenaire__bloc + .kb-partenaire__bloc {
  margin-top: var(--kb-space-6);
  padding-top: var(--kb-space-6);
  border-top: 1px solid var(--kb-line);
}

.kb-partenaire__bloc h2 {
  margin: 0 0 var(--kb-space-3);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
}

.kb-partenaire__bloc p {
  margin: 0 0 var(--kb-space-3);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kb-ink-mid);
}

.kb-partenaire__bloc p:last-child { margin-bottom: 0; }

/* --- La carte « site du partenaire » ------------------------------------ */

.kb-partenaire__site-carte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-5);
  padding: var(--kb-space-6);
  border-radius: var(--kb-radius-lg);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  box-shadow: var(--kb-shadow-card);
}

.kb-partenaire__site-texte { flex: 1 1 320px; }

.kb-partenaire__site-texte h2 {
  margin: 0 0 var(--kb-space-2);
  font-size: 1.2rem;
}

.kb-partenaire__site-texte p {
  margin: 0;
  max-width: 60ch;
  color: var(--kb-ink-mid);
  font-size: 0.96rem;
  line-height: 1.6;
}

.kb-partenaire__site-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* --- Poursuivre --------------------------------------------------------- */

.kb-partenaire__suite h2 {
  margin: 0 0 var(--kb-space-5);
  font-size: 1.3rem;
}

.kb-partenaire__liens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--kb-space-4);
}

/* Toute la carte est cliquable, parce qu'une cible large se vise sans
   précision — au doigt comme à la souris. La flèche part vers la droite au
   survol : un mouvement de 3 px, assez pour signaler, trop peu pour agiter.
   Elle s'arrête si le système demande moins d'animation. */
.kb-partenaire__liens a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-4);
  min-height: 64px;
  padding: var(--kb-space-4) var(--kb-space-5);
  border-radius: var(--kb-radius-md);
  background: var(--kb-surface);
  border: 1px solid var(--kb-line);
  color: var(--kb-ink);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color var(--kb-transition), background var(--kb-transition);
}

.kb-partenaire__liens a:hover,
.kb-partenaire__liens a:focus-visible {
  border-color: var(--kb-turquoise);
  background: var(--kb-surface-2);
}

.kb-partenaire__liens .kb-icon {
  flex: none;
  color: var(--kb-accent-ink);
  transition: transform var(--kb-transition);
}

.kb-partenaire__liens a:hover .kb-icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .kb-partenaire__liens a:hover .kb-icon { transform: none; }
}

/* Les liens restés dans un bloc de corps. Ils s'affichent en ligne, séparés
   nettement : trois liens à la suite dans un même paragraphe se lisent comme
   une seule phrase si rien ne les sépare — c'est exactement le défaut que
   cette refonte corrige ailleurs sur la page. */
.kb-partenaire__bloc-liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-2) var(--kb-space-5);
  margin: var(--kb-space-4) 0 0;
}

.kb-partenaire__bloc-liens a {
  color: var(--kb-accent-ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* LE RYTHME VERTICAL DE CETTE PAGE.

   Trois `kb-section` à la suite, chacune avec sa marge haute et basse : les
   respirations s'additionnaient et laissaient de grands vides entre le
   dernier paragraphe, la carte du site et la rangée « Poursuivre ». Ces
   trois blocs forment une même fin de page — ils se suivent donc de près.
   Le préfixe `.karibook-beta` est nécessaire : la règle générique en pèse
   autant et se charge avant. */
.karibook-beta .kb-partenaire__corps { padding-bottom: var(--kb-space-6); }
.karibook-beta .kb-partenaire__site  { padding-block: var(--kb-space-6); }
.karibook-beta .kb-partenaire__suite { padding-top: var(--kb-space-6); }