/* app.css — système de design partagé de l'app Respondito, aligné sur le site marketing (respondito.com).
   Servi à /app/app.css. Reskine index/onboard/inbox avec l'identité de marque (bleu #2f56ff, palette
   raffinée, boutons pill, cartes) au lieu du noir/gris générique. */
:root{
  /* ──────────────────────────────────────────────────────────────────────────
     Charte « Marine + orange chantier » — option 3b de la maquette (#43).
     L'app portait la 3a (bleu clair). Les VALEURS changent, pas les noms des
     jetons: tout ce qui les utilise suit sans être retouché.
     Contrastes vérifiés sur #0b1730 et #122043 — le plus faible est 4,82:1,
     au-dessus du seuil AA de 4,5. Une charte sombre illisible serait pire que
     l'ancienne, et « ça a l'air bien » n'est pas une mesure.
     Surfaces à BORDURES, pas d'ombres portées: exigence de la maquette.

     Depuis #50, les COULEURS ne sont plus déclarées ici: elles viennent de
     /app/tokens.css (source unique shared/tokens.css), chargé AVANT cette feuille.
     Les redéclarer gagnerait dans la cascade et rendrait la source partagée
     décorative — c'est très exactement ainsi que les deux façades ont divergé.
     Ne restent ici que les valeurs propres à l'application.

     ATTENTION (corrigé le 2026-09-10) — ce bloc portait DEUX marques de fin de
     commentaire et une seule ouverture. Tout ce qui suivait la première fermeture était
     donc lu comme des déclarations CSS, et l'analyseur avalait tout jusqu'au premier
     point-virgule — c'est-à-dire jusqu'à la fin de « --ok-soft:#12351f ».
     Mesuré en production avant correctif, sur https://respondito.com/app :
         getComputedStyle(document.documentElement).getPropertyValue('--ok-soft') === ''
     Résultat visible: « .box.auto » et le badge « règles approuvées » n'avaient
     aucun fond. Un commentaire mal fermé ne fait pas échouer une feuille de style,
     il en supprime silencieusement une partie.
     ────────────────────────────────────────────────────────────────────────── */
  --ok-soft:#12351f; --warn-soft:#3a2a0f; --r:24px; --r-sm:12px;
  --shadow:none;
  /* Largeur de la colonne de contenu. UNE seule source: les pages ne doivent plus
     poser la leur (voir la note sur body ci-dessous). */
  --app-max:1040px;
}
*{box-sizing:border-box}
/* max-width:none et margin:0 auto sont ici pour ANNULER ce que les pages déclarent
   elles-mêmes. onboard/inbox/drafts portaient chacune, dans un <style> en tête,
   « body{margin:2rem auto;max-width:860px} ». app.css est chargée APRÈS: sa règle
   « margin:0 » écrasait le « auto » qui centrait, pendant que le « max-width » de la
   page, lui, survivait. D'où une colonne de 860 px collée au bord GAUCHE d'un écran
   de 1953 px — exactement ce que le rapport 3a6150ec appelle « louche ».
   Mesuré avant correctif sur https://respondito.com/app à 1953 px:
       body → width 860, left 0, margin-left 0px  (attendu: centré) */
body{font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);margin:0 auto;max-width:none;
  padding:28px 16px 64px;-webkit-font-smoothing:antialiased}
/* La colonne de contenu, centrée.
   :not(.fb-fond) N'EST PAS DÉCORATIF. Le voile du modal de signalement est ajouté à
   <body> par feedback.js: il est donc un enfant DIRECT du body et héritait de ce
   plafond. « position:fixed;inset:0 » était correct — c'est max-width qui gagnait,
   et les marges auto qui recentraient le voile au lieu de le laisser couvrir l'écran.
   Mesuré avant correctif sur https://respondito.com/app :
       .fb-fond → width 900, left 526.5 pour un viewport de 1953 (attendu: 1953 / 0)
   Invisible sous ~900 px de large, d'où six mois sans que personne l'attrape. */
body>*:not(.fb-fond):not(.fb-lanceur){max-width:var(--app-max);margin-left:auto;margin-right:auto}
h1{font-size:1.35rem;letter-spacing:-.02em;margin:0}
h2{font-size:1.1rem;letter-spacing:-.01em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--soft);
  padding:.05rem .35rem;border-radius:5px}

header{display:flex;justify-content:space-between;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:20px}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.logo .dot{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:inline-grid;place-items:center;color:#fff;font-size:.9rem}
nav.bar a{color:var(--ink2);font-weight:600}
nav.bar a[aria-current]{color:var(--brand);font-weight:700}

button,.btn{font:inherit;font-weight:650;cursor:pointer;border:0;border-radius:999px;background:var(--brand);
  color:#fff;padding:.55rem 1.05rem;transition:.15s transform,.15s box-shadow}
button:hover{transform:translateY(-1px)}
button.ghost,button.secondary{background:var(--card);color:var(--ink);border:1px solid var(--line)}
/* #88: un bouton désactivé reste LISIBLE (5,88:1, texte --ink2 sur --soft) et se reconnaît à son pointillé — plus d'opacité .5 sur de l'orange (2,72:1). */
button:disabled{opacity:1;background:var(--soft);color:var(--ink2);border:1px dashed var(--line2);cursor:not-allowed;transform:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;box-sizing:border-box;font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.55rem .7rem}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
textarea{min-height:3.5em}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;color:var(--ink2)}

fieldset{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:20px;
  margin:16px 0;box-shadow:var(--shadow)}
legend{font-weight:700;padding:0 .4rem;color:var(--ink);font-size:1rem}
section{margin:16px 0}

.bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse;margin:1rem 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
th,td{border-bottom:1px solid var(--line);padding:.65rem .6rem;text-align:left;vertical-align:top}
th{color:var(--faint);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;background:var(--bg)}

/* Mobile (#62 lot 4): le tableau des règles (7 colonnes) défile dans sa propre boîte au lieu d'élargir la page, et les
   cibles tactiles atteignent 44 px (nav, monter/descendre/supprimer). Le sélecteur #rulesTable est posé APRÈS le style
   de td.actions de index.html, donc l'emporte à spécificité égale seulement grâce à `#`. */
@media (max-width:600px){
  #rulesTable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav.bar a{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem}
  #rulesTable td.actions button{min-width:44px;min-height:44px;padding:.2rem .5rem}
}

.muted{color:var(--ink2)} .err{color:var(--err);font-weight:600} .ok{color:var(--ok);font-weight:600}
.badge{display:inline-block;padding:.16rem .55rem;border-radius:999px;background:var(--soft);color:var(--brand);
  font-size:.76rem;font-weight:700}
.badge.approved,.badge.auto{background:var(--ok-soft);color:var(--ok)}
.badge.draft{background:var(--warn-soft);color:var(--warn-ink)}
.badge.overcap{background:var(--warn-soft);color:var(--warn-ink)}
.badge.nearcap{background:var(--warn-soft);color:var(--warn-ink);opacity:.85}

#langSwitch{border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);gap:0}
#langSwitch button{background:transparent;color:var(--ink2);border:0;border-radius:0;padding:.34rem .58rem;
  font-size:.8rem;font-weight:700}
#langSwitch button+button{border-left:1px solid var(--line)}
#langSwitch button[aria-pressed="true"]{background:var(--brand);color:#0b1730} /* #88: 7,59:1 (avant #fff: 2,35:1) */

/* Guide — bandeau « quoi faire maintenant » (UX non-technique) */
/* Surfaces marine: le dégradé lavande d'origine portait du texte en var(--faint)
   (#7e8db0) — clair sur clair, 1,6:1, le bandeau était quasi illisible. */
.guide{background:linear-gradient(135deg,#1a2a52,#16264f);border:1px solid #2a3d70;border-radius:var(--r);
  padding:18px 20px;margin:0 auto 18px;box-shadow:var(--shadow)}
.guide .stepper{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
/* --ink2 et non --faint: sur la surface #1a2a52 du bandeau, --faint tombe à 4,22:1,
   sous la norme AA. --ink2 remonte à 5,9:1. */
.guide .stepper .st{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;color:var(--ink2)}
.guide .stepper .st .n{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-size:.75rem;
  background:var(--card);border:1px solid var(--line);color:var(--faint)}
.guide .stepper .st.active{color:var(--brand)}
.guide .stepper .st.active .n{background:var(--brand);border-color:var(--brand);color:#0b1730}
.guide .stepper .st.done{color:var(--ok)}
.guide .stepper .st.done .n{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.guide .stepper .sep{flex:1;height:1px;background:var(--line);min-width:12px}
.guide h2{margin:0 0 6px;font-size:1.12rem;color:var(--ink)}
.guide p{margin:0;color:var(--ink2);font-size:.95rem;line-height:1.6}
.guide ol{margin:8px 0 0;padding-left:20px;color:var(--ink2);font-size:.95rem;line-height:1.7}
.guide .done-badge{color:var(--ok);font-weight:700}
/* #88 — accueil en 3 étapes: guide (pourquoi + où j'en suis), cartes d'étape, pastilles, bandeau « courriels sans brouillon » */
.guide2{background:var(--soft);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px;margin:0 0 14px}
.guide2 h2{margin:0 0 4px;font-size:1.15rem;color:var(--ink)}
.guide2 p{margin:0;color:var(--ink2)}
.cards{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.cardstep{display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.cardstep .n{grid-row:1/3;min-width:30px;height:30px;padding:0 .45rem;box-sizing:border-box;white-space:nowrap;border-radius:999px;display:grid;place-items:center;font-weight:800;background:var(--soft);color:var(--ink);border:1px solid var(--line2)}
.cardstep h3{margin:0;font-size:1rem;color:var(--ink)}
.cardstep .why{grid-column:2/3;margin:0;color:var(--ink2);font-size:.9rem}
.cardstep .chip{grid-row:1/2;grid-column:3/4;align-self:start}
.cardstep.active{border:2px solid var(--brand);background:var(--soft)}
.cardstep.active .n{background:var(--brand);color:#0b1730;border-color:var(--brand)}
.cardstep.done .n{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.chip{display:inline-block;font-size:.78rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;white-space:nowrap}
.chip.todo{background:var(--warn-soft);color:var(--warn-ink)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.where{margin:12px 0 0;font-weight:700;color:var(--ink)}
.banner2{background:var(--warn-soft);border:1px solid var(--warn-ink);border-radius:14px;padding:14px 16px;margin:0 0 14px;color:var(--ink)}
.banner2 strong{display:block;font-size:1.05rem;margin-bottom:2px}
.banner2 .go{margin-top:10px}
.reason{color:var(--ink2);font-size:.9rem}
/* Aide contextuelle sous les champs / états vides */
.hint{color:var(--faint);font-size:.85rem;margin:.2rem 0 0}
.empty{color:var(--ink2);background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:14px;text-align:center}

/* ─────────────────────────────────────────────────────────────────────────
   Écran de connexion (#43)
   Avant: le formulaire de connexion était un <fieldset> à légende, deux champs
   côte à côte dans une rangée, sous une barre de navigation vers des pages
   inaccessibles tant qu'on n'est pas connecté — une esthétique de panneau
   d'administration. La maquette montrait une carte centrée. C'est celle-ci.
   Le ciblage passe par :has() sur l'état déconnecté (#loginbox visible), donc
   aucun JavaScript à modifier: index.html bascule déjà l'attribut hidden.
   ───────────────────────────────────────────────────────────────────────── */
body:has(#loginbox:not([hidden]))                { padding-top:0 }
body:has(#loginbox:not([hidden])) nav.bar,
body:has(#loginbox:not([hidden])) #guide         { display:none }   /* rien de cliquable avant d'être entré */
body:has(#loginbox:not([hidden])) header{
  max-width:420px;justify-content:center;padding-top:56px;margin-bottom:18px;position:relative}
body:has(#loginbox:not([hidden])) #langSwitch{
  position:absolute;top:14px;right:0;transform:scale(.9);transform-origin:right center}
body:has(#loginbox:not([hidden])) .logo{font-size:1.5rem;gap:.6rem}
body:has(#loginbox:not([hidden])) .logo .dot{width:34px;height:34px;border-radius:11px;font-size:1.1rem}
body:has(#loginbox:not([hidden])) #auth{display:none}  /* le bouton Google est repris DANS la carte */

#loginbox{max-width:420px;margin:0 auto}
#loginbox::before{
  content:attr(data-baseline);display:block;text-align:center;color:var(--ink2);
  font-size:.98rem;line-height:1.5;margin:0 0 22px}
#loginbox fieldset{
  border:1px solid var(--line);border-radius:20px;background:var(--card);
  padding:26px 24px 24px;margin:0;box-shadow:none;border:1px solid var(--line)}
/* C'ÉTAIT UN <legend>, ET C'EST CE QUI CASSAIT LE FORMULAIRE.
   Le libellé « Se connecter par courriel » ne nomme pas tout le groupe: il annonce
   la partie courriel, sous le bouton Google. Mais un <legend> est TOUJOURS peint
   par le navigateur sur la bordure haute du <fieldset>, quelle que soit sa place
   dans le document. Pour le ramener dans le flux, l'auteur l'avait mis en
   float:left;width:100% — ce qui marchait pour le placement et détruisait tout le
   reste: une flottante large de 100 % ne laisse aucune place à ses voisins, et
   « .bar », en display:flex, établit un contexte de formatage qui s'écarte des
   flottantes. Il tombait donc à 0 px de large.

   Mesuré au navigateur sur https://respondito.com/app :
       avant  .bar =   0 px   champ =  28 px   x = 615  (hors carte, coupé)
       après  .bar = 370 px   champ = 370 px   x = 245  (dans la carte)

   La sortie n'est pas de corriger la flottante mais d'arrêter d'employer <legend>
   pour un libellé de section: c'est maintenant un <div class="loginlegend">, qui
   se place où il est écrit sans traitement particulier. Le <fieldset> reste un
   groupe valide sans legend. */
#loginbox .loginlegend{
  display:block;width:100%;padding:0;margin:0 0 16px;font-size:.78rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
#loginbox .bar{flex-direction:column;align-items:stretch;gap:.6rem}
#loginbox input{padding:.7rem .8rem;border-radius:11px}
#loginbox button{width:100%;padding:.72rem 1rem;font-size:1rem}

/* Le bouton Google, dupliqué en tête de carte par index.html, porte l'accent
   secondaire: c'est le chemin recommandé, mais il ne doit pas écraser la marque. */
.googlebtn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  padding:.72rem 1rem;font-size:1rem;font-weight:650;border-radius:999px;cursor:pointer}
.googlebtn:hover{border-color:var(--brand);background:var(--soft)}
.googlebtn svg{width:18px;height:18px;flex:none}
.orsep{display:flex;align-items:center;gap:.8rem;margin:18px 0;color:var(--faint);font-size:.8rem}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}


/* ─────────────────────────────────────────────────────────────────────────
   Ajustements propres au fond marine (#43).
   Sur fond sombre, plusieurs choix qui marchaient en thème clair cessent de
   marcher: une ombre portée ne se voit plus (d'où les bordures), un dégradé
   bleu-violet sur le logo se noie, et le blanc pur des boutons éblouit.
   ───────────────────────────────────────────────────────────────────────── */
html{background:var(--bg)}                       /* évite la bande blanche au rebond */
body{color-scheme:dark}                          /* barres de défilement et champs natifs sombres */
.logo .dot{background:var(--brand);color:#0b1730} /* une seule couleur d'action, pas de dégradé */
button,.btn{color:#0b1730}                        /* texte sombre SUR l'orange: 7,6:1 */
button.ghost,button.secondary{background:var(--card);color:var(--ink);border:1px solid var(--line)}
fieldset,table{box-shadow:none;border:1px solid var(--line)}
th{background:var(--soft);color:var(--ink2)}
code{background:var(--soft);color:var(--warn-ink)}
input,textarea,select{background:#0e1c3c;color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.badge{background:var(--soft);color:var(--brand)}
.badge.approved,.badge.auto{background:var(--ok-soft);color:var(--ok)}
.badge.draft{background:var(--warn-soft);color:var(--warn-ink)}
#loginbox fieldset{border-radius:24px;box-shadow:none}   /* 24px: rayon des cartes de la maquette */
.googlebtn{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.googlebtn:hover{border-color:var(--brand);background:var(--soft)}
.fb-lanceur{background:var(--brand);color:#0b1730}
.fb-lanceur:hover{background:var(--brand2)}

/* Pied de page discret (#env-sha): environnement + SHA déployé, injecté par footer.js. */
.build-footer{color:var(--faint);font-size:.72rem;text-align:center;padding:14px 0 6px;margin-top:8px}

/* #88 CAUSE (1): échec d'enregistrement dit à côté du bouton, champs fautifs encadrés */
#saveErr{flex-basis:100%;margin:.4rem 0 0}
[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:1px}

/* #91 (e3) — bandeau « N règles à décider » des pages d'avant l'assistant. Caché ET vide sans règle en attente: aucun effet visible. */
.assistant-banner[hidden] { display: none; }
.assistant-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .7rem .9rem; margin: .8rem 0;
  background: var(--soft); border: 1px solid var(--warn-ink); border-radius: 10px; color: var(--ink); }
.assistant-banner strong { color: var(--warn-ink); }
.assistant-banner .assistant-banner-go { color: var(--brand); font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }

/* #62 item 4 (b) — cibles tactiles >= 44 px sur mobile (mesure prod 375x667, 2026-10-12: FR/EN/ES 30x28, lien « Mot de passe oublié » 152x20,
   « Signaler un problème » 32 px de haut). Mobile seulement: la mise en page à 1280 px ne change pas. La bascule de langue de l'écran de
   connexion était réduite par transform:scale(.9) — qui rétrécit AUSSI la cible — donc elle est remise à l'échelle 1 sous ce seuil. */
@media (max-width:600px){
  #langSwitch button{min-height:44px;min-width:44px}
  body:has(#loginbox:not([hidden])) #langSwitch{transform:none}
  #loginbox a{display:inline-flex;align-items:center;min-height:44px}
}