/* ═══════════════════════════════════════════════════════════════════════
   Kalisme®, habillage « chemin de l’aube » (D-348, 2026-09-28)
   ═══════════════════════════════════════════════════════════════════════

   Feuille OPT-IN. Toutes ses règles commencent par html[data-aube] (sauf
   @keyframes) : la charger sur une page qui ne porte pas l’attribut ne change
   RIEN. /pro, /pro/en et miroir-travail partagent kalisme-nav.js et
   kalisme-a11y.css avec les pages publiques, sans s’opt-in : ils rendent à
   l’identique. kalisme-tokens.css n’est pas modifié (/pro le lit).

   ── 1. Activer ─────────────────────────────────────────────────────────
   <html lang="fr" data-aube="sombre">  page qui s’ouvre sur la nuit, barre nuit
   <html lang="fr" data-aube="clair">   page qui s’ouvre sur le papier, barre papier
   (attribut vide = « clair »)

   Charger APRÈS kalisme-tokens.css et kalisme-a11y.css :
     page racine ou page qui porte <base href="/"> :
       <link rel="stylesheet" href="kalisme-aube.css?v=20260928">
     page en sous-dossier sans <base> :
       <link rel="stylesheet" href="/kalisme-aube.css?v=20260928">
   La version se lit dans tools/cache_versions.lock.json (clé « kalisme-aube.css »).
   Polices : la page charge Google Fonts
     family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Spectral+SC:wght@400;500
   et, si elle sert ja, zh, ko, ar, hi ou bn, la Noto correspondante. Cette
   feuille ne charge AUCUNE police : elle les nomme en tête de pile.

   ⚠️ Sur une page qui porte <base href="/">, pas de <use href="#…"> SVG : il
   viserait /#… et l’icône serait vide. Écrire les chemins de l’icône en ligne.

   ── 2. Jetons (sur html[data-aube]) ────────────────────────────────────
   --a-nuit #0A2418 · --a-foret #0E2A1E · --a-releve #15392B · --a-sousbois #1B4533
   --a-papier #F0EDE5 · --a-lin #E8E3D5 · --a-carte #F8F6F0
   --a-ivoire #F5F0E6 · --a-ivoire-82 · --a-sauge #A9BBA9
   --a-encre #1A3327 · --a-encre-douce #3D5647
   --a-or #C9A84C · --a-or-clair #D9BC63 · --a-or-brun #7A5E1F · --a-aube #E9D296
   --a-filet-sombre (or 28 %) · --a-filet-clair (encre 16 %)
   --a-serif (Spectral) · --a-sc (Spectral SC, sur-titres) · --a-ui (police du système)
   --a-courbe cubic-bezier(.22,1,.36,1) · --a-t-court 160ms · --a-t-moyen 260ms · --a-t-long 480ms
   Hors latin (html[lang] ja, zh, ko, ar, hi, bn) : --a-serif et --a-sc mettent
   Noto Serif JP / SC / KR, Noto Naskh Arabic, Noto Serif Devanagari / Bengali
   en tête ; pas d’italique ni d’espacement de lettres là où l’écriture ne le
   supporte pas.
   Ponts : sous html[data-aube], --sans vaut --a-ui et --serif vaut --a-serif,
   pour que kalisme-a11y.css (lien d’évitement) suive sans être modifié.
   ⚠️ L’or #C9A84C ne porte JAMAIS de texte sur fond clair : --a-accent vaut
   l’or brun sur les surfaces claires, et c’est lui qu’on emploie.

   ── 3. Surfaces ────────────────────────────────────────────────────────
   Sombres : .a-nuit .a-foret .a-releve · claires : .a-papier .a-lin .a-carte
   Chacune pose fond + couleur et les variables locales, héritées par tout ce
   qu’elle contient :
     --a-texte        texte principal (ivoire sur sombre, encre sur clair)
     --a-texte-doux   texte secondaire (sauge / encre douce)
     --a-accent       or sur sombre, or brun sur clair (icônes, sur-titres, filets forts)
     --a-filet        filet fin (or 28 % / encre 16 %)
     --a-focus        anneau de focus clavier lisible sur la surface
   Le body est papier en « clair », nuit en « sombre ».

   ── 4. Typographie (aucune marge : l’espacement appartient à la page) ──
   .a-surtitre  Spectral SC 500, espacé 0,2 em, --a-accent, 15 px (13 px mobile)
   .a-titre     Spectral 300, 60 px à 36 px, interligne 1,1, text-wrap: balance
   .a-chapeau   Spectral italique 300, 23 px à 19 px, --a-texte-doux
   .a-lecture   Spectral 400, 19 px à 17 px, interligne 1,75, 68 signes au plus,
                text-wrap: pretty

   ── 5. Boutons ─────────────────────────────────────────────────────────
   <a class="a-btn a-btn--principal">  pilule 56 px (54 px mobile), police du
       système 600 ; or et texte forêt sur surface sombre, forêt et texte ivoire
       sur surface claire (par héritage de la surface, rien à choisir)
   <a class="a-btn a-btn--ligne">      contour, même gabarit
   Une .a-ico dans un bouton prend 18 px et la bonne couleur toute seule.

   ── 6. Ornements ───────────────────────────────────────────────────────
   <svg class="a-ico" aria-hidden="true" viewBox="0 0 24 24">…</svg>
       icône au trait : stroke currentColor, 1,25 px, couleur --a-accent par
       défaut, 24 px sans attribut width (sinon l’attribut décide)
   <span class="a-losange" aria-hidden="true"></span>   losange or de 6 px
   <hr class="a-horizon">   filet dégradé, fondu aux extrémités
   <div class="a-halo" aria-hidden="true"></div>
       halo de l’emblème qui respire (inspire 4 s, expire 6 s) ; la page le
       dimensionne et le place (transform libre : le souffle anime « scale »)

   ── 7. Mouvement ───────────────────────────────────────────────────────
   .a-apparait : VISIBLE par défaut, sans script comme avec. kalisme-nav.js
   n’arme l’apparition (480 ms, montée de 12 px, 60 ms de décalage entre
   voisins) que si IntersectionObserver existe et que « réduire les
   animations » n’est pas demandé, et seulement pour les blocs hors écran au
   moment de l’armement. Tout est révélé à l’impression et au bout de 3 s au
   plus tard : rien ne reste masqué. prefers-reduced-motion: reduce coupe
   l’apparition et le souffle. Navigateur piloté (navigator.webdriver :
   captures headless, Playwright) : jamais armé, la capture montre tout.
   Les classes d’état .a-apparait--attente et --joue sont internes.

   ── 8. Barre, bandeau, pied (posés par kalisme-nav.js, rien à écrire) ──
   Barre .kn : 76 px ordinateur, 68 px tablette (≤ 1024 px), 60 px mobile
   (≤ 768 px) ; nuit en « sombre », papier en « clair » ; marque en Spectral SC ;
   page en cours soulignée (aria-current="page") ; langue en pilule globe + code ;
   menu plein écran nuit sous 1024 px (liens, grille des langues, bouton App
   Store). Bandeau .kn-banner : relevé, 44 px
   (48 px mobile), losange or, pilule « Télécharger » à flèche. Pied .kf : forêt,
   emblème + marque, filet or 22 %, mentions en sauge, rangée des langues.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── 1. Jetons ─────────────────────────────────────────────────────── */
html[data-aube] {
  --a-nuit: #0A2418;
  --a-foret: #0E2A1E;
  --a-releve: #15392B;
  --a-sousbois: #1B4533;
  --a-papier: #F0EDE5;
  --a-lin: #E8E3D5;
  --a-carte: #F8F6F0;
  --a-ivoire: #F5F0E6;
  --a-ivoire-82: rgba(245, 240, 230, .82);
  --a-sauge: #A9BBA9;
  --a-encre: #1A3327;
  --a-encre-douce: #3D5647;
  --a-or: #C9A84C;
  --a-or-clair: #D9BC63;
  --a-or-brun: #7A5E1F;
  --a-aube: #E9D296;
  --a-filet-sombre: rgba(201, 168, 76, .28);
  --a-filet-clair: rgba(26, 51, 39, .16);

  --a-serif: 'Spectral', Georgia, serif;
  --a-sc: 'Spectral SC', 'Spectral', Georgia, serif;
  --a-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --a-courbe: cubic-bezier(.22, 1, .36, 1);
  --a-t-court: 160ms;
  --a-t-moyen: 260ms;
  --a-t-long: 480ms;

  /* Ponts vers les feuilles partagées (kalisme-a11y.css lit --sans). */
  --sans: var(--a-ui);
  --serif: var(--a-serif);

  /* Surface par défaut de la page : claire. */
  --a-texte: var(--a-encre);
  --a-texte-doux: var(--a-encre-douce);
  --a-accent: var(--a-or-brun);
  --a-filet: var(--a-filet-clair);
  --a-focus: var(--a-encre);
  --a-btn-fond: var(--a-foret);
  --a-btn-texte: var(--a-ivoire);
  --a-btn-survol: var(--a-releve);
  --a-btn-ico: var(--a-or);
  --a-btn-bord: rgba(26, 51, 39, .3);
  --a-horizon-rgb: 122, 94, 31;

  /* Hauteur de la barre, lue par kalisme-nav.js et par kalisme-a11y.css. */
  --kn-h: 76px;
}

/* Piles hors latin : la Noto de l’écriture en tête, jamais chargée ici. */
html[data-aube][lang|="ja"] { --a-serif: 'Noto Serif JP', 'Spectral', Georgia, serif; --a-sc: 'Noto Serif JP', 'Spectral SC', 'Spectral', Georgia, serif; }
html[data-aube][lang|="zh"] { --a-serif: 'Noto Serif SC', 'Spectral', Georgia, serif; --a-sc: 'Noto Serif SC', 'Spectral SC', 'Spectral', Georgia, serif; }
html[data-aube][lang|="ko"] { --a-serif: 'Noto Serif KR', 'Spectral', Georgia, serif; --a-sc: 'Noto Serif KR', 'Spectral SC', 'Spectral', Georgia, serif; }
html[data-aube][lang|="ar"] { --a-serif: 'Noto Naskh Arabic', 'Spectral', Georgia, serif; --a-sc: 'Noto Naskh Arabic', 'Spectral SC', 'Spectral', Georgia, serif; }
html[data-aube][lang|="hi"] { --a-serif: 'Noto Serif Devanagari', 'Spectral', Georgia, serif; --a-sc: 'Noto Serif Devanagari', 'Spectral SC', 'Spectral', Georgia, serif; }
html[data-aube][lang|="bn"] { --a-serif: 'Noto Serif Bengali', 'Spectral', Georgia, serif; --a-sc: 'Noto Serif Bengali', 'Spectral SC', 'Spectral', Georgia, serif; }

/* Page « sombre » : la surface par défaut est la nuit. */
html[data-aube="sombre"] {
  --a-texte: var(--a-ivoire);
  --a-texte-doux: var(--a-sauge);
  --a-accent: var(--a-or);
  --a-filet: var(--a-filet-sombre);
  --a-focus: var(--a-ivoire);
  --a-btn-fond: var(--a-or);
  --a-btn-texte: var(--a-foret);
  --a-btn-survol: var(--a-or-clair);
  --a-btn-ico: currentColor;
  --a-btn-bord: rgba(201, 168, 76, .55);
  --a-horizon-rgb: 201, 168, 76;
}

@media (max-width: 1024px) {
  html[data-aube] { --kn-h: 68px; }
}
@media (max-width: 768px) {
  html[data-aube] { --kn-h: 60px; }
}


/* ─── Page ──────────────────────────────────────────────────────────── */
html[data-aube] body {
  background: var(--a-papier);
  color: var(--a-encre);
  font-family: var(--a-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-aube="sombre"] body {
  background: var(--a-nuit);
  color: var(--a-ivoire);
}

/* Place de la barre et du bandeau réservée avant le premier rendu, comme
   kalisme-a11y.css (même sélecteur) mais aux hauteurs de l’aube : sinon la
   page saute quand kalisme-nav.js pose les siennes. Ne PAS conditionner à
   :has(script[src*="kalisme-nav.js"]) : ce script est en bas de page, le
   premier rendu le précède, et l’accueil sautait de 12 px dans la même image
   que l’arrivée de Spectral (CLS 0,25, Lighthouse du 28-09). Contrairement à
   kalisme-a11y.css, .lk n’est PAS exclu : le Manifeste en ligne est une liseuse
   .lk qui porte la barre depuis le 28-09 (sinon 0 px puis 60 px au premier
   rendu). Garder #mv-loading dans :not() : c’est lui qui donne à cette règle
   une spécificité supérieure à celle de kalisme-a11y.css. */
html[data-aube] body:not(:has(> #mv-loading)) {
  padding-top: calc(var(--kn-h) + var(--kn-banner-h, 44px));
}
@media (max-width: 768px) {
  html[data-aube] body:not(:has(> #mv-loading)) {
    padding-top: calc(var(--kn-h) + var(--kn-banner-h, 48px));
  }
}

/* Anneau de focus : même trait que kalisme-a11y.css, couleur de la surface. */
html[data-aube] :focus-visible {
  outline-color: var(--a-focus);
}


/* ─── 3. Surfaces ───────────────────────────────────────────────────── */
html[data-aube] .a-nuit,
html[data-aube] .a-foret,
html[data-aube] .a-releve {
  color: var(--a-ivoire);
  --a-texte: var(--a-ivoire);
  --a-texte-doux: var(--a-sauge);
  --a-accent: var(--a-or);
  --a-filet: var(--a-filet-sombre);
  --a-focus: var(--a-ivoire);
  --a-btn-fond: var(--a-or);
  --a-btn-texte: var(--a-foret);
  --a-btn-survol: var(--a-or-clair);
  --a-btn-ico: currentColor;
  --a-btn-bord: rgba(201, 168, 76, .55);
  --a-horizon-rgb: 201, 168, 76;
}
html[data-aube] .a-nuit { background-color: var(--a-nuit); }
html[data-aube] .a-foret { background-color: var(--a-foret); }
html[data-aube] .a-releve { background-color: var(--a-releve); }

html[data-aube] .a-papier,
html[data-aube] .a-lin,
html[data-aube] .a-carte {
  color: var(--a-encre);
  --a-texte: var(--a-encre);
  --a-texte-doux: var(--a-encre-douce);
  --a-accent: var(--a-or-brun);
  --a-filet: var(--a-filet-clair);
  --a-focus: var(--a-encre);
  --a-btn-fond: var(--a-foret);
  --a-btn-texte: var(--a-ivoire);
  --a-btn-survol: var(--a-releve);
  --a-btn-ico: var(--a-or);
  --a-btn-bord: rgba(26, 51, 39, .3);
  --a-horizon-rgb: 122, 94, 31;
}
html[data-aube] .a-papier { background-color: var(--a-papier); }
html[data-aube] .a-lin { background-color: var(--a-lin); }
html[data-aube] .a-carte { background-color: var(--a-carte); }


/* ─── 4. Typographie ────────────────────────────────────────────────── */
html[data-aube] .a-surtitre {
  font-family: var(--a-sc);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(13px, calc(12.26px + .19vw), 15px);
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--a-accent);
}
html[data-aube] .a-titre {
  font-family: var(--a-serif);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(36px, calc(27.09px + 2.286vw), 60px);
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--a-texte);
  text-wrap: balance;
}
html[data-aube] .a-chapeau {
  font-family: var(--a-serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(19px, calc(17.51px + .381vw), 23px);
  line-height: 1.6;
  color: var(--a-texte-doux);
  text-wrap: pretty;
}
html[data-aube] .a-lecture {
  font-family: var(--a-serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(17px, calc(16.26px + .19vw), 19px);
  line-height: 1.75;
  max-width: 28.5em;           /* 68 signes au plus, mesure sur Spectral 400 */
  color: var(--a-texte);
  text-wrap: pretty;
}
/* Écritures sans italique ni espacement de lettres (le liage arabe et le
   trait des devanagari et bengali se cassent si l’on espace les lettres). */
html[data-aube][lang|="ar"] .a-surtitre,
html[data-aube][lang|="hi"] .a-surtitre,
html[data-aube][lang|="bn"] .a-surtitre,
html[data-aube][lang|="ar"] .kn-menu-titre,
html[data-aube][lang|="hi"] .kn-menu-titre,
html[data-aube][lang|="bn"] .kn-menu-titre {
  letter-spacing: 0;
}
html[data-aube][lang|="ja"] .a-chapeau,
html[data-aube][lang|="zh"] .a-chapeau,
html[data-aube][lang|="ko"] .a-chapeau,
html[data-aube][lang|="ar"] .a-chapeau,
html[data-aube][lang|="hi"] .a-chapeau,
html[data-aube][lang|="bn"] .a-chapeau {
  font-style: normal;
}


/* ─── 5. Boutons ────────────────────────────────────────────────────── */
html[data-aube] .a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 56px;
  padding: 8px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--a-texte);
  font-family: var(--a-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--a-t-court) var(--a-courbe),
              border-color var(--a-t-court) var(--a-courbe),
              color var(--a-t-court) var(--a-courbe);
}
html[data-aube] .a-btn--principal {
  background: var(--a-btn-fond);
  border-color: var(--a-btn-fond);
  color: var(--a-btn-texte);
}
html[data-aube] .a-btn--principal:hover {
  background: var(--a-btn-survol);
  border-color: var(--a-btn-survol);
  color: var(--a-btn-texte);
}
html[data-aube] .a-btn--ligne {
  background: transparent;
  border-color: var(--a-btn-bord);
  color: var(--a-texte);
}
html[data-aube] .a-btn--ligne:hover {
  border-color: var(--a-accent);
  color: var(--a-texte);
}
html[data-aube] .a-btn .a-ico {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}
html[data-aube] .a-btn--principal .a-ico { color: var(--a-btn-ico); }
html[data-aube] .a-btn--ligne .a-ico { color: var(--a-accent); }
@media (max-width: 768px) {
  html[data-aube] .a-btn { min-height: 54px; }
}


/* ─── 6. Ornements ──────────────────────────────────────────────────── */
html[data-aube] .a-ico {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  overflow: visible;
  color: var(--a-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-aube] .a-ico:not([width]) {
  width: 24px;
  height: 24px;
}
html[data-aube] .a-losange {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  background: var(--a-accent);
  transform: rotate(45deg);
}
html[data-aube] .a-horizon {
  display: block;
  width: 100%;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg,
    rgba(var(--a-horizon-rgb), 0),
    rgba(var(--a-horizon-rgb), .5),
    rgba(var(--a-horizon-rgb), 0));
}
/* Halo : l’aube (#E9D296) en dégradé ; « souffle » de l’app, inspire 4 s,
   expire 6 s (sommet à 40 % d’un cycle de 10 s). */
html[data-aube] .a-halo {
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(233, 210, 150, .20) 0%,
    rgba(233, 210, 150, .07) 36%,
    rgba(233, 210, 150, 0) 66%);
  animation: a-souffle 10s var(--a-courbe) infinite;
}
@keyframes a-souffle {
  0% { opacity: .55; scale: 1; }
  40% { opacity: 1; scale: 1.06; }
  100% { opacity: .55; scale: 1; }
}


/* ─── 7. Mouvement ──────────────────────────────────────────────────── */
/* Les deux classes d’état ne sont posées QUE par kalisme-nav.js : sans
   script, .a-apparait n’a aucune règle et reste visible. */
html[data-aube] .a-apparait.a-apparait--attente {
  opacity: 0;
  translate: 0 12px;
}
html[data-aube] .a-apparait.a-apparait--joue {
  transition: opacity var(--a-t-long) var(--a-courbe),
              translate var(--a-t-long) var(--a-courbe);
}
@media (prefers-reduced-motion: reduce) {
  html[data-aube] .a-apparait,
  html[data-aube] .a-apparait.a-apparait--attente {
    opacity: 1;
    translate: none;
    transition: none;
  }
  html[data-aube] .a-halo {
    animation: none;
    opacity: .8;
  }
}
@media print {
  html[data-aube] .a-apparait,
  html[data-aube] .a-apparait.a-apparait--attente {
    opacity: 1 !important;
    translate: none !important;
  }
}


/* ─── 8a. Bandeau App Store ─────────────────────────────────────────── */
html[data-aube] .kn-banner {
  height: var(--kn-banner-h, 44px);
  box-sizing: border-box;
  justify-content: center;
  padding: 0 56px;
  background: var(--a-releve);
  border-bottom: 1px solid rgba(201, 168, 76, .18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  --a-focus: var(--a-ivoire);
}
html[data-aube] .kn-banner-link {
  flex: 0 1 auto;
  max-width: 100%;
  gap: 12px;
  font-family: var(--a-ui);
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(245, 240, 230, .88);
}
html[data-aube] .kn-banner-link:hover { color: var(--a-ivoire); }
html[data-aube] .kn-banner-spark {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  font-size: 0;
  background: var(--a-or);
  transform: rotate(45deg);
}
html[data-aube] .kn-banner-msg { font-weight: 400; }
html[data-aube] .kn-banner-cta {
  box-sizing: border-box;
  height: 28px;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(201, 168, 76, .5);
  border-radius: 999px;
  color: var(--a-or-clair);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color var(--a-t-court) var(--a-courbe), border-color var(--a-t-court) var(--a-courbe);
}
html[data-aube] .kn-banner-link:hover .kn-banner-cta {
  background: rgba(201, 168, 76, .12);
  border-color: var(--a-or-clair);
  color: var(--a-or-clair);
}
html[data-aube] .kn-banner-arrow { display: inline-flex; }
html[data-aube] .kn-banner-link:hover .kn-banner-arrow { transform: none; }
html[data-aube] .kn-banner-arrow svg,
html[data-aube] .kn-banner-close svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-aube] .kn-banner-arrow svg { width: 14px; height: 14px; }
html[data-aube] .kn-banner-close {
  width: 32px;
  height: 32px;
  right: 14px;
  left: auto;
  color: var(--a-sauge);
}
html[data-aube] .kn-banner-close:hover {
  background: rgba(245, 240, 230, .08);
  color: var(--a-ivoire);
}
html[data-aube] .kn-banner-close svg { width: 16px; height: 16px; }
html[data-aube][dir="rtl"] .kn-banner-close,
html[data-aube][data-lang="ar"] .kn-banner-close {
  right: auto;
  left: 14px;
}
html[data-aube][dir="rtl"] .kn-banner-arrow svg,
html[data-aube][data-lang="ar"] .kn-banner-arrow svg {
  transform: scaleX(-1);
}


/* ─── 8b. Barre de navigation ───────────────────────────────────────── */
/* Barre claire par défaut (papier) ; « sombre » la passe à la nuit. */
html[data-aube] .kn {
  box-sizing: border-box;      /* 76 / 68 / 60 px filet compris, comme la maquette */
  --a-texte: var(--a-encre);
  --a-accent: var(--a-or-brun);
  --a-focus: var(--a-encre);
  --kn-a-lien: var(--a-encre-douce);
  --kn-a-bord: rgba(26, 51, 39, .12);
  --kn-a-pilule: rgba(26, 51, 39, .22);
  background: var(--a-papier);
  color: var(--a-encre);
  border-bottom: 1px solid var(--kn-a-bord);
  box-shadow: none;
  transition: top var(--kn-t), background-color var(--a-t-moyen) var(--a-courbe);
}
html[data-aube="sombre"] .kn {
  --a-texte: var(--a-ivoire);
  --a-accent: var(--a-or);
  --a-focus: var(--a-ivoire);
  --kn-a-lien: rgba(245, 240, 230, .8);
  --kn-a-bord: rgba(201, 168, 76, .14);
  --kn-a-pilule: rgba(201, 168, 76, .35);
  background: var(--a-nuit);
  color: var(--a-ivoire);
}
html[data-aube] .kn-c {
  max-width: 1440px;
  box-sizing: border-box;
  justify-content: flex-start;
  padding: 0 56px;
  padding-left: max(56px, env(safe-area-inset-left));
  padding-right: max(56px, env(safe-area-inset-right));
}

/* Marque : « Kalisme » en Spectral SC (la casse normale donne les petites
   capitales), ® en or. Latine dans toutes les langues : jamais retournée, et
   jamais « KALİSME » sous lang="tr" (la forme locale turque du i, « locl » de la
   police, est coupée sur la seule marque ; les mots turcs la gardent). Dans le
   texte, le nom pris dans une ligne en petites capitales ou en capitales porte
   lang="fr" : ni la forme locale ni la capitale turque ne s’y appliquent. */
html[data-aube] .kn-logo,
html[data-aube] .kf-wordmark {
  display: inline-flex;
  align-items: flex-start;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Spectral SC', 'Spectral', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  letter-spacing: .2em;
  white-space: nowrap;
  text-decoration: none;
  font-feature-settings: "locl" 0;
}
html[data-aube] .kn-logo {
  font-size: 21px;
  color: var(--a-texte);
}
html[data-aube] .kn-logo sup,
html[data-aube] .kf-wordmark sup {
  margin-left: 2px;
  font-family: var(--a-ui);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: baseline;
  color: var(--a-accent);
}

html[data-aube] .kn-links {
  flex: 0 1 auto;
  gap: 32px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
html[data-aube] .kn-a {
  padding: 0 0 3px;
  border-bottom: 1px solid transparent;
  font-family: var(--a-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--kn-a-lien);
  transition: color var(--a-t-court) var(--a-courbe), border-color var(--a-t-court) var(--a-courbe);
}
html[data-aube] .kn-a::after { content: none; }
html[data-aube] .kn-a:hover { color: var(--a-texte); }
html[data-aube] .kn-a[aria-current="page"] {
  color: var(--a-texte);
  border-bottom-color: var(--a-accent);
}
html[data-aube] .kn-a[hidden] { display: none; }

/* Sélecteur de langue : pilule globe + code, sans drapeau. */
html[data-aube] .kn-lang {
  margin-inline-start: 40px;
  margin-inline-end: 0;
}
html[data-aube] .kn-lang-btn {
  box-sizing: border-box;
  height: 40px;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--kn-a-pilule);
  border-radius: 999px;
  background: transparent;
  color: var(--a-texte);
  font-family: var(--a-ui);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: border-color var(--a-t-court) var(--a-courbe);
}
html[data-aube] .kn-lang-btn:hover {
  background: transparent;
  border-color: var(--a-accent);
}
html[data-aube] .kn-globe,
html[data-aube] .kn-lang-chevron {
  flex-shrink: 0;
  fill: none;
  stroke: var(--a-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-aube] .kn-globe { width: 16px; height: 16px; stroke-width: 1.4; }
html[data-aube] .kn-lang-chevron { width: 14px; height: 14px; stroke-width: 1.5; }
html[data-aube] .kn-lang-flag {
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
}
html[data-aube] .kn-lang-dd {
  top: calc(100% + 8px);
  min-width: 200px;
  max-height: min(440px, 70vh);
  padding: 6px;
  border: 1px solid var(--a-filet-clair);
  border-radius: 16px;
  background: var(--a-carte);
  box-shadow: 0 12px 32px rgba(10, 36, 24, .16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scrollbar-color: var(--kn-a-pilule) transparent;
}
html[data-aube="sombre"] .kn-lang-dd {
  border-color: var(--a-filet-sombre);
  background: var(--a-nuit);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
html[data-aube] .kn-lang-opt {
  min-height: 40px;
  gap: 12px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--a-texte);
  font-family: var(--a-ui);
  font-size: 14px;
}
html[data-aube] .kn-lang-opt:hover { background: rgba(26, 51, 39, .06); }
html[data-aube="sombre"] .kn-lang-opt:hover { background: rgba(201, 168, 76, .1); }
html[data-aube] .kn-lang-active,
html[data-aube] .kn-lang-active:hover {
  font-weight: 600;
  color: var(--a-texte);
  background: rgba(26, 51, 39, .06);
}
html[data-aube="sombre"] .kn-lang-active,
html[data-aube="sombre"] .kn-lang-active:hover { background: rgba(201, 168, 76, .12); }
html[data-aube] .kn-lang-optflag {
  min-width: 2em;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--a-accent);
}

/* Bouton du menu : deux traits (24 px, trait 1,5), qui se croisent à l’ouverture. */
html[data-aube] .kn-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--a-texte);
}
html[data-aube] .kn-ham {
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: transparent;
}
html[data-aube] .kn-ham::before,
html[data-aube] .kn-ham::after {
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
html[data-aube] .kn-ham::before { top: -3.5px; }
html[data-aube] .kn-ham::after { top: 3.5px; }
html[data-aube] .kn-btn[aria-expanded="true"] .kn-ham { background: transparent; }
html[data-aube] .kn-btn[aria-expanded="true"] .kn-ham::before { transform: translateY(3.5px) rotate(45deg); }
html[data-aube] .kn-btn[aria-expanded="true"] .kn-ham::after { transform: translateY(-3.5px) rotate(-45deg); }

/* Menu mobile : langues et App Store, masqués hors du menu plein écran. */
html[data-aube] .kn-menu-plus { display: none; }

@media (max-width: 1024px) {
  html[data-aube] .kn-c {
    padding: 0 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  html[data-aube] .kn-logo { font-size: 19px; }
  html[data-aube] .kn-lang {
    margin-inline-start: auto;
    margin-inline-end: 4px;
  }
  html[data-aube] .kn-lang-btn {
    height: 44px;
    padding: 0 12px;
  }
  html[data-aube] .kn-lang-chevron { display: none; }
  html[data-aube] .kn-btn { display: flex; }

  /* Menu ouvert : la barre passe à la nuit (même en « clair »), la pilule de
     langue s’efface, la liste occupe l’écran sous la barre. */
  html[data-aube] .kn:has(.kn-links.active) {
    --a-texte: var(--a-ivoire);
    --a-accent: var(--a-or);
    --a-focus: var(--a-ivoire);
    --kn-a-bord: rgba(201, 168, 76, .14);
    background: var(--a-nuit);
    color: var(--a-ivoire);
  }
  html[data-aube] .kn:has(.kn-links.active) .kn-lang { visibility: hidden; }

  html[data-aube] .kn-links {
    display: none;
    position: fixed;
    top: calc(var(--kn-banner-h, 0px) + var(--kn-h));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: none;
    margin: 0;
    padding: 16px 24px 28px;     /* aligne sur la barre : 24 px tablette, 20 px mobile */
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    background:
      radial-gradient(circle 300px at calc(100% - 50px) calc(100% - 200px),
        rgba(233, 210, 150, .12) 0%, rgba(233, 210, 150, 0) 65%),
      var(--a-nuit);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    --a-focus: var(--a-ivoire);
  }
  html[data-aube] .kn-links.active { display: flex; }
  html[data-aube] .kn-a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: auto;
    min-height: 60px;
    padding: 0;
    border-bottom: 1px solid rgba(201, 168, 76, .18);
    font-family: var(--a-serif);
    font-size: 28px;
    font-weight: 300;
    line-height: 1.2;
    text-align: start;
    color: var(--a-ivoire);
  }
  html[data-aube] .kn-a:hover,
  html[data-aube] .kn-a[aria-current="page"] {
    color: var(--a-ivoire);
    border-bottom-color: rgba(201, 168, 76, .18);
  }
  html[data-aube] .kn-a[aria-current="page"] { color: var(--a-or-clair); }
  /* Flèche au trait, en or (fond de la liste toujours nuit). */
  html[data-aube] .kn-a::after {
    content: "";
    display: block;
    position: static;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    transform: none;
  }
  html[data-aube][dir="rtl"] .kn-a::after,
  html[data-aube][data-lang="ar"] .kn-a::after { transform: scaleX(-1); }

  html[data-aube] .kn-menu-plus {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }
  html[data-aube] .kn-menu-titre {
    margin: 32px 0 8px;
    font-family: var(--a-sc);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .2em;
    color: var(--a-or);
  }
  html[data-aube] .kn-menu-langs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 12px;
    margin-bottom: 28px;
  }
  html[data-aube] .kn-menu-lang {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--a-sauge);
    font-family: var(--a-ui);
    font-size: 14px;
    font-weight: 400;
    text-align: start;
    cursor: pointer;
  }
  html[data-aube] .kn-menu-lang:hover { color: var(--a-ivoire); }
  html[data-aube] .kn-menu-lang[aria-current="true"] {
    color: var(--a-ivoire);
    font-weight: 600;
  }
  html[data-aube] .kn-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 54px;
    margin-top: auto;
    padding: 8px 24px;
    border-radius: 999px;
    background: var(--a-or);
    color: var(--a-foret);
    font-family: var(--a-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--a-t-court) var(--a-courbe);
  }
  html[data-aube] .kn-menu-cta:hover {
    background: var(--a-or-clair);
    color: var(--a-foret);
  }
}

@media (max-width: 768px) {
  html[data-aube] .kn-c {
    padding: 0;
    padding-inline-start: max(20px, env(safe-area-inset-left));
    padding-inline-end: max(12px, env(safe-area-inset-right));
  }
  html[data-aube] .kn-logo { font-size: 18px; }
  html[data-aube] .kn-links {
    padding-left: 20px;
    padding-right: 20px;
  }

  html[data-aube] .kn-banner {
    justify-content: flex-start;
    padding: 0;
    padding-inline-start: 16px;
    padding-inline-end: 56px;
  }
  html[data-aube] .kn-banner-link {
    justify-content: flex-start;
    font-size: 13px;
  }
  html[data-aube] .kn-banner-cta {
    padding: 0 12px;
    font-size: 13px;
  }
  html[data-aube] .kn-banner-close {
    width: 44px;
    height: 44px;
    right: 4px;
  }
  html[data-aube][dir="rtl"] .kn-banner-close,
  html[data-aube][data-lang="ar"] .kn-banner-close {
    right: auto;
    left: 4px;
  }
}


/* ─── 8c. Pied de page ──────────────────────────────────────────────── */
html[data-aube] .kf {
  --a-texte: var(--a-ivoire);
  --a-accent: var(--a-or);
  --a-focus: var(--a-ivoire);
  margin-top: 0;
  padding: 88px 120px 56px;
  border-top: 0;
  background: var(--a-foret);
  color: var(--a-ivoire);
  font-family: var(--a-ui);
}
html[data-aube] .kf-c {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "marque liens"
    "filet filet"
    "legal copie"
    "langues langues";
  align-items: center;
  column-gap: 48px;
  row-gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  text-align: start;
}
html[data-aube][data-lang="ar"] .kf-c { direction: rtl; }
html[data-aube] .kf-c::before {
  content: "";
  grid-area: filet;
  height: 1px;
  margin: 40px 0 32px;
  background: rgba(201, 168, 76, .22);
}
html[data-aube] .kf-marque {
  grid-area: marque;
  display: flex;
  align-items: center;
  gap: 16px;
}
html[data-aube] .kf-embleme {
  display: block;
  width: auto;
  height: 37px;
}
html[data-aube] .kf-wordmark {
  font-size: 22px;
  color: var(--a-ivoire);
}
html[data-aube] .kf-links {
  grid-area: liens;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 28px;
  font-family: var(--a-ui);
  font-size: 15px;
  line-height: 1.4;
}
html[data-aube] .kf-links a { color: var(--a-ivoire-82); }
html[data-aube] .kf-sep { display: none; }
html[data-aube] .kf-legal {
  grid-area: legal;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 24px;
  margin: 0;
  font-family: var(--a-ui);
  font-size: 14px;
  line-height: 1.4;
}
html[data-aube] .kf-legal a { color: var(--a-sauge); }
html[data-aube] .kf-copy {
  grid-area: copie;
  justify-self: end;
  margin: 0;
  font-family: var(--a-ui);
  font-size: 14px;
  line-height: 1.4;
  color: var(--a-sauge);
}
html[data-aube] .kf-langs {
  grid-area: langues;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 20px;
  max-width: none;
  margin: 28px 0 0;
  font-family: var(--a-ui);
  font-size: 13px;
  line-height: 1.4;
}
html[data-aube] .kf-langs a { color: rgba(169, 187, 169, .85); }
html[data-aube] .kf-links a,
html[data-aube] .kf-legal a,
html[data-aube] .kf-langs a {
  text-decoration: none;
  transition: color var(--a-t-court) var(--a-courbe);
}
html[data-aube] .kf-links a:hover,
html[data-aube] .kf-legal a:hover,
html[data-aube] .kf-langs a:hover { color: var(--a-or-clair); }

/* Tablette et mobile : une seule colonne, dans l’ordre de la maquette mobile. */
@media (max-width: 1024px) {
  html[data-aube] .kf { padding: 72px 48px 48px; }
  html[data-aube] .kf-c {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "marque"
      "liens"
      "filet"
      "legal"
      "langues"
      "copie";
    column-gap: 0;
  }
  html[data-aube] .kf-links {
    justify-content: flex-start;
    margin-top: 32px;
  }
  html[data-aube] .kf-copy {
    justify-self: start;
    margin-top: 28px;
  }
}
@media (max-width: 768px) {
  html[data-aube] .kf {
    padding: 56px 20px 40px;
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  html[data-aube] .kf-c::before { margin: 24px 0; }
  html[data-aube] .kf-marque { gap: 12px; }
  html[data-aube] .kf-embleme { height: 30px; }
  html[data-aube] .kf-wordmark { font-size: 19px; }
  html[data-aube] .kf-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
  }
  html[data-aube] .kf-links a {
    line-height: 44px;
    color: rgba(245, 240, 230, .85);
  }
  html[data-aube] .kf-legal { gap: 4px 20px; }
  html[data-aube] .kf-legal a { line-height: 36px; }
  html[data-aube] .kf-langs {
    gap: 6px 16px;
    margin-top: 16px;
  }
  html[data-aube] .kf-copy { font-size: 13px; }
}