/* RISQEA — Observatoire du risque PME. Charte Prestig'Assur : le vert
   d'origine (#0f4c3a) reste la seule teinte de la page, déclinée en
   lumineux sur fond sombre — aucune couleur étrangère à la charte.
   Direction artistique PDG (20 septembre) : « un instrument de mesure,
   pas un formulaire ». Trois variantes de glow sélectionnables par
   data-theme sur <html> (1 = défaut, 2 = doux, 3 = concentré) — voir
   `?theme=2` / `?theme=3` dans l'URL, lu par app.js.

   Contrainte tenue (critère 8, écran-résultat-v2 §6) : téléphone
   d'entrée de gamme en 3G, aucune police ni image externe, aucune
   bibliothèque d'animation. Toutes les animations n'utilisent que
   transform/opacity/box-shadow/background-position (composées, jamais
   de mise en page recalculée) ; sous prefers-reduced-motion, ce qui
   déplace devient un simple fondu, jamais supprimé (décision 69 §9 :
   la page ne doit jamais paraître inerte). Jamais de code couleur
   rouge-orange-vert sur le niveau d'exposition, jamais un
   clignotement : interdits de l'écran-résultat-v2, §6. */

:root {
  --fond: #05110d;
  --fond-elevee: #0a1e17;
  --fond-carte: #0d241c;
  --texte: #eaf6f1;
  --texte-att: #9fbdb1;
  --accent: #1f9e77;
  --accent-clair: #3fd6a3;
  --accent-sombre: #0f4c3a;
  --bordure: #1e4438;
  --erreur: #e3766f;
  --glow-diffus: 0 0 26px rgba(63, 214, 163, 0.28);
  --glow-fort: 0 0 44px rgba(63, 214, 163, 0.4);
  --glow-fin: 0 0 12px rgba(63, 214, 163, 0.55);
  --duree-courte: 0.15s;
  --duree-ecran: 0.4s;
  --duree-lente: 2.6s;
}

/* Variante 2 — vert profond, halos larges et doux : plus sombre, glow
   diffus et étendu, pour un rendu discret. */
[data-theme="2"] {
  --accent: #16805f;
  --accent-clair: #2bb583;
  --glow-diffus: 0 0 40px rgba(43, 181, 131, 0.22);
  --glow-fort: 0 0 64px rgba(43, 181, 131, 0.3);
  --glow-fin: 0 0 18px rgba(43, 181, 131, 0.4);
}

/* Variante 3 — vert électrique, halos nets et concentrés : plus saturé,
   glow serré, rendu « instrument de précision » plus marqué. */
[data-theme="3"] {
  --accent: #17c98d;
  --accent-clair: #6ff4c8;
  --glow-diffus: 0 0 16px rgba(111, 244, 200, 0.5);
  --glow-fort: 0 0 26px rgba(111, 244, 200, 0.65);
  --glow-fin: 0 0 8px rgba(111, 244, 200, 0.75);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--texte);
  background: var(--fond);
  background-image:
    radial-gradient(ellipse 600px 400px at 15% -5%, rgba(31, 158, 119, 0.16), transparent 60%),
    radial-gradient(ellipse 500px 500px at 100% 30%, rgba(31, 158, 119, 0.1), transparent 55%);
  background-attachment: fixed;
  line-height: 1.5;
}

#app { max-width: 640px; margin: 0 auto; padding: 16px; }

h1 { font-size: 1.5rem; margin: 0.4em 0; }
h2 { font-size: 1.15rem; margin: 1em 0 0.4em; }

.sous-titre { font-weight: 600; color: var(--texte); }
.mentions, .indice { font-size: 0.85rem; color: var(--texte-att); }
.preuve-sociale { font-size: 0.9rem; color: var(--accent-clair); min-height: 1.2em; }
.erreur { color: var(--erreur); font-size: 0.9rem; min-height: 1.2em; }

/* -------------------------------------------------------------------
   Écrans : la question répondue sort par un glissement-fondu avant que
   la suivante entre par le même mouvement (écran-résultat-v2 §9,
   décision 69, amendée le 22 septembre) — jamais un remplacement
   instantané, et jamais plus d'une demi-seconde au total. app.js
   ajoute .ecran-sortie à l'écran courant, attend DUREE_SORTIE_MS
   (accordée à la durée ci-dessous, 90ms), puis reconstruit : sortie
   (90ms) + entrée (400ms) = 490ms, sous le plafond de 500ms.
   ------------------------------------------------------------------- */
.ecran { animation: ecran-entree 0.4s ease-out both; }
.ecran-sortie { animation: ecran-sortie 0.09s ease-in both; }

@keyframes ecran-entree {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ecran-sortie {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}

/* -------------------------------------------------------------------
   Barre de progression — élément persistant (voir app.js), pour que le
   changement de largeur, lui, s'anime réellement d'une question à
   l'autre plutôt que d'apparaître déjà à sa valeur finale.
   ------------------------------------------------------------------- */
.barre-progression-globale {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 16px 0;
  max-width: 640px;
  margin: 0 auto;
  background: var(--fond);
}
.barre-progression {
  height: 6px;
  background: var(--fond-elevee);
  border: 1px solid var(--bordure);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.barre-progression-remplie {
  position: relative;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-sombre), var(--accent-clair));
  box-shadow: var(--glow-fin);
  transition: width 0.4s ease-out;
  overflow: hidden;
}
/* Reflet lumineux qui traverse la barre remplie (§9), en plus de la
   croissance de largeur ci-dessus. */
.barre-progression-remplie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: barre-reflet 1.8s ease-in-out infinite;
}
@keyframes barre-reflet {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}

.option {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond-carte);
  color: var(--texte);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--duree-courte) ease, box-shadow var(--duree-courte) ease,
    transform var(--duree-courte) ease, background var(--duree-courte) ease;
}
.option:active { transform: scale(0.98); }
.option:hover, .option:focus-visible { border-color: var(--accent); box-shadow: var(--glow-diffus); }
.option-choisie {
  border-color: var(--accent);
  background: var(--fond-elevee);
  box-shadow: var(--glow-diffus);
  font-weight: 600;
  /* S'allume aussitôt, pulse une fois dans son halo (§9) : le
     dirigeant voit son choix avant la transition vers la question
     suivante (400ms tenus côté app.js, basculerOption). */
  animation: option-pulse-halo 0.4s ease-out both;
}
@keyframes option-pulse-halo {
  0%   { box-shadow: var(--glow-fort); }
  100% { box-shadow: var(--glow-diffus); }
}

.actions { display: flex; justify-content: space-between; margin-top: 16px; }

.bouton {
  padding: 12px 18px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-clair);
  font-size: 1rem;
  cursor: pointer;
  transition: box-shadow var(--duree-courte) ease, transform var(--duree-courte) ease,
    background var(--duree-courte) ease;
}
.bouton:active { transform: scale(0.97); }
.bouton:hover, .bouton:focus-visible { box-shadow: var(--glow-diffus); }
.bouton-principal {
  background: linear-gradient(135deg, var(--accent-sombre), var(--accent));
  color: #fff;
  border-color: var(--accent-clair);
}
.bouton-principal:hover, .bouton-principal:focus-visible { box-shadow: var(--glow-fort); }
.bouton-retour { border-color: var(--bordure); color: var(--texte-att); }
.bouton-partage {
  background: linear-gradient(135deg, var(--accent-sombre), var(--accent));
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-top: 8px;
}
.bouton-partage:hover, .bouton-partage:focus-visible { box-shadow: var(--glow-fort); }

/* Bouton d'audit (CTA de l'aperçu) : halo constant, jamais clignotant —
   interdit explicite (§6). Une seule pulsation très lente et discrète
   de l'intensité du halo, jamais de l'opacité du bouton lui-même. */
.bouton-audit {
  display: inline-block;
  animation: halo-respire var(--duree-lente) ease-in-out infinite;
}
@keyframes halo-respire {
  0%, 100% { box-shadow: var(--glow-diffus); }
  50%      { box-shadow: var(--glow-fort); }
}

label { display: block; margin: 10px 0; color: var(--texte); }
label input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond-carte);
  color: var(--texte);
  font-size: 1rem;
  transition: border-color var(--duree-courte) ease, box-shadow var(--duree-courte) ease;
}
label input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-diffus); }

.case-acceptation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 6px;
}
.case-acceptation input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin-top: 3px;
  accent-color: var(--accent);
}

.niveau {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-clair);
  text-shadow: var(--glow-fin);
  /* Un seul traitement, quel que soit le niveau rendu : aucun code
     rouge-orange-vert appliqué à l'exposition (interdit, §6). */
}

.phrase-lucidite {
  text-align: center;
  color: var(--texte-att);
  font-size: 0.9rem;
  margin: 20px 0;
}

.phrase-audit {
  padding: 12px 14px;
  background: var(--fond-carte);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  margin: 10px 0 16px;
}

/* Encadré isolé du reste (écran-résultat-v2 §5, Temps 2 : « un mois
   sans activité... »). */
.encadre {
  padding: 14px;
  margin: 16px 0;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  box-shadow: var(--glow-diffus);
}

/* -------------------------------------------------------------------
   Les trois temps de l'écran de résultat : révélation au défilement
   (IntersectionObserver dans app.js bascule .visible). Sous
   prefers-reduced-motion, la transition est neutralisée plus bas : les
   blocs apparaissent immédiatement, sans mouvement.
   ------------------------------------------------------------------- */
.temps {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.temps.visible { opacity: 1; transform: translateY(0); }

.jauges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 10px 0;
}
/* Décision 69 §8, amendée le 22 septembre : l'aperçu est une image
   unique, produite à la construction (build-apercu.js), jamais du texte
   ni des éléments de page — app.js pose son fond en sprite
   (background-image/-size/-position) par jauge. aspect-ratio garde
   chaque case à la même proportion que la cellule source (320x180), pour
   que le positionnement en pourcentage reste juste à toute largeur
   d'écran ; sans quoi le sprite s'étirerait de travers sur mobile. */
.jauge {
  position: relative;
  aspect-ratio: 320 / 180;
  border-radius: 14px;
  background-color: var(--fond-carte);
  background-repeat: no-repeat;
  box-shadow: var(--glow-diffus);
  /* Masquée au repos : les jauges ne se révèlent jamais au chargement de
     la page (§9), seulement quand elles entrent à l'écran. */
  clip-path: inset(0 100% 0 0 round 14px);
}
/* Cascade et respiration du §9 appliquées à l'image PAR SON MASQUE, pas
   à son contenu (§8) : jauge-devoile découvre l'image déjà construite en
   glissant le clip-path plutôt que de faire varier un remplissage ;
   jauge-pulse (inchangée) respire par le halo (box-shadow) une fois la
   révélation terminée — jamais les deux en même temps sur le même axe. */
.temps.visible .jauge {
  animation:
    jauge-devoile 0.6s ease-out calc(var(--jauge-i, 0) * 0.2s) both,
    jauge-pulse var(--duree-lente) ease-in-out calc(var(--jauge-i, 0) * 0.2s + 0.6s) infinite;
}
@keyframes jauge-devoile {
  from { clip-path: inset(0 100% 0 0 round 14px); }
  to   { clip-path: inset(0 0 0 0 round 14px); }
}
@keyframes jauge-pulse {
  0%, 100% { box-shadow: var(--glow-diffus); }
  50%      { box-shadow: var(--glow-fort); }
}

.parrainage { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.compteur-parrainage { font-size: 0.9rem; color: var(--accent-clair); }

/* -------------------------------------------------------------------
   Dégradation automatique et préférence de mouvement réduit (écran-
   résultat-v2 §6 ; décision 69 §9 : « les déplacements sont remplacés
   par des fondus, jamais supprimés »). Un téléphone modeste n'a pas de
   media feature fiable à interroger : le signal explicite
   prefers-reduced-motion reste le mécanisme correct. Ce qui déplace
   (transform : glissement des écrans, révélation des temps, balayage
   des jauges, reflet de la barre) est coupé ou remplacé par un simple
   fondu d'opacité ; les halos et pulsations (box-shadow seul, aucun
   déplacement à l'écran) restent actifs — la page ne doit jamais
   paraître inerte.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ecran, .ecran-sortie {
    animation-duration: 0.3s;
    animation-name: ecran-entree-fondu;
  }
  .ecran-sortie { animation-name: ecran-sortie-fondu; }
  .temps {
    transition-property: opacity;
    transform: none;
  }
  .temps.visible { transform: none; }
  /* Le dévoilement en clip-path est un déplacement (§9) : sous mouvement
     réduit, la jauge est démasquée d'emblée et se révèle par un fondu
     d'opacité à la place — jamais un remplacement instantané, la
     respiration (box-shadow, jauge-pulse, inchangée) continue. */
  .jauge { clip-path: inset(0 0 0 0 round 14px); opacity: 0; }
  .temps.visible .jauge {
    animation:
      jauge-devoile-fondu 0.3s ease-out calc(var(--jauge-i, 0) * 0.2s) both,
      jauge-pulse var(--duree-lente) ease-in-out calc(var(--jauge-i, 0) * 0.2s + 0.6s) infinite;
  }
  .barre-progression-remplie::after { animation: none; opacity: 0; }
}

@keyframes jauge-devoile-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ecran-entree-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ecran-sortie-fondu {
  from { opacity: 1; }
  to   { opacity: 0; }
}