/* ==========================================================================
   En-tete et pied de page du site, finalises le 30/09 : les memes que sur la home et la piste C
   (components/v6/V3Entete, V3Annonce, V3Nav, V3Footer). Autonome (ses propres couleurs), sans
   effet sur le contenu des pages. Charte v1.0 : Ghost White #F8F8FF, Erebus #12012D, violet
   #5B26FE pour l'action, lavande #C9C2FF et #EFEDFF, cyan #1AECDE en accent sur fond sombre ; pied de page
   au clair depuis le 30/09 au soir ;
   Rubik (servie par le theme), angles de 4 px, aucune ombre, aucune transparence.
   ========================================================================== */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("fonts/rubik-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.kx3h, .kx3f, .kx3c-cta {
  --k-ghost: #F8F8FF; --k-blanc: #FFFFFF; --k-erebus: #12012D; --k-er80: #413457; --k-er60: #716781; --k-er20: #D0CCD5; --k-er10: #E9E6EE;
  --k-violet: #5B26FE; --k-lavande: #C9C2FF; --k-lavande-pale: #EFEDFF; --k-cyan: #1AECDE;
  --k-ease: cubic-bezier(.16, 1, .3, 1); --k-gouttiere: 1.25rem;
  font-family: "Rubik", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) { .kx3h, .kx3f { --k-gouttiere: 2rem; } }
@media (min-width: 1024px) { .kx3h, .kx3f { --k-gouttiere: 3rem; } }
.kx3h *, .kx3f * { box-sizing: border-box; }
.kx3h ul, .kx3f ul { margin: 0; padding: 0; list-style: none; }
.kx3h p, .kx3f p { margin: 0; }
.kx3h a, .kx3f a { text-decoration: none; }
.kx3h svg, .kx3f svg { display: block; flex: none; }
.kx3h button, .kx3f button { font-family: inherit; box-shadow: none; text-shadow: none; }
.kx3h :is(a, button):focus-visible { outline: 2px solid var(--k-violet); outline-offset: 3px; border-radius: 4px; }
.kx3f :is(a, button):focus-visible { outline: 2px solid var(--k-violet); outline-offset: 3px; border-radius: 4px; }
.kx3h-annonce :is(a, button):focus-visible { outline: 2px solid var(--k-cyan); outline-offset: 3px; border-radius: 4px; }

/* Anciens en-tetes et pieds (Astra, v1) : jamais affiches avec celui-ci */
.kx-header, .kx-header-spacer, .kx-drawer, .kx-footer { display: none !important; }

/* --- Bouton de la charte -------------------------------------------------------------------- */
.kx3c-cta { display: inline-flex; align-items: center; gap: .625rem; height: 3rem; padding: 0 1.25rem; border-radius: 4px; background: var(--k-violet); color: var(--k-blanc) !important; font-size: .9375rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none !important; transition: background-color .25s, color .25s; }
.kx3c-cta:hover { background: var(--k-erebus); }
.kx3c-cta__fleche { width: 1rem; height: 1rem; transition: transform .3s var(--k-ease); }
.kx3c-cta:hover .kx3c-cta__fleche { transform: translateX(3px); }
.kx3c-cta--pied { margin-top: 2rem; }
.kx3c-cta--pied:hover { background: var(--k-erebus); color: var(--k-blanc) !important; }

/* --- En-tete : le bandeau, puis le menu, toujours visible ------------------------------------
   02/10 (Thomas) : barre plus fine, a la maniere de Sierra et de Harvey. Le logo tout a gauche, les
   entrees centrees sur la page, l'espace client et le bouton tout a droite, sur toute la largeur. La barre passe
   sur fond blanc des qu'on la survole ou qu'un menu s'ouvre. Le sous-menu se deploie sous la barre (voir
   plus bas, 03/10), un voile sur le contenu. Le bandeau devient une ligne fine. */
.kx3h { position: fixed; z-index: 1000; left: 0; right: 0; top: 0; color: var(--k-erebus); will-change: transform; }
body.admin-bar .kx3h { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kx3h { top: 46px; } }
.kx3h-espace { height: calc(var(--kx3h-annonce, 0px) + 57px); }
@media (min-width: 1024px) { .kx3h-espace { height: calc(var(--kx3h-annonce, 0px) + 65px); } }
/* Avec le bandeau : sa hauteur par defaut avant que le script ne la mesure (pas de saut au chargement) */
.kx3h-espace--annonce { height: calc(var(--kx3h-annonce, 40px) + 57px); }
@media (min-width: 1024px) { .kx3h-espace--annonce { height: calc(var(--kx3h-annonce, 40px) + 65px); } }

.kx3h-annonce { padding: 0 var(--k-gouttiere); background: var(--k-erebus); color: var(--k-blanc); }
.kx3h-annonce[hidden] { display: none; }
.kx3h-annonce__in { position: relative; display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 40px; margin: 0 auto; padding: .5rem 2rem .5rem 0; }
@media (min-width: 768px) { .kx3h-annonce__in { padding: .5rem 2.5rem; } }
.kx3h-annonce__date { display: inline-flex; flex: none; align-items: baseline; gap: .3em; padding: .1875rem .5rem; border-radius: 4px; background: rgba(255, 255, 255, .14); line-height: 1.2; white-space: nowrap; }
.kx3h-annonce__date span:first-child { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kx3h-annonce__date span:last-child { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kx3h-annonce p { min-width: 0; font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--k-blanc); }
.kx3h-annonce__fermer { position: absolute; right: 0; top: 50%; margin: 0; padding: .25rem; border: 0; border-radius: 4px; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; transform: translateY(-50%); }
.kx3h-annonce__fermer:hover, .kx3h-annonce__fermer:focus, .kx3h-annonce__fermer:active { background: none; color: var(--k-blanc); }
.kx3h-annonce__fermer svg { width: .875rem; height: .875rem; }

.kx3h-fond { padding: 0 var(--k-gouttiere); background: var(--k-blanc); border-bottom: 1px solid var(--k-er10); transition: background-color .25s, border-color .25s; }
/* Trois colonnes : le logo tout a gauche, les entrees centrees sur la page, les actions tout a droite.
   Quand la place manque, les entrees se decalent sans jamais passer sous les actions. */
.kx3h-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: 56px; }
@media (min-width: 1024px) { .kx3h-barre { height: 64px; } }
.kx3h-logo { display: inline-flex; grid-column: 1; justify-self: start; align-items: center; gap: .4375rem; color: var(--k-erebus) !important; }
.kx3h-logo__marque { width: 1.5rem; height: 1.5rem; color: var(--k-violet); transition: color .25s; }
.kx3h-logo span { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.03em; color: var(--k-erebus); transition: color .25s; }
.kx3h-menu { display: none !important; }
@media (min-width: 1280px) { .kx3h-menu { display: flex !important; grid-column: 2; align-items: center; gap: 0; white-space: nowrap; } }
.kx3h-declencheur, .kx3h-simple { display: inline-flex; align-items: center; gap: .25rem; margin: 0; padding: .4375rem .5rem; border: 0; border-radius: 6px; background: none; font-size: .875rem; font-weight: 400; line-height: 1.25; color: var(--k-erebus) !important; cursor: pointer; transition: background-color .2s, color .2s; }
/* Le theme parent colore les boutons au focus (bleu) : on garde les etats de la charte */
.kx3h-declencheur:focus, .kx3h-declencheur:focus-visible, .kx3h-declencheur:active { background: none; color: var(--k-erebus) !important; }
.kx3h-declencheur:hover, .kx3h-simple:hover, .kx3h-declencheur[aria-expanded="true"] { background: var(--k-lavande-pale); color: var(--k-violet) !important; }
.kx3h-chevron { width: .875rem; height: .875rem; opacity: .65; transition: transform .3s, opacity .2s; }
.kx3h-declencheur[aria-expanded="true"] .kx3h-chevron { opacity: 1; transform: rotate(180deg); }
.kx3h-actions { display: flex; grid-column: 3; justify-self: end; align-items: center; gap: .375rem; }
/* Lien discret vers l'application, moins fort que le bouton */
.kx3h-app { display: none; align-items: center; gap: .25rem; padding: .4375rem .625rem; border-radius: 6px; font-size: .875rem; font-weight: 400; line-height: 1.25; white-space: nowrap; color: var(--k-er80) !important; transition: color .2s, background-color .2s; }
.kx3h-app:hover { background: var(--k-lavande-pale); color: var(--k-erebus) !important; }
.kx3h-app__fleche, .kx3h-mobile__app svg { width: .875rem; height: .875rem; }
/* a partir de 1536 px : en dessous, il serrerait les entrees centrees (il reste dans le pied de page et le menu mobile) */
@media (min-width: 1536px) { .kx3h-app { display: inline-flex; } }
.kx3h-cta { display: none; height: 2.25rem; align-items: center; padding: 0 .875rem; border-radius: 4px; background: var(--k-violet); color: var(--k-blanc) !important; font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s; }
.kx3h-cta:hover { background: var(--k-erebus); }
@media (min-width: 640px) { .kx3h-cta { display: inline-flex; } }
.kx3h-burger { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; margin: 0 0 0 .25rem; padding: 0; border: 1px solid var(--k-er20); border-radius: 4px; background: var(--k-blanc); color: var(--k-erebus); cursor: pointer; }
.kx3h-burger:focus, .kx3h-burger:focus-visible, .kx3h-burger:active { background: var(--k-blanc); color: var(--k-erebus); }
.kx3h-burger:hover { background: var(--k-lavande-pale); color: var(--k-erebus); }
.kx3h-burger svg { width: 1.125rem; height: 1.125rem; }
.kx3h .kx3h-burger__fermer, .kx3h .kx3h-burger[aria-expanded="true"] .kx3h-burger__ouvrir { display: none; }
.kx3h .kx3h-burger[aria-expanded="true"] .kx3h-burger__fermer { display: block; }
@media (min-width: 1280px) { .kx3h-burger { display: none; } }

/* Sur les pages interieures a premier ecran sombre (.kx-v3-hero), le menu est pose sur ce premier
   ecran tant qu'on n'a pas defile, qu'aucun menu n'est ouvert et qu'on ne survole pas la barre :
   fond transparent, textes clairs, bouton en contour. Au survol, il passe sur fond blanc. */
body:has(.entry-content > .kx-v3-hero) .kx3h:not(.is-defile):not(.is-ouvert) .kx3h-fond:not(:hover):not(:has(:focus-visible)) { background: transparent; border-bottom-color: transparent; }
body:has(.entry-content > .kx-v3-hero) .kx3h:not(.is-defile):not(.is-ouvert) .kx3h-fond:not(:hover):not(:has(:focus-visible)) :is(.kx3h-logo, .kx3h-logo span, .kx3h-logo__marque, .kx3h-declencheur, .kx3h-simple) { color: var(--k-blanc) !important; }
body:has(.entry-content > .kx-v3-hero) .kx3h:not(.is-defile):not(.is-ouvert) .kx3h-fond:not(:hover):not(:has(:focus-visible)) .kx3h-app { color: rgba(255, 255, 255, .82) !important; }
body:has(.entry-content > .kx-v3-hero) .kx3h:not(.is-defile):not(.is-ouvert) .kx3h-fond:not(:hover):not(:has(:focus-visible)) .kx3h-cta { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
body:has(.entry-content > .kx-v3-hero) .kx3h:not(.is-defile):not(.is-ouvert) .kx3h-fond:not(:hover):not(:has(:focus-visible)) .kx3h-burger { background: transparent; border-color: rgba(255, 255, 255, .4); color: var(--k-blanc); }

/* Sous-menus. 02/10 au soir (Thomas : « optimise les sous-menus et evite trop de niveaux de lecture ») : deux
   niveaux de lecture, le nom de la page puis une ligne qui dit ce qu'on y trouve ; un libelle de famille
   seulement quand le sous-menu mele deux familles de pages (Services, Industries) ; les liens d'ensemble sous
   la liste.
   03/10 (Nicolas : « le menu Harvey, il permet d'avoir des CTA et des visuels sur la droite ») : le panneau
   prend toute la largeur sous la barre et suit la grille des pages (douze colonnes, 4rem d'ecart) : la liste
   sur huit colonnes, ses liens en colonnes qui se lisent de haut en bas, le texte aligne sur le logo ; a
   droite, sur quatre colonnes, une carte : un visuel 16/9 (un ecran du produit sur une photo, ou l'equipe),
   le nom de la page avec sa fleche, sa ligne. Les memes deux niveaux de lecture que la liste.
   Puis (Thomas : « la droite, c'est pour les CTA ») : toutes les pages restent dans la liste ; la carte porte
   un appel a l'action (son libelle en violet, comme un lien d'action). Un sous-menu de quatre pages au plus
   (--court) pose sa liste sur une colonne (cinq colonnes de la grille) et son appel en largeur, visuel a
   gauche (six colonnes) : la liste et l'appel tiennent la meme hauteur, le panneau reste equilibre. */
.kx3h-panneau { position: absolute; left: 0; right: 0; top: 100%; padding: 0 var(--k-gouttiere); background: var(--k-blanc); border-bottom: 1px solid var(--k-er10); box-shadow: 0 30px 48px -36px rgba(18, 1, 45, .4); animation: kx3hFondu .2s ease both; }
.kx3h-panneau[hidden] { display: none; }
/* On glisse d'une entree a l'autre : le panneau suivant est la tout de suite, sans fondu */
.kx3h-panneau.is-enchaine { animation: none; }
@media (max-width: 1279px) { .kx3h-panneau { display: none !important; } }
@keyframes kx3hFondu { from { opacity: 0; } to { opacity: 1; } }
.kx3h-panneau__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 4rem; max-width: 88rem; margin: 0 auto; padding: 1.75rem 0 2.25rem; }
/* La liste : les liens ont un fond au survol, la liste recule d'autant pour que le texte tombe sur le logo */
.kx3h-groupes { display: flex; grid-column: 1 / span 8; grid-row: 1; gap: 1.5rem; min-width: 0; margin-left: -.75rem; }
.kx3h-groupe { flex: var(--kx3h-cols, 2) 1 0; min-width: 0; }
.kx3h-titre-col { margin: 0 !important; padding: 0 .75rem .375rem; font-size: .75rem; font-weight: 500; line-height: 1.3; color: var(--k-er60); }
.kx3h-liste { display: grid; grid-template-columns: repeat(var(--kx3h-cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--kx3h-rangs, 3), auto); grid-auto-flow: column; column-gap: 1.5rem; }
.kx3h-lien { display: block; height: 100%; padding: .625rem .75rem; border-radius: 6px; color: var(--k-erebus) !important; transition: background-color .15s; }
.kx3h-lien:hover { background: var(--k-lavande-pale); }
.kx3h-lien__nom { display: block; font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--k-erebus); transition: color .15s; }
.kx3h-lien:hover .kx3h-lien__nom, .kx3h-lien[aria-current="page"] .kx3h-lien__nom { color: var(--k-violet); }
.kx3h-lien__texte { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.4; color: var(--k-er60); }
.kx3h-lien__texte::first-letter { text-transform: uppercase; }
/* Les liens d'ensemble, au pied de la liste, sur la ligne du bas de la carte */
.kx3h-suite { display: flex; grid-column: 1 / span 8; grid-row: 2; align-self: end; gap: 1.75rem; margin-top: 1.25rem; padding-top: .875rem; border-top: 1px solid var(--k-er10); }
.kx3h-tous { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--k-violet) !important; transition: color .2s; }
.kx3h-tous:hover { color: var(--k-erebus) !important; }
.kx3h-tous svg { width: .875rem; height: .875rem; transition: transform .3s var(--k-ease); }
.kx3h-tous:hover svg { transform: translateX(3px); }
/* La carte de droite */
.kx3h-vedette { display: block; grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: start; color: var(--k-erebus) !important; }
.kx3h-vedette__visuel { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 8px; background: var(--k-lavande-pale); }
.kx3h-vedette__visuel img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kx3h-vedette__nom { display: flex; align-items: center; gap: .375rem; margin-top: .875rem; font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--k-violet); transition: color .15s; }
.kx3h-vedette__nom svg { width: .875rem; height: .875rem; transition: transform .3s var(--k-ease); }
.kx3h-vedette:hover .kx3h-vedette__nom, .kx3h-vedette[aria-current="page"] .kx3h-vedette__nom { color: var(--k-erebus); }
.kx3h-vedette:hover .kx3h-vedette__nom svg { transform: translateX(3px); }
.kx3h-vedette__texte { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.4; color: var(--k-er60); }
/* Peu de pages : la liste sur cinq colonnes, l'appel sur six, son visuel a gauche, son texte a cote */
.kx3h-panneau--court .kx3h-groupes { grid-column: 1 / span 5; }
.kx3h-panneau--court .kx3h-vedette { display: grid; grid-column: 7 / span 6; grid-row: 1; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 1.5rem; align-items: center; align-self: center; }
.kx3h-panneau--court .kx3h-vedette__visuel { grid-row: 1 / span 2; }
.kx3h-panneau--court .kx3h-vedette__nom { grid-column: 2; align-self: end; margin-top: 0; }
.kx3h-panneau--court .kx3h-vedette__texte { grid-column: 2; align-self: start; margin-top: .25rem; }
/* Le voile pose sur la page quand un sous-menu est ouvert (cree par korbyx-chrome-v3.js) */
.kx3h-voile { position: fixed; z-index: 999; inset: 0; background: rgba(18, 1, 45, .3); opacity: 0; pointer-events: none; transition: opacity .25s; }
.kx3h-voile.is-actif { opacity: 1; }
@media (max-width: 1279px) { .kx3h-voile { display: none; } }
@media (prefers-reduced-motion: reduce) { .kx3h-panneau { animation: none; } .kx3h-voile { transition: none; } }

/* Menu mobile : tiroir sous la barre */
.kx3h-mobile { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 56px); overflow-y: auto; padding: 0 var(--k-gouttiere) 1.5rem; background: var(--k-blanc); border-bottom: 1px solid var(--k-er10); }
.kx3h-mobile[hidden] { display: none; }
@media (min-width: 1280px) { .kx3h-mobile { display: none !important; } }
/* Chaque entree se deplie (02/10) : une liste courte a l'ouverture, au lieu de tous les liens a la suite */
.kx3h-mobile__liste > li { border-bottom: 1px solid var(--k-er10); }
.kx3h-mobile__liste summary { display: flex; align-items: center; justify-content: space-between; padding: .875rem 0; font-size: 1rem; font-weight: 500; color: var(--k-erebus); cursor: pointer; list-style: none; }
.kx3h-mobile__liste summary::-webkit-details-marker { display: none; }
.kx3h-mobile__liste summary .kx3h-chevron { width: 1rem; height: 1rem; color: var(--k-er60); opacity: 1; }
.kx3h-mobile__liste details[open] summary .kx3h-chevron { transform: rotate(180deg); }
.kx3h-mobile__liste ul { display: grid; gap: .625rem; padding: 0 0 1rem; }
.kx3h-mobile__liste a { display: block; font-size: 1rem; color: var(--k-er80) !important; }
.kx3h-mobile__liste a.kx3h-mobile__seul { padding: .875rem 0; font-weight: 500; color: var(--k-erebus) !important; }
.kx3h-mobile__cta { display: flex; height: 3rem; margin-top: 1rem; align-items: center; justify-content: center; border-radius: 4px; background: var(--k-violet); color: var(--k-blanc) !important; font-size: 1rem; font-weight: 500; }
.kx3h-mobile__app { display: flex; height: 2.75rem; margin-top: .75rem; align-items: center; justify-content: center; gap: .25rem; font-size: .9375rem; font-weight: 500; color: var(--k-er80) !important; }

/* --- Pied de page (30/09 au soir, Thomas : « trop sombre ») : blanc casse, texte Erebus, violet ------ */
.kx3f { padding: 5rem var(--k-gouttiere) 2.5rem; background: var(--k-ghost); border-top: 1px solid var(--k-er10); color: var(--k-erebus); }
.kx3f-in { max-width: 88rem; margin: 0 auto; }
.kx3f-haut { display: grid; gap: 3.5rem; }
@media (min-width: 1280px) { .kx3f-haut { grid-template-columns: 1fr 2.4fr; gap: 2.5rem; } }
.kx3f-logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--k-erebus) !important; }
.kx3f-logo__marque { width: 1.75rem; height: 1.75rem; color: var(--k-violet); }
.kx3f-logo span { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; }
.kx3f-promesse { max-width: 24rem; margin-top: 1.25rem !important; font-size: 1.0625rem; line-height: 1.6; color: var(--k-er80); }
.kx3f-note { margin-top: .75rem !important; font-size: .8125rem; color: var(--k-er60); }
/* La page LinkedIn de Korbyx (08/10) : un picto dans le gabarit des garanties (blanc, filet, violet) */
.kx3f-social { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-top: 1.5rem; border: 1px solid var(--k-er20); border-radius: 4px; background: var(--k-blanc); color: var(--k-violet) !important; transition: background-color .25s, border-color .25s, color .25s; }
.kx3f-social:hover { border-color: var(--k-violet); background: var(--k-violet); color: var(--k-blanc) !important; }
.kx3f-social svg { width: 1.125rem; height: 1.125rem; }
.kx3f-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
@media (min-width: 768px) { .kx3f-colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kx3f-colonnes { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kx3f-titre { font-size: .875rem; font-weight: 600; color: var(--k-erebus); }
.kx3f-colonnes ul { display: grid; gap: .75rem; margin-top: 1rem; }
.kx3f-colonnes a { font-size: .875rem; line-height: 1.4; color: var(--k-er80) !important; transition: color .25s; }
.kx3f-colonnes a:hover { color: var(--k-violet) !important; }
.kx3f-garanties { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 4rem !important; padding-top: 2rem !important; border-top: 1px solid var(--k-er10); }
.kx3f-garanties li { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .875rem; border: 1px solid var(--k-er20); border-radius: 4px; background: var(--k-blanc); font-size: .875rem; color: var(--k-erebus); }
.kx3f-garanties svg { width: 1rem; height: 1rem; color: var(--k-violet); }
.kx3f-legal { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; font-size: .875rem; color: var(--k-er60); }
@media (min-width: 1024px) { .kx3f-legal { flex-direction: row; align-items: center; justify-content: space-between; } }
.kx3f-legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.kx3f-legal a { color: var(--k-er60) !important; transition: color .25s; }
.kx3f-legal a:hover { color: var(--k-erebus) !important; }

@media (prefers-reduced-motion: reduce) { .kx3h-panneau, .kx3c-cta__fleche { transition: none; animation: none; } }