/* v19 */
:root{
  --gauge-color: var(--green-2);
  --fg:#111;
  --card:rgba(255,255,255,.88);
  --stroke:rgba(17,17,17,.12);
  --shadow:0 10px 40px rgba(0,0,0,.18);
  --radius:18px;
  --maxw:980px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);}
.bg{position:fixed; inset:0; z-index:-1; filter:saturate(1.55) contrast(1.08);}
.bg::before{content:"";position:absolute; inset:-20%; background-size:200% 200%; animation: drift 10s ease-in-out infinite; opacity:.97;}
.bg-green::before{
  background-image:
    radial-gradient(1200px 700px at 20% 20%, rgba(24,120,58,.98), transparent 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(40,170,95,.96), transparent 55%),
    radial-gradient(900px 700px at 40% 85%, rgba(10,70,40,.96), transparent 60%),
    linear-gradient(135deg, rgba(10,55,35,.98), rgba(35,155,90,.96));
}
.bg-orange::before{
  background-image:
    radial-gradient(1000px 700px at 15% 20%, rgba(255,120,0,.98), transparent 60%),
    radial-gradient(900px 600px at 85% 35%, rgba(255,190,30,.96), transparent 55%),
    radial-gradient(900px 700px at 35% 90%, rgba(170,55,0,.96), transparent 60%),
    linear-gradient(135deg, rgba(140,45,0,.98), rgba(255,130,0,.96));
  animation-duration:7s;
}
.bg-red::before{
  background-image:
    radial-gradient(1000px 700px at 20% 25%, rgba(255,40,0,.98), transparent 60%),
    radial-gradient(900px 650px at 85% 30%, rgba(255,150,0,.96), transparent 55%),
    radial-gradient(900px 700px at 35% 88%, rgba(120,0,0,.97), transparent 60%),
    linear-gradient(135deg, rgba(55,0,0,.99), rgba(255,55,0,.95));
  animation-duration:5.5s;
}
.reduced-motion .bg::before{animation:none}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1.02); background-position:0% 50%}
  50%{transform:translate3d(-2%,1.5%,0) scale(1.04); background-position:100% 50%}
  100%{transform:translate3d(0,0,0) scale(1.02); background-position:0% 50%}
}
.topbar{display:flex;justify-content:center;align-items:center;padding:14px 14px 0;}
.topbar__center{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;text-align:center;}
.app-title{font-weight:800;font-size:18px;display:flex;align-items:center;gap:0;justify-content:center;}
.chip{border:2px solid rgba(255,255,255,.45);background:rgba(255,255,255,.22);backdrop-filter: blur(10px);padding:8px 10px;border-radius:999px;cursor:pointer;}
.toggle{font-size:13px;user-select:none;}
.container{max-width:var(--maxw);margin:10px auto 40px;padding:0 14px 200px;display:flex;flex-direction:column;gap:12px;}
.card{background:var(--card);border:2px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);}
.card__body{padding:14px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
/* Quand un bandeau (checkup-line) est dans une row flex, il doit prendre toute la largeur */
.row .checkup-line{flex:0 0 100%;}
.field{flex:1;min-width:220px;}

/* Indice de vulnérabilité à l'emprise : placé sous les deux sélecteurs (même largeur de ligne) */
details.acc.acc--vuln{flex:0 0 100%;min-width:220px;margin-top:8px;}
/* Le résumé doit ressembler aux titres des deux champs au-dessus (gras, même taille) */
details.acc.acc--vuln > summary{font-style:normal;font-weight:800;font-size:13px;}
.vuln-hint{font-size:10px;line-height:1.15;font-style:italic;font-weight:300;color:#555;margin:1px 0 3px;opacity:.9;}
.vuln-items{display:grid;grid-template-columns:1fr;gap:4px;margin-top:2px;}
/* Les mots de la liste sont en police normale, même taille que les autres champs */
.vuln-item{display:flex;align-items:center;gap:8px;font-weight:400 !important;font-size:13px !important;line-height:1.08;}
.vuln-item span{font-weight:400 !important;}
.vuln-item input{width:20px;height:20px;}

.vuln-bar{flex:0 0 100%;min-width:220px;margin-top:0;}
.vuln-bar__label{margin:6px 0 6px 0;font-size:13px;}
.vuln-bar__track{width:100%;height:12px;border-radius:999px;background:rgba(255,255,255,.75);border:2px solid rgba(0,0,0,.12);overflow:hidden;}
.vuln-bar__fill{height:100%;width:0%;background:rgba(210,25,0,.78);transition:width .22s ease;}

/* Pleine largeur (desktop + mobile) pour le déroulant vulnérabilité + jauge */
details.acc.acc--vuln, .vuln-bar{width:100%;}

/* Parenthèses de note dans les titres d'accordéon : en normal (non gras, non italique) */
.acc summary .summary-note{font-weight:400;font-style:normal;}
.acc summary .summary-text{display:block;flex:1;min-width:0;}
.label{font-size:13px;margin-bottom:6px;}
select{width:100%;padding:10px 10px;border-radius:12px;border:2px solid rgba(17,17,17,.18);background:rgba(255,255,255,.95);}
.help{margin-top:10px;font-size:13px;}
.subtle-note{display:block;margin-top:10px;font-size:13px;line-height:1.35;font-weight:400;color:#111;background:transparent;}
.subtle-note--method{margin:8px 0 2px 0;}
.result .subtle-note{margin-top:1px;}
.action-note{display:block;color:#111;font-size:13px;line-height:1.35;font-style:italic;font-weight:600;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;opacity:1;visibility:visible;min-height:auto;-webkit-font-smoothing:antialiased;text-rendering:auto;}
.action-note::before{content:"→";display:inline-block;margin-right:4px;font-style:normal;font-weight:600;}
.action-note--result{margin-top:0;}
.action-note--method{margin:8px 0 2px 0;}

.result{margin-top:12px;}
.result__head{display:block;padding:10px 12px;border-radius:12px;font-weight:800;color:#111;border:2px solid rgba(0,0,0,.12);background:rgba(255,255,255,.78);animation: resultPulse 1.9s ease-in-out infinite; will-change: transform, filter, box-shadow, opacity;}


/* Résultat : pulsation visible (désactivable via prefers-reduced-motion) */
@keyframes resultPulse{
  0%{filter:brightness(1) saturate(1); transform:scale(1); box-shadow:0 0 0 rgba(0,0,0,0); opacity:1;}
  50%{filter:brightness(1.28) saturate(1.05); transform:scale(1.03); box-shadow:0 0 34px rgba(0,0,0,.28); opacity:.86;}
  100%{filter:brightness(1) saturate(1); transform:scale(1); box-shadow:0 0 0 rgba(0,0,0,0); opacity:1;}
}

@keyframes gentlePulse{
  0%{filter:brightness(1); box-shadow:0 0 0 rgba(0,0,0,0);}
  50%{filter:brightness(1.04); box-shadow:0 0 18px rgba(0,0,0,.10);}
  100%{filter:brightness(1); box-shadow:0 0 0 rgba(0,0,0,0);}
}
.result__head--pulse{animation:resultPulse 1.9s ease-in-out infinite;}
.reduced-motion .result__head--pulse{animation:none;}
.gauge{height:10px;border-radius:999px;background:rgba(0,0,0,.10);overflow:hidden;margin-top:10px;}
.gauge__bar{height:100%;width:0%;border-radius:999px;background:rgba(0,0,0,.45);transition:width .25s ease;}
.checkup-line{font-weight:800;margin-bottom:10px;text-align:center;}
.checkup-title{font-size:18px;}
.checkup-sub{font-size:14px;font-weight:700;}
.item{border-top:1px solid rgba(0,0,0,.10);padding:12px 0;}
.item:first-child{border-top:none;}
.item-head{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1;min-width:0;width:100%;}
.item-head input{margin-top:3px;transform:scale(1.28);cursor:pointer;}
.item-title{font-weight:800;flex:1;min-width:0;}
.item-title .num{font-weight:900;}
.exp-link{margin-top:6px;}
.exp-link button{padding:0;border:0;background:none;color:var(--fg);text-decoration:underline;cursor:pointer;font-size:13px;opacity:.9}
.exp{margin-top:8px;padding:10px 10px;border-radius:12px;background:rgba(255,255,255,.85);border:2px solid rgba(0,0,0,.10);font-size:13px;}
.exp-line{font-weight:700;line-height:1.35;margin:6px 0;}
.exp-line:first-child{margin-top:0;}
.exp-line:last-child{margin-bottom:0;}
.exp-line .ynbox{margin-top:1px;}

/* Explications : carrés cochés / non cochés, rendus de manière stable */
.ynbox{
  display:inline-flex;
  width: 1.05em;
  height: 1.05em;
  margin-right: .35em;
  border: 3px solid currentColor;
  border-radius: 4px;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  box-sizing: border-box;
}
.ynbox-yes::after{
  content:'✓';
  font-weight:900;
  font-size:.95em;
  line-height:1;
  display:block;
  transform:translateY(-0.02em);
}
.ynbox-no::after{content:'';}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.btn{border:2px solid rgba(0,0,0,.16);background:#111;color:#fff;padding:10px 12px;border-radius:12px;cursor:pointer;}
.btn--ghost{background:rgba(255,255,255,.65);color:#111;}
.btn--sm{padding:8px 10px;border-radius:12px;font-size:14px;}


/* TTS */
.tts-controls{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 14px;justify-content:flex-end;}
.section-title{margin-top:8px;margin-bottom:10px;text-align:center;}
.remedies{margin:0 0 10px 18px;padding:0;}
.remedies li{margin:8px 0;line-height:1.35;}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:760px){.qgrid{grid-template-columns:1fr}}
.qtitle{font-weight:800;margin-bottom:6px;}
.qs{margin:0 0 0 18px;padding:0;}
.qs li{margin:6px 0;line-height:1.35;}
.note{font-size:12.5px;line-height:1.35;background:rgba(255,255,255,.82);border:2px solid rgba(0,0,0,.10);padding:10px 12px;border-radius:16px;margin-top:12px;}
.about{max-width:var(--maxw);margin:10px auto 0;padding:0 14px;}


.app-logo{width:22px;height:22px;border-radius:6px;vertical-align:-5px;margin-right:8px;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.app-title__text{display:inline-block}
.about__controls{margin-top:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.about__link{color:#111;text-decoration:none;border-bottom:1px solid rgba(17,17,17,.35);font-size:.95rem;line-height:1.2}
.about__link:hover,.about__link:focus-visible{border-bottom-color:rgba(17,17,17,.8)}
.help--below{margin-top:10px}
.checkup-line--hl{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);border:2px solid rgba(0,0,0,.08);}
.section-title--hl{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);border:2px solid rgba(0,0,0,.08);}
.footer__row{display:flex;gap:12px;flex-wrap:wrap}
.footer__box{flex:1;min-width:220px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.65);border:2px solid rgba(0,0,0,.10)}
.footer__title{font-weight:800;margin-bottom:4px}
.footer__text{font-size:13px}


.result .help{margin:0 0 8px 0;}


/* Bandeau pub (plein largeur) */
.adbar{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:50;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);
  border-top:1px solid rgba(17,17,17,.12);
  backdrop-filter:saturate(140%) blur(10px);
  max-height:calc(var(--adbar-h) + env(safe-area-inset-bottom));
  overflow:hidden;
  transform:translateZ(0);
  transition:opacity .25s ease, transform .25s ease;
}

.adbar--hidden{
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
}
.adbar__inner{
  max-width:var(--maxw);
  margin:0 auto;
}
.adbar__label{
  font-size:12px;
  opacity:.7;
  margin:0 0 4px 2px;

  font-size:12px;
}
.adbar__slot{max-height:var(--adbar-h); overflow:hidden}
main{
  padding-bottom:calc(var(--adbar-h) + 24px);
}


/* Larger checkboxes for readability */
.itemRow input[type="checkbox"], .itemRow input[type="radio"], input[type="checkbox"].tiny {
  width: 18px;
  height: 18px;
}

/* Prevent stray label text under gauge */
.gaugeRow{font-size:0;}
.gaugeRow *{font-size:14px;}

/* Accordéons (Rester moi-même…) */
details.acc{background:rgba(255,255,255,.85);border:2px solid rgba(0,0,0,.10);border-radius:14px;padding:10px 12px;margin:10px 0;}
details.acc > summary{cursor:pointer;list-style:none;font-weight:850;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0;}
details.acc > summary::after{content:'▾';font-size:18px;opacity:.75;transform:translateY(-1px);}
details.acc[open] > summary::after{content:'▴';}
details.acc > summary::-webkit-details-marker{display:none;}
details.acc[open] > summary{margin-bottom:8px;}

.acc__tts{display:flex;justify-content:flex-end;margin:6px 0 10px 0;}

/* Les autres déroulants restent en italique, mais pas le déroulant de vulnérabilité */
.acc:not(.acc--vuln) summary{font-style:italic;font-weight:700;}

.acc summary::marker{font-size:1.2em;}

/* Listes : forcer la visibilité des puces, y compris en "mode sombre" Android */
.acc ul, .acc ol{padding-left:1.25em;}
.acc li::marker{color:currentColor;font-weight:900;}

/* Mobile : tous les champs doivent prendre toute la largeur */
@media (max-width: 520px){
  .field{flex:0 0 100%;min-width:0;}
  details.acc.acc--vuln{min-width:0;width:100%;}
  .vuln-bar{min-width:0;width:100%;}
}

/* --- Vulnérabilité (barre + liste) --- */
/* (déclarations vulnérabilité déplacées plus haut pour contrôler flex/largeur) */

.item .exp-link{display:inline-block;margin-top:6px;font-size:13px;opacity:.9}
.item .exp-link button{padding:0;border:0;background:none;color:var(--fg);text-decoration:underline;cursor:pointer}
.item .headwrap{display:block}

.card-note .note{margin:0}

:root{--adbar-h:42px}
body{padding-bottom:calc(var(--adbar-h) + env(safe-area-inset-bottom));}
.adbar{height:var(--adbar-h);max-height:var(--adbar-h);}
.adbar__inner{height:var(--adbar-h);padding:6px 10px;}


/* Don : bouton distinct à droite de "À noter" (sans perturber les numéros) */
.note-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.note-head__text{flex:1; min-width:220px;}
.don-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-left:auto;
  padding:10px 14px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.28);
  background:rgba(24,120,58,1);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  line-height:1;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.don-btn:active{transform:translateY(1px); box-shadow:0 8px 20px rgba(0,0,0,.16)}

.don-message{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.84);
  color:#111;
  font-size:13px;
  font-weight:800;
}

/* Don : encart déroulant */
.don-panel{
  margin-top:10px;
  padding:12px 12px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.90);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.don-panel__text{
  font-size:13px;
  font-weight:800;
  color:#111;
  flex:1;
  min-width:220px;
}
.don-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(17,17,17,.18);
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  white-space:nowrap;
}
.don-link:active{transform:translateY(1px)}

.note-nums{margin-top:10px;}


/* Textes fondamentaux */
details.acc.acc--fundamental > summary{font-style:normal;font-weight:800;}
.acc__body--links{padding-top:2px;}
.acc-intro{margin:0 0 10px 0; font-size:13px; line-height:1.4;}
.link-list{margin:0; padding-left:1.2em; display:grid; gap:10px;}
.link-list li{line-height:1.35;}
.link-list a{font-weight:800; color:var(--fg); text-decoration:underline; text-underline-offset:2px;}
.link-list span{display:block; margin-top:3px; font-size:13px;}


.page-back{margin:0 0 10px 2px;font-size:.98rem}.page-back a{color:#111;text-decoration:none;border-bottom:1px solid rgba(17,17,17,.35)}.page-back a:hover,.page-back a:focus-visible{border-bottom-color:rgba(17,17,17,.8)}
