/* =========================================================================
   KW ENTREPRISE — APPLICATION CLIENT
   Habillage « atelier de nuit » (même langage que le site kwentreprise.com)
   Fichier de design uniquement : aucune fonction, aucun texte modifié.
   Pour revenir au rendu précédent : retirer la ligne <link ... kw-app-design.css>.
   Les couleurs passent par var(--or) : le thème vert Premium s'applique tout seul.
   ========================================================================= */

/* ---------- 1. Écran de bienvenue : rideau métallique + sol de showroom ---------- */
html body #splash {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f56c14' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='.22'/%3E%3C/linearGradient%3E%3CradialGradient id='p' cx='.5' cy='.55' r='.5'%3E%3Cstop offset='0' stop-color='%23ffb547' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='400' height='260' fill='url(%23f)'/%3E%3Cellipse cx='200' cy='150' rx='210' ry='70' fill='url(%23p)'/%3E%3Cg stroke='%23f56c14' stroke-opacity='.22' stroke-width='1' fill='none'%3E%3Cpath d='M200 0 L-300 260 M200 0 L-100 260 M200 0 L60 260 M200 0 L200 260 M200 0 L340 260 M200 0 L500 260 M200 0 L700 260'/%3E%3Cpath d='M0 22 H400 M0 52 H400 M0 92 H400 M0 146 H400 M0 220 H400'/%3E%3C/g%3E%3C/svg%3E") center bottom / 100% 42% no-repeat,
    radial-gradient(90% 50% at 50% 30%, rgba(58, 26, 6, .85), rgba(5, 5, 6, .97) 70%),
    var(--kwi-gar, none) center / cover no-repeat !important;
}
/* Le rideau : à l'état de repos il est levé, donc il ne couvre jamais l'écran sans animation */
html body #splash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent calc(100% - 34px), var(--or) calc(100% - 34px), var(--or) calc(100% - 29px), #2b2f36 calc(100% - 29px)),
    repeating-linear-gradient(180deg, #3a3f47 0 2px, #2a2e35 2px 16px, #1c1f24 16px 21px, #111317 21px 23px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(-101%);
  animation: kwa-rideau 1s cubic-bezier(.7, 0, .3, 1) 0.2s backwards;
}
@keyframes kwa-rideau {
  0%, 15% { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

/* ---------- 2. Jauge de lecture en haut de chaque écran ---------- */
@supports (animation-timeline: scroll()) {
  html body main:not(.fill)::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    height: 3px;
    margin: -14px -16px 11px;
    background: linear-gradient(90deg, var(--or3), var(--or) 70%, #ffb547);
    transform-origin: left center;
    transform: scaleX(0);
    pointer-events: none;
    animation: kwa-jauge linear both;
    animation-timeline: scroll(nearest block);
  }
  @keyframes kwa-jauge { to { transform: scaleX(1); } }
}

/* ---------- 3. Titres de section : règle graduée d'atelier ---------- */
/* (pendant la période Gabon, du 10 au 20 août, le soulignement vert-jaune-bleu reste prioritaire) */
html:not([data-kwt="gabon"]) body main h3 {
  padding-bottom: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(var(--orr), .95) 0 2px, transparent 2px 32px) left bottom / 130px 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(var(--orr), .55) 0 1px, transparent 1px 8px) left bottom / 129px 5px no-repeat,
    linear-gradient(90deg, rgba(var(--orr), .6), rgba(var(--orr), 0) 60%) left bottom / 100% 1px no-repeat;
}

/* ---------- 4. États vides illustrés (à la place des grands émojis) ---------- */
html body main[data-scr="suivi"] .card[style*="text-align:center"] > div[style*="font-size"]:first-child,
html body main[data-scr="vehicule"] .card[style*="text-align:center"] > div[style*="font-size"]:first-child,
html body main[data-scr="mesrdv"] .card[style*="text-align:center"] > div[style*="font-size"]:first-child,
html body main[data-scr="devis"] .card[style*="text-align:center"] > div[style*="font-size"]:first-child,
html body main[data-scr="notifs"] .card[style*="text-align:center"] > div[style*="font-size"]:first-child {
  font-size: 0 !important;
  width: 168px;
  height: 104px;
  margin: 4px auto 6px;
  background: var(--or);
  -webkit-mask: var(--kwa-ill) center / contain no-repeat;
  mask: var(--kwa-ill) center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(var(--orr), .35));
}
html body main[data-scr="suivi"] { --kwa-ill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 110' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 104 H172' stroke-width='2.5'/%3E%3Cpath d='M28 104 V18 M152 104 V18' stroke-width='5'/%3E%3Cpath d='M22 18 H34 M146 18 H158' stroke-width='3'/%3E%3Cpath d='M28 70 H62 M152 70 H118' stroke-width='3'/%3E%3Cpath d='M44 62 L44 46 C44 40 48 38 52 37 L68 35 C74 26 82 22 92 22 L112 22 C121 22 128 26 134 33 L140 37 C147 38 152 41 152 47 L152 62 Z' stroke-width='2.5' stroke-opacity='.9' transform='translate(-8 0)'/%3E%3Cpath d='M64 36 C70 29 77 27 86 27 L96 27 L96 37 Z M100 27 L110 27 C116 27 121 30 126 35 L100 37 Z' stroke-width='1.6' stroke-opacity='.55' transform='translate(-8 0)'/%3E%3Cg stroke-width='2.4' stroke-opacity='.9'%3E%3Ccircle cx='64' cy='62' r='9'/%3E%3Ccircle cx='126' cy='62' r='9'/%3E%3C/g%3E%3Ccircle cx='64' cy='62' r='3' stroke-opacity='.5'/%3E%3Ccircle cx='126' cy='62' r='3' stroke-opacity='.5'/%3E%3Cg stroke-opacity='.35' stroke-width='1.5' stroke-dasharray='2 5'%3E%3Cpath d='M44 90 V100 M136 90 V100'/%3E%3C/g%3E%3Cpath d='M80 88 h20 v12 h-20 z M84 88 v-5 h12 v5' stroke-width='1.8' stroke-opacity='.5'/%3E%3C/svg%3E"); }
html body main[data-scr="vehicule"] { --kwa-ill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 110' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 92 H174' stroke-width='2' stroke-opacity='.4' stroke-dasharray='10 7'/%3E%3Cpath d='M14 80 L14 62 C14 56 18 53 24 52 L44 49 C50 38 58 34 70 34 L112 34 C124 34 132 38 140 46 L150 52 C160 53 168 56 168 64 L168 80 L150 80 A13 13 0 0 0 124 80 L56 80 A13 13 0 0 0 30 80 Z' stroke-width='2.6'/%3E%3Cpath d='M48 49 C53 42 60 39 70 39 L88 39 L88 49 Z M93 39 L111 39 C120 39 126 42 133 49 L93 49 Z' stroke-width='1.6' stroke-opacity='.55'/%3E%3Cpath d='M22 62 H164' stroke-width='1.2' stroke-opacity='.35'/%3E%3Ccircle cx='43' cy='82' r='10' stroke-width='2.6'/%3E%3Ccircle cx='137' cy='82' r='10' stroke-width='2.6'/%3E%3Ccircle cx='43' cy='82' r='3.5' stroke-opacity='.5'/%3E%3Ccircle cx='137' cy='82' r='3.5' stroke-opacity='.5'/%3E%3Cellipse cx='164' cy='60' rx='3' ry='2' fill='%23000'/%3E%3Ccircle cx='150' cy='22' r='14' stroke-width='2.4'/%3E%3Cpath d='M150 15 V29 M143 22 H157' stroke-width='2.6'/%3E%3C/svg%3E"); }
html body main[data-scr="mesrdv"] { --kwa-ill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 110' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M48 14 H132 Q140 14 140 22 V96 Q140 104 132 104 H48 Q40 104 40 96 V22 Q40 14 48 14 Z' stroke-width='2.6'/%3E%3Cpath d='M40 34 H140' stroke-width='2.2'/%3E%3Cg stroke-width='3'%3E%3Cpath d='M62 8 V20 M90 8 V20 M118 8 V20'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.45' stroke='none'%3E%3Ccircle cx='56' cy='50' r='3'/%3E%3Ccircle cx='73' cy='50' r='3'/%3E%3Ccircle cx='90' cy='50' r='3'/%3E%3Ccircle cx='107' cy='50' r='3'/%3E%3Ccircle cx='124' cy='50' r='3'/%3E%3Ccircle cx='56' cy='66' r='3'/%3E%3Ccircle cx='73' cy='66' r='3'/%3E%3Ccircle cx='107' cy='66' r='3'/%3E%3Ccircle cx='124' cy='66' r='3'/%3E%3Ccircle cx='56' cy='82' r='3'/%3E%3Ccircle cx='73' cy='82' r='3'/%3E%3Ccircle cx='90' cy='82' r='3'/%3E%3Ccircle cx='107' cy='82' r='3'/%3E%3C/g%3E%3Ccircle cx='90' cy='66' r='8' stroke-width='2.4'/%3E%3Cpath d='M150 74 a13 13 0 1 1 -0.1 0' stroke-width='2.2' stroke-opacity='.7' transform='translate(0 0)'/%3E%3Cpath d='M150 80 V87 L155 90' stroke-width='2' stroke-opacity='.7'/%3E%3C/svg%3E"); }
html body main[data-scr="devis"] { --kwa-ill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 110' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M52 8 H128 V44 A7 7 0 0 0 128 58 V102 L120 96 L112 102 L104 96 L96 102 L88 96 L80 102 L72 96 L64 102 L56 96 L52 102 V58 A7 7 0 0 0 52 44 Z' stroke-width='2.6'/%3E%3Cpath d='M59 51 H121' stroke-width='1.6' stroke-dasharray='3 4' stroke-opacity='.6'/%3E%3Cpath d='M64 20 H100' stroke-width='3'/%3E%3Cpath d='M64 30 H90' stroke-width='1.8' stroke-opacity='.5'/%3E%3Cg stroke-width='1.8' stroke-opacity='.5'%3E%3Cpath d='M64 66 H96 M108 66 H116 M64 76 H90 M108 76 H116'/%3E%3C/g%3E%3Cpath d='M64 88 H116' stroke-width='2.6'/%3E%3Ccircle cx='140' cy='34' r='16' stroke-width='2' stroke-opacity='.7' stroke-dasharray='4 3'/%3E%3Cpath d='M132 34 l6 6 l11 -12' stroke-width='2.6' stroke-opacity='.8'/%3E%3C/svg%3E"); }
html body main[data-scr="notifs"] { --kwa-ill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 110' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M90 12 V18' stroke-width='3'/%3E%3Cpath d='M66 74 V52 C66 34 76 22 90 22 C104 22 114 34 114 52 V74 L122 84 H58 Z' stroke-width='2.8'/%3E%3Cpath d='M82 90 C82 96 86 99 90 99 C94 99 98 96 98 90' stroke-width='2.6'/%3E%3Cpath d='M74 52 C74 40 80 32 88 30' stroke-width='1.8' stroke-opacity='.45'/%3E%3Cg stroke-width='2' stroke-opacity='.5'%3E%3Cpath d='M44 40 C38 48 38 60 44 68'/%3E%3Cpath d='M136 40 C142 48 142 60 136 68'/%3E%3C/g%3E%3Cg stroke-width='2' stroke-opacity='.25'%3E%3Cpath d='M32 32 C22 46 22 62 32 76'/%3E%3Cpath d='M148 32 C158 46 158 62 148 76'/%3E%3C/g%3E%3C/svg%3E"); }
html body main[data-scr="suivi"] .card[style*="text-align:center"],
html body main[data-scr="vehicule"] .card[style*="text-align:center"],
html body main[data-scr="mesrdv"] .card[style*="text-align:center"],
html body main[data-scr="devis"] .card[style*="text-align:center"],
html body main[data-scr="notifs"] .card[style*="text-align:center"] {
  background:
    linear-gradient(rgba(var(--orr), .05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(var(--orr), .05) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(var(--orr), .14), transparent 70%),
    linear-gradient(180deg, #1a1a20, var(--card));
  border-color: rgba(var(--orr), .28);
}

/* ---------- 5. Prise de rendez-vous : la route entre les étapes se remplit ---------- */
html body .steps div.on:has(+ div.on):after {
  border-top: 2px solid var(--or);
  box-shadow: 0 0 8px rgba(var(--orr), .6);
  top: 16px;
}
html body .steps div.on:not(:has(+ div.on)) b {
  box-shadow: 0 0 0 4px rgba(var(--orr), .22), 0 0 16px rgba(var(--orr), .75);
}
html body .steps div:not(.on) b { background: #121216; border-style: dashed; }

/* ---------- 6. Diagnostic : la zone photo devient un viseur ---------- */
html body .up {
  position: relative;
  border: 0;
  background:
    linear-gradient(var(--or), var(--or)) left 10px top 10px / 22px 3px no-repeat,
    linear-gradient(var(--or), var(--or)) left 10px top 10px / 3px 22px no-repeat,
    linear-gradient(var(--or), var(--or)) right 10px top 10px / 22px 3px no-repeat,
    linear-gradient(var(--or), var(--or)) right 10px top 10px / 3px 22px no-repeat,
    linear-gradient(var(--or), var(--or)) left 10px bottom 10px / 22px 3px no-repeat,
    linear-gradient(var(--or), var(--or)) left 10px bottom 10px / 3px 22px no-repeat,
    linear-gradient(var(--or), var(--or)) right 10px bottom 10px / 22px 3px no-repeat,
    linear-gradient(var(--or), var(--or)) right 10px bottom 10px / 3px 22px no-repeat,
    linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)) center / 1px 40% no-repeat,
    linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)) center / 40% 1px no-repeat,
    radial-gradient(ellipse at 50% 40%, rgba(var(--orr), .12), transparent 70%),
    #111115;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
html body .up::after {
  content: "REC";
  position: absolute;
  top: 14px;
  right: 40px;
  font: 700 10px/1 Roboto, Arial, sans-serif;
  letter-spacing: .08em;
  color: #fca5a5;
  padding-left: 12px;
  background: radial-gradient(circle at 4px 50%, #ef4444 0 4px, transparent 4.5px);
  animation: kwa-rec 1.4s steps(1, end) infinite;
}
@keyframes kwa-rec { 50% { opacity: .25; } }

/* ---------- 7. Urgence dépannage : bandes de signalisation ---------- */
html body div[style*="background:rgba(127,29,29,.28)"] {
  border: 4px solid transparent !important;
  background:
    linear-gradient(#1f0d0b, #1f0d0b) padding-box,
    repeating-linear-gradient(-45deg, var(--or) 0 10px, #111317 10px 20px) border-box !important;
}

/* ---------- 8. Contact : coucher de soleil sur la mer à Libreville ---------- */
html body main[data-scr="contact"] .hero {
  min-height: 0;
  padding-bottom: 96px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f56c14' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='.22'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23ffb547' stop-opacity='.9'/%3E%3Cstop offset='.6' stop-color='%23f56c14' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23f56c14' stop-opacity='0'/%3E%3C/radialGradient%3E%3CclipPath id='above'%3E%3Crect width='1600' height='250'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect width='1600' height='250' fill='url(%23sky)'/%3E%3Ccircle cx='760' cy='250' r='150' fill='url(%23sun)' clip-path='url(%23above)'/%3E%3Ccircle cx='760' cy='250' r='62' fill='%23ffb547' fill-opacity='.55' clip-path='url(%23above)'/%3E%3Cg fill='%2316110e'%3E%3Cpath d='M0 250 V214 H40 V196 H70 V222 H110 V180 H130 V170 H150 V230 H190 V204 H240 V250 Z'/%3E%3Cpath d='M300 250 V226 H330 V210 H360 V190 H372 V160 H384 V190 H400 V218 H440 V232 H480 V250 Z'/%3E%3Cpath d='M1260 250 V230 H1290 V200 H1330 V186 H1360 V214 H1400 V176 H1418 V150 H1430 V176 H1450 V222 H1500 V206 H1540 V250 Z'/%3E%3C/g%3E%3Crect y='250' width='1600' height='110' fill='%230d0c0d'/%3E%3Cg stroke='%23ffb547' stroke-linecap='round' fill='none'%3E%3Cpath d='M670 266 H850' stroke-opacity='.5' stroke-width='3'/%3E%3Cpath d='M700 284 H820' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M725 302 H795' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M740 320 H780' stroke-opacity='.18' stroke-width='3'/%3E%3C/g%3E%3Cg stroke='%23f56c14' stroke-opacity='.18' stroke-width='1.5' fill='none' stroke-dasharray='30 22'%3E%3Cpath d='M0 276 H1600'/%3E%3Cpath d='M40 300 H1600' stroke-dashoffset='20'/%3E%3Cpath d='M0 330 H1600' stroke-dashoffset='8'/%3E%3C/g%3E%3Cg fill='%230a0909'%3E%3Cpath d='M160 360 C170 300 182 250 210 196 L216 198 C192 252 182 300 176 360 Z'/%3E%3Cpath d='M212 196 C180 176 150 180 120 200 C152 190 180 192 212 200 Z M212 196 C200 160 172 146 146 148 C176 158 196 176 208 200 Z M212 196 C232 160 262 150 292 160 C262 162 236 176 216 200 Z M212 196 C248 184 280 194 300 214 C274 202 246 198 216 202 Z M212 196 C214 170 228 150 244 140 C232 160 222 178 216 198 Z'/%3E%3Cpath d='M1520 360 C1508 296 1492 240 1462 190 L1456 193 C1482 244 1496 300 1504 360 Z'/%3E%3Cpath d='M1460 190 C1490 168 1522 170 1552 188 C1520 180 1492 184 1460 194 Z M1460 190 C1470 154 1498 140 1526 140 C1496 152 1476 170 1464 194 Z M1460 190 C1440 156 1410 146 1380 156 C1410 158 1436 172 1456 194 Z M1460 190 C1424 178 1392 188 1372 208 C1398 196 1426 192 1456 196 Z'/%3E%3Cpath d='M1384 360 C1380 320 1372 290 1356 262 L1351 264 C1364 292 1370 322 1372 360 Z'/%3E%3Cpath d='M1354 262 C1334 248 1312 250 1294 264 C1314 256 1334 258 1352 266 Z M1354 262 C1372 246 1394 246 1412 258 C1392 254 1372 258 1356 266 Z M1354 262 C1352 242 1362 228 1376 222 C1366 236 1360 250 1356 264 Z'/%3E%3C/g%3E%3C/svg%3E") center bottom / 560px auto no-repeat,
    linear-gradient(180deg, #121419 0%, #1a120d 100%) !important;
}

/* ---------- 9. Messages : mur perforé d'atelier en fond ---------- */
html body main[data-scr="msg"] {
  background:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .05) 0 1.6px, transparent 2.2px) 0 0 / 24px 24px,
    radial-gradient(120% 40% at 50% -5%, rgba(var(--orr), .16), transparent 60%),
    #0b0b0e;
}


/* =========================================================================
   2e SÉRIE — écrans remplis de vraies données
   ========================================================================= */

/* ---------- 11. Mon véhicule : kilométrage façon compteur ---------- */
html body main[data-scr="vehicule"] .card div.or[style*="font-size:22px"] {
  display: inline-block;
  margin-top: 8px !important;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: #fff4ea !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), transparent 45%, transparent 55%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg, #121216 0 calc(1ch + .08em - 1px), #000 calc(1ch + .08em - 1px) calc(1ch + .08em)),
    #121216;
  box-shadow: inset 0 0 0 1px rgba(var(--orr), .55), inset 0 2px 6px rgba(0, 0, 0, .7), 0 0 14px rgba(var(--orr), .25);
  text-shadow: 0 0 8px rgba(var(--orr), .55);
}

/* ---------- 12. Barre « État général » : graduations de jauge ---------- */
html body main[data-scr="vehicule"] div[style*="height:10px;border-radius:6px;background:#2a2a31"] {
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}
html body main[data-scr="vehicule"] div[style*="height:10px;border-radius:6px;background:#2a2a31"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, .55) calc(10% - 2px) 10%),
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 60%);
}

/* ---------- 13. Mes devis et Historique : cartes en bons d'intervention ---------- */
html body main[data-scr="devis"] > .card:not([style*="text-align:center"]),
html body main[data-scr="hist"] > .card:not([style*="text-align:center"]) {
  position: relative;
  -webkit-mask:
    radial-gradient(circle 8px at 0 44px, transparent 98%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 44px, transparent 98%, #000 100%) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 8px at 0 44px, transparent 98%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at 100% 44px, transparent 98%, #000 100%) right / 51% 100% no-repeat;
  background:
    linear-gradient(90deg, transparent 12px, rgba(var(--orr), .45) 12px) 0 44px / 100% 0 no-repeat,
    linear-gradient(180deg, #1c1c22, var(--card) 70%);
}
html body main[data-scr="devis"] > .card:not([style*="text-align:center"]) > .row:first-child,
html body main[data-scr="hist"] > .card:not([style*="text-align:center"]) > .row:first-child {
  padding-bottom: 10px;
  margin: 0 -14px 6px;
  padding-left: 14px;
  padding-right: 14px;
  border-bottom: 2px dashed rgba(var(--orr), .35);
}

/* ---------- 14. Pastilles de statut : un voyant de la couleur du statut ---------- */
html body .pill[style*="border-color"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ---------- 15. Mes rendez-vous : anneaux d'éphéméride ---------- */
html body main[data-scr="mesrdv"] > .card.li {
  position: relative;
  padding-left: 30px;
  background:
    radial-gradient(circle at 13px 30%, #050506 0 3.5px, rgba(255, 255, 255, .22) 4px, transparent 5px),
    radial-gradient(circle at 13px 70%, #050506 0 3.5px, rgba(255, 255, 255, .22) 4px, transparent 5px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 0 24px, transparent 24px),
    linear-gradient(180deg, #1c1c22, var(--card) 70%);
}

/* ---------- 16. Messages en bas d'écran : style tableau de bord ---------- */
html body .toast {
  color: #fff;
  background: rgba(14, 15, 18, .94);
  border: 1px solid rgba(var(--orr), .75);
  padding-left: 30px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html body .toast::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 8px var(--or);
}


/* =========================================================================
   3e SÉRIE — vraies icônes à la place des émojis (avec kw-app-icons.js)
   ========================================================================= */
html body .kwi { display: inline-block; font-style: normal; line-height: 1; vertical-align: -0.08em; }
html body .kwi-wrap { display: inline; }
html body .kwi.fa-xmark { font-size: .9em; color: inherit; }
html body .kwi-or2 { color: #f5b301; filter: drop-shadow(0 0 4px rgba(245, 179, 1, .45)); }
html body .kwi-warn { color: #f59e0b; }
html body .kwi-ok { color: #22c55e; }
html body .kwi-red { color: #ef4444; filter: drop-shadow(0 0 5px rgba(239, 68, 68, .7)); }
html body .kwi-amber { color: #f59e0b; filter: drop-shadow(0 0 5px rgba(245, 158, 11, .7)); }
html body .kwi-green { color: #22c55e; filter: drop-shadow(0 0 5px rgba(34, 197, 94, .7)); }
html body .kwi.fa-circle { font-size: .8em; vertical-align: .02em; }
html body .kwi.fa-brands.fa-whatsapp { font-size: 1.1em; }
/* Icône dans un carré de couleur : toujours blanche et lisible */
html body .sq .kwi { color: #fff !important; font-size: 22px; }
/* Icône d'un écran vide : couleur KW */
html body .card[style*="text-align:center"] > div:first-child > .kwi { color: var(--or); filter: drop-shadow(0 0 10px rgba(var(--orr), .35)); }
/* Pastille de langue (à la place des drapeaux) */
html body .kwi-flag {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 20px;
  padding: 0 5px;
  margin-right: 4px;
  border-radius: 6px;
  font: 700 11px/1 Roboto, Arial, sans-serif;
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(180deg, var(--or2), var(--or3));
  vertical-align: middle;
}
/* Corbeille affichée en glissant une notification */
html body .nsw.sw::after {
  content: "\f2ed";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html body #splash::before { animation: none; display: none; }
  html body .up::after { animation: none; }
  html body main:not(.fill)::before { animation: none; transform: scaleX(0); }
}