/* ═══════════════════════════════════════════════════════════════
   ACCUEIL CLAIR — 09/11/2026
   Le contre-pied : tout le marché de la pige est noir. On passe au
   clair, le rouge devient le seul accent, et NEWAKE porte la page.
   AUCUNE station n'est nommée ni localisable : les chiffres sont
   agrégés, les titres cités le sont sans leur antenne.
   ═══════════════════════════════════════════════════════════════ */
.kc{
    --encre:#121212;      /* le noir du texte et des filets */
    --encre2:#4a4a4a;     /* le texte secondaire */
    --encre3:#7c7c78;     /* les étiquettes */
    --papier:#f4f4f1;     /* le fond */
    --papier2:#ffffff;    /* les cartes */
    --filet:#d6d6d1;
    --rouge:#BF1A1A;
    background:var(--papier);
    color:var(--encre);
    font-family:var(--km-ui);
}
body.komogo-page-autonome #main-content.kc{ background:var(--papier); }
.kc ::selection{ background:var(--rouge); color:#fff; }
.kc .kc-col{ width:100%; max-width:min(1240px, 92vw); margin:0 auto; }

/* ── Le sur-titre : filet rouge court puis l'étiquette ── */
.kc .kc-sur{ display:flex; align-items:center; gap:14px; margin:0 0 24px; }
.kc .kc-sur i{ display:block; width:46px; height:4px; background:var(--rouge); flex:none; }
/* Le filet se tire à l'arrivée de son bloc. Deux sélecteurs : en
   haut de page le .kc-sur porte lui-même le .kc-montre, ailleurs
   c'est l'en-tête de section qui le porte. */
.kc.js .kc-sur.kc-montre i,
.kc.js .kc-montre .kc-sur i{ width:0; transition:width .75s cubic-bezier(.19,1,.22,1) .12s; }
.kc.js .kc-sur.kc-montre.vu i,
.kc.js .kc-montre.vu .kc-sur i{ width:46px; }
.kc .kc-sur span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--encre3); }

/* ── Les titres ── */
.kc h1, .kc h2, .kc h3, .kc h4{
    font-family:var(--km-display); font-weight:400; text-transform:uppercase;
    letter-spacing:.02em; color:var(--encre); margin:0; line-height:.94;
}
.kc h1{ font-size:clamp(2.5rem, 7.6vw, 6rem); max-width:15ch; }

/* Le titre arrive par-dessous, une ligne après l'autre. La ligne
   est une fenêtre (overflow) et le texte y remonte : d'où le padding
   haut, sans lequel l'accent du É était rogné. */
.kc .kc-titre .l{ display:block; overflow:hidden; padding-top:.09em; margin-top:-.09em; }
.kc .kc-titre .l > i{ display:block; font-style:normal; }
.kc.js .kc-titre.kc-montre{ opacity:1; transform:none; transition:none; }
.kc.js .kc-titre .l > i{ transform:translateY(102%);
    transition:transform .85s cubic-bezier(.19,1,.22,1); }
.kc.js .kc-titre.vu .l > i{ transform:none; }
.kc.js .kc-titre.vu .l:nth-child(2) > i{ transition-delay:.11s; }
.kc h1 em, .kc h2 em{ font-style:normal; color:var(--rouge); }
.kc h2{ font-size:clamp(1.9rem, 4.4vw, 3.4rem); }
.kc h3{ font-size:1.3rem; letter-spacing:var(--km-ls); }
.kc h4{ font-size:1rem; letter-spacing:var(--km-ls); }
.kc p{ margin:0; }

/* ══ 0. L'EN-TÊTE DE MARQUE ═══════════════════════
      La page est autonome : elle ne reçoit pas l'en-tête du site.
      Le logo noir sur papier, et rien d'autre — une barre de
      navigation ici ferait doublon avec le menu de WordPress. */
.kc .kc-entete{ padding:26px 0 0; }
.kc .kc-entete .kc-col{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.kc .kc-marque{ display:block; line-height:0; }
.kc .kc-marque img{ display:block; width:auto; height:34px; }
.kc .kc-lien-co{
    font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--encre2); text-decoration:none; white-space:nowrap;
    border-bottom:1px solid var(--filet); padding-bottom:4px;
    transition:color .2s, border-color .2s;
}
.kc .kc-lien-co:hover{ color:var(--rouge); border-color:var(--rouge); }
@media (max-width:560px){ .kc .kc-marque img{ height:27px; } }

/* La signature de pied de page : le même logo, en plus discret. */
.kc .kc-signature{ margin:clamp(44px,6vw,70px) 0 0; }
.kc .kc-signature img{ display:block; margin:0 auto; width:auto; height:23px; }
.kc .kc-signature span{
    display:block; margin-top:14px;
    font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--encre3);
}

/* ══ 1. LE HAUT DE PAGE ══════════════════════════════════════ */
.kc .kc-hero{ padding:clamp(40px, 6vw, 78px) 0 clamp(40px, 5vw, 64px); }
.kc .kc-hero .kc-chapo{
    font-size:clamp(1rem, 1.35vw, 1.12rem); line-height:1.72;
    color:var(--encre2); max-width:54ch; margin:30px 0 0;
}
.kc .kc-hero .kc-chapo b{ color:var(--encre); font-weight:600; }
.kc .kc-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:34px 0 0; align-items:center; }

/* Les boutons : un plein rouge, un plein noir. Deux formes, pas quatre. */
.kc .kc-bt{
    display:inline-block; text-decoration:none;
    font-family:var(--km-display); font-weight:400; font-size:1rem;
    letter-spacing:.14em; text-transform:uppercase;
    padding:16px 32px 13px; border-radius:4px; border:0;
    transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.kc .kc-bt--rouge{ background:var(--rouge); color:#fff; box-shadow:0 6px 18px rgba(191,26,26,.26); }
.kc .kc-bt--rouge:hover{ background:#d32121; transform:translateY(-2px); box-shadow:0 12px 26px rgba(191,26,26,.34); }
.kc .kc-bt--noir{ background:var(--encre); color:#fff; }
.kc .kc-bt--noir:hover{ transform:translateY(-2px); }
.kc .kc-note{ font-size:.82rem; color:var(--encre3); }

/* ── L'HORLOGE. « À la seconde près » est la promesse du produit :
      autant qu'elle tourne sous les yeux plutôt que d'être écrite. ── */
.kc .kc-horloge{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:baseline; gap:13px;
    margin:38px 0 0; padding:12px 18px 11px;
    background:var(--papier2); border:1px solid var(--filet); border-radius:4px;
}
.kc .kc-horloge .pt{
    width:8px; height:8px; border-radius:50%; background:var(--rouge);
    align-self:center; animation:kc-onde 2.4s ease-out infinite;
}
.kc .kc-horloge .lb{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--encre3); }
/* NEWAKE N'A PAS DE CHIFFRES DE LARGEUR FIXE : « 1 » mesure 5,5 px
   là où « 0 » en mesure 10,3. Sans case par chiffre, l'heure entière
   se décalait à chaque seconde. Chaque chiffre a donc sa case, et
   seul le chiffre qui change est réécrit — d'où l'animation isolée. */
.kc .kc-horloge .hr{
    font-family:var(--km-display); font-weight:400; font-size:1.52rem; line-height:1;
    color:var(--encre); display:inline-flex; align-items:baseline;
}
.kc .kc-horloge .hr i{ display:inline-block; width:.62em; text-align:center; font-style:normal; }
.kc .kc-horloge .hr b{ display:inline-block; width:.30em; text-align:center;
    font-weight:400; color:var(--encre3); }
.kc .kc-horloge .hr i.chg{ animation:kc-chiffre .32s cubic-bezier(.22,.61,.36,1); }
@keyframes kc-chiffre{ from{ transform:translateY(-42%); opacity:0 } to{ transform:none; opacity:1 } }

/* La seconde qui passe, dessinée sur l'arête basse de l'encart.
   Elle est relancée par le script à chaque seconde pleine, sinon
   elle dérive de l'heure affichée au bout de quelques minutes. */
.kc .kc-tic{
    position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:var(--rouge); transform:scaleX(0); transform-origin:left;
    animation:kc-seconde 1s linear infinite;
}
@keyframes kc-seconde{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes kc-onde{
    0%{ box-shadow:0 0 0 0 rgba(191,26,26,.55) }
    70%{ box-shadow:0 0 0 10px rgba(191,26,26,0) }
    100%{ box-shadow:0 0 0 0 rgba(191,26,26,0) }
}

/* ── LES CHIFFRES. Ils comptent en arrivant : c'est le seul endroit
      où un mouvement dit quelque chose plutôt que de décorer. ── */
.kc .kc-chiffres{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    border-top:3px solid var(--encre); margin:52px 0 0;
}
.kc .kc-chiffres div{ padding:20px 18px 0; border-right:1px solid var(--filet); }
.kc .kc-chiffres div:last-child{ border-right:0; }
.kc .kc-chiffres b{
    display:block; font-family:var(--km-display); font-weight:400;
    font-size:clamp(1.9rem, 3vw, 2.5rem); line-height:1; color:var(--encre);
}
/* Même raison que l'horloge : chaque chiffre dans sa case, sinon le
   nombre tressaute pendant qu'il monte — et indéfiniment pour celui
   des diffusions, qui continue de tourner. */
.kc .kc-chiffres b i{ display:inline-block; width:.62em; text-align:center; font-style:normal; }
.kc .kc-chiffres b em{ display:inline-block; min-width:.24em; font-style:normal; }
.kc .kc-chiffres b.vivant{ font-size:clamp(1.55rem, 2.2vw, 1.95rem); padding-top:.17em; }
.kc .kc-chiffres b i.chg{ animation:kc-chiffre .42s cubic-bezier(.22,.61,.36,1); }
.kc .kc-chiffres s{
    display:block; text-decoration:none; margin-top:8px;
    font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--encre3);
}
/* Le parc de pige audio et le parc Storycast ne se recouvrent pas :
   120+ antennes enregistrées, 50+ dont la musique est identifiée.
   Le chiffre seul laissait croire à un seul et même périmètre. */
.kc .kc-chiffres u{
    display:block; text-decoration:none; margin-top:9px; padding-bottom:4px;
    font-size:.78rem; line-height:1.45; color:var(--encre2);
    letter-spacing:0; text-transform:none; max-width:26ch;
}
@media (max-width:620px){
    .kc .kc-chiffres div{ border-right:0; border-bottom:1px solid var(--filet); padding-bottom:18px; }
    .kc .kc-chiffres div:last-child{ border-bottom:0; }
}

/* ── LE BOUTON FANTÔME DE LA CHARTE EST DESSINÉ POUR DU SOMBRE :
      texte blanc, contour pâle. Sur du papier il disparaissait —
      « S'inscrire » et « Offre équipe » étaient illisibles dans le
      tableau. On les rhabille ici, et seulement ici. ── */
.kc .ks-btn-ghost{
    color:var(--encre); border-color:var(--encre);
    background:transparent;
}
.kc .ks-btn-ghost:hover{ background:var(--encre); color:#fff; }

/* ── LA CARTE DE PIGE. Dix jours d'audio en ligne — 240 heures —
      dessinées heure par heure, jour par jour. La tête se pose au
      hasard toutes les deux secondes et le relevé donne l'instant
      exact : la promesse « à la seconde près » est montrée plutôt
      qu'écrite. Aucune antenne n'est nommée — c'est la MESURE du
      service, pas son contenu. ── */
.kc .kc-pige{
    background:var(--papier2); border:1px solid var(--filet);
    border-radius:12px; padding:20px 22px 20px;
}
.kc .kc-pige .tete{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 16px; }
.kc .kc-pige .tete b{
    font-family:var(--km-display); font-weight:400; font-size:.92rem;
    letter-spacing:var(--km-ls); text-transform:uppercase; color:var(--encre);
}
.kc .kc-pige .tete span{ font-family:var(--km-mono); font-size:.72rem; color:var(--encre3); }

/* Les dix colonnes de 24 heures. Celle du jour s'arrête à l'heure
   courante : les heures à venir ne sont pas encore enregistrées, et
   la carte n'a aucune raison de prétendre le contraire. */
.kc .kc-pige .grille{ display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; }
.kc .kc-pige .j{ display:flex; flex-direction:column; gap:2px; }
.kc .kc-pige .j > s{
    display:block; text-decoration:none; text-align:center;
    font-size:.54rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--encre3); margin-bottom:4px; transition:color .35s;
}
.kc .kc-pige .j > i{ display:block; height:4px; border-radius:1px; background:#ededea;
    transition:background .4s, opacity .4s; }
.kc .kc-pige .j > i.on{ background:#cdcdc7; }
.kc .kc-pige .j.auj > i.on{ background:var(--rouge); opacity:.24; }
.kc .kc-pige .j.vise > s{ color:var(--rouge); }
.kc .kc-pige .j.vise > i.on{ background:var(--rouge); opacity:.6; }

/* La forme d'onde : une enveloppe tirée au sort une fois, dont on
   montre la fenêtre correspondant à l'instant visé. Elle ne représente
   aucun son réel et ne prétend pas le faire. */
.kc .kc-pige .forme{
    position:relative; display:flex; align-items:center; gap:2px;
    height:54px; margin:20px 0 0;
}
.kc .kc-pige .forme i{
    display:block; flex:1 1 0; min-width:0; height:30%;
    background:#dadad4; border-radius:1px;
    transition:height .5s cubic-bezier(.22,.61,.36,1);
}
/* Le repère de lecture : au centre de l'onde, sur l'instant visé.
   Un second cureur sur un rail en dessous disait la même chose à une
   autre échelle, et les deux ne tombaient pas en face. */
.kc .kc-pige .forme::after{
    content:""; position:absolute; left:50%; top:-5px; bottom:-5px;
    width:2px; margin-left:-1px; background:var(--rouge);
}

.kc .kc-pige .lu{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0 0; }
.kc .kc-pige .lu b{
    font-family:var(--km-display); font-weight:400; font-size:1.06rem;
    letter-spacing:.02em; color:var(--encre); white-space:nowrap;
}
.kc .kc-pige .lu b i{ display:inline-block; width:.62em; text-align:center; font-style:normal; }
.kc .kc-pige .lu b em{ display:inline-block; min-width:.22em; font-style:normal; }
.kc .kc-pige .pret{
    display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
    font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--encre3);
}
.kc .kc-pige .pret i{ width:7px; height:7px; border-radius:50%; background:var(--rouge);
    animation:kc-onde 2.4s ease-out infinite; }
.kc .kc-pige .pied{
    margin-top:15px; padding-top:13px; border-top:1px solid var(--filet);
    font-size:.72rem; color:var(--encre3);
}
.kc .kc-pige .pied em{ font-style:normal; color:var(--rouge); font-family:var(--km-mono); }
@media (max-width:420px){
    .kc .kc-pige .lu{ flex-direction:column; align-items:flex-start; gap:9px; }
    .kc .kc-pige .j > s{ font-size:.48rem; letter-spacing:0; }
}

/* La rangée du haut : le discours à gauche, la démonstration à droite. */
.kc .kc-hero-rang{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:center; }
@media (max-width:980px){ .kc .kc-hero-rang{ grid-template-columns:1fr; } }

/* ══ 2. LE BANDEAU QUI TOURNE ════════════════════════════════
   Les titres les plus diffusés du moment, TOUTES antennes
   confondues. Aucune station n'est citée : c'est une mesure
   agrégée, elle ne dit pas qui diffuse quoi. */
.kc .kc-bande{
    background:var(--encre); color:#fff;
    border-top:1px solid var(--encre); border-bottom:1px solid var(--encre);
    overflow:hidden; position:relative; margin:clamp(40px,5vw,64px) 0 0;
}
.kc .kc-bande::before{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:linear-gradient(90deg, var(--encre), transparent 8%, transparent 92%, var(--encre));
}
.kc .kc-bande-etq{
    position:absolute; z-index:3; left:0; top:0; bottom:0;
    display:flex; align-items:center; gap:9px; padding:0 20px;
    background:var(--rouge); font-size:.62rem; letter-spacing:.18em;
    text-transform:uppercase; white-space:nowrap;
}
.kc .kc-bande-etq .pt{ width:7px; height:7px; border-radius:50%; background:#fff; animation:kc-clign 1.6s ease-in-out infinite; }
@keyframes kc-clign{ 0%,100%{opacity:1} 50%{opacity:.25} }
.kc .kc-piste{ display:flex; width:max-content; animation:kc-defile 52s linear infinite; }
.kc .kc-piste:hover{ animation-play-state:paused; }
.kc .kc-item{
    display:flex; align-items:center; gap:12px; padding:17px 26px;
    border-right:1px solid #2c2c2c; white-space:nowrap; font-size:.88rem;
}
.kc .kc-item b{ color:#fff; font-weight:600; }
.kc .kc-item span{ color:#9a9a9a; }
@keyframes kc-defile{ to{ transform:translateX(-50%) } }

/* ══ 3. LES ARGUMENTS ════════════════════════════════════════ */
.kc .kc-sec{ padding:clamp(60px, 8vw, 104px) 0 0; }
.kc .kc-sec-tete{ max-width:46ch; margin:0 0 42px; }
.kc .kc-sec-tete p{ color:var(--encre2); font-size:1rem; line-height:1.7; margin:16px 0 0; }

.kc .kc-args{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1px; background:var(--filet); border:1px solid var(--filet); border-radius:12px; overflow:hidden; }
.kc .kc-arg{ background:var(--papier2); padding:30px 26px 32px; transition:background .2s ease; }
.kc .kc-arg:hover{ background:#fff; }
.kc .kc-arg .num{
    font-family:var(--km-mono); font-size:.72rem; color:var(--rouge);
    letter-spacing:.1em; display:block; margin:0 0 14px;
}
.kc .kc-arg h4{ margin:0 0 10px; }
.kc .kc-arg p{ font-size:.88rem; line-height:1.62; color:var(--encre2); }

/* ══ 4. LES OUTILS ═══════════════════════════════════════════ */
.kc .kc-outils{ display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)); gap:18px; }
.kc .kc-outil{
    background:var(--papier2); border:1px solid var(--filet); border-radius:12px;
    padding:26px 24px 28px; position:relative; overflow:hidden;
    transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.kc .kc-outil::after{
    content:""; position:absolute; left:0; right:0; top:0; height:3px;
    background:var(--rouge); transform:scaleX(0); transform-origin:left;
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.kc .kc-outil:hover{ transform:translateY(-4px); border-color:#c2c2bc; box-shadow:0 16px 34px rgba(18,18,18,.10); }
.kc .kc-outil:hover::after{ transform:scaleX(1); }
.kc .kc-outil h3{ position:relative; padding-left:14px; margin:0 0 12px; }
.kc .kc-outil h3::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    margin-top:-1px; width:3px; height:13px; border-radius:1px; background:var(--rouge);
}
.kc .kc-outil > p{ font-size:.88rem; line-height:1.6; color:var(--encre2); margin:0 0 18px; min-height:calc(3 * .88rem * 1.6); }
.kc .kc-liste{ list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--filet); }
.kc .kc-liste li{ position:relative; padding:0 0 9px 16px; font-size:.82rem; line-height:1.5; color:var(--encre2); }
.kc .kc-liste li::before{ content:""; position:absolute; left:0; top:.52em; width:5px; height:5px; border-radius:1px; background:var(--rouge); }

/* ══ 5. LE TABLEAU DES OFFRES ════════════════════════════════ */
.kc .kc-table-wrap{ background:var(--papier2); border:1px solid var(--filet); border-radius:12px; overflow:hidden; }
.kc .kc-table{ width:100%; border-collapse:collapse; }
.kc .kc-table th, .kc .kc-table td{
    padding:14px 18px; text-align:center; font-size:.86rem;
    color:var(--encre2); border-bottom:1px solid var(--filet);
}
.kc .kc-table thead th{
    font-family:var(--km-display); font-weight:400; font-size:.95rem;
    letter-spacing:var(--km-ls-wide); text-transform:uppercase;
    color:var(--encre3); vertical-align:top; padding:22px 18px 18px;
    border-bottom:2px solid var(--encre);
}
.kc .kc-table .nom{ text-align:left; color:var(--encre); }
.kc .kc-table tbody tr:hover{ background:#fafaf8; }
.kc .kc-table tbody tr:last-child td{ border-bottom:0; }
.kc .kc-prix{ display:block; margin-top:8px; font-size:1.6rem; color:var(--encre); }
.kc .kc-note-th{ display:block; margin-top:7px; font-family:var(--km-ui); font-size:.72rem; letter-spacing:0; text-transform:none; color:var(--encre3); }
.kc .col-prem{ background:rgba(191,26,26,.045); box-shadow:inset 1px 0 0 var(--rouge), inset -1px 0 0 var(--rouge); color:var(--encre); }
.kc thead .col-prem{ box-shadow:inset 1px 0 0 var(--rouge), inset -1px 0 0 var(--rouge), inset 0 4px 0 var(--rouge); color:var(--encre); }
.kc .oui{ color:#1d8b4a; } .kc .non{ color:#b9b9b4; }

/* ══ LES DEUX PORTES ═════════════════════════════
   Le tableau et le bloc Komogo + se suivaient sans qu'on sache
   qu'ils décrivent deux façons différentes d'être membre : l'une où
   l'on écoute le parc, l'autre où l'on y met sa propre antenne. Le
   choix est posé d'abord, prix compris ; le tableau ne détaille plus
   que la première porte, la seconde étant tarifée sur la boutique. */
.kc .kc-portes{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
    gap:clamp(16px,2vw,24px); margin:0 0 clamp(44px,6vw,70px);
}
@media (max-width:820px){ .kc .kc-portes{ grid-template-columns:1fr; } }
.kc .kc-porte{
    display:flex; flex-direction:column; align-items:flex-start;
    background:var(--papier2); border:1px solid var(--filet); border-radius:12px;
    padding:28px 28px 30px;
}
.kc .kc-porte .etq{
    font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--encre3); margin:0 0 16px;
}
.kc .kc-porte h3{ font-size:1.7rem; margin:0 0 14px; }
.kc .kc-porte h3 em{ font-style:normal; color:var(--rouge); }
.kc .kc-porte > p{ font-size:.92rem; line-height:1.68; color:var(--encre2); margin:0 0 22px; }
.kc .kc-porte > p b{ color:var(--encre); font-weight:600; }
.kc .kc-porte .prix{
    display:flex; align-items:baseline; gap:13px; flex-wrap:wrap;
    margin:auto 0 22px; padding-top:18px; width:100%;
    border-top:1px solid var(--filet);
}
.kc .kc-porte .prix b{
    font-family:var(--km-display); font-weight:400; font-size:1.9rem;
    line-height:1; color:var(--encre);
    text-transform:uppercase; letter-spacing:.02em;
}
.kc .kc-porte .prix span{ font-size:.74rem; line-height:1.5; color:var(--encre3); }
/* La porte de l'hébergement porte le rouge : c'est l'engagement le
   plus lourd des deux, et c'est celui qu'on vient discuter. */
.kc .kc-porte.porte--plus{ border-color:var(--encre); box-shadow:0 14px 34px rgba(18,18,18,.08); }

/* Le sur-titre quand il ouvre un sous-ensemble de section. */
.kc .kc-sur--sec{ margin:0 0 20px; }

/* ══ LA COUVERTURE ════════════════════════════════
   Le fond est une capture de la carte du service, et les points sont
   posés dessus en SVG : la page d'accueil n'a donc ni Leaflet ni
   tuiles à charger. Les points n'ont ni nom ni logo — pour savoir
   QUI est où, il faut ouvrir la carte, qui est faite pour ça.
   Le cadre vaut lat 39,5–52,5 / lng -9,8–16,6 : six antennes tombent
   hors champ (Amérique du Nord, Maroc), et la légende le dit. */
.kc .kc-geo-rang{
    display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(28px,4.5vw,60px); align-items:center;
}
@media (max-width:980px){ .kc .kc-geo-rang{ grid-template-columns:1fr; } }
.kc .kc-geo-dire h2{ margin:0 0 20px; }
.kc .kc-geo-dire p{ color:var(--encre2); font-size:1rem; line-height:1.7; max-width:44ch; }
.kc .kc-geo-liste{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--filet); }
.kc .kc-geo-liste li{
    display:flex; align-items:baseline; gap:14px;
    padding:11px 0; border-bottom:1px solid var(--filet);
}
.kc .kc-geo-liste b{
    font-family:var(--km-display); font-weight:400; font-size:1.3rem;
    min-width:2.6ch; color:var(--encre);
}
.kc .kc-geo-liste span{ font-size:.86rem; color:var(--encre2); }

.kc .kc-geo-carte .cadre{
    position:relative; border-radius:12px; overflow:hidden;
    border:1px solid #26262a; background:#101012; line-height:0;
}
.kc .kc-geo-carte img{ display:block; width:100%; height:auto; opacity:.82; }
.kc .kc-geo-carte .pts{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.kc .kc-geo-carte .pts circle{ transform-box:fill-box; transform-origin:center; }
.kc .kc-geo-carte .pts .p{ fill:var(--rouge); opacity:0; transform:scale(.2); }
.kc .kc-geo-carte .pts .h{ fill:none; stroke:var(--rouge); stroke-width:2; opacity:0; }
.kc.js .kc-geo-carte.vu .pts .p{ animation:kc-pt .45s cubic-bezier(.22,1.2,.4,1) var(--d) forwards; }
.kc.js .kc-geo-carte.vu .pts .h{
    animation:kc-pt-halo var(--p) ease-out calc(var(--d) + 1.6s) infinite;
}
@keyframes kc-pt{ to{ opacity:1; transform:none; } }
@keyframes kc-pt-halo{
    0%{ opacity:.55; transform:scale(1) } 70%{ opacity:0; transform:scale(3.4) } 100%{ opacity:0 }
}
.kc .kc-geo-carte .credit{
    margin-top:11px; font-size:.64rem; letter-spacing:.06em; color:var(--encre3);
}

/* ══ VOX ═══════════════════════════════════════
   La seule section qui reprend le fond de la page Vox : deux nappes
   qui dérivent l'une sur l'autre en mix-blend-mode screen, sans
   filter:blur (trop coûteux à l'animation). Sur la page Vox elles
   sont en position:fixed ; ici elles sont absolues dans la bande,
   donc la section crée son propre contexte d'empilement. */
.kc .kc-vox{
    position:relative; isolation:isolate; overflow:hidden;
    background:#08080c; color:#e6e6e9;
    padding:clamp(64px,8vw,104px) 0; margin:clamp(60px,8vw,104px) 0 0;
}
.kc .kc-vox::before, .kc .kc-vox::after{
    content:""; position:absolute; inset:-45%; z-index:-1;
    pointer-events:none; mix-blend-mode:screen;
}
.kc .kc-vox::before{
    background:
      radial-gradient(ellipse 58% 34% at 24% 28%, rgba(191, 26, 26, .55), transparent 68%),
      radial-gradient(ellipse 46% 26% at 76% 64%, rgba( 79,140,240, .44), transparent 70%);
    animation:kc-vox-a 24s ease-in-out infinite alternate;
}
.kc .kc-vox::after{
    background:
      radial-gradient(ellipse 50% 28% at 64% 16%, rgba(126, 62, 214, .36), transparent 70%),
      radial-gradient(ellipse 44% 24% at 28% 82%, rgba(191, 26, 26, .30), transparent 72%);
    animation:kc-vox-b 31s ease-in-out infinite alternate;
}
@keyframes kc-vox-a{ from{ transform:translate3d(-3%,-2%,0) scale(1) } to{ transform:translate3d(4%,3%,0) scale(1.12) } }
@keyframes kc-vox-b{ from{ transform:translate3d(3%,2%,0) scale(1.08) } to{ transform:translate3d(-4%,-3%,0) scale(1) } }

.kc .kc-vox-rang{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(30px,4.5vw,64px); align-items:center;
}
@media (max-width:980px){ .kc .kc-vox-rang{ grid-template-columns:1fr; } }
.kc .kc-vox h2{ color:#fff; margin:0 0 20px; }
.kc .kc-vox .kc-sur span{ color:#8e8e96; }
.kc .kc-vox-dire p{ color:#b4b4bc; font-size:1rem; line-height:1.72; max-width:46ch; }
.kc .kc-vox-liste{ list-style:none; margin:24px 0 20px; padding:0; }
.kc .kc-vox-liste li{
    position:relative; padding:0 0 0 20px; margin:0 0 9px;
    font-size:.9rem; line-height:1.6; color:#cfcfd6;
}
.kc .kc-vox-liste li::before{
    content:""; position:absolute; left:0; top:.62em;
    width:7px; height:2px; background:var(--rouge);
}
.kc .kc-vox-dire .note{
    font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#7d7d86; margin:0;
}

/* La démonstration : la question s'écrit lettre par lettre, part, et
   la réponse se pose dessous. Rien n'est envoyé nulle part — c'est
   une démo, et les trois réponses sont figées dans la page. */
.kc .kc-vox-fil{
    background:rgba(16,16,20,.72); border:1px solid #2a2a31; border-radius:12px;
    padding:16px 16px 14px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.kc .kc-vox-fil .tete{
    display:flex; align-items:center; gap:10px; padding:0 2px 13px;
    border-bottom:1px solid #26262d; margin-bottom:14px;
}
.kc .kc-vox-fil .tete b{
    font-family:var(--km-display); font-weight:400; font-size:.92rem;
    letter-spacing:var(--km-ls); text-transform:uppercase; color:#fff;
}
.kc .kc-vox-fil .tete .pt{
    width:8px; height:8px; border-radius:50%; background:var(--rouge);
    animation:kc-onde 2.4s ease-out infinite;
}
.kc .kc-vox-fil .tete .etat{
    margin-left:auto; font-size:.6rem; letter-spacing:.16em;
    text-transform:uppercase; color:#7d7d86;
}
.kc .kc-vox-fil .fil{ min-height:208px; display:flex; flex-direction:column; gap:11px; justify-content:flex-end; }
.kc .kc-vox-fil .bulle{
    max-width:84%; padding:10px 13px; border-radius:10px; font-size:.88rem; line-height:1.55;
    animation:kc-bulle .36s cubic-bezier(.22,.61,.36,1) both;
}
.kc .kc-vox-fil .bulle.moi{ align-self:flex-end; background:var(--rouge); color:#fff; border-bottom-right-radius:3px; }
.kc .kc-vox-fil .bulle.lui{ align-self:flex-start; background:#1c1c22; color:#d8d8de; border:1px solid #2c2c34; border-bottom-left-radius:3px; }
@keyframes kc-bulle{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

.kc .kc-vox-fil .rang{ display:flex; align-items:baseline; gap:10px; padding:4px 0; }
.kc .kc-vox-fil .rang + .rang{ border-top:1px solid #2c2c34; }
.kc .kc-vox-fil .rang s{
    text-decoration:none; font-family:var(--km-display); color:var(--rouge);
    font-size:.8rem; min-width:1.4ch;
}
.kc .kc-vox-fil .rang em{ font-style:normal; color:#fff; }
.kc .kc-vox-fil .rang u{ text-decoration:none; margin-left:auto; color:#86868f; font-size:.74rem; white-space:nowrap; }
.kc .kc-vox-fil .lect{ display:flex; align-items:center; gap:9px; margin-top:9px; }
.kc .kc-vox-fil .lect .go{
    width:24px; height:24px; border-radius:50%; background:var(--rouge); flex:none;
    position:relative;
}
.kc .kc-vox-fil .lect .go::after{
    content:""; position:absolute; left:9px; top:7px;
    border-left:7px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.kc .kc-vox-fil .lect .onde{ flex:1 1 auto; display:flex; align-items:center; gap:2px; height:22px; }
.kc .kc-vox-fil .lect .onde i{ display:block; flex:1 1 0; background:#4a4a55; border-radius:1px; }
.kc .kc-vox-fil .lect .dur{ font-family:var(--km-mono); font-size:.7rem; color:#86868f; }

.kc .kc-vox-fil .champ{
    display:flex; align-items:center; gap:8px; margin-top:14px;
    background:#121217; border:1px solid #2c2c34; border-radius:8px; padding:11px 13px;
    font-size:.88rem; color:#d8d8de; min-height:20px;
}
.kc .kc-vox-fil .champ .txt{ white-space:pre-wrap; }
.kc .kc-vox-fil .champ .caret{
    display:inline-block; width:2px; height:1em; background:var(--rouge);
    animation:kc-clign 1.05s steps(1) infinite; flex:none;
}
.kc .kc-vox-fil .champ .micro{ margin-left:auto; color:#6a6a74; flex:none; }
.kc .kc-vox-fil .champ .micro svg{ width:16px; height:16px; display:block; }

/* ══ 7. LE RAPPEL FINAL ══════════════════════════════════════ */
.kc .kc-fin{ text-align:center; padding:clamp(64px,8vw,110px) 0 clamp(64px,8vw,110px); }
.kc .kc-fin h2{ margin:0 auto 18px; max-width:18ch; }
.kc .kc-fin p{ color:var(--encre2); font-size:1rem; margin:0 auto 30px; max-width:52ch; line-height:1.7; }

/* ══ 8. ARRIVÉE AU DÉFILEMENT ════════════════════════════════ */
.kc.js .kc-montre{ opacity:0; transform:translateY(20px);
    transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); }
.kc.js .kc-montre.vu{ opacity:1; transform:none; }

@media (max-width:860px){
    .kc .kc-table-wrap{ overflow-x:auto; }
    .kc .kc-table{ min-width:680px; }
    .kc .kc-bande-etq{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    .kc .kc-piste, .kc .kc-horloge .pt, .kc .kc-bande-etq .pt,
    .kc .kc-pige .pret i, .kc .kc-tic,
    .kc .kc-vox::before, .kc .kc-vox::after, .kc .kc-vox-fil .tete .pt,
    .kc .kc-vox-fil .champ .caret{ animation:none; }
    .kc.js .kc-geo-carte .pts .p{ animation:none; opacity:1; transform:none; }
    .kc.js .kc-geo-carte .pts .h{ animation:none; }
    .kc .kc-pige .forme i, .kc .kc-pige .j > i{ transition:none; }
    .kc .kc-tic{ transform:scaleX(1); opacity:.25; }
    .kc.js .kc-titre .l > i{ transform:none; transition:none; }
    .kc.js .kc-sur.kc-montre i, .kc.js .kc-montre .kc-sur i{ width:46px; transition:none; }
    .kc.js .kc-montre{ opacity:1; transform:none; transition:none; }
    .kc .kc-outil, .kc .kc-bt{ transition:none; }
}

/* ══ LE CROISEMENT ═══════════════════════════════════════════
   Le cœur du récit : l'antenne d'un côté, le marché de l'autre,
   et ce que leur rencontre produit. Trois colonnes, et entre les
   deux premières un schéma qui montre deux flux qui se rejoignent.
   AUCUNE station n'est nommée : on décrit la fonction, jamais qui
   elle observe. */
.kc .kc-crois{ background:var(--encre); color:#fff; padding:clamp(52px,7vw,92px) 0; margin-top:clamp(60px,8vw,104px); }
.kc .kc-crois h2{ color:#fff; }
.kc .kc-crois .kc-sur span{ color:#8a8a8a; }
.kc .kc-crois .kc-sec-tete p{ color:#a8a8a8; }
.kc .kc-crois-grille{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1px; background:#2c2c2c; border:1px solid #2c2c2c; border-radius:12px; overflow:hidden;
}
.kc .kc-crois-bloc{ background:var(--encre); padding:30px 26px 34px; position:relative; }
.kc .kc-crois-bloc .etq{
    display:block; font-family:var(--km-mono); font-size:.7rem; letter-spacing:.1em;
    color:var(--rouge); margin:0 0 16px;
}
.kc .kc-crois-bloc h4{ color:#fff; margin:0 0 12px; }
.kc .kc-crois-bloc p{ font-size:.88rem; line-height:1.64; color:#a8a8a8; }
.kc .kc-crois-bloc.resultat{ background:#1b1b1b; }
.kc .kc-crois-bloc.resultat .etq{ color:#fff; }

/* Le schéma : deux colonnes de barres qui tombent et se rejoignent.
   Il ne représente aucune donnée réelle — c'est une figure, et elle
   est marquée comme telle dans la légende. */
.kc .kc-schema{ display:flex; align-items:flex-end; gap:3px; height:54px; margin:0 0 20px; }
.kc .kc-schema i{ display:block; width:4px; border-radius:1px; background:#3a3a3a; animation:kc-pousse 3.4s ease-in-out infinite; }
.kc .kc-schema i.r{ background:var(--rouge); }
@keyframes kc-pousse{ 0%,100%{ transform:scaleY(.45) } 50%{ transform:scaleY(1) } }
.kc .kc-schema i{ transform-origin:bottom; height:100%; }

.kc .kc-fleche{ display:flex; align-items:center; gap:10px; margin:0 0 20px; color:#6a6a6a; font-family:var(--km-mono); font-size:.72rem; }
.kc .kc-fleche b{ color:var(--rouge); font-weight:400; }

/* La pastille de certification, telle qu'elle existe déjà dans
   l'outil : elle illustre le croisement mieux qu'une phrase. */
.kc .kc-disque{
    display:inline-block; width:13px; height:13px; border-radius:50%;
    background:radial-gradient(circle at 34% 30%, #f3d98a, #c8a33c 52%, #8a6d1f);
    position:relative; vertical-align:-2px; margin-left:7px;
}
.kc .kc-disque::after{ content:""; position:absolute; left:50%; top:50%; width:3px; height:3px;
    transform:translate(-50%,-50%); border-radius:50%; background:var(--encre); }
.kc .kc-disque.pl{ background:radial-gradient(circle at 34% 30%, #ffffff, #c9ccd2 52%, #8d9099); }
.kc .kc-exemple{
    margin-top:18px; padding:14px 16px; background:#161616; border:1px solid #2c2c2c;
    border-radius:4px; font-size:.84rem; color:#d4d4d4;
}
.kc .kc-exemple s{ display:block; text-decoration:none; font-size:.64rem; letter-spacing:.16em;
    text-transform:uppercase; color:#7a7a7a; margin-bottom:9px; }
@media (prefers-reduced-motion: reduce){ .kc .kc-schema i{ animation:none } }