/* ScamDetect : la zone d'analyse réelle.
   Surface claire et très contrastée : le verdict est lu vite, parfois
   dans l'inquiétude, souvent par quelqu'un de plus de soixante ans. */

.verif {
  padding: var(--space-section) var(--space-lg);
  background: var(--canvas-parchment);
}

.verif__boite {
  max-width: 680px;
  margin: 0 auto;
  background: var(--canvas);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: 0 1px 2px rgba(25,20,62,.05), 0 12px 34px -14px rgba(25,20,62,.18);
}

.verif__retour {
  display: inline-block;
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--ink-muted-80);
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.verif__retour:hover { color: var(--action); }

.verif__titre {
  font-size: var(--text-display-md-size);
  font-weight: var(--text-display-md-weight);
  letter-spacing: var(--text-display-md-ls);
  color: var(--brand-1);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}

.verif__texte {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
  margin: 0 0 var(--space-lg);
}

.verif__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ── Dépôt de capture ── */
.verif__depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-xl) var(--space-lg);
  border: 2px dashed var(--hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.verif__depot:hover { border-color: var(--action); background: var(--action-tint); }
.verif__depot:focus-within { outline: 2px solid var(--action-focus); outline-offset: 2px; }
.verif__depot-titre {
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--brand-1);
}
.verif__depot-note { font-size: var(--text-caption-size); color: var(--ink-muted-80); }

.verif__ou {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}
.verif__ou::before, .verif__ou::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}

.verif__label {
  display: block;
  font-size: var(--text-caption-strong-size);
  font-weight: var(--text-caption-strong-weight);
  color: var(--brand-1);
  margin-bottom: 6px;
}
.verif__zone {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-body-size);
  line-height: 1.5;
  color: var(--ink);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  resize: vertical;
  margin-bottom: var(--space-lg);
}
.verif__zone:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 1px; }

/* Dit AVANT l'envoi, jamais après : la personne doit pouvoir renoncer. */
.verif__mention {
  font-size: var(--text-fine-size);
  line-height: 1.5;
  color: var(--ink-muted-80);
  margin: var(--space-md) 0 0;
}

/* ── Verdict ──
   La couleur suit le niveau, et rien d'autre sur cette page ne l'emploie :
   quand le rouge apparaît, il veut dire quelque chose. */
.verif__resultat { margin-top: var(--space-lg); }

.verdict-reel {
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  border-left: 3px solid var(--signal-neutre);
  background: var(--signal-neutre-tint);
}
.verdict--alerte { border-left-color: var(--signal-critique); background: var(--signal-critique-tint); }
.verdict--doute  { border-left-color: var(--signal-vigilance); background: var(--signal-vigilance-tint); }
.verdict--rien   { border-left-color: var(--signal-neutre); background: var(--signal-neutre-tint); }
.verdict--panne  { border-left-color: var(--signal-vigilance); background: var(--signal-vigilance-tint); }

.verdict-reel__niveau {
  display: block;
  font-size: var(--text-tagline-size);
  font-weight: var(--text-tagline-weight);
  color: var(--brand-1);
  margin-bottom: 6px;
}
.verdict-reel__sous {
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--ink-muted-80);
  margin: 0;
}
.verdict-reel__legende {
  font-size: var(--text-micro-size);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted-80);
  margin: var(--space-lg) 0 var(--space-xs);
}
.verdict-reel__liste {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--text-body-size);
  line-height: 1.55;
  color: var(--ink-muted-80);
}
.verdict-reel__liste li { margin-bottom: 6px; }
.verdict-reel__liste b { color: var(--brand-1); }
.verdict-reel__note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-caption-size);
  color: var(--ink-muted-80);
}

@media (max-width: 640px) {
  .verif { padding: var(--space-xxl) var(--space-md); }
  .verif__boite { padding: var(--space-lg); }
  .verif__titre { font-size: 26px; }
}

/* ============================================================================
   Panneau demi-page (verifier.html) : la page tout entiere EST le panneau,
   pas une page classique -- il s'ouvre au chargement, glissant depuis la
   droite par-dessus la barre laterale assombrie, sur le modele envoye.
   ========================================================================== */

/* Assez claire pour que la page de depart reste lisible derriere (sur
   demande expresse) : le voile signale « ceci est au second plan », il
   ne l'efface pas. */
.verif-voile {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(25,20,62,.28);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.verif-voile--ouvert { opacity: 1; }

/* Le degrade de marque habille tout le panneau, pas seulement l'en-tete
   (sur demande expresse) : une seule nappe, du haut jusqu'en bas du
   formulaire, plutot qu'un en-tete bleu pose sur un corps blanc. */
.verif-panneau {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 71;
  /* Moins large sur grand ecran (sur demande expresse, pour se
     rapprocher des proportions de la reference envoyee) : 720px
     laissait un panneau presque aussi large que le tableau de bord
     lui-meme sur un ecran d'ordinateur classique. */
  width: clamp(400px, 34vw, 560px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(115,111,182,.45) 0%, transparent 60%),
    var(--brand-gradient-diag);
  box-shadow: -30px 0 70px -30px rgba(25,20,62,.5);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.verif-panneau--ouvert { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .verif-voile, .verif-panneau { transition: none; }
}

/* Compact a la demande expresse : tout doit tenir sur un ecran, le
   bouton Analyser ne doit jamais exiger de defiler pour un cas d'usage
   aussi frequent que celui-ci. */
.verif-panneau__entete {
  flex: 0 0 auto;
  position: relative;
  padding: var(--space-md) var(--space-xl) var(--space-sm);
  text-align: center;
  overflow: hidden;
}

.verif-panneau__fermer {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1;
  appearance: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: var(--on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.verif-panneau__fermer:hover { background: rgba(255,255,255,.24); }

.verif-panneau__logo { display: block; margin: 0 auto var(--space-sm); height: 18px; width: auto; }

/* Scene decorative : l'ecusson ScamDetect (meme trace que l'icone de la
   barre laterale, agrandi) entoure d'etincelles qui scintillent en boucle,
   decalees les unes des autres par --i pour ne jamais cligner ensemble. */
.verif-panneau__scene {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 84px;
  margin: 0 auto var(--space-xs);
  display: grid;
  place-items: center;
}
.verif-panneau__ecusson {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  color: var(--on-dark);
}
.verif-panneau__ecusson svg { width: 28px; height: 28px; }
.verif-panneau__etincelle {
  position: absolute;
  color: var(--on-dark);
  opacity: .85;
  animation: verifEtincelle 2.6s ease-in-out calc(var(--i) * .3s) infinite;
}
.verif-panneau__etincelle:nth-child(1)  { top: 2%;   left: 14%; }
.verif-panneau__etincelle:nth-child(2)  { top: 14%;  right: 10%; }
.verif-panneau__etincelle:nth-child(3)  { bottom: 8%; left: 6%; }
.verif-panneau__etincelle:nth-child(4)  { bottom: 0;  right: 22%; }
.verif-panneau__etincelle:nth-child(5)  { top: 38%;  right: 2%; }
.verif-panneau__etincelle:nth-child(6)  { top: 6%;   left: 38%; }
.verif-panneau__etincelle:nth-child(7)  { bottom: 20%; left: 30%; }
.verif-panneau__etincelle:nth-child(8)  { top: 46%;  left: 4%; }
.verif-panneau__etincelle:nth-child(9)  { top: 66%;  right: 34%; }
.verif-panneau__etincelle:nth-child(10) { top: 0;    right: 40%; }
@keyframes verifEtincelle {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .verif-panneau__etincelle { animation: none; opacity: .7; }
}

.verif-panneau__badge {
  display: inline-block;
  padding: 3px 10px;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.16);
  color: var(--on-dark);
  font-size: var(--text-micro-size);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.verif-panneau__titre {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--on-dark);
}

.verif-panneau__accroche {
  margin: 0 auto;
  max-width: 40em;
  font-size: var(--text-caption-size);
  line-height: 1.4;
  color: var(--on-dark-muted);
}

.verif-panneau__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
}

/* Les deux blocs, sur le modele envoye : deux entrees possibles pour le
   meme formulaire (image ou texte), pas deux formulaires separes. Le
   bloc image porte le vrai input file (c'est son <label>) ; le bloc
   texte amene et met le focus sur la zone de texte plus bas -- rien
   n'est duplique, verifier.js ne voit toujours qu'un seul formulaire. */
.verif-panneau__cartes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.verif-panneau__carte {
  display: block;
  width: 100%;
  appearance: none;
  cursor: pointer;
  text-align: left;
  padding: var(--space-sm) var(--space-sm);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.10);
  color: var(--on-dark);
  font-family: inherit;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.verif-panneau__carte:hover, .verif-panneau__carte:focus-visible {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-2px);
}
.verif-panneau__carte:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.verif-panneau__carte-icone {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.14);
  color: var(--on-dark);
}
.verif-panneau__carte-icone svg { width: 16px; height: 16px; }
.verif-panneau__carte-titre {
  display: block;
  margin-bottom: 2px;
  font-size: var(--text-body-strong-size);
  font-weight: var(--text-body-strong-weight);
  color: var(--on-dark);
}
.verif-panneau__carte-texte {
  display: block;
  font-size: var(--text-fine-size);
  line-height: 1.4;
  color: var(--on-dark-muted);
}

/* Le formulaire fonctionnel garde ses classes .verif__* (partagees avec
   scamdetect.html), mais joue desormais sur fond fonce : les couleurs de
   texte, bordures et surfaces sont reprises ici plutot que dans les
   regles de base, qui restent au service de scamdetect.html. Marges
   resserrees pour que le bouton Analyser n'exige jamais de defiler. */
.verif-panneau__corps .verif__texte { color: var(--on-dark-muted); margin-bottom: var(--space-sm); }
.verif-panneau__corps .verif__label { color: var(--on-dark); margin-bottom: 4px; }
.verif-panneau__corps .verif__label { color: var(--on-dark); }
.verif-panneau__corps .verif__zone {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  color: var(--on-dark);
}
.verif-panneau__corps .verif__zone {
  margin-bottom: var(--space-sm);
  min-height: 72px;
}
.verif-panneau__corps .verif__zone::placeholder { color: var(--on-dark-muted); }
.verif-panneau__corps .verif__zone:focus-visible { outline-color: var(--on-dark); }
.verif-panneau__corps .verif__mention { color: var(--on-dark-muted); margin-top: var(--space-xs); }
.verif-panneau__corps .btn--action {
  background: var(--on-dark);
  color: var(--brand-1);
}
.verif-panneau__corps .btn--action:hover { background: var(--on-dark-muted); }

@media (max-width: 640px) {
  .verif-panneau { width: 100%; }
  .verif-panneau__entete { padding: var(--space-sm) var(--space-md) var(--space-xs); }
  .verif-panneau__titre { font-size: 20px; }
  .verif-panneau__corps { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .verif-panneau__cartes { grid-template-columns: 1fr; }
}


/* ═════════════ L'historique des analyses (dans le panneau ScamDetect) ═════════════ */
.verif-histo { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid rgba(255, 255, 255, .18); }
.verif-histo[hidden] { display: none; }
.verif-histo__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.verif-histo__titre { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.2px; color: var(--on-dark); }
.verif-histo__titre span { font-size: 15px; font-weight: 500; color: var(--on-dark-muted); }
.verif-histo__effacer { appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; color: var(--on-dark); background: transparent; border: 1px solid rgba(255, 255, 255, .34); }
.verif-histo__effacer:hover { background: rgba(255, 255, 255, .14); }
.verif-histo__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verif-histo__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--on-dark-muted); }

.histo-item { --c: #b9b2ee; border-radius: 18px; background: rgba(255, 255, 255, .96); color: var(--ink); overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--c) 60%, #fff); position: relative; }
.histo-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); }
.histo-item--alerte { --c: #d2264f; }
.histo-item--doute { --c: #d98b1c; }
.histo-item--rien { --c: #14a37f; }
.histo-item__tete { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px 16px 14px 20px; }
.histo-item__tete:focus-visible { outline: 2px solid var(--action-focus); outline-offset: -3px; border-radius: 16px; }
.histo-item__etat { grid-row: 1 / span 2; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent); }
.histo-item--rien .histo-item__etat { color: #0e7a5f; }
.histo-item--doute .histo-item__etat { color: #98590a; }
.histo-item__corps { display: grid; gap: 3px; min-width: 0; }
.histo-item__titre { font-weight: 700; font-size: 14.5px; color: var(--brand-1); }
.histo-item__extrait { font-size: 13.5px; line-height: 1.45; color: var(--ink-muted-80); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.histo-item__date { grid-column: 2; font-size: 12.5px; color: var(--ink-muted-48); }
.histo-item__detail { padding: 0 16px 16px 20px; display: grid; gap: 8px; border-top: 1px dashed color-mix(in srgb, var(--c) 35%, #fff); padding-top: 12px; }
.histo-item__detail[hidden] { display: none; }
.histo-item__legende { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted-48); }
.histo-item__detail ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-muted-80); }
.histo-item__supprimer { justify-self: start; appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; color: #b11f45; background: #fff; border: 1px solid rgba(210, 38, 79, .4); }
.histo-item__supprimer:hover { background: #fdecf0; }
@media (max-width: 560px) {
  .histo-item__tete { grid-template-columns: 1fr; }
  .histo-item__etat { grid-row: auto; justify-self: start; }
  .histo-item__date { grid-column: 1; }
}