/* ==========================================================================
   PayCollect — la feuille unique
   ==========================================================================
   HABILLAGE REPRIS DE LA V1 (décision du 13/08/2026) : cartes blanches à coins
   arrondis, disposition, boutons. Le questionnaire V1 était plus abouti
   visuellement et son ergonomie était correcte — le refaire aurait été du
   travail pour arriver moins loin.

   ⚠️ MAIS LA PALETTE ET LES POLICES VIENNENT DU **FUNNEL**, PAS DU
   QUESTIONNAIRE. `public/form.html` est antérieur au travail d'identité : il
   utilise `#3973c2`, qui n'appartient à aucune des deux palettes de marque, et
   une police cursive qui n'y figure pas non plus. Le funnel, lui, porte la
   palette de `VISION.md`. Reprendre le questionnaire tel quel aurait figé
   l'ancien habillage dans le produit neuf.

   ── LES POLICES : HÉBERGÉES CHEZ NOUS, JAMAIS CHEZ GOOGLE ─────────────────
   Le contrat affirme « aucune ressource externe », et un test le garantit —
   balises de la page ET `@font-face` / `@import` de cette feuille, parce que
   c'est ici que Google Fonts se réintroduit sans qu'on le voie.

   **QUICKSAND** (titres) et **HANKEN GROTESK** (corps) : la référence de
   marque, celle du funnel V1 et de `VISION.md`. Sous licence SIL OFL, donc
   hébergeables librement.

   ⚠️ **DANCING SCRIPT N'EST PAS UNE POLICE DE MARQUE.** L'ancien
   questionnaire V1 s'en servait pour imiter le « My » cursif du LOGO — qui
   est une image, pas du texte. Le logo étant déjà dans le bandeau, la
   signature n'a besoin d'aucune police cursive : elle se pose en Hanken
   Grotesk, et le cursif reste où il doit être.

   ⏳ En attendant les fichiers, la pile de repli tient : `ui-rounded` sur
   Apple, `Segoe UI` sur Windows. Rien ne casse, rien n'est chargé ailleurs.

   AUCUN STYLE EN LIGNE : la politique de contenu interdit `'unsafe-inline'`.
   C'est une contrainte, et c'est elle qui donne sa valeur à la CSP.

   MOBILE D'ABORD : les règles de base valent pour un téléphone, et une seule
   requête média élargit. C'est là que sont les utilisateurs du formulaire.
   ========================================================================== */

/* ── Les polices, servies depuis NOTRE domaine ─────────────────────────────
   Fichiers dans `/s/polices/`. Ce sont des VARIABLES : un seul fichier couvre
   toutes les graisses, d'ou les plages `font-weight`.

   `unicode-range` decoupe le travail : le navigateur ne telecharge un fichier
   que s'il rencontre un caractere qui lui appartient. `latin-ext` ne partira
   donc que si un nom en contient un — Wojciech, Şahin, Dvořák — et jamais
   pour un formulaire qui n'en a pas.

   ⚓ C'est le corps de texte qui affiche les NOMS DES PERSONNES : le
   sous-ensemble etendu s'y impose. Sans lui, un « ł » ou un « ř » basculerait
   sur la police systeme pour ce seul caractere, au milieu d'un mot.

   `local()` d'abord, puis le fichier : tant qu'ils ne sont pas deposes, la
   pile systeme prend le relais. La page reste juste, simplement moins signee.
   `font-display: swap` evite le texte invisible pendant le chargement — sur
   une connexion mobile lente, deux secondes de page blanche coutent plus cher
   qu'une police qui arrive apres coup. */
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: local('Hanken Grotesk'), url('/s/polices/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: local('Hanken Grotesk'), url('/s/polices/hanken-grotesk-etendu.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand'; font-style: normal; font-weight: 600 700;
  font-display: swap;
  src: local('Quicksand'), url('/s/polices/quicksand.woff2') format('woff2');
}

:root {
  /* ── La palette PayCollect (VISION.md), et non celle du vieux
     questionnaire. `public/form.html` utilisait #3973c2 — 27 fois — qui
     n'appartient à aucune des deux palettes de marque : il est antérieur au
     travail d'identité. Le funnel, lui, porte la bonne. */
  --accent: #2D6DCC;
  --accent-fonce: #205AB0;
  --accent-sombre: #0a2156;
  --accent-clair: #9EC5FF;
  --encre: #18243B;
  --gris: #56688A;
  --gris-clair: #94a3b8;
  --bordure: #DCE7F5;
  --bordure-champ: #d1d5db;
  --fond: #F5F9FF;
  --fond-carte: #f8fafc;
  --blanc: #ffffff;
  --attention: #92400e;
  --attention-fond: #fef3c7;
  --ennui: #991b1b;
  --ennui-fond: #fef2f2;
  --succes: #17915F;
  --rayon: 10px;
  --rayon-petit: 6px;
  --barre-hauteur: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.6 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* 16 px et pas moins : en dessous, Safari sur iPhone ZOOME à chaque champ
     touché, et l'utilisateur passe son temps à recadrer la page. */
  min-height: 100vh;
}

body.avec-barre .page {
  padding-bottom: calc(var(--barre-hauteur) + env(safe-area-inset-bottom, 0px) + 16px);
}

/* ── Le bandeau de marque, repris de la V1 ────────────────────────────────── */
.entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 24px;
  /* Le bandeau prend le NAVY, pas le bleu d'action : un aplat de la couleur
     des boutons rendrait les boutons invisibles. */
  background: var(--accent-sombre);
  color: var(--blanc);
}
.entete a { color: var(--blanc); text-decoration: none; font-size: .95rem; }
.marque { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 600; }
/* ── La pastille du bandeau — decidee le 17/08/2026 ─────────────────────────
   Le logo est peint pour du BLANC : sur le marine il disparait, et la silhouette
   blanche pleine qui l'avait remplace avait perdu le degrade qui fait l'identite.
   D'ou une pastille blanche qui porte le vrai logo en couleurs.

   ⚓ Elle HABILLE, elle ne domine pas : 38 px de cote pour un bandeau dont le
   texte fait 1,2 rem, un liseré a peine visible, et une ombre tres douce. Le
   bandeau appartient au cabinet — la marque de l'editeur s'y tient discrete. */
.marque .pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: var(--blanc); border-radius: 10px;
  /* Un liseré INTERIEUR : il ne prend pas de place et ne decale rien. */
  box-shadow: inset 0 0 0 1px rgba(10, 33, 86, .08), 0 1px 2px rgba(0, 0, 0, .12);
}
.marque .pastille img { height: 30px; width: auto; display: block; }
.marque img { height: 30px; width: auto; }
.marque .nom { font-family: 'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
               font-weight: 700; letter-spacing: -.01em; }
.marque .par { font-size: .75rem; font-weight: 400; opacity: .75; letter-spacing: .03em; }
/* ⚓ Pas de police cursive : le « My » cursif appartient au LOGO, qui est déjà
   dans le bandeau. L'imiter en texte était une idée de l'ancien questionnaire,
   et elle a coûté une police distante pour deux mots. */
.marque .fluidity { color: var(--accent-clair); font-weight: 600; }
.entete .contexte { font-size: .85rem; opacity: .85; }

.page { max-width: 720px; margin: 24px auto; padding: 0 16px 32px; }
.titre { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.echeance { margin: 0 0 20px; font-size: .9rem; color: var(--gris); }

/* ── Cartes ──────────────────────────────────────────────────────────────── */
.ligne, .bloc, .accueil {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.accueil { padding: 16px 20px; margin-bottom: 20px; }
.accueil p { margin: 0 0 8px; font-size: .9rem; color: var(--gris); }
.accueil p:last-child { margin-bottom: 0; }

/* ── La barre permanente ─────────────────────────────────────────────────── */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--barre-hauteur);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--blanc);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -2px 12px rgba(30, 41, 59, .08);
}
.barre-etat { font-size: .85rem; color: var(--gris); }
.barre-alerte .barre-etat { color: var(--attention); font-weight: 600; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 22px; min-height: 48px;   /* la cible tactile confortable */
  font-size: .95rem; font-weight: 600;
  color: var(--blanc); background: var(--accent);
  border: 0; border-radius: var(--rayon-petit);
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.bouton:hover { background: var(--accent-fonce); }
.bouton-2 {
  color: #374151; background: var(--blanc);
  border: 1px solid var(--bordure-champ);
  font-weight: 500; padding: 9px 16px; min-height: 40px; font-size: .85rem;
}
.bouton-2:hover { background: #f9fafb; }
/* Le focus reste VISIBLE. Le retirer « parce que c'est plus propre » rend le
   produit inutilisable au clavier — et il l'est pour qui n'a pas le choix. */
.bouton:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ── Champs ──────────────────────────────────────────────────────────────── */
.champ { margin: 0 0 14px; }
.champ label { display: block; margin-bottom: 4px;
               font-size: .8rem; font-weight: 500; color: var(--gris); }
.champ input, .champ textarea {
  width: 100%; padding: 10px 12px; min-height: 46px;
  font-size: 16px; color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--bordure-champ); border-radius: var(--rayon-petit);
}
.champ input:focus, .champ textarea:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px rgba(45, 109, 204, .15);
}
/* Une liste collee se lit en colonnes : une police a pas fixe garde l'alignement
   des tabulations, et c'est ce qui permet de voir d'un coup d'oeil si le collage
   est complet. */
.champ textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.5; resize: vertical; white-space: pre;
  overflow-wrap: normal; overflow-x: auto;
}
.aide { display: block; margin-top: 5px; font-size: .78rem; color: var(--gris); }

.case { margin: 0 0 16px; }
.case label { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.case input { width: 20px; height: 20px; flex: none; }

/* ── Bandeaux ────────────────────────────────────────────────────────────── */
.bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 20px; padding: 13px 16px;
  font-size: .9rem; line-height: 1.5;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-left: 4px solid var(--gris-clair);
  border-radius: var(--rayon);
}
.bandeau-attention { background: var(--attention-fond); border-left-color: #f59e0b; color: var(--attention); }
.bandeau-ennui { background: var(--ennui-fond); border-left-color: #dc2626; color: var(--ennui); }

/* ── La liste des personnes — la carte V1, sans son dépliant ─────────────── */
.liste { margin: 0; padding: 0; list-style: none; }
.ligne { margin-bottom: 14px; overflow: hidden; }
.ligne-salarie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; background: var(--fond-carte);
}
.ligne-salarie a { display: flex; flex: 1; align-items: center;
                   justify-content: space-between; gap: 12px;
                   color: var(--encre); text-decoration: none; }
.ligne-salarie strong { font-size: .95rem; font-weight: 600; }
.etat { font-size: .78rem; color: var(--gris); text-align: right; }
.etat-renseigne { color: var(--accent); font-weight: 600; }
.etat-rien { color: var(--succes); }
.etat-attente { color: var(--gris-clair); }
.ligne form { padding: 10px 16px; border-top: 1px solid var(--bordure); }

.discret { color: var(--gris); font-size: .85rem; }

/* ── Le calendrier : appui puis choix ────────────────────────────────────── */
.semaine-entete, .calendrier {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; margin: 0 0 8px; padding: 0; list-style: none;
}
.semaine-entete li { text-align: center; font-size: .7rem; color: var(--gris-clair); }

.jour a, .jour > .numero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* 52 px : en dessous de 44, on appuie à côté. Sur sept colonnes, c'est la
     contrainte qui commande toute la grille. */
  min-height: 52px; padding: 4px 2px;
  background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  color: var(--encre); text-decoration: none; font-size: .95rem;
}
.jour.vide { visibility: hidden; }
.jour-pris a { background: #edf6fc; border-color: var(--accent); font-weight: 600; }
.jour .marque { font-size: .6rem; line-height: 1.2; color: var(--accent); display: block; }
.jour .portion { font-size: .6rem; color: var(--gris-clair); }

.calendrier-acces { margin: 20px 0 0; }
.calendrier-acces a { color: var(--accent); font-weight: 600;
                      text-decoration: none; font-size: .9rem; }

/* ── Blocs de choix ──────────────────────────────────────────────────────── */
.bloc { margin: 0 0 20px; padding: 14px 16px; }
/* ⚠️ PLUS DE CAPITALES — retire le 17/08/2026.
   Le defaut n'etait PAS dans les textes : une seule ligne de style mettait tous
   les titres de section en capitales. Le catalogue disait deja « Qui part », la
   page affichait « QUI PART ».
   ⚓ Les capitales se lisent plus lentement et prennent de la largeur sur
   telephone. La couleur d'accent, la graisse et la position suffisent a
   identifier un titre — c'est deja le cas partout ailleurs dans le produit. */
.bloc legend {
  padding: 0 6px; font-size: .84rem; font-weight: 700;
  color: var(--accent); letter-spacing: .01em;
}
.radio { display: flex; align-items: center; gap: 10px;
         min-height: 44px; font-size: .9rem; }
.radio input { width: 20px; height: 20px; flex: none; }

/* ── La mention « enregistré », à côté du champ ──────────────────────────── */
.mention { display: inline-block; margin-top: 5px; font-size: .78rem; color: var(--succes); }
/* L'échec est plus visible que le succès, et il ne s'efface pas. */
.mention-ennui { color: var(--ennui); font-weight: 600; }

/* ── Grand écran ─────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .page { padding: 0 24px 48px; }
  .titre { font-size: 1.5rem; }
  .barre { justify-content: center; gap: 24px; }
}

/* ── Confort mobile, repris de la V1 ─────────────────────────────────────── */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
  .entete { padding: 11px 14px; }
  .marque { font-size: 1.02rem; }
  /* Sur un telephone, le bandeau se serre : la pastille suit, sans quoi elle
     deviendrait l'element dominant par simple comparaison. */
  .marque .pastille { width: 32px; height: 32px; border-radius: 8px; }
  .marque .pastille img { height: 25px; }
  .page { margin: 14px auto; padding: 0 12px 24px; }
}

/* ── Impression ──────────────────────────────────────────────────────────── */
@media print {
  .barre { display: none; }
  body { background: var(--blanc); }
}

/* ── La signature de l'éditeur ────────────────────────────────────────────────
   Palette MY FLUIDITY (#082C6B → #DEEFF9), et non celle de PayCollect : c'est
   l'éditeur qui parle, une fois, en pied de l'écran de fin. Deux palettes sur
   un même écran se distinguent — c'est le but.

   ⚓ Aucun lien, aucune image : on laisse une trace, on ne propose pas une
   sortie. La tâche vient d'être accomplie ; ce serait le pire moment pour
   inviter l'employeur à aller voir ailleurs.

   Le trait du haut est glacier et non gris : il sépare sans peser. */
.signature-editeur { margin: 36px 0 0; padding: 18px 0 0; text-align: center;
                     border-top: 1px solid #C2E0F4; }
.signature-editeur .enseigne {
  display: block; font-family: 'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em; color: #082C6B;
}
/* Plus petite et moins contrastée que la ligne du dessus — elle se lit si on
   la cherche, elle ne réclame rien. */
.signature-editeur .phrase {
  margin: 5px auto 0; max-width: 34em; font-size: .74rem; line-height: 1.45;
  color: #1F5BB2;
}

/* ── Le tableau du mois ──────────────────────────────────────────────────────
   🔑 MOT + FORME D'ABORD, LA COULEUR EN RENFORT.

   Un écran lu en plein soleil, une impression en noir et blanc, un lecteur
   daltonien : dans les trois cas la teinte a disparu. Chaque état porte donc
   un MOT et un SIGNE distincts, et la couleur ne fait que confirmer ce qui se
   lit déjà sans elle.

   C'est aussi pour cela que les signes sont du TEXTE (○ ✓ ✎ ▪) et non des
   images : ils survivent à une police manquante et se lisent à voix haute. */

/* Le chiffre que l'expert vient chercher le 18. Il passe avant le tableau,
   en grand : un écran qui le noierait dans un tableau bien rangé aurait raté
   sa seule raison d'être. */
.bilan { margin: 0 0 20px; font-family: 'Quicksand', ui-rounded, system-ui, sans-serif;
         font-size: 1.35rem; font-weight: 700; line-height: 1.25; }
.bilan-manque { color: var(--accent-sombre); }
.bilan-complet { color: #1B7A4B; }

.tableau-mois { display: flex; flex-direction: column; gap: 10px; }

.rangee { background: var(--blanc); border: 1px solid #dbe4f2; border-radius: 12px;
          padding: 12px 14px; }
/* Le liseré gauche double le signe : deux indices, jamais un seul. */
.rangee-silence  { border-left: 4px solid #C2551F; }
.rangee-transmis { border-left: 4px solid #1B7A4B; }
.rangee-retouche { border-left: 4px solid #B8860B; }
.rangee-clos     { border-left: 4px solid #64748b; }

.rangee-tete { display: flex; align-items: baseline; justify-content: space-between;
               gap: 12px; flex-wrap: wrap; }
.nom-employeur { font-weight: 600; font-size: 1.02rem; color: var(--accent-sombre); }

.etiquette { font-size: .82rem; font-weight: 600; white-space: nowrap;
             padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; }
.etiquette .signe { font-weight: 700; }
.etiquette-silence  { color: #C2551F; }
.etiquette-transmis { color: #1B7A4B; }
.etiquette-retouche { color: #8A6508; }
.etiquette-clos     { color: #56688A; }

.rangee-detail { margin: 6px 0 0; font-size: .9rem; color: #334; }
.rangee-date { margin: 3px 0 0; font-size: .8rem; color: var(--gris); }

@media (max-width: 768px) {
  .bilan { font-size: 1.15rem; }
  .rangee-tete { gap: 6px; }
}

/* ── Le détail d'un employeur ────────────────────────────────────────────────
   Les colonnes viennent de la V1 : elles collent à la paie et ont été
   éprouvées avec un vrai cabinet. L'habillage, lui, ne vient pas d'elle. */

.fil { margin: 0 0 14px; font-size: .88rem; }
.fil a { color: var(--accent); text-decoration: none; font-weight: 600; }
.nom-titre { font-size: 1.2rem; font-family: 'Quicksand', ui-rounded, system-ui, sans-serif; }
.titre-bloc { margin: 26px 0 8px; font-family: 'Quicksand', ui-rounded, system-ui, sans-serif;
              font-size: 1rem; font-weight: 700; color: var(--accent-sombre); }
.evenement { margin: 0 0 6px; font-size: .92rem; }
.evenement:last-child { margin-bottom: 0; }

/* ⚓ Le tableau défile DANS son cadre, jamais la page. Un tableau de neuf
   colonnes sur un téléphone déborderait sinon la fenêtre entière, et le
   bandeau partirait avec lui. */
.tableau-defilant { overflow-x: auto; margin: 14px 0 0; border: 1px solid #dbe4f2;
                    border-radius: 12px; background: var(--blanc); }
.tableau-salaries { border-collapse: collapse; width: 100%; font-size: .88rem; }
.tableau-salaries th, .tableau-salaries td {
  padding: 9px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bordure); white-space: nowrap;
}
.tableau-salaries thead th { background: #eef4fc; color: var(--accent-sombre);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em; position: sticky; top: 0; }
.tableau-salaries tbody th { font-weight: 600; color: var(--encre); }
.tableau-salaries tbody tr:last-child th,
.tableau-salaries tbody tr:last-child td { border-bottom: 0; }
.tableau-salaries .nb { font-variant-numeric: tabular-nums; }
.matricule { color: var(--gris); font-weight: 400; font-size: .82rem; }

/* 🔑 « Rien à signaler » est ÉCRIT, jamais laissé en blanc. Une ligne vide se
   lit « on ne sait pas » ; le mot se lit « il a répondu ». La teinte ne fait
   que renforcer — le mot suffit sans elle. */
.ligne-rien { background: #f7fbf8; }
.mention-rien { color: #1B7A4B; font-style: italic; }

/* ── Les réglages, en lecture seule ──────────────────────────────────────── */
.reglage { display: flex; justify-content: space-between; align-items: baseline;
           gap: 16px; margin: 0 0 10px; font-size: .92rem; flex-wrap: wrap; }
.reglage:last-child { margin-bottom: 0; }
.reglage-libelle { color: var(--encre); }
.reglage-valeur { font-weight: 600; color: var(--accent-sombre); white-space: nowrap; }
/* L'origine se dit à voix basse : c'est un renseignement, pas une alerte. */
.reglage-origine { display: block; font-weight: 400; font-size: .74rem;
                   color: var(--gris-clair); text-align: right; }
.pied-console { margin: 28px 0 0; text-align: center; font-size: .85rem; }

/* 🔑 « Compris dans l'envoi » — la fiche n'a pas été ouverte.
   Le MÊME ○ qu'au niveau de l'employeur, avec le même sens : personne ne s'est
   prononcé là-dessus. Et une teinte plus effacée que « rien à signaler », qui
   est une réponse — mais le mot suffit sans la couleur. */
.ligne-compris { background: #fafbfc; }
.mention-compris { color: var(--gris); font-style: italic; }
.mention-compris .signe { font-style: normal; font-weight: 700; }

/* ── Aller d'un mois à l'autre (B7) ──────────────────────────────────────── */
.navigation-mois { display: flex; align-items: baseline; justify-content: space-between;
                   gap: 12px; margin: 0 0 14px; font-size: .88rem; }
.navigation-mois a { color: var(--accent); text-decoration: none; font-weight: 600; }
.navigation-mois .mois-courant { font-family: 'Quicksand', ui-rounded, system-ui, sans-serif;
                                 font-weight: 700; color: var(--accent-sombre); }
.navigation-mois .discret { color: var(--gris-clair); }

/* ── B6a : l'import par collage ─────────────────────────────────────────── */

/* La marche a suivre, AU-DESSUS de la zone : une consigne placee apres le champ
   se lit une fois qu'on s'est deja trompe. */
.marche { margin: 0 0 18px; padding-left: 22px; font-size: .92rem; color: var(--gris-fonce, #4a5568); }
.marche li { margin: 0 0 7px; }

/* La case de chaque ligne : assez large pour un doigt, et alignee en haut pour
   ne pas glisser quand une raison sociale passe sur deux lignes. */
.tableau-import .case-ligne { width: 42px; text-align: center; vertical-align: middle; }
.tableau-import .case-ligne input[type=checkbox] { width: 20px; height: 20px; }
.tableau-import tbody th { font-weight: 600; }
.tableau-import tbody th label { cursor: pointer; }

/* Une ligne ecartee reste LISIBLE : grisee, pas effacee. La masquer donnerait un
   ecran plus propre et un compte qui ne tombe pas juste. */
.ligne-ecartee { background: #fafbfd; color: var(--gris, #64748b); }
.ligne-ecartee .motif { font-size: .85rem; font-style: italic; }

/* ── Pilotage : la sante des taches ─────────────────────────────────────── */

/* La ligne d'une tache : le nom et sa consequence a gauche, l'etat a droite.
   Alignee en haut, parce que la consequence passe souvent sur deux lignes. */
.reglage-tache { align-items: flex-start; gap: 14px; }
.reglage-tache .reglage-libelle { display: flex; flex-direction: column; gap: 3px; }
.reglage-tache .reglage-valeur { text-align: right; white-space: normal; }

/* Un message d'exploitation : lisible, discret, et borne en largeur pour ne pas
   pousser la colonne d'etat hors de l'ecran. */
.tache-erreur { font-size: .78rem; color: #b45309; font-family: ui-monospace,
  SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }

/* La couleur ne fait que RENFORCER : chaque etat porte deja un mot et un signe. */
.tache-ok .signe { color: #15803d; }
.tache-muette .signe, .tache-jamais_reussie .signe,
.tache-jamais_declaree .signe { color: #b91c1c; }
.tache-jamais_declaree, .tache-jamais_reussie { background: #fef6f6; }

/* ── Le champ de mot de passe, avec « Afficher » ─────────────────────────────
   Le bouton est A COTE du champ, pas dessous : on le cherche du regard au moment
   ou l'on tape, et il doit etre a portee de pouce sans quitter la ligne. */
.mdp-ligne { display: flex; gap: 8px; align-items: stretch; }
.mdp-ligne input { flex: 1 1 auto; min-width: 0; }
.bouton-mdp {
  flex: 0 0 auto; padding: 0 12px; min-height: 46px; white-space: nowrap;
  font-size: .85rem;
}
/* Sur un telephone, la place manque : le bouton se resserre plutot que de
   pousser le champ hors de l'ecran. */
@media (max-width: 420px) {
  .bouton-mdp { padding: 0 10px; font-size: .8rem; }
}

/* ── L'ecran des reglages, repris le 17/08 ───────────────────────────────────
   ⚠️ C'etait le pire ecran du produit sur telephone, et le defaut etait
   STRUCTUREL : libelle et valeur s'empilaient sans separation entre deux
   reglages. « valeur par defaut » semblait appartenir a la ligne suivante.

   ⚓ Trois corrections, et aucune n'est cosmetique : un filet entre les
   reglages, de l'air autour, et l'aide SOUS le libelle plutot que dans une
   parenthese qui se cassait sur trois lignes. */
.bloc-reglages { padding: 0 16px; }
.bloc-reglages .reglage {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 14px 0; margin: 0;
  border-bottom: 1px solid var(--bordure);
}
.bloc-reglages .reglage:last-child { border-bottom: 0; }
.bloc-reglages .reglage-libelle {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
/* L'aide : discrete, mais lisible. Elle explique, elle ne decore pas. */
.reglage-aide { font-size: .78rem; color: var(--gris); line-height: 1.45; }
.bloc-reglages .reglage-valeur { text-align: right; white-space: normal; flex: 0 0 auto; }

/* Sur un telephone, la valeur passe SOUS le libelle plutot que de le comprimer
   a deux mots par ligne. Le filet garde la separation lisible. */
@media (max-width: 560px) {
  .bloc-reglages .reglage { flex-direction: column; gap: 4px; }
  .bloc-reglages .reglage-valeur { text-align: left; }
}

/* ── ⑤ Un formulaire qui tient sur un ecran ──────────────────────────────────
   ⚠️ Les champs faisaient 46 px de haut avec 20 px d'ecart : cinq champs
   occupaient deux ecrans de telephone la ou un seul suffisait.

   ⚓ 46 px reste la cible d'un DOIGT, et on n'y touche pas. Ce qui se resserre,
   c'est l'ESPACE ENTRE les champs et la place du libelle — pas la zone
   touchable. Reduire la hauteur du champ aurait echange un defaut de longueur
   contre un defaut de precision. */
.bloc-serre .champ { margin-bottom: 12px; }
.bloc-serre .champ label { margin-bottom: 2px; font-size: .82rem; }
.bloc-serre .champ input, .bloc-serre .champ textarea { padding: 8px 12px; }
.bloc-serre .aide { margin-top: 3px; }

/* La mention de l'asterisque : discrete, et separee des champs. */
.aide-obligatoires { margin: 0 0 14px; }

/* ── Un sous-groupe de reglages : « Me prevenir quand : » ────────────────────
   ⚓ Il porte la partie COMMUNE de cinq libelles qui la repetaient. Plus discret
   qu'un titre de section — c'est un intitule, pas une rubrique — et colle au
   bloc qui le suit, sans quoi il flotterait entre les deux. */
.sous-groupe {
  margin: 16px 0 6px; font-size: .86rem; font-weight: 600;
  color: var(--accent-sombre);
}

/* ── B7 : recuperer le mois — le geste central du produit ────────────────────
   ⚓ Les trois formats sur UNE ligne, en boutons discrets. Ils ne rivalisent pas
   avec le tableau qui les precede : on descend jusqu'a eux quand on a fini de
   lire, pas avant. Sur telephone, ils passent a la ligne plutot que de retrecir
   — un lien de telechargement trop etroit se rate au doigt. */
.bloc-recuperer .formats {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0;
}
.bloc-recuperer .formats a {
  display: inline-block; padding: 9px 14px;
  border: 1px solid var(--bordure); border-radius: 8px;
  background: var(--fond-clair, #fff); text-decoration: none;
  font-size: .88rem; font-weight: 600; color: var(--accent-sombre);
}
.bloc-recuperer .formats a:hover { border-color: var(--accent); }
.bloc-recuperer .aide { margin: 0; }

/* ── Le lien de collecte : deux gestes qui ne doivent PAS se ressembler ──────
   ⚓ Ils se distinguent par ce qu'ils emportent, pas par leur nom. L'ecran le dit
   au-dessus de chaque bouton, et les deux ne sont jamais cote a cote : deux
   boutons alignes se choisissent au geste, deux blocs separes se choisissent a
   la lecture. */
.consequence-lien { margin: 0 0 12px; font-size: .88rem; line-height: 1.5; }
.bloc-lien-danger {
  margin-top: 14px; border-color: var(--bordure);
  border-left: 3px solid var(--attention, #92400e);
}
/* Le geste destructeur n'est PAS un bouton : c'est un lien discret. On ne clique
   pas dessus par reflexe, on decide d'y aller. */
.consequence-lien.danger { color: var(--attention-sombre, #92400e); font-weight: 600; }

/* ── Un depliant pour les gestes qu'on ne doit pas croiser ───────────────────
   ⚓ On ne croise pas un geste destructeur en cherchant autre chose. Ferme par
   defaut, tout en bas : atteignable, jamais rencontre. C'est un <details>
   natif — aucun script, donc il s'ouvre meme quand tout est bloque. */
.autres-actions { margin-top: 28px; }
.autres-actions > summary {
  cursor: pointer; padding: 10px 2px; font-size: .86rem; color: var(--gris);
  list-style: none;
}
.autres-actions > summary::-webkit-details-marker { display: none; }
.autres-actions > summary::before { content: "▸ "; }
.autres-actions[open] > summary::before { content: "▾ "; }
.autres-actions > summary:hover { color: var(--accent-sombre); }