/* AdProtectX — composants. Fidèles au prototype, adaptés par plateforme. */

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font-sys,var(--font));
  background:var(--c-canvas);color:var(--c-t1);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}
a{color:var(--c-cyan);text-decoration:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
*{scrollbar-width:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- ossature */
#app{min-height:100dvh;display:flex;flex-direction:column;background:var(--c-bg0)}
.screen{flex:1;display:flex;flex-direction:column;min-height:100dvh}
.screen--tabbed{padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px)}
.entry{flex:1;display:flex;flex-direction:column;position:relative}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pad{padding:0 var(--sp-5)}

/* Barre supérieure : centrée sur iOS, alignée à gauche sur Android */
.appbar{
  position:sticky;top:0;z-index:30;
  padding-top:calc(var(--safe-top) + 10px);padding-bottom:10px;
  display:flex;align-items:center;gap:var(--sp-3);
  padding-inline:var(--sp-4);
  background:color-mix(in srgb,var(--c-bg0) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease);
}
.appbar.scrolled{border-bottom-color:var(--c-stroke)}
.appbar__title{flex:1;font-size:17px;font-weight:700;color:var(--c-t0);text-align:var(--appbar-align)}
:root[data-platform="android"] .appbar__title{font-size:22px;font-weight:600}
.appbar__slot{min-width:40px;display:flex;align-items:center;gap:6px}
.appbar__slot--end{justify-content:flex-end}
.appbar--large .appbar__title{text-align:left;font-size:30px;font-weight:800;letter-spacing:-.5px}

.title-xl{font-size:28px;font-weight:800;letter-spacing:-.6px;color:var(--c-t0);margin:0 0 6px}
.subtitle{font-size:13px;line-height:1.5;color:var(--c-t3);margin:0}
.section-label{font-size:11px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--c-t4);margin:var(--sp-6) 0 var(--sp-3)}

/* ------------------------------------------------------------ cartes */
.card{
  background:var(--c-bg1);border:1px solid var(--c-stroke);
  border-radius:var(--r-card);padding:var(--sp-5);margin-bottom:var(--sp-3);
}
.card--glass{background:var(--c-glass);backdrop-filter:blur(10px)}
.card--flush{padding:0;overflow:hidden}
.card__row{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:var(--tap);padding:14px var(--sp-5);
  border-bottom:1px solid var(--c-stroke);
  width:100%;text-align:left;
}
.card__row:last-child{border-bottom:0}
.card__row .grow{flex:1;min-width:0}
.card__row .chev{color:var(--c-t4);flex:none}
/* display:block — ces deux classes servent tantot sur <div>, tantot sur <span>.
   En ligne, le titre et sa description se collaient sur la meme ligne
   (« Blocage des publicitesBloque les domaines… ») et le margin-top etait
   ignore, comme tout margin vertical sur une boite en ligne. Les usages
   isoles sont des elements flex, que le bloc ne deplace pas. */
.row-title{display:block;font-size:14.5px;font-weight:600;color:var(--c-t1)}
.row-sub{display:block;font-size:12px;color:var(--c-t3);line-height:1.45;margin-top:2px}

/* ------------------------------------------------------------ badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  border:1px solid var(--c-stroke2);color:var(--c-t3);
}
.badge--demo{color:var(--c-warn);border-color:color-mix(in srgb,var(--c-warn) 45%,transparent);background:color-mix(in srgb,var(--c-warn) 12%,transparent)}
.badge--ok{color:var(--c-cyan);border-color:color-mix(in srgb,var(--c-cyan) 45%,transparent);background:color-mix(in srgb,var(--c-cyan) 12%,transparent)}
.badge--warn{color:var(--c-warn);border-color:color-mix(in srgb,var(--c-warn) 45%,transparent)}
.badge--danger{color:var(--c-danger);border-color:color-mix(in srgb,var(--c-danger) 45%,transparent)}
.badge--muted{color:var(--c-t4)}

/* Points d'état de protection (Vérifiée / Vérification / Configuration / Interrompue / Impossible) */
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot--ok{background:var(--c-cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-cyan) 18%,transparent)}
.dot--check{background:var(--c-blue);animation:blink 1.4s ease-in-out infinite}
.dot--setup{background:var(--c-warn)}
.dot--off{background:var(--c-danger)}
.dot--unknown{background:var(--c-t4)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ----------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 var(--sp-5);width:100%;
  border-radius:var(--r-btn);font-size:15px;font-weight:700;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn--primary{background:linear-gradient(135deg,var(--c-cyan),var(--c-blue));color:#04121A}
:root[data-theme="light"] .btn--primary{color:#FFFFFF}
.btn--ghost{background:var(--c-glass);border:1px solid var(--c-stroke2);color:var(--c-t1)}
.btn--quiet{background:none;color:var(--c-t3);font-weight:600}
.btn--danger{background:none;color:var(--c-danger);border:1px solid color-mix(in srgb,var(--c-danger) 40%,transparent)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-row{display:flex;gap:var(--sp-3)}

/* Android : effet d'ondulation Material au toucher */
:root[data-platform="android"] .btn,
:root[data-platform="android"] .card__row{position:relative;overflow:hidden}
:root[data-platform="android"] .ripple{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:currentColor;opacity:.22;animation:ripple .5s var(--ease) forwards;
}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
:root[data-platform="ios"] .btn:active{opacity:.82}

/* ------------------------------------------------------------ champs */
.field{margin-bottom:var(--sp-3)}
.field__label{display:block;font-size:12px;font-weight:600;color:var(--c-t3);margin-bottom:6px}
.field__input{
  width:100%;min-height:var(--tap);padding:0 var(--sp-4);
  background:var(--c-bg2);border:1px solid var(--c-stroke);
  border-radius:var(--r-field);color:var(--c-t0);font-size:15px;
  transition:border-color var(--dur) var(--ease);
}
.field__input:focus{outline:none;border-color:var(--c-cyan)}
.field__error{font-size:12px;color:var(--c-danger);margin-top:6px}
:root[data-platform="android"] .field__input{border-width:0 0 2px 0;border-radius:12px 12px 0 0;background:var(--c-glass)}

/* Segments : pilule iOS, onglets soulignés Android */
.segmented{display:flex;gap:4px;padding:4px;background:var(--c-rail);border-radius:var(--r-pill);border:1px solid var(--c-stroke)}
.segmented button{flex:1;min-height:36px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--c-t3)}
.segmented button[aria-selected="true"]{background:var(--c-glass2);color:var(--c-t0)}
:root[data-platform="android"] .segmented{background:none;border:0;border-bottom:1px solid var(--c-stroke);border-radius:0;padding:0}
:root[data-platform="android"] .segmented button{border-radius:0;border-bottom:2px solid transparent}
:root[data-platform="android"] .segmented button[aria-selected="true"]{background:none;color:var(--c-cyan);border-bottom-color:var(--c-cyan)}

/* Interrupteur 52×30 — style iOS ; Material sur Android */
.switch{position:relative;width:var(--sw-w);height:var(--sw-h);flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.switch__track{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--c-rail);border:1px solid var(--c-stroke2);transition:background var(--dur) var(--ease)}
.switch__thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform var(--dur) var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.switch input:checked ~ .switch__track{background:var(--c-cyan);border-color:transparent}
.switch input:checked ~ .switch__thumb{transform:translateX(22px)}
:root[data-platform="android"] .switch__track{height:16px;top:7px;bottom:7px;inset-inline:0}
:root[data-platform="android"] .switch__thumb{width:20px;height:20px;top:5px;left:2px}
:root[data-platform="android"] .switch input:checked ~ .switch__thumb{transform:translateX(28px)}

/* ------------------------------------------------- barre de navigation */
.tabbar{
  position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-bottom:var(--safe-bottom);
  background:color-mix(in srgb,var(--c-bg0) 92%,transparent);
  backdrop-filter:saturate(160%) blur(18px);
  border-top:1px solid var(--c-stroke);
}
.tabbar button{
  min-height:var(--nav-h);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  font-size:9.5px;font-weight:600;color:var(--c-t4);
}
.tabbar button[aria-current="page"]{color:var(--c-cyan)}
.tabbar__ind{display:none}
/* Android : pastille Material 3 derrière l'icône active */
:root[data-platform="android"] .tabbar button[aria-current="page"] .tabbar__ind{
  display:block;position:absolute;width:56px;height:30px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c-cyan) 18%,transparent);margin-bottom:16px;
}
:root[data-platform="android"] .tabbar button{position:relative;font-size:11px}

/* ------------------------------------------------------------- divers */
.empty{text-align:center;padding:var(--sp-8) var(--sp-5);color:var(--c-t3)}
.empty h3{font-size:15px;color:var(--c-t1);margin:0 0 6px}
.empty p{font-size:13px;line-height:1.55;margin:0}
.notice{
  border-radius:var(--r-card-sm);padding:14px var(--sp-4);
  font-size:12.5px;line-height:1.55;margin-bottom:var(--sp-3);
  border:1px solid var(--c-stroke2);background:var(--c-glass);color:var(--c-t2);
}
.notice--warn{border-color:color-mix(in srgb,var(--c-warn) 45%,transparent);background:color-mix(in srgb,var(--c-warn) 10%,transparent)}
.notice--info{border-color:color-mix(in srgb,var(--c-blue) 40%,transparent);background:color-mix(in srgb,var(--c-blue) 8%,transparent)}
.notice strong{color:var(--c-t0)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.stat{background:var(--c-bg2);border:1px solid var(--c-stroke);border-radius:var(--r-card-sm);padding:14px}
.stat__n{font-size:22px;font-weight:800;color:var(--c-t0);font-family:var(--mono)}
.stat__l{font-size:11.5px;color:var(--c-t3);margin-top:2px}
.list-row{display:flex;align-items:center;gap:var(--sp-3);padding:12px 0;border-bottom:1px solid var(--c-stroke)}
.list-row:last-child{border-bottom:0}

/* Feuille modale : depuis le bas, avec poignée sur Android */
.sheet-backdrop{position:fixed;inset:0;z-index:60;background:rgba(2,6,23,.6);backdrop-filter:blur(2px);animation:fade var(--dur) var(--ease)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  background:var(--c-sheet);border-radius:24px 24px 0 0;
  border-top:1px solid var(--c-stroke2);
  padding:var(--sp-5) var(--sp-5) calc(var(--safe-bottom) + var(--sp-6));
  animation:rise var(--dur) var(--ease);max-height:86dvh;overflow-y:auto;
}
:root[data-platform="android"] .sheet::before{
  content:"";display:block;width:32px;height:4px;border-radius:2px;
  background:var(--c-stroke2);margin:-6px auto var(--sp-4);
}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Snackbar Android / bandeau discret iOS */
.snack{
  position:fixed;left:var(--sp-4);right:var(--sp-4);z-index:70;
  bottom:calc(var(--nav-h) + var(--safe-bottom) + var(--kb,0px) + 12px);
  background:var(--c-bg2);border:1px solid var(--c-stroke2);
  border-radius:12px;padding:14px var(--sp-4);font-size:13px;color:var(--c-t1);
  animation:rise var(--dur) var(--ease);box-shadow:0 8px 30px rgba(0,0,0,.45);
}
:root[data-platform="ios"] .snack{border-radius:var(--r-pill);text-align:center}

.skip{position:absolute;top:calc(var(--safe-top) + 14px);right:var(--sp-5);font-size:13px;color:var(--c-t3);font-weight:600}
.dots{display:flex;gap:6px;justify-content:center;margin:var(--sp-5) 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--c-stroke2);transition:all var(--dur) var(--ease)}
.dots i.on{width:20px;border-radius:3px;background:var(--c-cyan)}

/* Anneau d'état de protection. Il indique un ÉTAT, jamais une valeur mesurée :
   aucun pourcentage n'y est représenté. */
.ring{width:112px;height:112px;margin:0 auto 16px;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring__bg{stroke:var(--c-stroke2)}
.ring__fg{stroke:currentColor;stroke-linecap:round;transition:stroke var(--dur) var(--ease)}
.ring--checking .ring__fg{stroke-dasharray:60 260;animation:ring-spin 1.4s linear infinite;transform-origin:center}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.ring__icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring__icon svg{transform:none;width:34px;height:34px}