/* ==========================================================================
   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; }

.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 ------------------------------------ */
.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) + 73px); }
@media (min-width: 1024px) { .kx3h-espace { height: calc(var(--kx3h-annonce, 0px) + 89px); } }
/* 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, 64px) + 73px); }
@media (min-width: 1024px) { .kx3h-espace--annonce { height: calc(var(--kx3h-annonce, 64px) + 89px); } }

.kx3h-annonce { padding: 0 var(--k-gouttiere); background: var(--k-violet); color: var(--k-blanc); }
.kx3h-annonce[hidden] { display: none; }
.kx3h-annonce__in { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; max-width: 88rem; min-height: 64px; margin: 0 auto; padding: .75rem 2rem .75rem 0; }
@media (min-width: 768px) { .kx3h-annonce__in { padding: .75rem 2.5rem; } }
.kx3h-annonce__date { display: flex; width: 2.75rem; height: 2.75rem; flex: none; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; background: rgba(255, 255, 255, .15); line-height: 1; }
.kx3h-annonce__date span:first-child { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kx3h-annonce__date span:last-child { margin-top: .125rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.kx3h-annonce p { min-width: 0; font-size: .875rem; font-weight: 500; line-height: 1.375; 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, .75); 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: 1rem; height: 1rem; }

.kx3h-fond { padding: 0 var(--k-gouttiere); background: var(--k-ghost); border-bottom: 1px solid var(--k-er10); }
.kx3h-barre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 88rem; height: 72px; margin: 0 auto; }
@media (min-width: 1024px) { .kx3h-barre { height: 88px; } }
.kx3h-logo { display: inline-flex; flex: none; align-items: center; gap: .5rem; color: var(--k-erebus) !important; }
.kx3h-logo__marque { width: 1.75rem; height: 1.75rem; color: var(--k-violet); }
.kx3h-logo span { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; color: var(--k-erebus); }
@media (min-width: 1024px) { .kx3h-logo__marque { width: 2rem; height: 2rem; } .kx3h-logo span { font-size: 1.4375rem; } }
.kx3h-menu { display: none !important; }
@media (min-width: 1280px) { .kx3h-menu { display: flex !important; align-items: center; gap: .125rem; white-space: nowrap; } }
@media (min-width: 1536px) { .kx3h-menu { gap: .375rem; } }
.kx3h-declencheur, .kx3h-simple { display: inline-flex; align-items: center; gap: .375rem; margin: 0; padding: .625rem .75rem; border: 0; border-radius: 4px; background: none; font-size: .9375rem; font-weight: 500; line-height: 1.25; color: var(--k-erebus) !important; cursor: pointer; transition: background-color .25s; }
@media (min-width: 1536px) { .kx3h-declencheur, .kx3h-simple { padding: .625rem 1rem; font-size: 1rem; } }
/* 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-er10); }
.kx3h-chevron { width: 1rem; height: 1rem; transition: transform .3s; }
.kx3h-declencheur[aria-expanded="true"] .kx3h-chevron { transform: rotate(180deg); }
.kx3h-actions { display: flex; align-items: center; gap: .5rem; }
/* Lien discret vers l'application, moins fort que le bouton */
.kx3h-app { display: none; align-items: center; gap: .25rem; padding: .5rem .75rem; border-radius: 4px; font-size: .9375rem; font-weight: 500; line-height: 1.25; white-space: nowrap; color: var(--k-er80) !important; transition: color .2s, background-color .2s; }
.kx3h-app:hover { background: var(--k-er10); color: var(--k-erebus) !important; }
.kx3h-app__fleche, .kx3h-mobile__app svg { width: 1rem; height: 1rem; }
@media (min-width: 1440px) { .kx3h-app { display: inline-flex; } }
.kx3h-cta { display: none; height: 2.75rem; align-items: center; padding: 0 1rem; border-radius: 4px; background: var(--k-violet); color: var(--k-blanc) !important; font-size: .9375rem; font-weight: 500; line-height: 1; white-space: nowrap; transition: background-color .25s; }
.kx3h-cta:hover { background: var(--k-erebus); }
@media (min-width: 640px) { .kx3h-cta { display: inline-flex; } }
.kx3h-burger { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; margin: 0; padding: 0; border: 1px solid var(--k-er20); border-radius: 4px; background: var(--k-ghost); color: var(--k-erebus); cursor: pointer; }
.kx3h-burger:focus, .kx3h-burger:focus-visible, .kx3h-burger:active { background: var(--k-ghost); color: var(--k-erebus); }
.kx3h-burger:hover { background: var(--k-er10); color: var(--k-erebus); }
.kx3h-burger svg { width: 1.25rem; height: 1.25rem; }
.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; } }

/* Meta-menus pleine largeur sous la barre */
.kx3h-panneau { position: absolute; left: 0; right: 0; top: 100%; padding: 0 3rem; background: var(--k-ghost); border-bottom: 1px solid var(--k-er10); animation: kx3hFondu .25s ease both; }
.kx3h-panneau[hidden] { display: none; }
@media (max-width: 1279px) { .kx3h-panneau { display: none !important; } }
@keyframes kx3hFondu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kx3h-panneau__in { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; max-width: 88rem; margin: 0 auto; padding: 2.5rem 0; }
.kx3h-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.kx3h-titre-col { padding: 0 .75rem; font-size: .75rem; font-weight: 600; color: var(--k-er60); }
.kx3h-colonnes ul { display: grid; gap: .25rem; margin-top: .75rem; }
.kx3h-lien { display: flex; align-items: flex-start; gap: .875rem; padding: .75rem; border-radius: 6px; color: var(--k-erebus) !important; transition: background-color .25s; }
.kx3h-lien:hover { background: var(--k-lavande-pale); }
.kx3h-lien__ic { display: flex; width: 2.5rem; height: 2.5rem; flex: none; align-items: center; justify-content: center; border-radius: 6px; background: var(--k-lavande-pale); color: var(--k-violet); transition: background-color .25s, color .25s; }
.kx3h-lien__ic svg { width: 1.25rem; height: 1.25rem; }
.kx3h-lien:hover .kx3h-lien__ic { background: var(--k-violet); color: var(--k-blanc); }
.kx3h-lien__nom { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--k-erebus); }
.kx3h-lien__texte { display: block; font-size: .875rem; line-height: 1.4; color: var(--k-er80); }
.kx3h-tous { display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; padding: 0 .75rem; font-size: .875rem; font-weight: 500; color: var(--k-violet) !important; }
.kx3h-tous:hover { color: var(--k-erebus) !important; }
.kx3h-tous svg { width: .875rem; height: .875rem; }
.kx3h-carte { position: relative; display: flex; min-height: 16rem; overflow: hidden; padding: 1.5rem; border-radius: 6px; background: var(--k-violet); color: var(--k-blanc) !important; flex-direction: column; justify-content: space-between; }
.kx3h-carte__marque { display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255, 255, 255, .15); }
.kx3h-carte__marque svg { width: 1.5rem; height: 1.5rem; color: var(--k-blanc); }
.kx3h-carte__sur { position: relative; display: block; font-size: .75rem; font-weight: 600; color: var(--k-lavande); }
.kx3h-carte__titre { position: relative; display: block; margin-top: .5rem; font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--k-blanc); }
.kx3h-carte__voir { position: relative; display: inline-flex; align-items: center; gap: .375rem; margin-top: 1rem; font-size: .875rem; font-weight: 500; }
.kx3h-carte__voir svg { width: .875rem; height: .875rem; }
.kx3h-carte--photo { justify-content: flex-end; background: var(--k-erebus); }
.kx3h-carte--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .7s var(--k-ease); }
.kx3h-carte--photo:hover img { transform: scale(1.05); }

/* Menu mobile : tiroir sous la barre */
.kx3h-mobile { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 72px); overflow-y: auto; padding: 0 var(--k-gouttiere) 1.5rem; background: var(--k-ghost); border-bottom: 1px solid var(--k-er10); }
.kx3h-mobile[hidden] { display: none; }
@media (min-width: 1280px) { .kx3h-mobile { display: none !important; } }
.kx3h-mobile__liste > li { padding: .875rem 0; border-bottom: 1px solid var(--k-er10); }
.kx3h-mobile__liste > li > p { font-size: .875rem; font-weight: 500; color: var(--k-er60); }
.kx3h-mobile__liste ul { display: grid; gap: .5rem; margin-top: .5rem; }
.kx3h-mobile__liste a { display: block; font-size: 1rem; color: var(--k-erebus) !important; }
.kx3h-mobile__liste a.kx3h-mobile__seul { font-weight: 500; }
.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); }
.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; } }