/* KDL TECH : couche « Nala Board » (09/11/2026), chargée après kdl.css et les autres feuilles.
   Ne retire aucun contenu : elle ne change que l'apparence.
   Clair = sable de la marque ; sombre = Arc-Dark, le thème du Nala Board. Retour arrière : retirer le <link>. */

:root{
  --n-fond:#383C4A;--n-titre:#2F343F;--n-base:#404552;--n-bord:#4D525F;--n-texte:#D3DAE3;--n-doux:#A5ACB7;
  --n-cyan:#22C7E8;--n-bleu:#5294E2;--n-ok:#3FCF9A;--n-alerte:#E0A43A;
  --nala:'Cantarell','Noto Sans',system-ui,sans-serif;
  /* couleurs de domaine, version claire du Board */
  --k-cyan:#0E8FB0;--k-vert:#13895F;--k-sauv:#178A45;--k-bleu:#2563EB;--k-teal:#0F766E;--k-alerte:#B26A00;
  --barre-n:#FBF3E6;
  --ombre-n:0 1px 2px rgba(18,60,99,.06),0 18px 40px -24px rgba(18,60,99,.35);
}
:root[data-theme="dark"]{
  --ecume:#383C4A;--surf:#404552;--blanc:#FFFFFF;
  --encre:#F1F4F8;--nuit:#2F343F;--logo:#8CC0EA;--marine:#2F343F;
  --texte:#D3DAE3;--gris:#A5ACB7;--gris-clair:#8C929D;--ligne:#4D525F;
  --lagon:#22C7E8;--lagon-fonce:#7ADDF0;--lagon-vif:#22C7E8;--vert:#3FCF9A;
  --lagon-fond:#0E7F99;--lagon-fond-h:#0B6B82;
  --k-cyan:#22C7E8;--k-vert:#3FCF9A;--k-sauv:#4ADE80;--k-bleu:#60A5FA;--k-teal:#2DD4BF;--k-alerte:#E0A43A;
  --barre-n:#2F343F;
  --ombre:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3);
  --ombre-carte:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3);
  --ombre-n:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.28);
}

/* ---------- fond ---------- */
:root[data-theme="dark"] body{background-image:linear-gradient(color-mix(in srgb,var(--ecume) 78%,transparent),color-mix(in srgb,var(--ecume) 78%,transparent)),url('/img/pcb-sombre.svg')}

/* ---------- barre de titre façon Nala Board ---------- */
.entete{background:color-mix(in srgb,var(--barre-n) 94%,transparent)}
.annonce{background:var(--nuit)}
:root[data-theme="dark"] .entete__logo{background:none;padding:0}
:root[data-theme="dark"] .entete__logo img,:root[data-theme="dark"] .pied__logo img{filter:brightness(1.55) saturate(1.15) drop-shadow(0 0 8px rgba(140,192,234,.35))}
.pied__logo{background:none;width:auto;height:auto;place-items:start}
.pied__logo img{filter:drop-shadow(0 0 10px rgba(140,192,234,.4)) drop-shadow(0 0 1px rgba(255,255,255,.5))}

.etat-atelier{display:none;align-items:center;gap:8px;font:400 .8rem/1.2 var(--nala);color:var(--gris);background:var(--surf);border:1px solid var(--ligne);border-radius:99px;padding:7px 12px 7px 10px;white-space:nowrap;text-decoration:none}
.etat-atelier i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--k-sauv);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-sauv) 22%,transparent)}
.etat-atelier.ferme i{background:var(--k-alerte);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-alerte) 22%,transparent)}
.etat-atelier b{font:700 .8rem var(--nala);color:var(--k-cyan);font-variant-numeric:tabular-nums}
@media (min-width:1640px){.etat-atelier{display:inline-flex}}

/* ---------- étiquettes : carré lumineux + capitales, comme les titres de carte du Board ---------- */
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--nala);font-weight:700;letter-spacing:.09em;color:var(--k,var(--k-cyan))}
.tag::before{content:"";width:8px;height:8px;border-radius:3px;background:currentColor;box-shadow:0 0 10px currentColor;flex:none}
.pub--fonce .tag{color:var(--soleil)}

/* ---------- cartes Nala : liseré dégradé en haut + tête teintée ---------- */
:is(.pub,.bloc,.outil,.appli,.engagements li,.formule,.service,.faq details,.encart){
  --k:var(--k-cyan);position:relative;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--k) 8%,transparent),transparent 96px);
  box-shadow:var(--ombre-n)}
/* liseré du haut en calque de fond : il suit l'arrondi de la carte sans overflow:hidden (qui rognait les badges) */
:is(.pub,.bloc,.outil,.appli,.engagements li,.formule,.service,.encart){
  background-image:linear-gradient(90deg,var(--k),color-mix(in srgb,var(--k) 18%,transparent)),linear-gradient(180deg,color-mix(in srgb,var(--k) 8%,transparent),transparent 96px);
  background-size:100% 3px,auto;background-repeat:no-repeat;background-origin:border-box;background-clip:border-box}
/* un seul accent par carte : le liseré du haut remplace l'ancien bord gauche épais (sinon la tuile paraît coupée) */
:is(.pub,.bloc,.outil,.appli,.engagements li,.formule,.service,.encart){border-left:1px solid var(--ligne)}
.appli--une{border-left-color:color-mix(in srgb,var(--s-distance) 45%,var(--ligne))}
.formule.formule--vedette,.bloc.bloc--diag{border-left-color:var(--n-bord)}
.faq details{background-image:none;box-shadow:none;border-left:3px solid color-mix(in srgb,var(--k) 55%,transparent)}
.faq details[open]{border-left-color:var(--k)}
.faq summary::after{color:var(--k);background:color-mix(in srgb,var(--k) 12%,transparent)}

/* une couleur par domaine, comme les cartes du Board */
.publics>.pub:nth-child(3n+1){--k:var(--k-vert)}
.publics>.pub:nth-child(3n+2){--k:var(--k-bleu)}
.publics>.pub:nth-child(3n+3){--k:var(--k-teal)}
.pub .fl{background:color-mix(in srgb,var(--k) 14%,transparent);color:var(--k)}
.pub--fonce .fl{background:var(--lagon-fond);color:#fff}
.engagements li:nth-child(odd){--k:var(--k-teal)}
.engagements li:nth-child(even){--k:var(--k-sauv)}
.engagements .ico,:root[data-theme="dark"] .engagements .ico{background:color-mix(in srgb,var(--k) 14%,transparent);border-color:transparent;color:var(--k)}
.appli:nth-child(5n+1){--k:var(--k-cyan)}
.appli:nth-child(5n+2){--k:var(--k-teal)}
.appli:nth-child(5n+3){--k:var(--k-vert)}
.appli:nth-child(5n+4){--k:var(--k-sauv)}
.appli:nth-child(5n+5){--k:var(--k-bleu)}
.outil:nth-child(odd){--k:var(--k-bleu)}
.outil:nth-child(even){--k:var(--k-cyan)}
.bloc:nth-of-type(even){--k:var(--k-vert)}

/* blocs sombres (diagnostic, vedette, encart) : fenêtre Arc-Dark du Board */
:is(.bloc--diag,.formule--vedette,.cta-final){background-color:var(--n-fond);border-color:var(--n-bord)}
:root:not([data-theme="dark"]) :is(.bloc--diag,.formule--vedette){background-color:var(--nuit)}

/* ---------- prix : chiffres en Cantarell tabulaire ---------- */
.prix-liste li{border-bottom-style:solid}
.prix-liste b{font-family:var(--nala)}

/* ---------- fenêtre de diagnostic de l'accueil = fenêtre du Nala Board ---------- */
.scan{background:var(--n-fond);border:1px solid var(--n-bord);border-radius:16px;padding:0 0 12px;overflow:hidden;font-family:var(--nala);
  box-shadow:0 30px 60px -28px rgba(10,22,34,.6),0 0 0 1px rgba(0,0,0,.08)}
.scan::before{display:none}
.scan__tete{margin:0 0 10px;padding:10px 14px;background:var(--n-titre);border-bottom:1px solid var(--n-bord);font:700 .88rem var(--nala);color:var(--n-texte)}
.scan__led{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8FE6F7,var(--n-cyan) 30%,var(--n-bleu) 72%,#22324B);box-shadow:0 0 12px rgba(34,199,232,.55);animation:nalaSouffle 3.2s ease-in-out infinite}
@keyframes nalaSouffle{50%{box-shadow:0 0 20px rgba(34,199,232,.85)}}
.scan__pct{color:var(--n-cyan);order:2}
.scan__tete::before{content:"Diagnostic";order:1}
.scan__tete:lang(en)::before{content:"Diagnosis"}
.scan__tete:lang(es)::before{content:"Diagnóstico"}
.scan__liste{padding:0 12px}
.scan__l{background:var(--n-base);border:1px solid var(--n-bord)}
.scan__l i,.scan__l b{--lagon-vif:var(--n-ok)}
.scan__l b{color:var(--n-ok)}
.scan__l--alerte i{background:var(--n-alerte);box-shadow:0 0 calc(10px*var(--on)) var(--n-alerte)}
.scan__l--alerte b{color:var(--n-alerte)}
.scan__verdict{overflow:hidden;background:var(--n-base);border:1px solid var(--n-bord);border-radius:12px;color:var(--n-texte)}
.scan__verdict span{color:var(--n-alerte)}
.scan__verdict b{color:var(--n-ok)}
.scan__verdict::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--n-alerte),rgba(224,164,58,.15))}
.carte--dist{background:var(--n-titre)}

/* ---------- avis, pied ---------- */
.avis__carte{border-top:3px solid color-mix(in srgb,var(--soleil) 70%,transparent)}
.compteur{font-family:var(--nala)}
.compteur::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--n-ok);box-shadow:0 0 8px var(--n-ok)}

/* ---------- boutons ---------- */
:root[data-theme="dark"] .btn--blanc{background:var(--surf);border-color:var(--ligne);color:var(--encre)}
:root[data-theme="dark"] .btn--soleil{color:#2F343F}

@media (prefers-reduced-motion:reduce){.scan__led{animation:none}}