/* ==========================================================================
   INSIGHT TECHNOLOGY — widgets d'illustration
   Chaque widget est declare en HTML par data-widget="..." et construit par
   widgets.js. Cette feuille n'habille que le rendu ; elle ne contient
   aucune donnee.
   --------------------------------------------------------------------------
   1. Cadre commun     5. Barres        9. Moniteur
   2. Radar            6. Frise        10. Courbe
   3. Flux             7. Bascule      11. Page expertises
   4. Console          8. Jauge        12. Adaptatif
   ========================================================================== */

/* --- 1. Cadre commun ----------------------------------------------------- */
.widget{
  position:relative; overflow:hidden;
  padding:24px;
  background:linear-gradient(165deg,rgba(255,255,255,.96),rgba(240,247,255,.86));
  border:1px solid var(--verre-bord);
  border-radius:var(--r-xl);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--ombre-l);
}
.widget::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(150deg,rgba(41,169,242,.55),transparent 40%,transparent 64%,rgba(255,122,0,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.widget > *{ position:relative; z-index:1; }

.widget__entete{
  display:flex; align-items:center; gap:10px;
  padding-bottom:15px; margin-bottom:18px;
  border-bottom:1px solid var(--verre-bord);
}
.widget__titre{
  font-family:'Space Grotesk',sans-serif; font-size:.86rem; font-weight:600;
  color:var(--encre); letter-spacing:-.01em;
}
.widget__etat{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:99px;
  background:rgba(41,169,242,.12); color:var(--bleu);
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.widget__etat::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);
  animation:pulsation 1.8s ease-in-out infinite;
}
.widget__etat--orange{ background:rgba(255,122,0,.13); color:#c25a00; }
.widget__etat--orange::before{ background:var(--orange); }

.widget__pied{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--verre-bord);
  font-size:.82rem; color:var(--encre-3);
}
.widget__legende{ display:flex; flex-wrap:wrap; gap:14px; }
.widget__legende span{ display:inline-flex; align-items:center; gap:7px; font-size:.79rem; }
.widget__legende i{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }

/* --- 2. Radar ------------------------------------------------------------ */
.radar{ display:block; width:100%; height:auto; overflow:visible; }
.radar__toile{ fill:none; stroke:rgba(11,60,122,.13); stroke-width:1; }
.radar__axe{ stroke:rgba(11,60,122,.13); stroke-width:1; }
.radar__zone{
  fill:rgba(41,169,242,.20); stroke:var(--bleu); stroke-width:2;
  stroke-linejoin:round;
  transform-origin:center; transform:scale(0);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
.widget.vu .radar__zone{ transform:scale(1); }
.radar__cible{
  fill:none; stroke:var(--orange); stroke-width:1.6; stroke-dasharray:5 5;
  opacity:0; transition:opacity .6s ease .7s;
}
.widget.vu .radar__cible{ opacity:.85; }
.radar__point{ fill:var(--bleu); }
.radar__etiquette{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:600;
  fill:var(--encre-2);
}
.radar__valeur{
  font-family:'Space Grotesk',sans-serif; font-size:10.5px; font-weight:700;
  fill:var(--bleu);
}

/* --- 3. Flux ------------------------------------------------------------- */
.flux{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
.flux__colonne{ display:grid; gap:9px; }
.flux__noeud{
  display:flex; align-items:center; gap:9px;
  padding:10px 13px; border-radius:12px;
  background:#fff; border:1px solid var(--verre-bord);
  font-size:.81rem; font-weight:600; color:var(--encre);
  box-shadow:var(--ombre-s);
  opacity:0; transform:translateX(-14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.flux__colonne--droite .flux__noeud{ transform:translateX(14px); }
.widget.vu .flux__noeud{ opacity:1; transform:none; }
.flux__noeud i{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--givre);
}
.flux__noeud--actif i{ background:var(--cyan); box-shadow:0 0 0 3px rgba(41,169,242,.2); }
.flux__noeud--cible{
  border-color:rgba(255,122,0,.35); background:rgba(255,122,0,.06);
}
.flux__noeud--cible i{ background:var(--orange); box-shadow:0 0 0 3px rgba(255,122,0,.18); }

.flux__coeur{
  position:relative; display:grid; place-items:center; gap:3px;
  width:118px; height:118px; padding:0 12px; border-radius:50%; overflow:hidden;
  background:var(--deg-marque); color:#fff; text-align:center;
  box-shadow:0 10px 30px rgba(11,111,196,.35);
}
.flux__coeur b{ font-family:'Space Grotesk',sans-serif; font-size:.8rem; font-weight:700; line-height:1.15; }
.flux__coeur span{ font-size:.62rem; opacity:.82; letter-spacing:.05em; text-transform:uppercase; line-height:1.2; }
.flux__coeur::before,.flux__coeur::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(41,169,242,.4);
  animation:onde 2.8s ease-out infinite;
}
.flux__coeur::after{ animation-delay:1.4s; }
@keyframes onde{
  0%  { transform:scale(.92); opacity:.8; }
  100%{ transform:scale(1.35); opacity:0; }
}
.flux__cables{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.flux__cable{ stroke:rgba(11,111,196,.22); stroke-width:1.4; fill:none; }
.flux__bille{ fill:var(--cyan); }

/* --- 4. Console ---------------------------------------------------------- */
.console-w{
  background:var(--nuit); border-radius:var(--r-m); padding:18px 20px;
  font-family:'Space Grotesk',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.83rem; line-height:1.75; color:#c8dcf2;
  min-height:230px;
}
.console-w__ligne{ display:flex; gap:9px; margin-bottom:7px; }
.console-w__ligne:last-child{ margin-bottom:0; }
.console-w__invite{ color:var(--orange); flex:0 0 auto; font-weight:700; }
.console-w__reponse{ color:#7fd0ff; }
.console-w__commentaire{ color:#5d7695; font-style:italic; }
.console-w__ok{ color:#5fe0a8; }
.console-w__curseur{
  display:inline-block; width:8px; height:1em; vertical-align:text-bottom;
  background:var(--cyan); animation:curseur 1.05s steps(1) infinite;
}
.console-w__jetons{
  display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.1);
}
.console-w__jetons span{
  padding:3px 10px; border-radius:99px; font-size:.7rem; font-weight:600;
  background:rgba(41,169,242,.14); color:#7fd0ff;
}

/* --- 5. Barres ----------------------------------------------------------- */
.barres{ display:grid; gap:15px; }
.barres__ligne{ display:grid; gap:6px; }
.barres__tete{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:.83rem;
}
.barres__tete b{
  font-family:'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums;
  color:var(--encre); font-weight:700;
}
.barres__piste{ height:9px; border-radius:5px; background:var(--brume-2); overflow:hidden; }
.barres__jauge{
  display:block; height:100%; width:0; border-radius:5px;
  background:var(--deg-marque);
  transition:width 1.25s cubic-bezier(.22,1,.36,1);
}
.barres__jauge--orange{ background:linear-gradient(110deg,var(--orange-2),var(--orange)); }
.barres__jauge--teal{ background:linear-gradient(110deg,#0a6f6a,var(--teal)); }
.barres__jauge--violet{ background:linear-gradient(110deg,#5a1d94,var(--violet)); }

/* Variante colonnes */
.colonnes{ display:flex; align-items:flex-end; gap:10px; height:186px; padding-top:10px; }
.colonnes__item{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; height:100%; }
.colonnes__barre{
  width:100%; height:0; border-radius:8px 8px 3px 3px;
  background:var(--deg-marque);
  transition:height 1.1s cubic-bezier(.22,1,.36,1);
  position:relative;
}
.colonnes__barre--pale{ background:linear-gradient(180deg,var(--givre),var(--brume-2)); }
.colonnes__barre b{
  position:absolute; top:-21px; left:0; right:0; text-align:center;
  font-family:'Space Grotesk',sans-serif; font-size:.74rem; font-weight:700;
  color:var(--encre); font-variant-numeric:tabular-nums;
}
.colonnes__item span{ text-align:center; font-size:.72rem; color:var(--encre-3); }

/* --- 6. Frise ------------------------------------------------------------ */
.frise{ position:relative; display:grid; gap:20px; padding-left:30px; }
.frise::before{
  content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--bleu),var(--cyan),rgba(255,122,0,.5));
}
.frise__jalon{
  position:relative;
  opacity:0; transform:translateY(12px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.widget.vu .frise__jalon{ opacity:1; transform:none; }
.frise__jalon::before{
  content:""; position:absolute; left:-30px; top:5px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--bleu);
  box-shadow:0 0 0 4px rgba(11,111,196,.1);
}
.frise__jalon--actif::before{ background:var(--bleu); box-shadow:0 0 0 5px rgba(11,111,196,.18); }
.frise__horizon{
  font-family:'Space Grotesk',sans-serif; font-size:.71rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--orange);
}
.frise__titre{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--encre); font-size:.96rem; margin:2px 0 3px; }
.frise__detail{ font-size:.83rem; color:var(--encre-3); }
.frise__ruban{ height:7px; border-radius:4px; background:var(--brume-2); margin-top:9px; overflow:hidden; }
.frise__ruban i{
  display:block; height:100%; width:0; border-radius:4px; background:var(--deg-marque);
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}

/* --- 7. Bascule avant / apres ------------------------------------------- */
.bascule__boutons{
  display:flex; gap:5px; padding:5px; margin-bottom:18px;
  background:var(--brume-2); border-radius:11px;
}
.bascule__bouton{
  flex:1; padding:9px 14px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:var(--encre-3);
  font-family:'Space Grotesk',sans-serif; font-size:.84rem; font-weight:600;
  transition:background var(--tr), color var(--tr), box-shadow var(--tr);
}
.bascule__bouton[aria-selected="true"]{
  background:#fff; color:var(--encre); box-shadow:var(--ombre-s);
}
.bascule__vue{ display:none; }
.bascule__vue[data-actif="true"]{ display:block; animation:fondu .4s ease; }
@keyframes fondu{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.bascule__etapes{ display:grid; gap:7px; margin-bottom:16px; }
.bascule__etape{
  display:flex; align-items:center; gap:10px;
  padding:9px 13px; border-radius:10px;
  background:#fff; border:1px solid var(--verre-bord);
  font-size:.82rem; color:var(--encre-2);
}
.bascule__etape b{
  display:grid; place-items:center; width:21px; height:21px; border-radius:6px;
  background:var(--brume-2); color:var(--encre-3);
  font-family:'Space Grotesk',sans-serif; font-size:.7rem; font-weight:700; flex:0 0 auto;
}
.bascule__etape--auto{ border-color:rgba(41,169,242,.35); background:rgba(41,169,242,.05); }
.bascule__etape--auto b{ background:var(--deg-marque); color:#fff; }
.bascule__etape--manuel b{ background:rgba(255,122,0,.15); color:#c25a00; }

.bascule__mesures{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bascule__mesure{
  padding:12px; border-radius:11px; text-align:center;
  background:var(--brume); border:1px solid var(--verre-bord);
}
.bascule__mesure b{
  display:block; font-family:'Space Grotesk',sans-serif; font-size:1.28rem;
  font-weight:700; color:var(--encre); line-height:1.1;
}
.bascule__mesure--gain b{ color:var(--bleu); }
.bascule__mesure span{ display:block; margin-top:3px; font-size:.7rem; color:var(--encre-3); }

/* --- 8. Jauge circulaire -------------------------------------------------- */
.jauge-c{ display:flex; align-items:center; gap:18px; }
.jauge-c svg{ width:104px; height:104px; flex:0 0 auto; transform:rotate(-90deg); }
.jauge-c__fond{ fill:none; stroke:var(--brume-2); stroke-width:9; }
.jauge-c__trait{
  fill:none; stroke:url(#degJauge); stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1);
}
.jauge-c__valeur{
  font-family:'Space Grotesk',sans-serif; font-size:1.9rem; font-weight:700;
  color:var(--encre); line-height:1; font-variant-numeric:tabular-nums;
}
.jauge-c__libelle{ font-size:.83rem; color:var(--encre-3); margin-top:4px; }

/* --- 9. Moniteur ---------------------------------------------------------- */
.moniteur{ display:grid; gap:8px; }
.moniteur__ligne{
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; border-radius:11px;
  background:#fff; border:1px solid var(--verre-bord);
  font-size:.84rem; color:var(--encre);
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.widget.vu .moniteur__ligne{ opacity:1; transform:none; }
.moniteur__libelle{ flex:1; min-width:0; }
.moniteur__pastille{
  display:grid; place-items:center; width:24px; height:24px; border-radius:7px; flex:0 0 auto;
}
.moniteur__pastille svg{ width:13px; height:13px; }
.moniteur__pastille--ok{ background:rgba(28,178,120,.14); color:#12855a; }
.moniteur__pastille--alerte{ background:rgba(255,122,0,.15); color:#c25a00; }
.moniteur__pastille--critique{ background:rgba(214,48,48,.13); color:#b32020; }
.moniteur__pastille--info{ background:rgba(11,111,196,.12); color:var(--bleu); }
.moniteur__badge{
  padding:3px 10px; border-radius:99px; font-size:.71rem; font-weight:700; white-space:nowrap;
}
.moniteur__badge--ok{ background:rgba(28,178,120,.13); color:#12855a; }
.moniteur__badge--alerte{ background:rgba(255,122,0,.14); color:#c25a00; }
.moniteur__badge--critique{ background:rgba(214,48,48,.12); color:#b32020; }
.moniteur__badge--info{ background:rgba(11,111,196,.11); color:var(--bleu); }

/* --- 10. Courbe ----------------------------------------------------------- */
.courbe{ display:block; width:100%; height:auto; overflow:visible; }
.courbe__grille{ stroke:rgba(11,60,122,.10); stroke-width:1; }
.courbe__aire{ fill:url(#degAire); opacity:0; transition:opacity .8s ease .5s; }
.widget.vu .courbe__aire{ opacity:1; }
.courbe__trait{
  fill:none; stroke:var(--bleu); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke-dashoffset 1.7s cubic-bezier(.33,1,.68,1);
}
.courbe__reference{
  fill:none; stroke:rgba(111,136,166,.55); stroke-width:1.8;
  stroke-dasharray:5 5; stroke-linecap:round;
}
.courbe__point{ fill:#fff; stroke:var(--bleu); stroke-width:2.4; }
.courbe__point--fin{ fill:var(--orange); stroke:var(--orange); }
.courbe__abscisse{ font-family:'Inter',sans-serif; font-size:10.5px; fill:var(--encre-3); }

/* --- 11. Page expertises -------------------------------------------------- */
/* Sous-navigation collante */
.sous-nav{
  position:sticky; top:78px; z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--verre-bord);
}
.sous-nav__piste{
  display:flex; gap:7px; overflow-x:auto; padding:13px 0;
  scrollbar-width:none;
}
.sous-nav__piste::-webkit-scrollbar{ display:none; }
.sous-nav__lien{
  flex:0 0 auto; padding:8px 15px; border-radius:99px;
  border:1px solid var(--verre-bord);
  background:#fff; color:var(--encre-2);
  font-size:.83rem; font-weight:600; white-space:nowrap;
  transition:background var(--tr), color var(--tr), border-color var(--tr);
}
.sous-nav__lien:hover{ border-color:var(--bleu); color:var(--bleu); }
.sous-nav__lien[aria-current="true"]{
  background:var(--deg-marque); border-color:transparent; color:#fff;
  box-shadow:0 4px 12px rgba(11,111,196,.28);
}

/* Grille de selection des expertises */
.familles{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:34px; }
.famille{
  padding:9px 18px; border-radius:99px; cursor:pointer;
  border:1px solid var(--verre-bord); background:#fff; color:var(--encre-2);
  font-family:'Space Grotesk',sans-serif; font-size:.86rem; font-weight:600;
  transition:background var(--tr), color var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.famille:hover{ border-color:var(--bleu); color:var(--bleu); }
.famille[aria-pressed="true"]{
  background:var(--deg-marque); border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(11,111,196,.3);
}
.tuile{ display:flex; flex-direction:column; }
.tuile[hidden]{ display:none; }
.tuile__famille{
  display:inline-block; margin-bottom:14px; padding:4px 11px; border-radius:99px;
  background:var(--brume-2); color:var(--bleu-nuit);
  font-size:.69rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  align-self:flex-start;
}
.tuile .icone{ width:46px; height:46px; margin-bottom:16px; border-radius:13px; }
.tuile .icone svg{ width:22px; height:22px; }
.tuile h3{ font-size:1.08rem; margin-bottom:.35em; }
.tuile p{ font-size:.9rem; flex:1; }

/* Section d'une expertise */
.expertise{ position:relative; padding:clamp(56px,7vw,96px) 0; }
.expertise:nth-of-type(even){ background:var(--brume); }
.expertise__grille{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,64px); align-items:start;
}
.expertise:nth-of-type(even) .expertise__visuel{ order:-1; }
.expertise__visuel{ position:sticky; top:150px; }

.expertise__index{
  font-family:'Space Grotesk',sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:.14em; color:var(--encre-3);
}
.expertise__tete{ display:flex; align-items:center; gap:15px; margin:14px 0 6px; }
.expertise__tete .icone{ margin:0; flex:0 0 auto; }
.expertise__tete h2{ margin:0; font-size:clamp(1.55rem,3vw,2.15rem); }

.bloc{ margin-top:30px; }
.bloc__titre{
  display:flex; align-items:center; gap:11px; margin-bottom:12px;
  font-family:'Space Grotesk',sans-serif; font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bleu);
}
.bloc__titre::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(11,111,196,.28),transparent);
}
.bloc__titre--orange{ color:#c25a00; }
.bloc__titre--orange::after{ background:linear-gradient(90deg,rgba(255,122,0,.32),transparent); }
.bloc p{ font-size:.97rem; }

.jetons{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.jetons li{
  padding:6px 13px; border-radius:99px;
  background:#fff; border:1px solid var(--verre-bord);
  font-size:.79rem; font-weight:600; color:var(--encre-2);
}
.expertise:nth-of-type(even) .jetons li{ background:rgba(255,255,255,.85); }
.jetons--titre{ font-size:.76rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--encre-3); margin-top:26px; }

/* --- 12. Adaptatif -------------------------------------------------------- */
@media (max-width:1040px){
  .expertise__grille{ grid-template-columns:1fr; }
  .expertise:nth-of-type(even) .expertise__visuel{ order:0; }
  .expertise__visuel{ position:static; max-width:600px; }
  .sous-nav{ top:78px; }
}
@media (max-width:620px){
  .sous-nav{ top:70px; }
}
@media (max-width:620px){
  .widget{ padding:18px; }
  .flux{ grid-template-columns:1fr; gap:18px; justify-items:center; }
  .flux__coeur{ width:88px; height:88px; }
  .flux__colonne{ width:100%; }
  .flux__cables{ display:none; }
  .bascule__mesures{ grid-template-columns:1fr; }
  .jauge-c{ flex-direction:column; text-align:center; gap:12px; }
  .colonnes{ height:150px; }
}

/* ==========================================================================
   13. LUCARNE SANKOFA — le bloc produit de la page d'accueil
   ========================================================================== */
.lucarne{ overflow:hidden; }
.lucarne__nom{
  font-size:clamp(2rem,4.6vw,3.1rem); letter-spacing:-.04em;
  background:var(--deg-chaud);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lucarne__accroche{ font-size:1.06rem; color:#9ab4d0; max-width:52ch; }

.lucarne__points{ display:grid; gap:20px; margin-top:32px; }
.lucarne__points li{ display:flex; gap:15px; align-items:flex-start; }
.lucarne__points h4{ color:#fff; font-size:.98rem; margin-bottom:.2em; }
.lucarne__points p{ font-size:.93rem; color:#89a6c6; }
.lucarne__icone{
  display:grid; place-items:center; flex:0 0 auto;
  width:40px; height:40px; border-radius:12px;
  background:rgba(41,169,242,.14); color:var(--cyan-clair);
  border:1px solid rgba(41,169,242,.24);
}
.lucarne__icone svg{ width:19px; height:19px; }

.lucarne__note{
  display:flex; align-items:center; gap:9px; margin-top:22px;
  font-size:.86rem; color:#89a6c6;
}
.lucarne__note svg{ width:16px; height:16px; color:var(--cyan); flex:0 0 auto; }

/* Aperçu du logiciel */
.lucarne__ecran{
  border-radius:var(--r-xl); overflow:hidden;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:flottement 8s ease-in-out infinite;
}
.lucarne__barre{
  display:flex; align-items:center; gap:8px;
  padding:14px 18px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.lucarne__barre .console__points i{ background:rgba(255,255,255,.2); }
.lucarne__barre .console__points{ margin-right:8px; }
.lucarne__onglet{
  padding:5px 12px; border-radius:8px;
  font-family:'Space Grotesk',sans-serif; font-size:.76rem; font-weight:600;
  color:#89a6c6; white-space:nowrap;
}
.lucarne__onglet--actif{ background:rgba(41,169,242,.18); color:#cfe9ff; }
.lucarne__exercice{
  margin-left:auto; font-size:.72rem; color:#6f8aa8; white-space:nowrap;
}

.lucarne__corps{ padding:16px 18px 18px; }
.lucarne__ligne{
  display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.08);
  font-size:.83rem; color:#9ab4d0;
}
.lucarne__ligne b{
  color:#fff; font-weight:650; font-variant-numeric:tabular-nums;
  min-width:78px; text-align:right;
}
.lucarne__ligne > span:last-child{
  font-variant-numeric:tabular-nums; min-width:78px; text-align:right;
  color:#6f8aa8;
}
.lucarne__ligne--titre{
  border-bottom-color:rgba(255,255,255,.16);
  font-family:'Space Grotesk',sans-serif; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#6f8aa8;
}
.lucarne__ligne--total{
  border-bottom:0; margin-top:4px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.16);
  font-weight:650; color:#cfe9ff;
}

.lucarne__controles{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lucarne__controle{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:99px;
  font-size:.73rem; font-weight:650; white-space:nowrap;
}
.lucarne__controle svg{ width:12px; height:12px; flex:0 0 auto; }
.lucarne__controle--ok{ background:rgba(28,178,120,.15); color:#5fe0a8; }
.lucarne__controle--alerte{ background:rgba(255,122,0,.16); color:#ffb166; }

.lucarne__pied{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 18px;
  background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; color:#6f8aa8;
}

.lucarne__chiffres{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  margin-top:26px; text-align:center;
}
.lucarne__chiffres b{
  display:block; line-height:1;
  font-family:'Space Grotesk',sans-serif; font-size:1.75rem; font-weight:700;
  letter-spacing:-.03em;
  background:var(--deg-chaud); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lucarne__chiffres span{ display:block; margin-top:7px; font-size:.78rem; color:#89a6c6; }

@media (max-width:620px){
  .lucarne__ligne{ grid-template-columns:1fr auto; font-size:.79rem; }
  .lucarne__ligne > span:last-child{ display:none; }
  .lucarne__ligne--titre > span:last-child{ display:none; }
  .lucarne__chiffres{ grid-template-columns:1fr; gap:14px; }
  .lucarne__exercice{ display:none; }
}