/* L'Observatoire, pages.css : l'accueil d'un Cerfrance (Mon dossier), la vérification et l'envoi, le suivi de
   campagne et la relecture d'un dossier par le Conseil National. */

/* ================================================================ Mon dossier */
.dossier-h { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.dossier-t { display: grid; align-content: center; gap: 10px; padding: 8px 0; }
.dossier-t .bonjour { font-size: 14px; color: var(--encre-3); }
.dossier-t h1 { font-size: 34px; letter-spacing: -0.025em; line-height: 1.12; } .dossier-t h1 em { font-style: normal; color: var(--produit); }
.dossier-t .chapo { font-size: 15px; line-height: 1.55; color: var(--encre-2); max-width: 620px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .dossier-t .chapo b { color: var(--encre); }
.dossier-t .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.avance { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px; align-items: center; padding: 22px 24px; }
.chiffres { display: grid; gap: 8px; }
.chiffres li { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--filet-2); } .chiffres li:last-child { border-bottom: 0; padding-bottom: 0; }
.chiffres b { font-size: 22px; font-weight: 700; color: var(--encre); min-width: 44px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .chiffres span { font-size: 13px; color: var(--encre-2); }
.calendrier-c { grid-column: 1 / -1; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--filet-2); }
.calendrier-b { position: relative; height: 6px; border-radius: 3px; background: var(--filet-2); }
.calendrier-b > i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--produit); transition: width 1.2s var(--doux) .3s; }
.auj { position: absolute; top: -5px; width: 2px; height: 16px; background: var(--encre); border-radius: 2px; transform: translateX(-1px); }
.auj em { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-size: 10.5px; font-weight: 600; font-style: normal; color: var(--encre); white-space: nowrap; }
.calendrier-l { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--encre-3); } .calendrier-l b { color: var(--encre); }

/* les étapes, en liste */
.etapes-l { display: grid; }
.etape-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto 20px; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--filet-2); color: inherit; text-decoration: none !important; transition: background .1s; }
.etape-r:hover { background: var(--surface-2); } .etape-r:hover .lucide.fleche { color: var(--encre); transform: translateX(2px); }
.etape-r .sa-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--filet-fort); font-size: 13.5px; font-weight: 600; color: var(--encre-2); }
.etape-r .sa-n .lucide { width: 16px; height: 16px; }
.etape-r.pret .sa-n { background: var(--ok-pale); border-color: var(--ok-filet); color: var(--ok); }
.etape-r.reprise .sa-n { background: var(--jaune); border-color: var(--jaune); color: var(--encre); }
.etape-r b { display: block; font-size: 15px; } .etape-r .res { display: block; font-size: 13px; color: var(--encre-3); line-height: 1.4; margin-top: 1px; }
.etape-r .val { font-size: 12.5px; color: var(--encre-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.etape-r .pts { font-size: 12.5px; font-weight: 600; white-space: nowrap; } .etape-r .pts.voir { color: var(--at); } .etape-r .pts.ok { color: var(--ok); }
.etape-r .lucide.fleche { color: var(--encre-4); transition: transform .15s, color .15s; }
.etape-r.envoi { background: var(--produit); color: #fff; border-radius: 0 0 var(--r-g) var(--r-g); border-top: 0; }
.etape-r.envoi .sa-n { background: var(--jaune); border-color: var(--jaune); color: var(--encre); } .etape-r.envoi b { color: #fff; } .etape-r.envoi .res { color: rgba(255, 255, 255, .75); }
.etape-r.envoi .pts { color: var(--jaune); } .etape-r.envoi .lucide.fleche { color: #fff; } .etape-r.envoi:hover { background: var(--vert-nuit); }
.etape-r .reprendre { font-size: 11.5px; font-weight: 600; color: var(--jaune-texte); margin-left: 8px; }

/* les dépôts de classeur */
.depots { display: grid; gap: 10px; }
.depot { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border: 1.5px dashed var(--filet-fort); border-radius: var(--r-g); background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s; }
.depot:hover, .depot.survol { border-color: var(--jaune-fort); background: var(--miel); }
.depot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.depot b { display: block; font-size: 14px; } .depot span.d { display: block; font-size: 12.5px; color: var(--encre-3); margin-top: 1px; }
.depot .tuile-i { width: 40px; height: 40px; border-radius: 11px; }

/* les échanges */
.fil { display: grid; gap: 12px; }
.fil li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.fil .av { width: 32px; height: 32px; font-size: 11px; } .fil .cn .av { background: var(--produit); color: #fff; }
.fil li > div { padding: 10px 14px; border-radius: 4px 12px 12px 12px; background: var(--survol); min-width: 0; } .fil li.cn > div { background: var(--vert-pale); }
.fil b { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } .fil time { font-size: 12px; font-weight: 400; color: var(--encre-3); white-space: nowrap; }
.fil p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--encre-2); overflow-wrap: anywhere; }
.ecrire { display: flex; gap: 8px; margin-top: 14px; }
.ecrire input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--filet-fort); font: inherit; font-size: 14px; background: var(--surface); }
.ecrire input:focus { outline: 0; border-color: var(--jaune-fort); box-shadow: var(--anneau); }
.vus { display: grid; }
.vus li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--filet-2); font-size: 13.5px; color: var(--encre-2); }
.vus li:first-child { border-top: 0; } .vus .lucide { width: 15px; height: 15px; color: var(--encre-3); } .vus time { font-size: 12.5px; color: var(--encre-3); white-space: nowrap; }

/* ================================================================ vérification et envoi */
.verif-h { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(380px, 1fr); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.verif-h .dossier-t h1 { font-size: 30px; }
.v2-bilan-envoi { position: sticky; top: calc(var(--haut) + 12px); z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 22px; }
.bilan-t { display: grid; gap: 6px; }
.bilan-t > b { font-size: 15px; }
.v2-bilan-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--encre-2); } .v2-bilan-item .lucide { width: 18px; height: 18px; color: var(--at); flex: none; }
.v2-bilan-item.ok .lucide { color: var(--ok); } .v2-bilan-item b { font-size: 15px; }
.v2-progression { height: 6px; border-radius: 3px; background: var(--filet-2); overflow: hidden; margin: 4px 0 6px; }
.v2-progression span { display: block; height: 100%; width: 0; background: var(--produit); border-radius: 3px; transition: width .3s; }
.v2-envoi { display: grid; gap: 8px; justify-items: start; margin-top: 6px; } .v2-envoi .pourquoi { font-size: 12.5px; color: var(--encre-3); line-height: 1.4; }
.v2-envoye { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; margin: 0; } .v2-envoye .lucide { width: 17px; height: 17px; }
.v2-bloc > header .compte { margin-left: 2px; }
.v2-liste-liens { display: grid; }
.v2-liste-liens a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--filet-2); font-size: 13.5px; color: var(--encre-2); text-decoration: none; }
.v2-liste-liens li:last-child a { border-bottom: 0; } .v2-liste-liens a:hover { color: var(--encre); background: var(--surface-2); }
.v2-liste-liens .etape { font-size: 11.5px; font-weight: 600; color: var(--vert-fort); background: var(--vert-pale); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.v2-liste-liens .lucide { width: 15px; height: 15px; margin-left: auto; color: var(--encre-4); }
.v2-groupe { margin-bottom: 18px; } .v2-groupe:last-child { margin-bottom: 0; }
.v2-groupe-titre { display: flex; align-items: center; gap: 12px; padding: 6px 0 8px; border-bottom: 2px solid var(--filet); }
.v2-groupe-titre h3 { font-size: 14.5px; } .v2-groupe-titre .sa-n { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--survol); font-size: 11.5px; font-weight: 600; }
.v2-groupe-titre a { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; } .v2-groupe-titre a .lucide { width: 14px; height: 14px; }
.v2-controle { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(260px, 1.4fr) 22px; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--filet-2); }
.v2-controle:last-child { border-bottom: 0; }
.v2-controle .quoi-bloc { display: flex; flex-direction: column; gap: 3px; } .v2-controle .quoi { font-size: 13.5px; color: var(--encre); font-weight: 600; }
.v2-controle .verdict { font-size: 12.5px; font-weight: 500; color: var(--at); } .v2-controle.justifie .verdict { color: var(--encre-3); }
.v2-controle textarea { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--filet-fort); border-radius: var(--r); min-height: 40px; height: 40px; line-height: 1.45; resize: vertical; overflow: hidden; background: var(--surface); }
.v2-controle textarea:focus { outline: 0; border-color: var(--jaune-fort); box-shadow: var(--anneau); }
.v2-controle.justifie textarea { border-color: var(--ok-filet); background: var(--vert-doux); }
.v2-controle .coche { width: 20px; height: 20px; color: var(--filet-fort); } .v2-controle.justifie .coche { color: var(--ok); }
.v2-chiffres { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--encre-3); } .v2-chiffres b { color: var(--encre); font-variant-numeric: tabular-nums; }
.v2-conformes { margin-top: 14px; }
.v2-conformes summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--encre-3); padding: 8px 0; }
.v2-conformes summary::-webkit-details-marker { display: none; } .v2-conformes summary .chevron { width: 16px; height: 16px; transition: transform .15s; } .v2-conformes[open] summary .chevron { transform: rotate(90deg); }
.v2-table-cadre { overflow-x: auto; scrollbar-width: thin; }
table.v2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.v2-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); padding: 10px 12px; border-bottom: 1px solid var(--filet); background: var(--surface); }
.v2-table td { padding: 10px 12px; border-bottom: 1px solid var(--filet-2); color: var(--encre-2); } .v2-table tbody tr:hover td { background: var(--surface-2); }
.v2-table td.nombre, .v2-table th.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .v2-table td.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-table tr.replie { display: none; }
.v2-voir-tout { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--vert-fort); cursor: pointer; padding: 6px 8px; border-radius: var(--r); }
.v2-voir-tout:hover { background: var(--vert-pale); } .v2-voir-tout .lucide { width: 16px; height: 16px; }
.v2-discret { color: var(--encre-3); font-size: 13px; margin: 0; }

/* ================================================================ suivi de campagne */
.repart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-g); margin-bottom: 16px; }
.repart > a, .repart > div { padding: 16px 20px; border-left: 1px solid var(--filet-2); display: grid; gap: 4px; color: inherit; text-decoration: none !important; min-width: 0; }
.repart > a:first-child, .repart > div:first-child { border-left: 0; } .repart > a:hover { background: var(--miel); }
.repart b { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--encre); font-variant-numeric: tabular-nums; }
.repart span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--encre-3); } .repart span i { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--encre-4); }
.repart .en_cours i { background: var(--jaune); } .repart .soumis i { background: var(--vert); } .repart .valide i { background: var(--produit); } .repart .a_corriger i { background: var(--orange); } .repart .refus i { background: var(--encre-2); }
.repart-b { grid-column: 1 / -1; display: flex; height: 8px; margin: 0 20px 16px; border-radius: 4px; overflow: hidden; background: var(--filet-2); gap: 2px; }
.repart-b i { display: block; height: 100%; width: 0; transition: width 1s var(--doux); background: var(--encre-4); }
.repart-b i.en_cours { background: var(--jaune); } .repart-b i.soumis { background: var(--vert); } .repart-b i.valide { background: var(--produit); } .repart-b i.a_corriger { background: var(--orange); } .repart-b i.refus { background: var(--encre-2); }
.sa-suivi tr.hors, .sa-suivi tr.cache { display: none; }
.sa-ouverts { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--at-pale); color: var(--at); font-size: 12px; font-weight: 700; }
.sa-ok-n { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 13px; } .sa-ok-n .lucide { width: 14px; height: 14px; }
.sa-rien-suivi { display: grid; gap: 4px; padding: 28px 20px; text-align: center; color: var(--encre-3); font-size: 13.5px; } .sa-rien-suivi b { color: var(--encre); }
.exports { width: 320px; }
.exports a { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; } .exports a b { display: block; font-size: 13.5px; } .exports a small { display: block; font-size: 12px; color: var(--encre-3); }

/* ================================================================ la relecture d'un dossier */
.tete-o { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 24px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-g); margin-bottom: 16px; }
.tete-o h1 { font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tete-o .sous { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 13.5px; color: var(--encre-3); }
.tete-o .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.etapes-b { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.etapes-b a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--filet); color: var(--encre-2); font-size: 13px; font-weight: 500; text-decoration: none !important; }
.etapes-b a:hover { border-color: var(--filet-fort); color: var(--encre); }
.etapes-b .sa-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--survol); font-size: 11.5px; font-weight: 600; } .etapes-b .sa-n .lucide { width: 13px; height: 13px; }
.etapes-b a.pret .sa-n { background: var(--ok-pale); color: var(--ok); } .etapes-b a.on { background: var(--produit); border-color: var(--produit); color: #fff; } .etapes-b a.on .sa-n { background: rgba(255, 255, 255, .2); color: #fff; }
.etapes-b em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--at-pale); color: var(--at); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.etapes-b a.on em { background: var(--jaune); color: var(--encre); }
.v2-deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.v2-deux-colonnes .lateral { position: sticky; top: calc(var(--haut) + 12px); display: flex; flex-direction: column; }
.sa-choix { display: grid; gap: 8px; border: 0; padding: 0; margin: 0 0 12px; }
.sa-choix-o { display: grid; grid-template-columns: auto 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--r); cursor: pointer; }
.sa-choix-o:hover { border-color: var(--encre-4); } .sa-choix-o:has(input:checked) { border-color: var(--jaune-fort); background: var(--miel); box-shadow: var(--anneau); }
.sa-choix-o input { accent-color: var(--jaune-fort); } .sa-choix-i { width: 36px; height: 36px; border-radius: 10px; background: var(--survol); display: grid; place-items: center; color: var(--encre-2); } .sa-choix-i .lucide { width: 17px; height: 17px; }
.sa-choix-o b { display: block; font-size: 13.5px; } .sa-choix-o small { display: block; font-size: 12px; color: var(--encre-3); line-height: 1.35; }
.v2-formulaire { display: flex; flex-direction: column; gap: 9px; } .v2-formulaire label { font-size: 13px; font-weight: 600; color: var(--encre); } .v2-formulaire label .v2-discret { font-weight: 400; font-size: 12px; }
.v2-ligne-form { display: flex; gap: 8px; align-items: center; } .v2-ligne-form .v2-in { flex: 1; min-width: 0; height: 38px; }
.v2-plein { width: 100%; justify-content: center; margin-top: 12px; }
.v2-messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; max-height: 320px; overflow-y: auto; }
.v2-message { background: var(--survol); border-radius: 11px 11px 11px 3px; padding: 9px 12px; font-size: 13px; line-height: 1.45; max-width: 92%; color: var(--encre-2); }
.v2-message.cn { background: var(--vert-pale); align-self: flex-end; border-radius: 11px 11px 3px 11px; } .v2-message .qui { font-size: 11.5px; font-weight: 600; color: var(--encre-3); margin-bottom: 2px; }
pre.v2-relance { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--surface-2); border-radius: var(--r); padding: 14px; border: 1px solid var(--filet); line-height: 1.5; }

/* ================================================================ erreur */
.erreur-p { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.erreur-p .code { font-size: 64px; font-weight: 700; letter-spacing: -0.04em; color: var(--filet-fort); line-height: 1; margin-bottom: 8px; }
.erreur-p p { color: var(--encre-3); margin: 8px 0 18px; }