/* Pallier — app/retrouver.css — V129 : « Retrouver mes demandes » sur la page du suivi (maquette
   operations/maquettes-retrouver-2026-10-19/retrouver.html, validée par HB le 19/10 ; « B » : l’email seul). Les règles de la
   maquette, au pixel, limitées à la zone #rv (le reste de suivi.html garde les siennes). Style « A » : aucun mot surligné, aucune
   flèche dans les boutons ni sur les cartes, aucune étiquette en capitales ; l’ombre dure sur les boutons, le retour et les cartes.
   Écrans (app/retrouver.js) : demande (R2), envoye (R3), liste (R5), expire (R6), attente, contretemps. */
body.mode-rv>.entete,body.mode-rv>#corps,body.mode-rv>.pied{display:none!important}
#rv{--foret:#12312A;--foret-doux:#41625A;--creme:#FFFCF4;--creme-2:#F9F3E7;--blanc:#fff;--lime:#CFE996;--lime-ombre:#9DBC62;
  --abricot-doux:#FCEBE1;--ciel:#AEDCE8;--ciel-doux:#E7F3F7;--trait:2.5px solid var(--foret);
  flex:1 0 auto;width:100%;background:var(--creme);color:var(--foret);font-family:'Gabarito',sans-serif;font-size:16.5px;line-height:1.5;
  font-weight:600;-webkit-font-smoothing:antialiased}
#rv[hidden]{display:none!important}
#rv *{box-sizing:border-box;margin:0}
#rv a{color:inherit}
#rv svg.ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
#rv h1{font-size:2.05rem;font-weight:900;letter-spacing:-.035em;line-height:1.06}
#rv .chapo{font-size:1.06rem;font-weight:700;color:var(--foret-doux);line-height:1.45}

/* ── l’en-tête (comme suivi.html), avec le retour à gauche quand il y a un écran d’avant ── */
#rv .st{display:flex;align-items:center;gap:12px;height:64px;padding:0 20px;border-bottom:2px solid rgba(18,49,42,.08)}
#rv .marque{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;min-height:44px}
#rv .marque .sigle{width:34px;height:34px}
#rv .marque .mot{font-weight:900;font-size:1.36rem;letter-spacing:-.045em}
#rv .marque .mot em{font-style:normal;color:#8FB25A}
#rv .rt{width:44px;height:44px;border-radius:50%;border:var(--trait);background:var(--creme-2);display:grid;place-items:center;
  box-shadow:0 3px 0 var(--foret);flex:0 0 auto;color:var(--foret)}
#rv .rt svg.ico{width:20px;height:20px;stroke-width:2.6}
#rv a:focus-visible,#rv button:focus-visible{outline:3px solid #F3A57F;outline-offset:3px}

/* ── le corps ── */
#rv .sc{padding:22px 20px 96px;max-width:600px;margin:0 auto}
#rv .sc h1{font-size:1.9rem;margin:0 0 10px}
#rv .sc h1:focus{outline:none}
#rv .sc .chapo{font-size:1.02rem}
#rv .sc .chapo b{color:var(--foret);font-weight:800;white-space:nowrap}
#rv .sc .chapo b.long{white-space:normal;overflow-wrap:anywhere}

/* ── le champ ── */
#rv .champ{margin-top:24px}
#rv .champ label{display:block;font-weight:900;font-size:1rem;margin-bottom:8px}
#rv .champ input{width:100%;height:58px;border:var(--trait);border-radius:16px;background:var(--blanc);padding:0 16px;
  font:inherit;font-size:1.1rem;font-weight:700;color:var(--foret);outline:none;-webkit-appearance:none;appearance:none}
#rv .champ input::placeholder{color:#8A9C96;font-weight:600}
/* l’anneau de focus : le lime de la maquette, bordé de forêt pour qu’il se voie sur la crème (finition du testeur, décidé par le CEO) */
#rv .champ input:focus{box-shadow:0 0 0 4px var(--lime),0 0 0 6.5px var(--foret)}
#rv .protege{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.92rem;font-weight:700;color:var(--foret-doux);line-height:1.4}
#rv .protege svg.ico{width:20px;height:20px;margin-top:1px;color:var(--foret)}
/* sous le champ : « Il manque votre email », « Vérifiez l’email », un numéro tapé (« seul l’email marche ») — sans alarme (V67, V90) */
#rv .rv-msg{margin-top:12px;padding:9px 12px;border:2px solid var(--foret);border-radius:12px;background:var(--abricot-doux);
  font-size:.92rem;font-weight:800;line-height:1.4;color:var(--foret)}

/* ── les liens d’aide ── */
#rv .aides{list-style:none;padding:0;margin-top:22px;display:grid;gap:4px}
#rv .aides li{display:flex;gap:11px;align-items:center;font-size:.95rem;color:var(--foret-doux);font-weight:700;min-height:44px;line-height:1.35}
#rv .aides li svg.ico{width:20px;height:20px;color:var(--foret)}
#rv .aides a,#rv .garde a,#rv .manque a,#rv .lien-b{color:var(--foret);font-weight:900;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* « Corriger » et « Ne pas les garder ici » : 44 px à toucher, sans rien déplacer (la marge négative rend la place prise par le
   remplissage ; finition du testeur, décidé par le CEO) */
#rv .aides a,#rv .garde a,#rv .manque a{display:inline-block;padding:12px 2px;margin:-12px -2px}
/* « Renvoyé à 14 h 32. » sous les aides de R3 (correctif C3) */
#rv .rv-ok{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:.95rem;font-weight:800;color:var(--foret)}
#rv .rv-ok[hidden]{display:none!important}
#rv .rv-ok svg.ico{width:18px;height:18px;stroke-width:2.8}

/* ── la barre du bas : l’action principale, à portée de pouce ── */
#rv .bar{position:fixed;left:0;right:0;bottom:0;background:var(--foret);padding:12px 20px calc(16px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;text-align:center;z-index:5}
#rv .cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border:var(--trait);
  border-radius:999px;background:var(--lime);color:var(--foret);font:inherit;font-weight:900;font-size:1.06rem;text-decoration:none;
  box-shadow:0 5px 0 var(--foret);white-space:nowrap;cursor:pointer}
#rv .cta:disabled{opacity:.75;cursor:default}
#rv .bar .cta{width:100%;box-shadow:0 5px 0 var(--lime-ombre);min-height:56px}
#rv .bar .cta.clair{background:var(--creme-2)}

/* ── la liste des demandes ── */
#rv .sc.l{padding-top:12px}
#rv .sc.l h1{margin-bottom:2px}
#rv .garde{font-size:.9rem;font-weight:700;color:var(--foret-doux);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:28px}
#rv .dems{list-style:none;padding:0;margin-top:10px;display:grid;gap:10px}
#rv .dems li[hidden]{display:none!important}
#rv .dem{display:grid;grid-template-columns:60px 1fr;gap:13px;align-items:center;padding:8px 14px 8px 10px;background:var(--blanc);
  border:var(--trait);border-radius:18px;box-shadow:0 4px 0 var(--foret);text-decoration:none;color:var(--foret);min-width:0}
#rv .dem>span:last-child{min-width:0}
#rv .dem.close{background:var(--creme-2)}
#rv .vign{width:60px;height:60px;border-radius:12px;border:2px solid var(--foret);overflow:hidden;display:grid;place-items:center;background:var(--ciel-doux)}
#rv .vign img{width:100%;height:100%;object-fit:cover;display:block}
#rv .vign svg.ico{width:26px;height:26px;stroke-width:2.2}
#rv .vign.abricot{background:var(--abricot-doux)}
#rv .vign.creme{background:#EFE8DA}
#rv .dem .q{font-size:.84rem;font-weight:700;color:var(--foret-doux);line-height:1.2}
#rv .dem .n{display:block;font-size:1.04rem;font-weight:900;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 4px}
#rv .etat{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;font-weight:800;border-radius:999px;padding:3px 10px 3px 9px;line-height:1.3}
#rv .etat svg.ico{width:15px;height:15px;stroke-width:2.8}
#rv .etat.action{background:var(--lime)}
#rv .etat.cours{background:var(--ciel-doux);border:1.5px solid var(--ciel)}
#rv .etat.fini{background:#E9E2D2;color:var(--foret-doux)}
#rv .etat.point::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--foret)}
/* « Voir les autres » (au-delà des quatre plus récentes) et « Une demande manque ? La retrouver » (la liste de l’appareil) */
#rv .plus,#rv .manque{font-size:.92rem;font-weight:700;color:var(--foret-doux);display:flex;align-items:center;gap:6px;min-height:44px;margin-top:6px}
#rv .lien-b{background:none;border:0;padding:0;font:inherit;font-size:.92rem;cursor:pointer;min-height:44px}
/* la confirmation de « Ne pas les garder ici » (correctif C2) : une feuille en bas du téléphone, au centre sur l’ordinateur */
#rv .rv-conf{position:fixed;inset:0;z-index:20;background:rgba(18,49,42,.5);display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
#rv .rv-conf[hidden]{display:none!important}
#rv .rv-conf .boite{width:100%;max-width:440px;background:var(--creme);border:var(--trait);border-radius:24px;padding:22px 20px 20px}
#rv .rv-conf h2{font-size:1.3rem;font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px}
#rv .rv-conf p{font-size:1rem;font-weight:700;color:var(--foret-doux);line-height:1.45}
#rv .rv-conf .choix{display:grid;gap:14px;margin-top:20px}
#rv .rv-conf .cta{width:100%}
#rv .rv-conf .cta.clair{background:var(--creme-2)}

/* ── le téléphone, quand la liste ne tient pas (4 demandes et « Une demande manque ? », ou « Voir les autres » ouvert) : la liste
   seule défile, le titre, les liens et le bouton restent en place ; la classe « serre » n’est posée que si la page dépasse
   (app/retrouver.js, serre()), sinon rien ne bouge (point 8 du CEO). Le remplissage de 6 px, rendu par la marge négative, garde
   l’ombre des cartes et l’anneau de focus visibles dans la zone qui défile. ── */
@media (max-width:899px){
  #rv .sc.l.serre{display:flex;flex-direction:column;height:calc(100vh - 64px);height:calc(100dvh - 64px)}
  #rv .sc.l.serre>*{flex:0 0 auto}
  #rv .sc.l.serre .dems{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px;margin:4px -6px 0}
}

/* ── l’ordinateur : une colonne au centre, l’action sous le champ ── */
@media (min-width:900px){
  #rv h1{font-size:3.3rem}
  #rv .chapo{font-size:1.22rem}
  #rv .st{max-width:1200px;margin:0 auto;padding:0 48px;height:84px;gap:18px}
  #rv .st .marque .sigle{width:38px;height:38px}
  #rv .sc{padding-top:72px;padding-bottom:48px;max-width:560px}
  #rv .sc.l{max-width:880px;padding-top:56px}
  #rv .sc h1{font-size:2.6rem;margin-bottom:12px}
  #rv .sc .chapo{font-size:1.14rem}
  #rv .bar{position:static;background:none;padding:0;margin-top:28px;display:flex;align-items:center;gap:24px;text-align:left;border-radius:0}
  #rv .bar .cta{width:auto;box-shadow:0 5px 0 var(--foret);padding:0 34px}
  #rv .dem{grid-template-columns:72px 1fr;padding:12px 18px 12px 12px}
  #rv .vign{width:72px;height:72px}
  #rv .dem .n{font-size:1.12rem}
  #rv .dems{grid-template-columns:1fr 1fr;gap:18px 18px;margin-top:24px}
  #rv .rv-conf{align-items:center}
}
