:root {
  --fond: #f6f6f4;
  --carte: #ffffff;
  --texte: #1b1b1b;
  --texte-doux: #5f5f5f;
  --bord: #e2e2de;
  --accent: #1d64f0;
  --accent-texte: #ffffff;
  --confirme: #1d7a3a;
  --plutot-vrai: #4f8a2b;
  --trompeur: #b26a00;
  --faux: #c0262d;
  --conteste: #6a4fb3;
  --inverifiable: #6b6b6b;
  --logo-encre: #0f1a3a;
  --logo-bleu: #1d64f0; /* même bleu que les boutons et liens */
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #151515;
    --carte: #222222;
    --texte: #f0f0ee;
    --texte-doux: #a8a8a4;
    --bord: #353535;
    --accent: #5b9bff;
    --accent-texte: #0e1630;
    --confirme: #5fcf80;
    --plutot-vrai: #a3d468;
    --trompeur: #f0a43a;
    --faux: #ff6b70;
    --conteste: #b9a2ff;
    --inverifiable: #a8a8a8;
    --logo-encre: #e9edf7;
    --logo-bleu: #5b9bff; /* même bleu que les boutons et liens */
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 24px);
}

main, .entete { max-width: 640px; margin: 0 auto; }

.entete {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px;
  padding: 18px 0 8px;
}
.entete-droite { display: flex; align-items: center; gap: 12px; }

/* Choix de la langue : FR | EN */
.choix-langue { display: inline-flex; border: 1px solid var(--bord); border-radius: 99px; overflow: hidden; }
.choix-langue button {
  min-height: 32px; padding: 4px 10px; border-radius: 0;
  background: transparent; color: var(--texte-doux);
  font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
}
.choix-langue button[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); }
.nom-appli { margin: 0; font-size: 30px; letter-spacing: -0.5px; }

/* Logo QUOVV : une loupe (Q), un U, un œil (O) et une double coche (VV).
   Couleurs propres au logo : encre bleu nuit et bleu vif, éclaircies en mode sombre. */
.logo { display: inline-flex; align-items: center; }
.logo-quovv { height: 1.4em; width: auto; display: block; }
.logo-quovv .encre { stroke: var(--logo-encre); }
.logo-quovv .bleu { stroke: var(--logo-bleu); }
.logo-quovv .pupille { fill: var(--logo-encre); }
.logo-quovv .reflet { fill: var(--fond); }
/* Texte lu par les lecteurs d'écran mais invisible à l'œil */
.lecteur-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.accroche { margin: 2px 0 0; font-size: 15px; color: var(--texte-doux); }
a { color: var(--accent); }
.lien-discret { font-size: 15px; text-decoration: none; }

.consigne { display: block; font-weight: 600; margin: 8px 0; }

textarea {
  width: 100%;
  font: inherit; font-size: 17px; /* 16px minimum : évite le zoom automatique sur iPhone */
  color: var(--texte); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 14px;
  padding: 12px; resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

button {
  font: inherit; font-weight: 600;
  border: 0; border-radius: 14px;
  padding: 14px 18px; min-height: 48px;
  background: var(--accent); color: var(--accent-texte);
  cursor: pointer;
}
button:disabled { opacity: 0.5; }
button.secondaire { background: transparent; color: var(--accent); border: 1px solid var(--bord); }
#bouton { width: 100%; margin-top: 12px; font-size: 18px; }

/* Photo à vérifier */
.zone-photo { margin-top: 10px; }
.zone-photo .petit { margin: 6px 0 0; }
.bouton-photo {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px; border-radius: 14px;
  border: 1px dashed var(--bord); background: var(--carte);
  color: var(--accent); font-weight: 600; cursor: pointer;
}
.bouton-photo:focus-within { outline: 2px solid var(--accent); }
.bouton-photo svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linejoin: round;
}
.bouton-photo[hidden], .apercu[hidden] { display: none; }
.apercu { display: flex; align-items: center; gap: 12px; }
.apercu img {
  height: 96px; width: auto; max-width: 180px; object-fit: contain;
  background: var(--fond);
  border-radius: 12px; border: 1px solid var(--bord);
}
.apercu button { min-height: 40px; padding: 8px 14px; }
.deja-verifie { margin: 0 0 10px; }
.avertissement-photo {
  background: var(--carte); border-left: 4px solid var(--trompeur);
  padding: 12px 14px; border-radius: 10px; margin: 0 0 14px; font-size: 15px;
}

.petit { font-size: 14px; color: var(--texte-doux); }
#compteur { text-align: center; margin: 8px 0 0; }

.attente { text-align: center; padding: 28px 0; }
.roue {
  width: 34px; height: 34px; margin: 0 auto 12px;
  border: 3px solid var(--bord); border-top-color: var(--accent);
  border-radius: 50%; animation: tourne 0.9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation-duration: 3s; } }

.erreur {
  background: var(--carte); border-left: 4px solid var(--faux);
  padding: 12px 14px; border-radius: 10px; margin-top: 18px;
}

#resultat { margin-top: 22px; }

.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-left: 6px solid var(--couleur, var(--inverifiable));
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
.carte .ligne-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.verdict { font-size: 21px; font-weight: 750; color: var(--couleur); }
.confiance { font-size: 13px; color: var(--texte-doux); border: 1px solid var(--bord); border-radius: 99px; padding: 2px 9px; }
.affirmation { font-weight: 600; margin: 6px 0; }
.explication { margin: 6px 0; }
.carte h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texte-doux); margin: 14px 0 4px; }
.carte ul { margin: 4px 0; padding-left: 18px; }
.carte li { margin: 4px 0; }
.sources a { word-break: break-word; }
.media { color: var(--texte-doux); font-size: 14px; }
.bloc { background: var(--fond); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }

/* Signaler une erreur */
.signalement { margin-top: 12px; border-top: 1px solid var(--bord); padding-top: 8px; }
.lien-bouton {
  background: none; color: var(--texte-doux); min-height: 40px; padding: 6px 0;
  font-size: 14px; font-weight: 500; text-decoration: underline;
}
.form-signalement label { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 4px; }
.form-signalement select, .form-signalement input {
  width: 100%; font: inherit; font-size: 17px; color: var(--texte); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 10px; padding: 10px; min-height: 44px;
}
.form-signalement textarea { border-radius: 10px; padding: 10px; }
.form-signalement button[type="submit"] { width: 100%; margin-top: 12px; }
.form-signalement[hidden] { display: none; }
.merci { color: var(--confirme); font-weight: 600; margin: 4px 0; }

.v-confirme { --couleur: var(--confirme); }
.v-plutot-vrai { --couleur: var(--plutot-vrai); }
.v-trompeur { --couleur: var(--trompeur); }
.v-faux { --couleur: var(--faux); }
.v-conteste { --couleur: var(--conteste); }
.v-inverifiable { --couleur: var(--inverifiable); }

.resume { background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 14px 16px; }
.resume h2 { font-size: 16px; margin: 0 0 6px; }
.actions { display: flex; gap: 10px; margin-top: 10px; }
.actions button { flex: 1; }

.avertissement { margin-top: 16px; }

/* Soutenir le projet */
.soutien {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 14px;
  padding: 14px 16px; margin-top: 14px;
}
.soutien p { margin: 0 0 10px; font-size: 15px; color: var(--texte-doux); }
.soutien[hidden] { display: none; }
.bouton-soutien {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; border-radius: 14px; border: 1px solid var(--accent);
  color: var(--accent); font-weight: 600; text-decoration: none;
}
/* Icône : une pousse dont le bourgeon est un cœur, avec une pile de pièces (dessinée en SVG,
   colorée avec la couleur du bouton, en mode clair comme en mode sombre) */
.bouton-soutien::before {
  content: ""; width: 28px; height: 28px; margin-right: 9px; flex: none;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="black"%3E%3Cpath d="M10.9 10C9.6 8.3 6.9 7.2 6.6 4.9C6.4 3.4 7.6 2.3 8.9 2.4C10 2.5 10.7 3.3 10.9 4.3C11.2 3.3 12 2.4 13.2 2.4C14.6 2.5 15.6 3.7 15.2 5.2C14.7 7.3 12.2 8.4 10.9 10Z"/%3E%3Cpath d="M10.4 15.6C10.1 13.3 8.3 11.9 6.1 11.9L2.6 12C3.4 13.6 4.4 15.3 6.7 15.6C7.9 15.8 9.2 15.6 10.4 15.6Z"/%3E%3Cpath d="M11.8 13.8C12 11.4 13.6 9.7 16 9.3C17.4 9.1 18.8 9.1 19.6 9C19 10.5 18.3 12.4 16.4 13.3C15.1 13.9 13.4 13.7 11.8 13.8Z"/%3E%3Cellipse cx="19.4" cy="15.3" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="17.2" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="19.1" rx="2.6" ry="0.95"/%3E%3C/g%3E%3Cg fill="none" stroke="black" stroke-linecap="round"%3E%3Cpath d="M11 20.2C11.3 17 11.3 13.8 11.1 11.8C11 11 10.9 10.4 10.9 9.8" stroke-width="1.4"/%3E%3Cpath d="M2 22C7 19.6 15 19.4 21.5 22" stroke-width="1.4"/%3E%3C/g%3E%3C/svg%3E%0A') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="black"%3E%3Cpath d="M10.9 10C9.6 8.3 6.9 7.2 6.6 4.9C6.4 3.4 7.6 2.3 8.9 2.4C10 2.5 10.7 3.3 10.9 4.3C11.2 3.3 12 2.4 13.2 2.4C14.6 2.5 15.6 3.7 15.2 5.2C14.7 7.3 12.2 8.4 10.9 10Z"/%3E%3Cpath d="M10.4 15.6C10.1 13.3 8.3 11.9 6.1 11.9L2.6 12C3.4 13.6 4.4 15.3 6.7 15.6C7.9 15.8 9.2 15.6 10.4 15.6Z"/%3E%3Cpath d="M11.8 13.8C12 11.4 13.6 9.7 16 9.3C17.4 9.1 18.8 9.1 19.6 9C19 10.5 18.3 12.4 16.4 13.3C15.1 13.9 13.4 13.7 11.8 13.8Z"/%3E%3Cellipse cx="19.4" cy="15.3" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="17.2" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="19.1" rx="2.6" ry="0.95"/%3E%3C/g%3E%3Cg fill="none" stroke="black" stroke-linecap="round"%3E%3Cpath d="M11 20.2C11.3 17 11.3 13.8 11.1 11.8C11 11 10.9 10.4 10.9 9.8" stroke-width="1.4"/%3E%3Cpath d="M2 22C7 19.6 15 19.4 21.5 22" stroke-width="1.4"/%3E%3C/g%3E%3C/svg%3E%0A') center / contain no-repeat;
}
/* Lien « Soutenir » du pied de page : même pousse, en petit, devant le texte */
.pied [data-lien-soutien] { display: inline-flex; align-items: center; font-weight: 600; }
.pied [data-lien-soutien][hidden] { display: none; }
.pied [data-lien-soutien]::before {
  content: ""; width: 20px; height: 20px; margin-right: 6px; flex: none;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="black"%3E%3Cpath d="M10.9 10C9.6 8.3 6.9 7.2 6.6 4.9C6.4 3.4 7.6 2.3 8.9 2.4C10 2.5 10.7 3.3 10.9 4.3C11.2 3.3 12 2.4 13.2 2.4C14.6 2.5 15.6 3.7 15.2 5.2C14.7 7.3 12.2 8.4 10.9 10Z"/%3E%3Cpath d="M10.4 15.6C10.1 13.3 8.3 11.9 6.1 11.9L2.6 12C3.4 13.6 4.4 15.3 6.7 15.6C7.9 15.8 9.2 15.6 10.4 15.6Z"/%3E%3Cpath d="M11.8 13.8C12 11.4 13.6 9.7 16 9.3C17.4 9.1 18.8 9.1 19.6 9C19 10.5 18.3 12.4 16.4 13.3C15.1 13.9 13.4 13.7 11.8 13.8Z"/%3E%3Cellipse cx="19.4" cy="15.3" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="17.2" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="19.1" rx="2.6" ry="0.95"/%3E%3C/g%3E%3Cg fill="none" stroke="black" stroke-linecap="round"%3E%3Cpath d="M11 20.2C11.3 17 11.3 13.8 11.1 11.8C11 11 10.9 10.4 10.9 9.8" stroke-width="1.4"/%3E%3Cpath d="M2 22C7 19.6 15 19.4 21.5 22" stroke-width="1.4"/%3E%3C/g%3E%3C/svg%3E%0A') center / contain no-repeat;
  mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cg fill="black"%3E%3Cpath d="M10.9 10C9.6 8.3 6.9 7.2 6.6 4.9C6.4 3.4 7.6 2.3 8.9 2.4C10 2.5 10.7 3.3 10.9 4.3C11.2 3.3 12 2.4 13.2 2.4C14.6 2.5 15.6 3.7 15.2 5.2C14.7 7.3 12.2 8.4 10.9 10Z"/%3E%3Cpath d="M10.4 15.6C10.1 13.3 8.3 11.9 6.1 11.9L2.6 12C3.4 13.6 4.4 15.3 6.7 15.6C7.9 15.8 9.2 15.6 10.4 15.6Z"/%3E%3Cpath d="M11.8 13.8C12 11.4 13.6 9.7 16 9.3C17.4 9.1 18.8 9.1 19.6 9C19 10.5 18.3 12.4 16.4 13.3C15.1 13.9 13.4 13.7 11.8 13.8Z"/%3E%3Cellipse cx="19.4" cy="15.3" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="17.2" rx="2.6" ry="0.95"/%3E%3Cellipse cx="19.4" cy="19.1" rx="2.6" ry="0.95"/%3E%3C/g%3E%3Cg fill="none" stroke="black" stroke-linecap="round"%3E%3Cpath d="M11 20.2C11.3 17 11.3 13.8 11.1 11.8C11 11 10.9 10.4 10.9 9.8" stroke-width="1.4"/%3E%3Cpath d="M2 22C7 19.6 15 19.4 21.5 22" stroke-width="1.4"/%3E%3C/g%3E%3C/svg%3E%0A') center / contain no-repeat;
}
.pied {
  max-width: 640px; margin: 28px auto 0; font-size: 15px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px;
}
.pied [hidden] { display: none; }
.hebergeur { font-style: normal; }
.hebergeur > * { display: block; }
.hebergeur > [hidden] { display: none; }

/* Page « Comment ça marche » */
.page h2 { font-size: 20px; margin-top: 26px; }
.page li { margin: 6px 0; }