/* Ardila Devis — interface marque blanche. Les couleurs sont injectées depuis
   le profil de l'entreprise (variables CSS), les polices sont celles de sa
   charte, servies localement. */
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-400.ttf"); font-weight: 400; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-600.ttf"); font-weight: 600; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-700.ttf"); font-weight: 700; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/LibreFranklin-400.ttf"); font-weight: 400; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/LibreFranklin-600.ttf"); font-weight: 600; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/LibreFranklin-700.ttf"); font-weight: 700; }

:root {
  --primaire: #0b3f6e; --secondaire: #0082c9; --accent: #fcba02; --texte: #202c40;
  --gris: #6f86ac; --gris-clair: #edf2fa; --fond: #f6f8fb; --blanc: #fff; --bord: #d5dce8;
  --rouge: #c0392b; --orange: #d98c00; --vert: #2e9e76;
  --titres: "Outfit", system-ui, sans-serif; --corps: "Libre Franklin", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 14px; }
h1, h2, h3, legend { font-family: var(--titres); color: var(--primaire); font-weight: 600; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 16px; margin-bottom: 8px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin-bottom: 6px; }
a { color: var(--secondaire); }

.entete { display: flex; align-items: center; gap: 28px; padding: 10px 24px; background: var(--blanc); border-bottom: 3px solid var(--accent); position: sticky; top: 0; z-index: 5; }
.marque { display: flex; align-items: center; gap: 12px; font-family: var(--titres); font-weight: 600; color: var(--primaire); font-size: 16px; }
.marque img { display: block; }
.lien-portail { font: 600 13px var(--titres); color: var(--gris); text-decoration: none; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 8px; }
.lien-portail::before { content: "\2190  "; }
.lien-portail:hover { color: var(--primaire); border-color: var(--primaire); }
.marque img[src]:not([src=""]) + span { display: none; }
.onglets { display: flex; gap: 4px; }
.onglets button { border: 0; background: transparent; padding: 10px 14px; font: 600 14px var(--titres); color: var(--gris); border-radius: 8px; cursor: pointer; }
.onglets button:hover { background: var(--gris-clair); color: var(--primaire); }
.onglets button.actif { background: var(--primaire); color: var(--blanc); }
.signature-outil { margin-left: auto; font-size: 11px; color: var(--gris); }

main { max-width: 1320px; margin: 0 auto; padding: 22px 24px 60px; }
.barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.barre .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.numero { color: var(--secondaire); font-weight: 400; }
.aide { color: var(--gris); font-size: 12.5px; }
.erreur { color: var(--rouge); }
.vide, .chargement { color: var(--gris); padding: 40px; text-align: center; }

.btn { border: 1px solid var(--bord); background: var(--blanc); color: var(--primaire); padding: 8px 14px; border-radius: 8px; font: 600 13px var(--titres); cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { border-color: var(--secondaire); }
.btn.principal { background: var(--primaire); color: var(--blanc); border-color: var(--primaire); }
.btn.principal:hover { background: var(--secondaire); border-color: var(--secondaire); }
.btn.petit { padding: 4px 9px; font-size: 12px; }
.btn.lien { border: 0; background: transparent; padding: 0 0 6px; color: var(--secondaire); }
.btn.desactive, .btn:disabled { opacity: .45; cursor: not-allowed; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--gris-clair); color: var(--gris); vertical-align: middle; }
.badge.envoye { background: #e3f1fb; color: var(--secondaire); }
.badge.accepte, .badge.payee { background: #e3f6ee; color: var(--vert); }
.badge.emise, .badge.facture { background: #fff4d6; color: #8a5a00; }

table { border-collapse: collapse; width: 100%; }
.liste { overflow-x: auto; }
.tableau-liste { background: var(--blanc); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); min-width: 720px; }
.tableau-liste .num, .tableau-liste td:first-child { white-space: nowrap; }
.tableau-liste th { text-align: left; font: 600 12px var(--titres); color: var(--gris); padding: 10px 12px; border-bottom: 1px solid var(--bord); }
.tableau-liste td { padding: 10px 12px; border-bottom: 1px solid var(--gris-clair); }
.tableau-liste tr[data-ouvrir] { cursor: pointer; }
.tableau-liste tr[data-ouvrir]:hover td { background: var(--gris-clair); }
.num { text-align: right; }

.colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
fieldset { border: 0; background: var(--blanc); border-radius: 10px; padding: 14px 16px 16px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); }
fieldset:disabled { opacity: .7; }
legend { padding: 0 6px; font-size: 15px; }
.grille { display: grid; gap: 10px 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l2 { grid-column: span 2; }
.l3 { grid-column: span 3; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 600; }
label.case { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 6px; color: var(--texte); font-weight: 400; font-size: 13px; }
label.mini { flex-direction: row; align-items: center; gap: 4px; font-size: 11px; font-weight: 400; margin-top: 2px; }
input, select, textarea { font: 400 13.5px var(--corps); color: var(--texte); border: 1px solid var(--bord); border-radius: 7px; padding: 7px 9px; background: var(--blanc); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(0, 130, 201, .35); border-color: var(--secondaire); }
input[readonly] { background: var(--gris-clair); }
input[type=checkbox] { width: auto; }
textarea { resize: vertical; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--secondaire); font-weight: 600; font-size: 12.5px; }
details .grille { margin-top: 8px; }
.resultat { margin-top: 10px; font-size: 12.5px; color: var(--texte); background: var(--gris-clair); padding: 8px 10px; border-radius: 7px; border-left: 3px solid var(--accent); }

.lignes th { text-align: left; font: 600 11px var(--titres); color: var(--gris); padding: 4px 6px; }
.lignes td { padding: 4px 4px; vertical-align: top; border-top: 1px solid var(--gris-clair); }
.lignes tr.section td { background: var(--gris-clair); }
.lignes tr.section input { font-weight: 700; color: var(--primaire); }
.lignes tr.texte textarea { color: var(--gris); }
.lignes tr.offert .montant { color: var(--secondaire); }
.lignes td:first-child { width: 36px; padding-top: 10px; color: var(--gris); font-size: 12px; }
.lignes .court { width: 74px; text-align: right; }
.lignes .montant { width: 92px; padding-top: 10px; white-space: nowrap; font-weight: 600; }
.lignes textarea { min-height: 40px; }
.outils { display: flex; gap: 2px; padding-top: 4px; }
.outils button { border: 1px solid var(--bord); background: var(--blanc); color: var(--gris); border-radius: 5px; width: 24px; height: 24px; cursor: pointer; font-size: 11px; padding: 0; }
.outils button:hover { color: var(--primaire); border-color: var(--secondaire); }
.ajouts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.ajouts select { width: auto; max-width: 420px; }
.acomptes td { padding: 3px 4px 3px 0; }

.panneau { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; }
.totaux, .controles, .boutons, .apercu { background: var(--blanc); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); }
.totaux div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.totaux .ttc { border-top: 1px solid var(--bord); margin-top: 4px; padding-top: 8px; font-size: 15px; }
.totaux .prime { color: var(--secondaire); }
.totaux .reste { background: var(--gris-clair); margin: 6px -8px 0; padding: 8px; border-radius: 7px; border-left: 3px solid var(--accent); font-size: 14px; }
.controles ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.controles li { margin-bottom: 5px; }
.controles li.bloquant { color: var(--rouge); }
.controles li.important { color: var(--orange); }
.controles li.info { color: var(--gris); }
.controles .ok { color: var(--vert); margin: 0; font-size: 13px; }
.boutons { display: flex; flex-direction: column; gap: 8px; }
.boutons .btn { text-align: center; }
.apercu { padding: 0; overflow: hidden; }
.apercu-barre { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12px; color: var(--gris); }
.apercu-barre span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu iframe { width: 100%; height: 440px; border: 0; border-top: 1px solid var(--bord); }

.parametres .carte { background: var(--blanc); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); }
.parametres p { font-size: 13px; line-height: 1.5; }

@media (max-width: 1000px) {
  .colonnes { grid-template-columns: 1fr; }
  .panneau { position: static; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ——— Tableau de bord, suivi, connexion, photos, signature, mobile ——— */
.pastille { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 11px; margin-left: 4px; }
.etat-connexion { margin-left: auto; font-size: 12px; }
.etat-connexion .ok { color: var(--vert); }
.etat-connexion .ko { color: var(--rouge); }
.etat-connexion .mode-local { color: var(--orange); font-weight: 600; }
.signature-outil { margin-left: 16px; }
.bandeau { background: #fff4d6; color: #8a5a00; border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin: 0 0 16px; }
.bandeau.info { background: #e3f1fb; color: #0b3f6e; border-left-color: var(--secondaire); }
.bandeau.alerte { background: #fde8e6; color: var(--rouge); border-left-color: var(--rouge); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tuile { background: var(--blanc); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--accent); }
.tuile.alerte { border-top-color: var(--rouge); }
.tuile-titre { font-size: 12px; color: var(--gris); font-weight: 600; }
.tuile strong { font-family: var(--titres); font-size: 22px; color: var(--primaire); }
.tuile-detail { font-size: 12px; color: var(--gris); }
.colonnes-tableau { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.carte { background: var(--blanc); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); }
.suivi { margin: 0; padding-left: 18px; font-size: 13.5px; }
.suivi li { margin-bottom: 8px; }
.suivi li.bloquant { color: var(--rouge); }
.suivi li.important { color: var(--orange); }
.suivi li.info { color: var(--gris); }
.suivi a { color: inherit; text-decoration: none; }
.suivi a:hover { text-decoration: underline; }
.tableau-liste.compact { min-width: 0; box-shadow: none; }
.tableau-liste.compact td { padding: 7px 8px; font-size: 13px; }
.ok { color: var(--vert); }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.photos figure { margin: 0; background: var(--gris-clair); border-radius: 8px; overflow: hidden; }
.photos img { width: 100%; height: 110px; object-fit: cover; display: block; }
.photos figcaption { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; font-size: 11px; color: var(--gris); }
.bloc-signature { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.bloc-signature h3 { margin: 0; }
.bloc-signature p { margin: 0; font-size: 12.5px; }
.lien-signature input { font-size: 11.5px; color: var(--gris); margin-bottom: 6px; }
.lien-signature .ligne { display: flex; gap: 6px; flex-wrap: wrap; }
.ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn.secondaire { border-color: var(--accent); }
.defile { overflow-x: auto; }
.barre-mobile { display: none; }
@media (max-width: 1000px) {
  .entete { flex-wrap: wrap; gap: 10px 16px; padding: 8px 14px; }
  .signature-outil { display: none; }
  main { padding: 14px 12px 90px; }
  .colonnes-tableau { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l3 { grid-column: span 2; }
  input, select, textarea { font-size: 16px; padding: 10px 11px; }
  .btn { padding: 11px 16px; font-size: 14px; }
  .outils button { width: 34px; height: 34px; font-size: 14px; }
  .lignes .court { width: 84px; }
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--blanc); border-top: 1px solid var(--bord); padding: 10px 14px; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; z-index: 6; box-shadow: 0 -2px 8px rgba(11, 63, 110, .08); }
  .barre-mobile strong { color: var(--primaire); }
}
@media (max-width: 600px) {
  .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .l2, .l3 { grid-column: span 1; }
  .tuiles { grid-template-columns: 1fr 1fr; }
  .onglets button { padding: 8px 10px; font-size: 13px; }
}

/* Catégorie de revenus du ménage (couleurs officielles MaPrimeRénov') */
.pastille-menage { display: inline-block; padding: 2px 10px; border-radius: 99px; font-weight: 600; font-size: 12.5px; margin-right: 6px; }
.pastille-menage.bleu { background: #d6ecfa; color: #0a4f7a; }
.pastille-menage.jaune { background: #fbf1c4; color: #6b5300; }
.pastille-menage.violet { background: #e4e0f2; color: #45327a; }
.pastille-menage.rose { background: #f8dcdc; color: #862a2a; }

/* Projets CEE : recherche, cartes projet, étapes */
.recherche { font-size: 16px; padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); }
.cartes-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.projet { background: var(--blanc); border-radius: 10px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); cursor: pointer; display: flex; flex-direction: column; gap: 8px; border-left: 3px solid var(--accent); }
.projet:hover { box-shadow: 0 3px 10px rgba(11, 63, 110, .12); }
.projet-tete { display: flex; flex-direction: column; gap: 2px; }
.projet-tete strong { font-family: var(--titres); color: var(--primaire); font-size: 15px; }
.projet-quoi { font-size: 13px; }
.projet-suite { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.etapes { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.etapes li { font-size: 11px; padding: 3px 8px; border-radius: 99px; background: var(--gris-clair); color: var(--gris); }
.etapes li.fait { background: #e3f6ee; color: var(--vert); }
.etapes li.fait::before { content: "\2713  "; }
.etapes li.encours { background: var(--primaire); color: var(--blanc); font-weight: 600; }
.ok { color: var(--vert); }

/* Nouveau projet CEE */
.colonnes-projet { max-width: 980px; }
.barre-creer { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.btn.grand { padding: 12px 20px; font-size: 14.5px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.barre-creer .btn.grand { width: auto; }
.btn.grand small { font-weight: 400; font-size: 11.5px; opacity: .85; }

/* Import d'un devis */
.bandeau.import p { margin: 0 0 6px; }
.alerte-texte { color: var(--rouge); font-weight: 600; }
.voile { position: fixed; inset: 0; background: rgba(20, 30, 50, .45); display: grid; place-items: center; z-index: 50; }
.voile[hidden] { display: none; }
.voile > div { background: var(--blanc); border-radius: 12px; padding: 22px 28px; display: flex; flex-direction: column; gap: 6px; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .2); }
.voile strong { font-family: var(--titres); color: var(--primaire); font-size: 16px; }
@media (max-width: 700px) { .cartes-projets { grid-template-columns: 1fr; } .recherche { font-size: 15px; } }

/* Statuts : vert = validé, bleu = en attente, rouge = refusé, gris = à faire */
:root { --st-valide: #2e9e76; --st-valide-fond: #e3f6ee; --st-attente: #1f6fd1; --st-attente-fond: #e4efff; --st-refuse: #d93025; --st-refuse-fond: #fde8e6; --st-afaire: #7a8699; --st-afaire-fond: #eef1f5; }
.projet.etat-valide { border-left: 5px solid var(--st-valide); }
.projet.etat-attente { border-left: 5px solid var(--st-attente); }
.projet.etat-refuse { border-left: 5px solid var(--st-refuse); background: #fffafa; }
.projet.etat-afaire { border-left: 5px solid var(--st-afaire); }
.projet-tete { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10px; }
.projet-tete > div { display: flex; flex-direction: column; gap: 2px; }
.statut-projet { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.etat-valide .statut-projet { background: var(--st-valide-fond); color: var(--st-valide); }
.etat-attente .statut-projet { background: var(--st-attente-fond); color: var(--st-attente); }
.etat-refuse .statut-projet { background: var(--st-refuse-fond); color: var(--st-refuse); }
.etat-afaire .statut-projet { background: var(--st-afaire-fond); color: var(--st-afaire); }
.etapes li.valide { background: var(--st-valide-fond); color: var(--st-valide); }
.etapes li.valide::before { content: "\2713  "; }
.etapes li.attente { background: var(--st-attente-fond); color: var(--st-attente); font-weight: 600; }
.etapes li.refuse { background: var(--st-refuse-fond); color: var(--st-refuse); font-weight: 700; }
.etapes li.refuse::before { content: "\2715  "; }
.etapes li.afaire { background: var(--st-afaire-fond); color: var(--st-afaire); }
.jauge { flex: 1; height: 6px; background: var(--st-afaire-fond); border-radius: 99px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--st-attente), var(--st-valide)); border-radius: 99px; }
.pct { font-weight: 700; font-size: 12.5px; color: var(--primaire); min-width: 38px; text-align: right; }
.projet-suite { gap: 10px; }

/* Pièces du dossier (panneau de droite) */
.pieces { background: var(--blanc); border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(11, 63, 110, .08); margin-bottom: 12px; }
.pieces-tete { display: flex; justify-content: space-between; align-items: center; }
.pieces .jauge { margin: 6px 0 10px; }
.pieces ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.piece { display: grid; grid-template-columns: 86px 1fr; gap: 4px 8px; align-items: center; font-size: 12.5px; }
.piece-nom small { display: block; color: var(--st-refuse); }
.piece-action { grid-column: 2; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.piece-action:empty { display: none; }
.pastille-statut { font-size: 10.5px; font-weight: 700; text-align: center; padding: 3px 6px; border-radius: 99px; }
.piece.valide .pastille-statut { background: var(--st-valide-fond); color: var(--st-valide); }
.piece.attente .pastille-statut { background: var(--st-attente-fond); color: var(--st-attente); }
.piece.refuse .pastille-statut { background: var(--st-refuse-fond); color: var(--st-refuse); }
.piece.afaire .pastille-statut { background: var(--st-afaire-fond); color: var(--st-afaire); }
label small.aide { font-weight: 400; font-size: 11px; }

/* ——— Espace CEE ————————————————————————————————————————————————— */
.cee-carte { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(59,63,146,.08); margin-bottom: 14px; }
.cee-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cee-entete-actions { display: flex; gap: 8px; }
.cee-colonnes { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cee-colonnes > .cee-carte { min-width: 300px; }
.cee-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.cee-grille label, .cee-acces label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.cee-grille input, .cee-grille select, .cee-acces input { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--bord, #d9dbee); border-radius: 7px; }
.cee-pastille { display: inline-block; color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-top: 6px; margin-right: 6px; }
.cee-rebours { display: inline-block; color: #fff; font-weight: 700; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; }
.cee-tableau { border-collapse: collapse; width: 100%; }
.cee-tableau th { text-align: left; font-size: 12px; color: var(--gris, #6b6d8f); padding: 8px; border-bottom: 1px solid #eef; }
.cee-tableau td { padding: 9px 8px; border-bottom: 1px solid #f0f1fa; }
.cee-tableau tbody tr { cursor: pointer; }
.cee-tableau tbody tr:hover { background: #f7f8ff; }
.cee-bandeau { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cee-ardi { border-left: 4px solid #a9acda; background: #f4f5ff; }
.cee-conseil { margin-top: 8px; }
.cee-doc { display: flex; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.cee-piece { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f1fa; }
.cee-point { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f5f5fb; font-size: 13.5px; }
.cee-point.ok span { color: #166534; }
.cee-point.ko span { color: #b91c1c; }
.cee-journal { max-height: 300px; overflow: auto; }
.cee-j { padding: 7px 0; border-bottom: 1px solid #f0f1fa; font-size: 13px; }
.cee-resultat div { margin-bottom: 10px; display: flex; flex-direction: column; }
.cee-ligne-alerte { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; cursor: pointer; }
.btn.danger { background: #cf3026; color: #fff; }

/* ——— ARDI, l'assistant mascotte (widget flottant, toutes vues) ——— */
#ardi-racine { position: fixed; right: 18px; bottom: 18px; z-index: 300; font-family: var(--corps); }
#ardi-bulle { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 0; }
#ardi-bulle img { width: 62px; height: auto; filter: drop-shadow(0 4px 10px rgba(59, 63, 146, .35)); transition: transform .15s; }
#ardi-bulle:hover img { transform: scale(1.07); }
#ardi-bulle span { font-size: 11px; font-weight: 700; color: #3b3f92; background: #fff; border: 1px solid #a9acda; border-radius: 999px; padding: 1px 9px; }
#ardi-panneau { position: fixed; right: 18px; bottom: 104px; width: min(380px, calc(100vw - 24px)); height: min(540px, calc(100vh - 130px));
  background: #fff; border: 1px solid var(--bord); border-radius: 14px; box-shadow: 0 12px 40px rgba(32, 44, 64, .22);
  display: flex; flex-direction: column; overflow: hidden; }
.ardi-tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #3b3f92; color: #fff; }
.ardi-tete img { width: 34px; height: auto; }
.ardi-tete div { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ardi-tete strong { font-size: 15px; letter-spacing: .03em; }
.ardi-tete span { font-size: 11.5px; color: #a9acda; }
.ardi-tete button { background: none; border: none; color: #a9acda; cursor: pointer; font-size: 12px; }
.ardi-tete button:hover { color: #fff; }
#ardi-fermer { font-size: 20px; line-height: 1; }
.ardi-fil { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #f7f8fd; }
.ardi-msg { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
.ardi-msg p { margin: 0 0 6px; }
.ardi-msg p:last-child { margin-bottom: 0; }
.ardi-msg.moi { align-self: flex-end; background: #3b3f92; color: #fff; border-bottom-right-radius: 4px; }
.ardi-msg.lui { align-self: flex-start; background: #fff; border: 1px solid #e2e4f5; border-bottom-left-radius: 4px; position: relative; padding-left: 40px; }
.ardi-msg.lui img { position: absolute; left: 8px; top: 8px; width: 24px; height: auto; }
.ardi-msg.pense { color: var(--gris); font-style: italic; }
.ardi-saisie { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--bord); background: #fff; }
.ardi-saisie textarea { flex: 1; resize: none; border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; font-family: var(--corps); font-size: 13.5px; }
.ardi-saisie button { background: #3b3f92; color: #fff; border: none; border-radius: 8px; padding: 0 14px; font-weight: 600; cursor: pointer; }
.ardi-saisie button:hover { background: #2e3275; }
@media print { #ardi-racine { display: none; } }
.cee-ardi-avatar { width: 22px; height: auto; vertical-align: -6px; margin-right: 4px; }
#ardi-panneau[hidden] { display: none; }
.ardi-msg ul { margin: 0 0 6px; padding-left: 18px; }
.ardi-msg li { margin-bottom: 3px; }
.ardi-msg .ardi-titre { font-weight: 700; color: #3b3f92; }
.ardi-msg.moi .ardi-titre { color: #fff; }
.ardi-suggestions { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; }
.ardi-suggestions button { background: #fff; border: 1px solid #a9acda; color: #3b3f92; border-radius: 999px;
  padding: 5px 11px; font-size: 12.5px; cursor: pointer; font-family: var(--corps); text-align: left; }
.ardi-suggestions button:hover { background: #eef0fa; }
@media (max-width: 640px) {
  #ardi-panneau { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    border-radius: 0; border: none; z-index: 400; }
  .ardi-saisie { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #ardi-bulle img { width: 54px; }
}

/* ——— Revue mobile (26/09/2026) : plus AUCUN champ sous 16 px sur écran
   tactile — sinon iOS zoome sur le champ et la page reste zoomée. Ce bloc est
   en FIN de feuille pour gagner la cascade sur les règles ci-dessus. ——— */
@media (max-width: 1000px) {
  input, select, textarea,
  .cee-grille input, .cee-grille select, .cee-acces input,
  .ardi-saisie textarea, .lien-signature input {
    font-size: 16px;
  }
  .cee-grille input, .cee-grille select, .cee-acces input { padding: 10px 11px; }
}
@media (max-width: 640px) {
  .cee-tableau { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cee-entete-actions { width: 100%; }
  .cee-entete-actions .btn.principal { flex: 1; }
  .cee-carte { padding: 13px 14px; }
  /* !important : les cartes portent des flex en style inline. Sur téléphone, on empile. */
  .cee-colonnes > .cee-carte { min-width: 0 !important; flex: 1 1 100% !important; }
}
@media (max-width: 640px) {
  /* La barre d'onglets défile horizontalement au doigt plutôt que de déborder. */
  .entete { flex-wrap: nowrap; }
  .onglets { overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1; min-width: 0;
    scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets button { white-space: nowrap; flex: none; }
  /* L'état de connexion ne s'affiche que s'il alerte (mode local, erreur). */
  .etat-connexion { display: none; }
  .etat-connexion:has(.ko), .etat-connexion:has(.mode-local) { display: block; flex: none; }
}
/* Barre de prime fixe (simulation, téléphone uniquement). */
.cee-barre-prime { display: none; }
@media (max-width: 640px) {
  .cee-barre-prime { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-top: 1px solid var(--bord);
    padding: 10px 96px 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(32, 44, 64, .12); }
  .cee-barre-prime[hidden] { display: none; }
  .cee-barre-prime strong { font-size: 18px; color: #3b3f92; white-space: nowrap; }
  .cee-barre-prime .btn { margin-left: auto; white-space: nowrap; }
}
/* Sections repliables de l'Espace CEE. */
.cee-carte details > summary { cursor: pointer; list-style: none; user-select: none; }
.cee-carte details > summary::-webkit-details-marker { display: none; }
.cee-carte details > summary h3 { display: inline; }
.cee-carte details > summary h3::before { content: "▸ "; color: #7a7da8; }
.cee-carte details[open] > summary h3::before { content: "▾ "; }
.cee-motif { margin: 6px 0; padding: 6px 0; border-top: 1px solid #f0f1fa; }
.cee-motif > summary { font-size: 13px; font-weight: 600; color: #3b3f92; }
.cee-plier > summary { cursor: pointer; margin-top: 6px; }

/* Espace CEE aux couleurs de Projets CEE : cartes, bandeau et pièces colorés */
.cee-entete h1 { margin: 0; }
.cee-entete .btn.lien { padding: 0; font-size: inherit; }
.cee-intro { margin: -6px 0 14px; }
.cee-intro .btn.lien { padding: 0; }
.cee-bandeau.etat-valide { border-left: 5px solid var(--st-valide); }
.cee-bandeau.etat-attente { border-left: 5px solid var(--st-attente); }
.cee-bandeau.etat-refuse { border-left: 5px solid var(--st-refuse); background: #fffafa; }
.cee-bandeau.etat-afaire { border-left: 5px solid var(--st-afaire); }
.cee-bandeau .statut-projet { display: inline-block; vertical-align: middle; margin-left: 6px; max-width: 100%; white-space: normal; }
.cee-piece.piece { display: flex; grid-template-columns: none; font-size: inherit; align-items: flex-start; }
.cee-piece.piece .pastille-statut { flex: 0 0 86px; margin-top: 2px; }
.pieces-tete h3 { margin: 0; }
.cee-aide-tbase { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--st-attente-fond); border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.cee-aide-tbase > .aide:last-child { flex-basis: 100%; }
.cee-aide-tbase input { width: 110px; }

/* Mode démonstration des Projets CEE */
.bandeau-demo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff4d6; color: #6b4e00; border: 1px solid #f1d68a; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.cee-demo-entree { border-top: 1px solid #f0f1fa; margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.cee-demo-entree .btn { width: 100%; }

/* Projets CEE épurés : la couleur de l'entreprise reste sur le logo, le menu et
   le bouton principal ; vert, bleu, rouge et gris sont réservés aux statuts. */
#app[data-vue="cee"] h1, #app[data-vue="cee"] h2, #app[data-vue="cee"] h3 { color: var(--texte); }
#app[data-vue="cee"] .btn:not(.principal):not(.danger) { color: var(--texte); }
#app[data-vue="cee"] .btn.lien { color: var(--gris); text-decoration: underline; text-underline-offset: 3px; }
.icone { width: 16px; height: 16px; flex: none; }

.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.chiffre { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid transparent; border-radius: 10px; padding: 10px 14px; font: inherit; text-align: left; cursor: pointer; }
div.chiffre { cursor: default; }
.chiffre span { font-size: 12.5px; font-weight: 600; }
.chiffre strong { font-family: var(--titres); font-size: 24px; line-height: 1.15; }
.chiffre small { font-size: 11.5px; }
.chiffre.ton-afaire { background: var(--st-afaire-fond); color: #3d4655; }
.chiffre.ton-refuse { background: var(--st-refuse-fond); color: var(--st-refuse); }
.chiffre.ton-attente { background: var(--st-attente-fond); color: var(--st-attente); }
.chiffre.ton-valide { background: var(--st-valide-fond); color: var(--st-valide); }
button.chiffre:hover, .chiffre.actif { border-color: currentColor; }
.chiffre.actif { box-shadow: inset 0 0 0 1px currentColor; }
.barre-recherche { display: flex; align-items: center; gap: 12px; }
.barre-recherche .recherche { flex: 1; }

.projet.carte-epuree { border: 1px solid #e7e9f0; background: var(--blanc); gap: 6px; padding: 14px 16px 12px; }
.c-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.c-tete strong { font-family: var(--titres); font-size: 15.5px; color: var(--texte); }
.c-quoi { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.c-prime { font-family: var(--titres); font-weight: 700; font-size: 17px; color: var(--texte); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.c-prime small { font-family: var(--corps); font-size: 11.5px; font-weight: 400; color: var(--gris); }
.c-prime.grande { font-size: 26px; gap: 0; }
.segments { display: grid; gap: 3px; margin-top: 6px; }
.segment { height: 8px; border-radius: 3px; background: var(--st-afaire-fond); box-shadow: inset 0 0 0 1px #dfe3ea; }
.segment.valide { background: var(--st-valide); box-shadow: none; }
.segment.attente { background: var(--st-attente); box-shadow: none; }
.segment.refuse { background: var(--st-refuse); box-shadow: none; }
.segments.avec-libelles { margin: 14px 0 6px; }
.segments.avec-libelles .segment { height: 10px; position: relative; margin-bottom: 32px; }
.segments.avec-libelles .segment span { position: absolute; top: 15px; left: 0; right: 0; font-size: 11px; line-height: 1.25; color: var(--gris); text-align: center; }
.segment.attente span { color: var(--st-attente); font-weight: 600; }
.segment.refuse span { color: var(--st-refuse); font-weight: 700; }
.segment.valide span { color: var(--st-valide); }
.c-reperes { display: flex; justify-content: space-between; font-size: 11px; color: var(--gris); }
.action { display: flex; align-items: center; gap: 10px; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-top: 4px; }
.action .icone { width: 20px; height: 20px; }
.action > div { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.action b { font-size: 13px; }
.action.ton-refuse { background: var(--st-refuse-fond); color: var(--st-refuse); }
.action.ton-afaire { background: #f4f5f8; color: var(--texte); }
.action.ton-attente { background: var(--st-attente-fond); color: var(--st-attente); }
.action.ton-valide { background: var(--st-valide-fond); color: var(--st-valide); }
.action.ton-annule { background: var(--st-afaire-fond); color: var(--st-afaire); }
.urgence { font-family: var(--corps); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #fff1db; color: #9a5b00; }
.urgence.forte { background: var(--st-refuse-fond); color: var(--st-refuse); }
.urgence.calme { background: var(--st-afaire-fond); color: var(--st-afaire); font-weight: 600; }
.projet.etat-annule { opacity: .75; }

.cee-bandeau { display: block; }
.cee-bandeau.etat-annule { border-left: 5px solid var(--st-afaire); }
.b-haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.b-nom { font-family: var(--titres); font-size: 20px; font-weight: 700; color: var(--texte); }
.b-bas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); }
.b-bas .iris { display: inline-flex; align-items: center; gap: 6px; }
.point { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.b-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.a-faire h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.avis { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.avis li { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; padding-left: 10px; border-left: 3px solid #f0b44c; }
.avis li.bloquant { border-left-color: var(--st-refuse); }
.avis li span { color: var(--gris); }
.avis-ok { margin: 8px 0 0; font-size: 13px; }
.cee-doc.separe { border-top: 1px solid #f0f1fa; padding-top: 10px; margin-top: 6px; }
.pli.cee-carte { padding: 0; }
.pli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.pli > summary::-webkit-details-marker { display: none; }
.pli > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform .15s; }
.pli[open] > summary::after { transform: rotate(-135deg); }
.pli > summary h3 { margin: 0; font-size: 15px; }
.pli-resume { font-size: 12.5px; color: var(--gris); display: inline-flex; align-items: center; gap: 6px; }
.pli-corps { padding: 0 18px 16px; }
.pastille-statut.st-valide { background: var(--st-valide-fond); color: var(--st-valide); }
.pastille-statut.st-refuse { background: var(--st-refuse-fond); color: var(--st-refuse); }
.pastille-statut.st-afaire { background: var(--st-afaire-fond); color: var(--st-afaire); }
.eclaire { animation: eclaire 2.4s ease-out; border-radius: 8px; }
@keyframes eclaire { from { background: #fff3c4; } to { background: transparent; } }
@media (max-width: 700px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-haut { flex-direction: column; }
  .c-prime.grande { font-size: 20px; align-items: flex-start; }
  .segments.avec-libelles .segment span { font-size: 10px; }
}
.foyer-resultat { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }