/* BTP Attestations — version web. Direction « Bleu ciel aéré » (couleurs du logo BTP Consultants). */
:root {
  --fond: #EEF7FC; --carte: #FFFFFF; --bleu: #62B5E5; --bleu-fonce: #1C6FA0; --bleu-survol: #14557B;
  --bleu-pale: #DCEFFA; --bord: #CFE6F5; --anthracite: #4D4C4D; --texte: #2B2A2B; --texte2: #5E5D5E;
  --ok-fond: #E6F4EA; --ok: #1E6B34; --alerte-fond: #FFF1DB; --alerte: #8A4B00; --erreur-fond: #FDE8E8; --erreur: #A3242B;
  --rayon: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--texte); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; }
a { color: var(--bleu-fonce); }
a:hover { color: var(--bleu-survol); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 28px; font-weight: 800; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
.discret { color: var(--texte2); font-size: 13px; }

/* En-tête */
.entete { display: flex; align-items: center; gap: 16px; padding: 14px 24px; flex-wrap: wrap; }
.entete img { height: 34px; width: auto; }
.entete .espace { flex: 1; }
.onglets { display: flex; gap: 4px; background: var(--carte); padding: 5px; border-radius: 999px; flex-wrap: wrap; }
.onglets a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--anthracite); font-weight: 600; font-size: 14px; }
.onglets a.actif { background: var(--bleu); color: #0F2533; }
.rond { width: 42px; height: 42px; border-radius: 999px; background: var(--anthracite); color: #fff; display: inline-flex;
        align-items: center; justify-content: center; font-weight: 700; text-decoration: none; font-size: 14px; }
.rond:hover { background: var(--texte); color: #fff; }

/* Mise en page : panneau des affaires + contenu */
.page { display: flex; gap: 20px; padding: 0 24px 32px; align-items: flex-start; }
.panneau { flex: 0 0 260px; background: var(--carte); border-radius: var(--rayon); padding: 16px; position: sticky; top: 12px; }
.titre-panneau { display: flex; justify-content: space-between; align-items: center; }
.btn-icone { border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--texte2); cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.btn-icone:hover, .btn-icone:focus-visible { background: var(--fond); color: var(--texte); }
body.sans-panneau .panneau { display: none; }
.entete .bascule-panneau { display: none; margin-right: 12px; }
body.sans-panneau .entete .bascule-panneau { display: inline-flex; }
.panneau input[type=search] { width: 100%; margin: 10px 0; }
.panneau ul { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.panneau li a { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--texte); }
.panneau li a:hover { background: var(--fond); }
.panneau li a.actif { background: var(--bleu-pale); outline: 1px solid var(--bleu); }
.panneau li small { display: block; color: var(--texte2); font-size: 12px; }
.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.carte { background: var(--carte); border-radius: var(--rayon); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.carte.large { grid-column: span 2; }
.carte.accent { border: 2px solid var(--bleu); }
.ligne { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ligne .espace { flex: 1; }
.infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.infos div span { display: block; }
.infos div span:first-child { color: var(--texte2); font-size: 12px; }
.infos div span:last-child { font-weight: 600; }

/* Badges */
.badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge.ok { background: var(--ok-fond); color: var(--ok); }
.badge.alerte { background: var(--alerte-fond); color: var(--alerte); }
.badge.neutre { background: var(--fond); color: var(--texte2); }
.badge.ref { background: var(--fond); color: var(--bleu-fonce); }
.etat-complete { color: var(--ok); font-weight: 700; }
.etat-incomplete { color: var(--alerte); font-weight: 700; }
.etat-vide, .etat-facultatif { color: var(--texte2); }

/* Formulaires */
label { font-size: 14px; }
input[type=text], input[type=search], input[type=password], input[type=number], select, textarea {
  font: inherit; padding: 9px 11px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; color: var(--texte); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }
.champs { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 8px 16px; align-items: center; }
.champs input, .champs select { width: 100%; }
fieldset { border: 1px solid var(--bord); border-radius: 12px; padding: 12px 16px; margin: 0; }
legend { font-weight: 700; padding: 0 6px; }
.choix { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.choix label { display: inline-flex; gap: 6px; align-items: center; }
.nombres { display: flex; gap: 28px; flex-wrap: wrap; }
.nombres label { display: flex; flex-direction: column; gap: 4px; }
.nombres input, .nombres select { width: 90px; text-align: center; text-align-last: center; }
table.tableau { border-collapse: collapse; width: 100%; }
table.tableau th, table.tableau td { padding: 8px 10px; border-bottom: 1px solid var(--bord); text-align: left; }
table.tableau th { color: var(--texte2); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
table.tableau input { width: 110px; }

/* Boutons : principal à droite, autres à sa gauche (même convention que l'application Windows) */
.btn { font: inherit; font-weight: 700; font-size: 14px; border-radius: 12px; padding: 10px 18px; cursor: pointer; text-decoration: none;
       display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--bord); background: #fff; color: var(--texte); }
.btn:hover { background: var(--fond); color: var(--texte); }
.btn.principal { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
.btn.principal:hover { background: var(--bleu-survol); color: #fff; }
.btn.danger { color: var(--erreur); }
.btn.petit { padding: 6px 12px; font-size: 13px; }
.barre { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--bord); margin-top: 6px; }
.barre .gauche { margin-right: auto; }

/* Messages */
.messages { display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 10px 14px; border-radius: 12px; font-size: 14px; white-space: pre-line; }
.msg.ok { background: var(--ok-fond); color: var(--ok); }
.msg.alerte { background: var(--alerte-fond); color: var(--alerte); }
.msg.erreur { background: var(--erreur-fond); color: var(--erreur); }
.encadre { background: var(--fond); border-radius: 12px; padding: 14px 16px; white-space: pre-line; font-size: 14px; }

/* Étapes de génération */
.etapes { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.etapes li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--carte); font-size: 13px; color: var(--texte2); }
.etapes li .num { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
                  border: 2px solid var(--bord); font-weight: 700; font-size: 12px; }
.etapes li.fait .num { background: var(--bleu); border-color: var(--bleu); color: #0F2533; }
.etapes li.courant { background: var(--bleu-fonce); color: #fff; font-weight: 700; }
.etapes li.courant .num { border-color: #fff; color: #fff; }

/* Connexion */
.connexion { max-width: 420px; margin: 10vh auto; }

/* Résultats de recherche d'entreprise */
.resultats { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.resultats button { text-align: left; font: inherit; border: 1px solid var(--bord); background: #fff; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.resultats button:hover { background: var(--fond); }

@media (max-width: 1000px) {
  .grille { grid-template-columns: 1fr; }
  .carte.large { grid-column: auto; }
}
@media (max-width: 760px) {
  .page { flex-direction: column; padding: 0 12px 24px; }
  .panneau { position: static; width: 100%; flex: none; }
  .champs, .infos { grid-template-columns: 1fr; }
  .entete { padding: 12px; }
}

/* Bouton indisponible (ex. Générer avant import du PDF) */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* Tableau RSEE : colonnes triables */
th[data-tri] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-tri]::after { content: " ↕"; opacity: .35; font-size: .85em; }
th[data-tri].tri-asc::after { content: " ▲"; opacity: .9; }
th[data-tri].tri-desc::after { content: " ▼"; opacity: .9; }
th[data-tri]:hover, th[data-tri]:focus-visible { background: rgba(0,0,0,.04); }

/* Fenêtre « Associer un PDF » (RSEE) */
dialog.fenetre { border: none; border-radius: var(--rayon); padding: 24px; background: var(--carte); color: var(--texte); width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(20,40,70,.25); }
dialog.fenetre::backdrop { background: rgba(20,40,70,.35); }
dialog.fenetre h2 { margin-top: 0; }
.depot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; border: 2px dashed var(--bleu);
  border-radius: 12px; background: var(--fond); cursor: pointer; text-align: center; transition: background .15s, border-color .15s; }
.depot.survol, .depot:hover { background: var(--bleu-pale); border-color: var(--bleu-fonce); }
.depot input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.depot:focus-within { outline: 2px solid var(--bleu-fonce); outline-offset: 2px; }
#liste-pdf { margin: 10px 0 0; padding-left: 20px; }
.erreur-texte { color: var(--erreur); font-weight: 600; }
.saisie-retours th, .saisie-retours td { padding-left: 6px; padding-right: 6px; }
.saisie-retours input, .saisie-retours select { width: 100%; padding-left: 8px; padding-right: 8px; }
.saisie-retours [data-champ=quantite_entreprise] { width: 80px; }
.saisie-retours [data-champ=unite_entreprise] { width: 56px; }
.saisie-retours [data-champ=procede_entreprise] { min-width: 150px; }
.saisie-retours [data-champ=inies_entreprise] { width: 96px; }
.saisie-retours [data-champ=ecart] { width: 140px; }
.saisie-retours [data-recopier] { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
.saisie-retours [data-champ=unite_entreprise] { min-width: 56px; }
.saisie-retours tr.recopier th { padding-top: 0; }

/* Tableau RSEE : grandes cases à cocher, cellule entière cliquable */
.tableau td.case, .tableau th.case { padding: 0; width: 52px; }
.tableau .case label { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 14px; cursor: pointer; }
.tableau .case input[type=checkbox] { width: 22px; height: 22px; margin: 0; cursor: pointer; accent-color: var(--bleu-fonce); }
.lignes-rsee tbody tr { cursor: pointer; }
.lignes-rsee tbody tr:hover td { background: var(--fond); }
.lignes-rsee tbody tr.cochee td { background: var(--bleu-pale); }

/* Fiche intervenant : choix « Ajouter depuis l’annuaire » / « Rechercher l’entreprise » */
.choix-source { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 12px; }
@media (max-width: 640px) { .choix-source { grid-template-columns: 1fr; } }
.choix-source .source { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px 16px;
  border: 2px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); cursor: pointer; font: inherit; }
.choix-source .source:hover:not(:disabled) { border-color: var(--bleu); }
.choix-source .source.actif { border-color: var(--bleu-fonce); background: var(--bleu-pale); }
.choix-source .source:disabled { opacity: .55; cursor: not-allowed; }
.choix-source .source strong { font-size: 15px; color: var(--bleu-fonce); }
#panneau-annuaire input[type=search] { width: 100%; margin-bottom: 8px; }
.choix-fiche { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--texte); }
.choix-fiche:hover, .choix-fiche:focus-visible { background: var(--bleu-pale); }
.choix-fiche[hidden] { display: none; }

/* Attestations : dépôt du fichier directement sur la carte */
.depot-carte { margin: 6px 0; }
.depot { position: relative; }
.petit-depot { padding: 16px 12px; gap: 2px; }
.petit-depot.rempli { border-style: solid; border-color: var(--bord); background: var(--carte); }
.petit-depot.envoi { opacity: .7; pointer-events: none; }
.carte.survol-depot { outline: 3px dashed var(--bleu-fonce); outline-offset: -6px; background: var(--bleu-pale); }
.carte.survol-depot .depot { background: var(--bleu-pale); border-color: var(--bleu-fonce); }

/* Onglet Contrôle RSEE : dépôt centré */
.rsee-accueil { text-align: center; }
.rsee-accueil > p { max-width: 640px; margin-left: auto; margin-right: auto; }
.depot-centre { max-width: 560px; margin: 24px auto 8px; }
.depot-centre .depot { padding: 56px 24px; }
.depot-centre .depot strong { font-size: 17px; }

/* Case à cocher / bouton radio + texte : le texte long revient à la ligne sous lui-même, jamais sous la case */
.choix-case { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start; margin: 6px 0; cursor: pointer; }
.choix-case > input[type=checkbox], .choix-case > input[type=radio] { margin: 3px 0 0; width: 16px; height: 16px; }
.choix-case > :not(input) { grid-column: 2; }

/* Bandeau : rappel de l'affaire en cours */
.rappel-affaire { display: flex; flex-direction: column; justify-content: center; margin-left: 18px; padding: 4px 14px;
  border-left: 3px solid var(--bleu); text-decoration: none; color: var(--texte); max-width: 320px; line-height: 1.25; }
.rappel-affaire span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rappel-affaire small { color: var(--texte2); font-size: 12px; }
.rappel-affaire:hover span { color: var(--bleu-fonce); }
@media (max-width: 760px) { .rappel-affaire { display: none; } }

/* Carte d'attestation : champ bâtiment inutile (attestation unique, thermique) grisé */
.fige input:disabled { background: var(--fond); color: var(--texte2); border-style: dashed; cursor: not-allowed; }
.fige input:disabled::placeholder { color: var(--texte2); font-style: italic; }

/* Onglet Permis : valeurs pré-remplies depuis l'arrêté */
.lu-arrete { margin-bottom: 10px; }
.champs input.lu { background: var(--ok-fond); border-color: #9fd3ad; }
.champs input.a-verifier { background: var(--alerte-fond); border-color: #e9b46a; }

/* Bloc repliable (« Prendre un autre composant ») */
details.repliable > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
details.repliable > summary::-webkit-details-marker { display: none; }
details.repliable > summary h2 { margin: 0; }
details.repliable > summary h2::before { content: "▸ "; color: var(--bleu-fonce); }
details.repliable[open] > summary h2::before { content: "▾ "; }
details.repliable[open] > summary .discret { display: none; }

/* Compte rendu -> fiches : un contact par carte */
.contact-cr { gap: 8px; }
.contact-cr .role-cr { min-width: 230px; font-weight: 600; }
.grille-cr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 12px; }
.grille-cr label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--texte2); }
.grille-cr label.large { grid-column: span 3; }
.grille-cr input { font-size: 14px; color: var(--texte); padding: 7px 9px; border: 1px solid var(--bord); border-radius: 10px; background: var(--carte); }
.choix-case[hidden] { display: none; }
.sirene-cr > span { font-size: 13px; color: var(--texte2); white-space: nowrap; }
@media (max-width: 900px) { .grille-cr { grid-template-columns: 1fr 1fr; } .grille-cr label.large { grid-column: span 2; } }