/* ══════════════════════════════════════════════════════════════════════════
   PHOTO ASSISTÉE + QR CODE — styles de l'écran « appareil photo » et du
   panneau QR. Sorti d'index.html pour ne pas l'alourdir (voir capture.js).

   Règles respectées : un écran = une action, gros boutons, mobile-first,
   langage simple. Le client n'est JAMAIS bloqué : « Utiliser » est toujours
   disponible à côté de « Reprendre », et un repli « choisir un fichier »
   existe sur chaque écran.

   Réutilise les variables de couleur d'index.html (--green, --gain, --ink…).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Bouton d'entrée sur l'écran de dépôt ──────────────────────────────── */
.photo-cta{display:flex;align-items:center;gap:13px;width:100%;margin-top:1rem;
  padding:16px 18px;border:1.5px solid var(--green-line);background:var(--paper);
  border-radius:var(--r-lg);cursor:pointer;text-align:left;font-family:var(--sans);
  color:var(--ink);transition:border-color .2s,background .2s}
.photo-cta:hover{border-color:var(--green);background:var(--green-soft)}
.photo-cta .ico{flex:0 0 auto;font-size:23px;line-height:1}
.photo-cta b{display:block;font-size:15.5px;font-weight:700;margin-bottom:2px}
.photo-cta span{display:block;font-size:13px;color:var(--muted);line-height:1.45}

/* Version « action principale » : sur téléphone, photographier passe devant. */
.photo-cta.principal{margin:0 0 10px;padding:19px 20px;background:var(--green);
  border-color:var(--green);color:#F7F9FC}
.photo-cta.principal:hover{background:var(--green-d);border-color:var(--green-d)}
.photo-cta.principal .ico{font-size:26px}
.photo-cta.principal b{font-size:17px}
.photo-cta.principal span{color:rgba(247,249,252,.82)}

/* …et l'import de fichier devient un rappel discret juste en dessous. */
.mode-photo-mobile .avis-drop{flex-direction:row;justify-content:flex-start;text-align:left;
  padding:13px 15px;background:transparent;border-style:solid;border-color:var(--line)}
.mode-photo-mobile .avis-drop svg{width:21px;height:21px;flex:0 0 auto}
.mode-photo-mobile .avis-drop-txt b{font-size:14px;font-weight:600;margin-bottom:1px}
.mode-photo-mobile .avis-drop-txt span{font-size:12px}

/* ── Panneau QR (ordinateur) ───────────────────────────────────────────── */
.qr-modal{display:none;position:fixed;inset:0;z-index:200;background:rgba(10,16,28,.62);
  padding:20px;overflow:auto;backdrop-filter:blur(3px)}
.qr-modal.show{display:flex;align-items:flex-start;justify-content:center}
.qr-box{background:var(--paper);border-radius:var(--r-xl);padding:28px;max-width:470px;
  width:100%;margin:auto;box-shadow:var(--shadow-lg);animation:qrIn .35s var(--spring)}
@keyframes qrIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.qr-box h3{font-family:var(--disp);font-size:23px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:6px}
.qr-box .qr-sub{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.qr-steps{list-style:none;margin:0 0 16px;padding:0;font-size:14.5px;line-height:1.5}
.qr-steps li{display:flex;gap:11px;align-items:flex-start;margin-bottom:9px}
.qr-steps li i{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;
  font-weight:800;font-style:normal;margin-top:1px}
.qr-img{display:flex;align-items:center;justify-content:center;min-height:230px;
  padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.qr-img svg,.qr-img img{width:220px;height:220px;display:block;image-rendering:pixelated}
.qr-lien{margin-top:14px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6}
.qr-lien b{display:block;font-family:ui-monospace,monospace;font-size:16px;color:var(--ink);
  letter-spacing:.04em;margin-top:3px;word-break:break-all}
.qr-etat{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;font-size:14px}
.qr-etat .attente{display:flex;align-items:center;gap:9px;color:var(--muted)}
.qr-etat .pastille{width:9px;height:9px;border-radius:50%;background:var(--green);
  animation:qrPulse 1.4s infinite}
@keyframes qrPulse{0%,100%{opacity:.25}50%{opacity:1}}
.qr-recue{display:flex;align-items:center;gap:9px;padding:7px 0;font-weight:600;
  color:var(--gain-d);animation:qrIn .3s var(--ease)}
/* Avancement de la lecture : discret. Le client doit voir que ça travaille,
   pas avoir à le lire (pourcentage en petit et gris clair — demande Steve). */
.qr-progres{padding:8px 0 2px;font-size:13px;color:var(--muted)}
.qr-pc{font-size:12px;color:#9aa3ad;font-variant-numeric:tabular-nums;margin-left:6px}
.qr-box .btn{margin-top:16px}

/* ══ APPAREIL PHOTO PLEIN ÉCRAN ═══════════════════════════════════════════ */
.cam{position:fixed;inset:0;z-index:210;background:#0B1020;display:none;
  flex-direction:column;color:#fff;overscroll-behavior:contain}
.cam.show{display:flex}
.cam-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0B1020}
.cam-shade{position:absolute;inset:0;pointer-events:none}

/* Cadre à aligner : un simple rectangle clair + 4 coins marqués. */
.cam-cadre{position:absolute;border:2px solid rgba(255,255,255,.55);border-radius:10px;
  box-shadow:0 0 0 4000px rgba(6,10,20,.45);transition:border-color .25s}
.cam-cadre.ok{border-color:var(--gain-lt);box-shadow:0 0 0 4000px rgba(6,10,20,.32),
  0 0 26px rgba(95,211,160,.5)}
.cam-cadre i{position:absolute;width:26px;height:26px;border:3px solid #fff;border-radius:3px}
.cam-cadre i:nth-child(1){top:-3px;left:-3px;border-right:0;border-bottom:0}
.cam-cadre i:nth-child(2){top:-3px;right:-3px;border-left:0;border-bottom:0}
.cam-cadre i:nth-child(3){bottom:-3px;left:-3px;border-right:0;border-top:0}
.cam-cadre i:nth-child(4){bottom:-3px;right:-3px;border-left:0;border-top:0}
.cam-cadre.ok i{border-color:var(--gain-lt)}

/* Barre du haut : quitter + compteur de photos */
.cam-top{position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
.cam-x{background:rgba(0,0,0,.42);border:none;color:#fff;width:42px;height:42px;
  border-radius:50%;font-size:22px;line-height:1;cursor:pointer;flex:0 0 auto}
.cam-titre{font-size:14.5px;font-weight:700;flex:1;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.cam-compteur{background:rgba(0,0,0,.42);border-radius:99px;padding:7px 14px;font-size:13px;
  font-weight:700;white-space:nowrap}

/* LE message : un seul à la fois, gros, en bas — lisible sans lunettes. */
.cam-msg{position:relative;z-index:3;margin:auto 20px 14px;text-align:center;
  background:rgba(6,10,20,.72);border-radius:14px;padding:14px 18px;font-size:19px;
  font-weight:700;line-height:1.35;transition:background .25s;backdrop-filter:blur(6px)}
.cam-msg.ok{background:rgba(22,112,79,.86)}
.cam-aide{position:relative;z-index:3;margin:0 20px 10px;text-align:center;font-size:13.5px;
  opacity:.82;line-height:1.45;text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* Décompte 3 · 2 · 1 avant la photo automatique */
.cam-decompte{position:absolute;inset:0;z-index:4;display:none;align-items:center;
  justify-content:center;font-family:var(--disp);font-size:120px;font-weight:800;
  color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.6);pointer-events:none}
.cam-decompte.on{display:flex;animation:camTic .9s var(--ease)}
@keyframes camTic{from{opacity:0;transform:scale(1.5)}30%{opacity:1;transform:scale(1)}
  to{opacity:.15;transform:scale(.82)}}
.cam-flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
.cam-flash.on{animation:camFlash .42s ease-out}
@keyframes camFlash{from{opacity:.92}to{opacity:0}}

/* Barre du bas : le gros déclencheur, toujours disponible */
.cam-bas{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 22px calc(20px + env(safe-area-inset-bottom))}
.cam-declencheur{width:78px;height:78px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.42);
  cursor:pointer;flex:0 0 auto;margin:0 auto;transition:transform .15s var(--spring);
  background-clip:padding-box}
.cam-declencheur:active{transform:scale(.9)}
.cam-secondaire{background:none;border:none;color:#fff;font-family:var(--sans);font-size:13.5px;
  font-weight:600;text-decoration:underline;cursor:pointer;opacity:.9;flex:0 0 92px;
  text-align:center;line-height:1.35}

/* ── Écrans « feuille blanche » du mode téléphone (choix, aperçu, fin) ──── */
.cam-page{position:fixed;inset:0;z-index:215;background:var(--bg);color:var(--ink);
  display:none;flex-direction:column;overflow-y:auto;padding:22px 20px
  calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.cam-page.show{display:flex}
.cam-page h2{font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.025em;
  line-height:1.2;margin-bottom:8px}
.cam-page p.sous{font-size:15px;color:var(--muted);line-height:1.55;margin-bottom:22px}
.cam-page .marque{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:16px}
.cam-page .pousse{margin-top:auto}
.cam-choix{display:flex;align-items:center;gap:15px;width:100%;padding:22px 20px;
  border:1.5px solid var(--green-line);background:var(--green-soft);border-radius:var(--r-lg);
  cursor:pointer;text-align:left;font-family:var(--sans);color:var(--ink);margin-bottom:13px}
.cam-choix:active{transform:scale(.99)}
.cam-choix .ico{font-size:29px;line-height:1;flex:0 0 auto}
.cam-choix b{display:block;font-size:18px;font-weight:700;margin-bottom:3px}
.cam-choix span{display:block;font-size:13.5px;color:var(--muted);line-height:1.45}

/* Bouton retour en haut des écrans du parcours photo */
.cam-retour{align-self:flex-start;background:none;border:none;color:var(--green-d);
  font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;padding:6px 0 14px}

/* Rappel des documents attendus — sert de tableau de bord au client.
   Jamais de rouge : une année non fournie reste neutre (décision Steve). */
.cam-rappel{border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 14px 10px;
  margin-bottom:20px;background:var(--paper)}
.rap-t{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.rap-t:first-child{margin-top:10px}
.rap-t span{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:none;
  color:var(--muted-2)}
.rap-l{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);
  font-size:14px}
.rap-l:first-of-type{border-top:0}
.rap-p{flex:0 0 auto;width:20px;text-align:center;color:var(--muted-2);font-size:15px}
.rap-l.ok .rap-p{color:var(--gain-d);font-weight:800}
.rap-n{flex:1;min-width:0;font-weight:600;line-height:1.25}
.rap-n small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:1px}
.rap-e{flex:0 0 auto;font-size:11.5px;color:var(--muted);text-align:right;line-height:1.3;
  max-width:38%}
.rap-l.ok .rap-e{color:var(--gain-d);font-weight:700}

/* ── Tableau des PAIRES : avis ↔ cotisation ──────────────────────────────
   Le client doit VOIR que ça marche par deux : sans l'avis ET sa cotisation,
   l'année ne peut pas être calculée. Chaque moitié est cliquable et ouvre
   directement l'appareil photo sur ce document précis. */
.paires{margin-bottom:18px}
.paire{display:flex;align-items:stretch;gap:6px;margin-bottom:9px}
.pfleche{flex:0 0 auto;align-self:center;color:var(--muted-2);font-size:17px;font-weight:700}
.pcase{flex:1 1 0;min-width:0;display:block;text-align:left;padding:11px 12px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:var(--paper);cursor:pointer;font-family:var(--sans);
  color:var(--ink);position:relative;transition:border-color .18s,background .18s}
.pcase:active{transform:scale(.99)}
.pcase b{display:block;font-size:14.5px;font-weight:700;line-height:1.2;padding-right:20px}
.pcase small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.pcase .petat{display:block;font-size:11px;font-weight:700;margin-top:5px;color:var(--muted-2)}
.pcase .pico{position:absolute;top:9px;right:9px;font-size:14px;font-weight:800;line-height:1;
  color:var(--muted-2)}
/* Fait : vert. Partiel : ambre. Manquant (l'autre moitié existe) : rouge. Sinon neutre. */
.pcase.fait{border-color:var(--gain-line);background:var(--gain-soft)}
.pcase.fait .pico,.pcase.fait .petat{color:var(--gain-d)}
.pcase.partiel{border-color:rgba(138,101,18,.42);background:var(--amber-soft)}
.pcase.partiel .pico,.pcase.partiel .petat{color:var(--amber)}
.pcase.manque{border-color:rgba(150,59,48,.45);background:var(--err-soft)}
.pcase.manque .pico,.pcase.manque .petat{color:var(--err)}
.rap-p.manque{color:var(--err);font-weight:800}
@media(max-width:340px){
  .paire{flex-direction:column;gap:3px}
  .pfleche{align-self:center;transform:rotate(90deg);font-size:14px}
}

/* Choix déjà fait : la carte se teinte en vert plutôt que de disparaître */
.cam-choix.fait{background:var(--gain-soft);border-color:var(--gain-line)}
.cam-choix.fait .ico{color:var(--gain-d)}

/* Aperçu de la photo prise — aussi grand que l'écran le permet (le client doit
   pouvoir juger le cadrage d'un coup d'œil), et cliquable pour la taille réelle. */
.cam-apercu{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-2);margin-bottom:12px;max-height:64vh;display:flex;cursor:zoom-in}
.cam-apercu img{width:100%;height:auto;object-fit:contain;display:block;margin:auto}
.cam-loupe{position:absolute;right:10px;bottom:10px;background:rgba(11,16,32,.78);color:#fff;
  font-size:13px;font-weight:700;padding:8px 13px;border-radius:999px;pointer-events:none}

/* Photo en grand : seule façon de juger si les chiffres sont lisibles.
   S'ouvre en TAILLE RÉELLE — la vignette ne prouve rien. */
.cam-zoom{position:fixed;inset:0;z-index:230;background:#0B1020;display:flex;flex-direction:column}
.cz-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;background:rgba(11,16,32,.97);border-bottom:1px solid rgba(255,255,255,.13)}
.cz-t{color:rgba(255,255,255,.7);font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.cz-x{width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.15);color:#fff;font-size:18px;line-height:1}
.cz-fit{border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;
  font-family:inherit;font-size:14px;font-weight:600;padding:10px 15px;border-radius:999px;cursor:pointer}
.cz-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;text-align:center}
.cz-scroll img{max-width:100%;height:auto;display:inline-block;vertical-align:top}
.cz-scroll img.vraie{max-width:none}
.cam-verdict{display:flex;align-items:flex-start;gap:10px;border-radius:var(--r-md);
  padding:11px 14px;font-size:13.5px;line-height:1.45;margin-bottom:12px}
.cam-verdict.bon{background:var(--gain-soft);color:var(--gain-d)}
.cam-verdict.moyen{background:var(--amber-soft);color:#5F460C}
.cam-duo{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cam-duo .btn{width:100%;padding:18px 12px;font-size:16px}

/* Écran d'attente des envois — court, mais c'est lui qui garantit qu'aucune
   photo n'est perdue quand le client appuie sur « J'ai fini ». */
.env-compte{font-size:15px;font-weight:700;color:var(--ink);margin:18px 0 10px;text-align:center}
.env-barre{height:8px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.env-barre i{display:block;height:100%;width:0;border-radius:99px;background:var(--gain);
  transition:width .35s ease}

/* Liste des photos déjà prises */
.cam-liste{margin:4px 0 20px}
.cam-item{display:flex;align-items:center;gap:11px;padding:11px 0;font-size:14.5px;
  border-bottom:1px solid var(--line)}
.cam-item .vign{width:42px;height:52px;border-radius:6px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line)}
.cam-item .vign.vide{display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--bg-2);color:var(--muted-2)}
.cam-item .etat{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted)}
.cam-item .etat.ok{color:var(--gain-d)}
.cam-item .etat.err{color:var(--err)}

.cam-fin{text-align:center;margin:auto 0}
.cam-fin .coche{font-size:64px;line-height:1;margin-bottom:14px}
.cam-lien-fichier{display:block;width:100%;margin-top:14px;background:none;border:none;
  color:var(--green-d);font-family:var(--sans);font-size:14.5px;font-weight:600;
  text-decoration:underline;cursor:pointer;padding:12px;text-align:center}

/* ── TÉLÉPHONE COUCHÉ ──────────────────────────────────────────────────────
   Un iPhone en paysage n'a plus que ~375 px de haut, et le bandeau, le gros
   message et le déclencheur en mangeaient les deux tiers : le cadre couché
   n'aurait plus eu de place. On compacte le décor, et la ligne d'aide (« la photo
   se prend toute seule ») passe à la trappe — le message principal, lui, reste :
   c'est celui qui dit quoi faire. Rien de tout ça ne bouge en portrait. */
@media(orientation:landscape) and (max-height:520px){
  .cam-top{position:absolute;top:0;left:0;right:104px;
    padding:calc(6px + env(safe-area-inset-top)) 14px 4px}
  .cam-x{width:38px;height:38px;font-size:20px}
  /* Le déclencheur passe EN COLONNE SUR LE CÔTÉ, comme sur l'appareil photo du
     téléphone. C'est lui qui mangeait la hauteur : sorti du flux, le cadre couché
     gagne les deux tiers de sa surface. */
  .cam-bas{position:absolute;top:0;right:0;bottom:0;width:104px;
    flex-direction:column;justify-content:center;gap:16px;
    padding:10px calc(8px + env(safe-area-inset-right)) 10px 8px}
  .cam-bas span.cam-secondaire{display:none}
  .cam-secondaire{flex:0 0 auto}
  .cam-declencheur{width:64px;height:64px;border-width:4px;margin:0}
  /* Le message monte en haut, à côté du titre : posé en bas il barrait le bas du
     cadre et le client ne voyait plus le bas de sa feuille. En haut, il ne recouvre
     rien et toute la hauteur reste au cadre. */
  .cam-titre{flex:0 1 auto;max-width:150px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .cam-msg{position:absolute;z-index:3;top:calc(7px + env(safe-area-inset-top));
    left:196px;right:118px;margin:0;padding:7px 12px;font-size:15px;border-radius:11px}
  .cam-aide{display:none}
  .cam-decompte{font-size:78px}
}

@media(min-width:700px){
  .cam-page{align-items:center}
  .cam-page>*{width:100%;max-width:460px}
  .cam-cadre{max-width:520px}
}

/* ══════════════════════════════════════════════════════════════════════════
   MODE SOMBRE (08/09/2026) — voir le bloc « MODE SOMBRE » d'index.html.
   Presque rien à faire ici : cette feuille est écrite en variables de couleur
   (var(--…) 78 fois), elle se repeint donc toute seule quand index.html
   repointe ses variables. Il ne reste que trois rattrapages.
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠ LE FOND DU QR CODE RESTE BLANC, EN SOMBRE AUSSI — ce n'est pas un oubli.
   Un QR code se lit en noir sur blanc ; inversé, beaucoup de téléphones ne le
   décodent plus. Le cadre blanc du QR au milieu d'un panneau sombre est le
   comportement voulu (c'est ce que font tous les billets de train). */

/* Le verdict « photo moyenne » écrivait en brun foncé sur fond ambre clair.
   En sombre, le fond ambre devient sombre : le texte doit s'éclaircir avec lui. */
html[data-sombre] .cam-verdict.moyen{color:var(--amber)}

/* Le pourcentage de lecture : gris fixe, un peu terne sur fond sombre. */
html[data-sombre] .qr-pc{color:var(--muted-2)}

/* Le voile derrière le panneau QR : déjà sombre, mais il doit l'être plus
   encore quand la page l'est aussi, sinon le panneau ne se détache plus. */
html[data-sombre] .qr-modal{background:rgba(0,0,0,.72)}