/* style.css — feuille de style PARTAGÉE par toutes les pages de l'outil.
   "Statique" = ce fichier est servi tel quel, sans remplissage. On le modifie
   à un seul endroit et TOUTES les pages changent ensemble.
   Phase 5 — slice 5.1 (unification du style). */

/* ============================================================
   BASE — s'applique à toute la page
   ============================================================ */

/* "body" = toute la page : police lisible, fond gris très clair, texte gris
   foncé (plus doux que le noir pur), marges du navigateur retirées. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: #f4f6f8;
  color: #1c2733;
  margin: 0;
  line-height: 1.5;   /* de l'air entre les lignes, pour la lisibilité */
}

/* ".conteneur" = colonne centrée de largeur limitée, comme une feuille A4
   posée au milieu de l'écran. Réutilisée sur toutes les pages. */
.conteneur {
  max-width: 900px;
  margin: 0 auto;     /* "auto" à gauche/droite = centrage horizontal */
  padding: 32px 24px; /* espace intérieur (haut/bas, gauche/droite) */
}

/* ============================================================
   BARRE SUPÉRIEURE — navigation commune à toutes les pages
   ============================================================ */

/* Bandeau bleu pleine largeur : nom de l'outil à gauche, liens à droite. */
.barre-haut {
  display: flex; justify-content: space-between; align-items: center;
  background: #1f3a5f; color: #fff; padding: 11px 24px;
  flex-wrap: wrap; gap: 10px;   /* sur petit écran, le côté droit passe dessous */
}
.barre-haut .marque { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
/* Côté droit de la barre : pastille de date limite + navigation. */
.barre-haut .haut-droite { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* Liens de navigation : gris clair, blanc au survol, espacés. */
.nav-haut a { color: #cdd9e8; text-decoration: none; margin-left: 22px; font-size: 0.95rem; }
.nav-haut a:hover { color: #fff; }

/* D3 — date limite en TEXTE DISCRET dans la barre du haut. Le J-XX prend une
   teinte CLAIRE (lisible sur le bleu sombre) selon l'urgence. */
.barre-haut .dl-bandeau { font-size: 0.85rem; color: #cdd9e8; }
.barre-haut .dl-bandeau .jx { font-weight: 700; }
.dl-bandeau-loin .jx { color: #9ee6b8; }     /* vert clair */
.dl-bandeau-proche .jx { color: #f4cd86; }   /* orange clair */
.dl-bandeau-passe .jx { color: #ffb3b3; }    /* rouge clair */

/* D1 — pastille de date limite sur FOND CLAIR (accueil, à droite de la synthèse) :
   pilule blanche à BORDURE colorée + point coloré selon l'urgence. */
.dl-chip {
  display: inline-flex; align-items: center; gap: 7px; background: #fff;
  padding: 6px 13px; border: 1px solid; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
}
.dl-chip .dl-dot { width: 8px; height: 8px; border-radius: 50%; }
.dl-loin { color: #1c7a43; border-color: #bfe6cd; }   .dl-loin .dl-dot { background: #2e9e5b; }
.dl-proche { color: #9a6a12; border-color: #f0d9a8; } .dl-proche .dl-dot { background: #e0a92e; }
.dl-passe { color: #b3261e; border-color: #f3c2c2; }  .dl-passe .dl-dot { background: #d9534f; }

/* Le grand titre : bleu administratif foncé, avec un mince trait dessous. */
h1 {
  color: #1f3a5f;
  font-size: 1.5rem;
  border-bottom: 2px solid #1f3a5f;
  padding-bottom: 12px;
  margin-top: 0;
}

/* ============================================================
   PAGE D'ACCUEIL — liste des offres
   ============================================================ */

/* Bande de synthèse SEGMENTÉE : une barre dont les parts montrent la proportion
   d'offres admises / éliminées / incomplètes. Les LARGEURS sont calculées par
   page (donc en style en ligne) ; seules les COULEURS vivent ici. */
.synthese-barre {
  display: flex; height: 20px; max-width: 440px; margin: 8px 0;
  border: 1px solid #e1e6eb; border-radius: 6px; overflow: hidden;
}
.synthese-barre .seg { height: 100%; }
.seg-admis { background: #2e9e5b; }       /* vert = admises */
.seg-elimine { background: #d9534f; }      /* rouge = éliminées */
.seg-incomplet { background: #c4ccd4; }    /* gris = incomplètes */

/* Légende sous la barre : une pastille de couleur + son compte. */
.synthese-legende { font-size: 0.85rem; color: #6b7785; margin: 0 0 20px; }
.synthese-legende .pastille {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin: 0 5px 0 14px; vertical-align: middle;
}

/* Rangée d'en-tête de l'accueil : synthèse à gauche, pastille de date à droite.
   Sur petit écran, la pastille passe sous la synthèse (flex-wrap). */
.entete-accueil {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin: 4px 0 22px;
}
/* Dans cette rangée, on retire les marges propres de la barre/légende
   (l'espacement est porté par .entete-accueil). */
.entete-accueil .synthese-barre { margin: 0 0 6px; }
.entete-accueil .synthese-legende { margin: 0; }

/* Bouton « Vérifier pour enregistrer » : action de VÉRIFICATION IA, placée EN BAS
   de la section concernée (Critère 1, carte d'expert). Bleu plein, bien visible. */
.zone-verif { margin-top: 14px; }
.btn-verif {
  display: inline-block; text-decoration: none;
  background: #1f3a5f; color: #fff; border-radius: 6px;
  padding: 8px 14px; font-weight: 600; font-size: 0.9rem;
}
.btn-verif:hover { background: #16293f; }

/* Fichiers d'un expert (CV + diplôme) affichés en tête de sa carte (Critère 3). */
.fichiers-expert { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 12px; }
.fichier-ligne { display: inline-flex; align-items: center; gap: 8px; }

/* Mention de SUGGESTION (ex. « Fourni » pré-coché d'après un fichier reçu) :
   discrète mais distincte, pour rappeler que ce n'est pas encore enregistré. */
.aide.suggestion { color: #1f3a5f; font-style: italic; }

/* Message d'erreur (ex. mot de passe incorrect) : rouge doux, carte fine. */
.flash-erreur {
  background: #fde7e7; color: #b3261e; border: 1px solid #f3b6b2;
  border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-weight: 600;
}

/* « Se déconnecter » : bouton discret, présenté comme un lien dans la barre. */
.form-logout { display: inline; margin: 0; }
.lien-logout {
  background: none; border: none; cursor: pointer; padding: 0;
  color: #1f3a5f; font: inherit; text-decoration: underline;
}
.lien-logout:hover { color: #16293f; }

/* Numéro d'affichage d'une offre (pastille discrète à gauche du nom, sur l'accueil). */
.num-offre {
  display: inline-block; min-width: 2.4em; text-align: center;
  color: #5b6b7b; font-size: 0.8rem; font-weight: 600;
  background: #eef2f7; border-radius: 6px; padding: 2px 6px; margin-right: 10px;
}

/* Bloc « Rapport de cette offre », placé SOUS les trois catégories. */
.bloc-rapport-offre { margin: 26px 0 4px; }

/* Note « classement provisoire » sur le rapport par offre (discrète, italique). */
.note-provisoire { font-style: italic; color: #5b6b7b; margin-top: 0; }

/* Sous-barre « ← Retour / Accueil » en haut de chaque page (sauf l'accueil).
   Petits boutons discrets, alignés à gauche, détachés du contenu en dessous. */
.sous-barre { display: flex; gap: 10px; margin-bottom: 18px; }

/* Rangée d'actions de l'accueil : action principale + vues secondaires. */
.actions-accueil { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
/* Bouton PRINCIPAL : plein, bleu (l'action mise en avant). */
.bouton-primaire {
  background: #1f3a5f; color: #fff; text-decoration: none;
  border-radius: 6px; padding: 10px 16px; font-weight: 600;
}
.bouton-primaire:hover { background: #16293f; }
/* Bouton SECONDAIRE : contour discret (vues moins prioritaires). */
.bouton-secondaire {
  color: #1f3a5f; text-decoration: none;
  border: 1px solid #c4ccd4; border-radius: 6px; padding: 9px 14px;
}
.bouton-secondaire:hover { background: #eef2f7; }
/* Côté droit d'une ligne d'offre : prix + pastille d'état alignés. */
.liste-offres .droite { display: flex; align-items: center; gap: 10px; }

/* Message "aucune offre" : gris, sur une petite carte blanche (état vide). */
.vide {
  color: #6b7785;
  background: #ffffff;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
  padding: 16px;
}

/* La liste des offres : pas de puces ; chaque offre est une carte blanche
   (nom à gauche, prix à droite). */
.liste-offres { list-style: none; padding: 0; margin: 0; }
.liste-offres li {
  display: flex;                    /* nom et prix sur une même ligne */
  justify-content: space-between;   /* nom à gauche, prix à droite */
  align-items: center;
  background: #ffffff;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.liste-offres .nom { font-weight: 600; }                    /* nom en gras */
.liste-offres .prix { color: #1f3a5f; font-weight: 600; }   /* prix en bleu */
/* Le nom est un lien : on garde la couleur du texte, soulignement au survol. */
.liste-offres a.nom { color: #1c2733; text-decoration: none; }
.liste-offres a.nom:hover { text-decoration: underline; }

/* ============================================================
   PAGE DE DÉTAIL d'une offre
   ============================================================ */

/* Sous-titre de section (ex. "Critère 1 — Expérience du cabinet"). */
h2 {
  color: #1f3a5f;
  font-size: 1.15rem;
  margin-top: 28px;
}

/* Liste des projets de référence : même style de cartes que les offres. */
.liste-projets { list-style: none; padding: 0; margin: 0; }
.liste-projets li {
  background: #ffffff;
  border: 1px solid #e1e6eb;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.liste-projets .nom { font-weight: 600; display: block; }   /* intitulé sur sa ligne */

/* Ligne de tête d'un projet : intitulé à gauche, pastille à droite. */
.projet-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Pastilles de conformité (vert = conforme, rouge = non conforme). */
.badge {
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
}
.badge-ok { background: #e3f5e9; color: #1c7a43; }   /* vert doux */
.badge-ko { background: #fde7e7; color: #b3261e; }   /* rouge doux */
.badge-neutre { background: #eef2f7; color: #4a5a6b; }  /* gris-bleu (type de pièce) */
.badge-attente { background: #fdf1dc; color: #9a6a12; }  /* amber : verdict « régularisable » */

/* Rapport — éligibilité : cellules « bureau » + « verdict » fusionnées sur
   plusieurs lignes (rowspan) ; on les centre verticalement et on met le nom du
   bureau en gras pour bien délimiter chaque bloc. */
.tableau-resultats td[rowspan] { vertical-align: middle; }
.tableau-resultats td.cellule-bureau { font-weight: 600; }

/* Une pièce d'éligibilité : séparée de la suivante par un mince trait. */
.piece-eligibilite { padding: 10px 0; border-bottom: 1px solid #eef1f4; }
.piece-eligibilite:last-of-type { border-bottom: none; }   /* pas de trait après la dernière */

/* Liste des conditions manquantes (sous un projet non conforme). */
.manquantes { color: #b3261e; font-size: 0.85rem; margin-top: 8px; }
.manquantes ul { margin: 4px 0 0; padding-left: 20px; }

/* Bouton "Supprimer" présenté comme un lien discret (pas un gros bouton). */
.form-suppr { margin-top: 10px; }
.lien-suppr {
  background: none; border: none; color: #b3261e; cursor: pointer;
  padding: 0; font-size: 0.85rem; text-decoration: underline;
}

/* Lien "+ Saisir une nouvelle offre" présenté comme un bouton. */
.bouton-ajout {
  display: inline-block; background: #1f3a5f; color: #fff;
  text-decoration: none; border-radius: 6px; padding: 10px 16px; margin: 8px 0 20px;
}
.bouton-ajout:hover { background: #16293f; }

/* ============================================================
   FORMULAIRE — saisie d'une nouvelle offre
   ============================================================ */

/* Chaque champ : libellé au-dessus, case en dessous. */
.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 600; margin-bottom: 6px; }  /* libellé sur sa ligne */
.champ input {
  width: 100%; max-width: 420px; padding: 9px 11px;
  border: 1px solid #c4ccd4; border-radius: 6px; font-size: 1rem;
  box-sizing: border-box;   /* le padding est COMPRIS dans width:100% (pas de débordement) */
}
/* Petite aide grise sous une case (ex. l'unité). */
.aide { color: #6b7785; font-size: 0.85rem; margin-top: 4px; }

/* Bouton d'envoi : bleu administratif, lisible. */
button {
  background: #1f3a5f; color: #fff; border: none; border-radius: 6px;
  padding: 11px 20px; font-size: 1rem; cursor: pointer;
}
button:hover { background: #16293f; }

/* Lien de retour discret. */
.retour { display: inline-block; margin-top: 18px; color: #1f3a5f; }

/* Rangée d'actions d'un formulaire : bouton principal + lien secondaire alignés. */
.actions-form { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

/* ============================================================
   PAGE DOCUMENTS — liste des fichiers attendus (reçu/manquant)
   ============================================================ */

.liste-fichiers { list-style: none; padding: 0; margin: 0 0 10px; }
.liste-fichiers li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e1e6eb; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 8px; flex-wrap: wrap;
}
.liste-fichiers .gauche, .liste-fichiers .droite { display: flex; align-items: center; gap: 10px; }
.liste-fichiers .lib { font-weight: 600; }
/* Nom de fichier attendu : police à chasse fixe, discrète. */
.nom-fichier { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; color: #4a5a6b; }
/* Pastille « IA » : bleu, pour distinguer les fichiers lus par l'IA. */
.badge-ia { background: #e7eefb; color: #274b8f; }

/* Ligne d'appariement (un fichier déposé + son menu de destination). */
.ligne-appariement {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 0; border-bottom: 1px solid #eef1f4;
}
.ligne-appariement:last-of-type { border-bottom: none; }
.ligne-appariement select {
  max-width: 560px; padding: 8px 10px;
  border: 1px solid #c4ccd4; border-radius: 6px; font-size: 0.95rem;
}

/* ---- Page Documents : version repliable (slice design) ---- */

/* Zone de dépôt : grand cadre pointillé, cliquable, qui réagit au glisser. */
.zone-form { margin: 14px 0; }
.zone-depot {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed #c4ccd4; border-radius: 10px; padding: 26px 18px; background: #fff;
  transition: border-color .15s, background .15s;
}
.zone-depot:hover, .zone-depot.survol { border-color: #1f3a5f; background: #f3f6fb; }
.zone-titre { display: block; font-weight: 600; color: #1f3a5f; margin-bottom: 4px; }
#liste-choisis { margin: 8px 0 12px; }

/* Bloc repliable (un critère). Le compte reste visible dans l'en-tête. */
.bloc-doc {
  border: 1px solid #e1e6eb; border-radius: 8px; background: #fff; margin-bottom: 10px;
}
.bloc-doc > summary, .role-doc > summary {
  cursor: pointer; list-style: none; display: flex; justify-content: flex-start;
  align-items: center; gap: 10px; font-weight: 600; padding: 12px 14px;
}
/* Remplace la flèche par défaut par un chevron qui pivote à l'ouverture. */
.bloc-doc > summary::-webkit-details-marker, .role-doc > summary::-webkit-details-marker { display: none; }
.bloc-doc > summary::before, .role-doc > summary::before { content: "▸"; color: #6b7785; margin-right: 6px; }
.bloc-doc[open] > summary::before, .role-doc[open] > summary::before { content: "▾"; }
.contenu-bloc { padding: 0 14px 8px; }

/* Compte "reçus / total" dans un en-tête : poussé à DROITE (margin-left auto),
   tandis que le chevron + le titre restent collés à GAUCHE. */
.compte { font-size: 0.85rem; font-weight: 600; color: #6b7785; margin-left: auto; }
.compte.complet { color: #1c7a43; }

/* Sous-section repliable (un rôle du Critère 3). */
.role-doc { border-top: 1px solid #eef1f4; }
.role-doc > summary { font-weight: 500; padding: 10px 2px; }
.contenu-role { padding: 0 2px 6px; }

/* Ligne de fichier compacte : libellé + nom discret à gauche, actions à droite. */
.ligne-fichier {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-top: 1px solid #f1f4f7; flex-wrap: wrap;
}
.ligne-fichier:first-child { border-top: none; }
/* Partie gauche : colonne statut (largeur fixe) + libellé, alignés. */
.ligne-fichier .gauche-fichier { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ligne-fichier .statut { flex: 0 0 84px; }     /* largeur fixe -> tous les libellés alignés */
.ligne-fichier .info { display: flex; flex-direction: column; gap: 2px; }
.ligne-fichier .lib { font-weight: 500; }
.ligne-fichier .lib.manque { color: #8a95a1; }                 /* libellé grisé si manquant */
.ligne-fichier .secondaire { font-size: 0.78rem; color: #8a95a1; }  /* nom de fichier discret */
.ligne-fichier .actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
/* Petit bouton "Vérifier" (action) et lien discret "Ouvrir". */
.btn-mini { font-size: 0.8rem; padding: 5px 11px; border-radius: 6px; text-decoration: none; background: #1f3a5f; color: #fff; }
.btn-mini:hover { background: #16293f; }
.lien-mini { font-size: 0.8rem; color: #1f3a5f; }

/* Carte "À apparier" : fond ambre, pour attirer l'attention sur l'action requise. */
.carte-apparier { border: 1px solid #f0d9a8; background: #fdf8ee; border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
.carte-apparier h2 { margin-top: 0; color: #9a6a12; }

/* ============================================================
   FORMULAIRE D'AJOUT (cartes sur la page de détail)
   ============================================================ */

/* Petit sous-titre (ex. "Ajouter un projet de référence"). */
h3 { color: #1c2733; font-size: 1rem; margin-top: 22px; }

/* Le formulaire d'ajout, présenté comme une carte blanche. */
.carte-form {
  background: #ffffff; border: 1px solid #e1e6eb; border-radius: 8px;
  padding: 16px; margin-bottom: 16px; max-width: 560px;
}

/* Une case à cocher + son libellé, sur une même ligne, poids normal. */
.case { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 6px 0; }
/* Les cases à cocher (et boutons radio) gardent leur petite taille (on annule
   le width:100% des autres champs de saisie). */
.case input { width: auto; }

/* La zone de justification (Critère 2) : même largeur/bordure que les champs.
   box-sizing border-box -> la boîte ne dépasse plus le fond de la carte. */
.champ textarea {
  width: 100%; max-width: 560px; padding: 10px 12px;
  border: 1px solid #c4ccd4; border-radius: 6px; font-size: 1rem;
  font-family: inherit; resize: vertical;   /* redimensionnable en hauteur seulement */
  box-sizing: border-box;
}

/* ============================================================
   PAGE DE DÉTAIL — 3 grandes CATÉGORIES (Phase 8)
   Dossier administratif / Offre technique / Offre financière. Chaque catégorie
   est un grand bloc repliable, à en-tête bleu, avec ses pastilles à droite
   (complétude + réussite). Les sous-sections (Critères) restent en .section-detail.
   ============================================================ */
.categorie {
  border: 1px solid #d3dbe4; border-radius: 12px; background: #fff;
  margin-bottom: 16px; box-shadow: 0 1px 3px rgba(28, 39, 51, .06); overflow: hidden;
}
.cat-titre {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 15px 20px; background: #1f3a5f; color: #fff;
  font-size: 1.15rem; font-weight: 700;
}
.cat-titre::-webkit-details-marker { display: none; }
.cat-titre::before { content: "\25B8"; color: #9fb2cc; font-size: .9rem; }
.categorie[open] > .cat-titre::before { content: "\25BE"; }
/* Pastilles poussées à droite de l'en-tête. */
.cat-pastilles { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.cat-corps { padding: 16px 18px 18px; }

/* Check-list de fichiers (reçu/manquant) intégrée dans une section de l'offre. */
.docs-checklist { margin: 6px 0 14px; }

/* Catégorie VERROUILLÉE (cascade : technique après admin, financière après
   admission). En-tête grisé ; à l'ouverture, seul le motif du verrou s'affiche. */
.categorie.verrouille > .cat-titre { background: #8a95a1; }
.verrou {
  color: #6b7785; background: #f4f6f8; border: 1px dashed #c4ccd4;
  border-radius: 8px; padding: 14px 16px; margin: 0;
}

/* ============================================================
   PAGE DE DÉTAIL — sections repliables (Critères + Éligibilité)
   Style DÉDIÉ à cette page (classes propres : n'affecte pas la page Documents,
   qui garde ses .bloc-doc validés).
   ============================================================ */

/* Le bouton "Documents de l'offre" : rendu 'inline-block' pour qu'il occupe sa
   propre boîte ; sans cela, un lien 'inline' avec du padding chevauche le bloc
   suivant. La marge sous le bouton est portée par .actions-detail. */
.bouton-secondaire { display: inline-block; }
.actions-detail { margin: 4px 0 22px; }

/* Une section = une carte repliable avec une légère ombre portée. */
.section-detail {
  border: 1px solid #dce2e9; border-radius: 10px; background: #fff;
  margin-bottom: 14px; box-shadow: 0 1px 2px rgba(28, 39, 51, .05); overflow: hidden;
}
/* En-tête CLIQUABLE : barre légèrement teintée (se distingue du corps blanc),
   chevron + titre à gauche, pastille de complétion poussée à droite. */
.section-detail > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 11px;
  padding: 15px 18px; font-size: 1.05rem; font-weight: 600; color: #1f3a5f;
  background: #f7fafc; transition: background .12s;
}
.section-detail > summary:hover { background: #eef3f9; }   /* retour visuel au survol */
.section-detail[open] > summary { border-bottom: 1px solid #e8edf3; }  /* trait quand ouvert */
/* On masque la flèche par défaut et on met notre propre chevron qui pivote. */
.section-detail > summary::-webkit-details-marker { display: none; }
.section-detail > summary::before { content: "\25B8"; color: #9aa6b3; font-size: .85rem; }
.section-detail[open] > summary::before { content: "\25BE"; }
/* Le corps de la section : de l'air autour des formulaires. */
.section-corps { padding: 14px 18px 18px; }

/* Pastille de complétion (à droite de l'en-tête) : pilule grise, VERTE si plein. */
.section-detail .compte {
  margin-left: auto; font-size: .8rem; font-weight: 600;
  padding: 3px 11px; border-radius: 999px; background: #eef2f7; color: #6b7785;
}
.section-detail .compte.complet { background: #e3f5e9; color: #1c7a43; }

/* ---- CRITÈRE 3 : chaque expert dans son propre sous-bloc repliable ---- */
.expert-detail { border-top: 1px solid #eef1f4; }      /* trait entre experts */
.expert-detail:first-of-type { border-top: none; }      /* sauf au-dessus du 1er */
.expert-detail > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; font-weight: 600; color: #1c2733;
}
.expert-detail > summary::-webkit-details-marker { display: none; }
.expert-detail > summary::before { content: "\25B8"; color: #9aa6b3; font-size: .8rem; }
.expert-detail[open] > summary::before { content: "\25BE"; }
/* "(sur 15)" en gris discret, dans l'en-tête de l'expert. */
.expert-detail .aide-inline { font-weight: 400; color: #6b7785; font-size: .85rem; }
/* Corps d'un expert : liseré bleu à gauche, pour le rattacher visuellement. */
.expert-corps { border-left: 3px solid #1f3a5f; padding: 4px 0 8px 16px; margin: 0 0 4px 2px; }

/* Pastille d'état d'un expert (renseigné = vert / à renseigner = gris). */
.etat-pill {
  margin-left: auto; font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.etat-ok { background: #e3f5e9; color: #1c7a43; }
.etat-vide { background: #eef2f7; color: #6b7785; }

/* ============================================================
   ÉCRANS DE VÉRIFICATION IA (Critère 1 et Critère 3)
   L'IA PROPOSE des valeurs ; l'humain les vérifie avant le moteur. Ces styles
   remplacent les anciens <style> en ligne de ces deux pages.
   ============================================================ */

/* Bannière « proposé par l'IA — à vérifier » : amber, cohérente avec la carte
   « À apparier » de la page Documents. Rappelle que rien n'est encore validé. */
.banniere-ia {
  background: #fdf8ee; border: 1px solid #f0d9a8; border-radius: 10px;
  padding: 14px 16px; margin: 4px 0 20px; color: #5a4a2a;
}
.banniere-ia strong { color: #9a6a12; }

/* Pastille de CONFIANCE déclarée par l'IA. Nommée à part pour NE PAS écraser
   le badge bleu « IA » de la page Documents (.badge-ia). */
.badge-confiance {
  display: inline-block; background: #f0d9a8; color: #7a5512;
  border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600;
}

/* Un projet PROPOSÉ par l'IA : carte blanche, comme les autres listes. */
.bloc-projet {
  background: #fff; border: 1px solid #e1e6eb; border-radius: 8px;
  padding: 14px 16px; margin: 12px 0;
}

/* Attestation avant le bouton « Confirmer » des écrans de vérification :
   rappelle que l'humain engage sa responsabilité (l'IA n'a fait que proposer). */
.attestation {
  background: #fdf8ee; border: 1px solid #f0d9a8; border-radius: 8px;
  padding: 11px 14px; margin: 14px 0 10px; color: #5a4a2a; font-size: .9rem;
}

/* "+ Ajouter…" : petit dépliant discret pour le formulaire d'ajout, REPLIÉ par
   défaut — on n'inonde pas la section ouverte avec un grand formulaire vide. */
.ajout-repliable { margin-top: 6px; }
.ajout-repliable > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  color: #1f3a5f; font-weight: 600; font-size: .9rem; padding: 5px 0;
}
.ajout-repliable > summary::-webkit-details-marker { display: none; }
.ajout-repliable[open] > summary { margin-bottom: 6px; }

/* DENSITÉ plus compacte À L'INTÉRIEUR des sections de la page de détail :
   champs plus rapprochés, sous-cartes plus légères. Scopé à .section-corps,
   donc les autres pages (ex. Nouvelle offre) ne changent pas. */
.section-corps .champ { margin-bottom: 12px; }
.section-corps .carte-form {
  padding: 16px 18px; margin-bottom: 12px;       /* un peu d'air autour des champs */
  background: #f7f9fc; border-color: #e6ebf1;    /* sous-panneau discret */
}
.section-corps .case { margin: 4px 0; }

/* Bloc de téléversement IA COMPACT : champ fichier + bouton sur une ligne, en
   plus petit, pour qu'il ne domine pas la section. */
.bloc-upload { margin-bottom: 8px; }
.upload-ia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px;
}
.upload-ia input[type="file"] { font-size: .82rem; max-width: 220px; }
.upload-ia button { padding: 6px 12px; font-size: .85rem; }

/* « Preuve : X » cliquable : couleur lien (le .aide la rendrait grise). */
a.lien-preuve { color: #1f3a5f; text-decoration: underline; }
a.lien-preuve:hover { color: #16293f; }

/* Message de confirmation vert après un enregistrement (ex. « ✓ Méthodologie
   enregistrée. »). Discret mais visible, en tête de la page de détail. */
.flash-ok {
  background: #e3f5e9; color: #1c7a43; border: 1px solid #bfe6cd;
  border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-weight: 600;
}

/* ============================================================
   SUPPRESSION D'UNE OFFRE — avertissement + bouton danger
   ============================================================ */

/* Bouton DANGER : action destructive (suppression définitive). Rouge plein,
   pour qu'on ne le confonde pas avec une action ordinaire. */
.bouton-danger {
  background: #b3261e; color: #fff; border: none; cursor: pointer;
  border-radius: 6px; padding: 10px 16px; font-weight: 600; font-size: 1rem;
}
.bouton-danger:hover { background: #8f1d17; }

/* Encadré d'avertissement (fond rouge doux) sur la page de confirmation. */
.avertissement {
  background: #fde7e7; color: #7a1c16; border: 1px solid #f3b6b2;
  border-radius: 8px; padding: 16px 18px; margin: 0 0 20px;
}
.avertissement ul { margin: 8px 0 8px 18px; }

/* Rangée d'actions de la page de confirmation : « Supprimer » + « Annuler ». */
.actions-suppression { display: flex; gap: 12px; align-items: center; }

/* Petit bouton de suppression (rouge contour). Utilisé DEUX fois : à côté de
   chaque offre sur l'accueil, et dans la zone danger de la page d'offre.
   Contour au repos, plein au survol : visible sans être agressif. */
.btn-supprimer {
  display: inline-block; text-decoration: none; white-space: nowrap;
  color: #b3261e; background: #fff; border: 1px solid #e0a59f;
  border-radius: 6px; padding: 5px 11px; font-size: 0.85rem; font-weight: 600;
}
.btn-supprimer:hover { background: #b3261e; color: #fff; border-color: #b3261e; }

/* Zone "danger" en bas de la page d'offre : encadré rouge doux, bien détaché
   du lien de retour, avec un texte qui rappelle la conséquence. */
.zone-danger {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 30px; padding: 14px 16px; flex-wrap: wrap;
  border: 1px solid #f0cfcc; border-radius: 8px; background: #fdf6f6;
}
.zone-danger-txt { color: #7a1c16; font-size: 0.9rem; }

/* ============================================================
   PAGE DES RÉSULTATS — tableau de classement
   ============================================================ */

/* Tableau lisible : pleine largeur, lignes séparées, en-tête bleu clair. */
.tableau-resultats {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e1e6eb; border-radius: 8px; overflow: hidden; margin: 12px 0 20px;
}
.tableau-resultats th, .tableau-resultats td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef1f4;
}
.tableau-resultats thead th { background: #eef2f7; color: #1f3a5f; font-size: 0.9rem; }
/* La première ligne (rang 1) légèrement mise en valeur. */
.tableau-resultats tbody tr:first-child { background: #f7faf8; }

/* ============================================================
   RAPPORT COMPLET (Phase 7) — écran + impression PDF
   ============================================================ */

/* Barre d'actions (Imprimer / Excel) en haut du rapport : les deux boutons
   alignés, avec un peu d'air en dessous. */
.actions-rapport {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-bottom: 20px;
}

/* En-tête du marché : colonne de gauche (les libellés) en gras, largeur fixe. */
.entete-marche th { width: 230px; font-weight: 600; }

/* La ligne de l'offre gagnante (rang 1) : fond vert pâle, comme dans l'Excel. */
.tableau-resultats tbody tr.gagnant { background: #e2efda; }

/* Chaque soumissionnaire dans son bloc, séparé du suivant par de l'espace. */
.bloc-soumissionnaire { margin: 18px 0 30px; }

/* --- Rapport : sections repliables (vue d'ensemble + ouvrir au besoin) --- */
/* Une grande partie du rapport. Ouverte par défaut ; un trait la sépare. */
.section-rapport { border-bottom: 1px solid #e8edf3; margin-bottom: 8px; }
.titre-section {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 600; color: #1f3a5f; padding: 12px 0; margin-top: 8px;
}
.titre-section::-webkit-details-marker { display: none; }   /* on retire la flèche native */
.titre-section::before { content: "\25BE"; color: #9aa6b3; font-size: .8rem; }  /* ▾ ouvert */
.section-rapport:not([open]) > .titre-section::before { content: "\25B8"; }       /* ▸ replié */
.section-rapport-corps { padding: 0 0 10px; }

/* Bloc d'un soumissionnaire : REPLIÉ par défaut -> la section Détail devient une
   liste de bureaux qu'on ouvre au besoin. */
details.bloc-soumissionnaire {
  border: 1px solid #e1e6eb; border-radius: 8px; background: #fff; margin: 10px 0;
}
.titre-bidder {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; font-size: 1.02rem; font-weight: 600; color: #1c2733; padding: 12px 14px;
}
.titre-bidder::-webkit-details-marker { display: none; }
.titre-bidder::before { content: "\25B8"; color: #9aa6b3; font-size: .8rem; }
details.bloc-soumissionnaire[open] > .titre-bidder::before { content: "\25BE"; }
.titre-bidder .aide { font-weight: 400; }   /* « · Rang 1 · N 96 » en gris discret */
.bidder-corps { padding: 0 14px 14px; }

/* Bande de statistiques par soumissionnaire : 4 cartes (Technique, Financière,
   Combinée, Rang). Combinée + Rang sont accentuées (.stat-fort) car ce sont les
   deux mesures décisives du classement. */
.bande-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 18px; }
.bande-stats .stat {
  flex: 1 1 120px; background: #fff; border: 1px solid #e1e6eb; border-radius: 8px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 3px;
}
.stat-libelle { font-size: .76rem; color: #6b7785; text-transform: uppercase; letter-spacing: .02em; }
.stat-valeur { font-size: 1.5rem; font-weight: 700; color: #1f3a5f; line-height: 1.1; }
/* Les deux mesures décisives ressortent : fond bleu pâle + chiffre plus foncé. */
.stat-fort { background: #eef3fb; border-color: #cdd9ec; }
.stat-fort .stat-valeur { color: #16407a; }

/* Sous-titre de critère à l'intérieur d'un bloc (plus petit que h2/h3). */
h4 { color: #1f3a5f; font-size: 1rem; margin: 18px 0 6px; }

/* Rapport — Critère 3 regroupé par expert. Chaque rôle = un sous-bloc avec un
   titre à liseré bleu, pour bien séparer les 5 experts. */
.role-rapport { margin: 10px 0 16px; }
.role-titre {
  margin: 14px 0 6px; font-size: .95rem; color: #1f3a5f;
  border-left: 3px solid #1f3a5f; padding-left: 9px;
}
.tableau-role { margin-top: 0; }
/* Colonne « Type » étroite (la pastille suffit). */
.tableau-role th:first-child, .tableau-role td:first-child { width: 110px; }

/* Pastille de TYPE de document : une couleur par type, pour les distinguer
   d'un coup d'œil (Diplôme = bleu, Expérience = vert, Projet = violet). */
.tag-doc {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.tag-diplome { background: #e7eefb; color: #274b8f; }
.tag-experience { background: #e3f5e9; color: #1c7a43; }
.tag-projet { background: #f1ecfb; color: #5b3a9e; }

/* La note méthodologique : petit encadré gris clair, lisible mais discret. */
.note-methodo {
  background: #ffffff; border: 1px solid #e1e6eb; border-radius: 8px;
  padding: 14px 16px; font-size: 0.9rem; color: #3a4756;
}
/* Titre + liste aérée dans l'encadré « Méthode de notation » (lisibilité). */
.note-methodo .titre-methodo { font-weight: 600; margin: 0 0 8px; }
.note-methodo ul { margin: 0; padding-left: 18px; }
.note-methodo li { margin-bottom: 5px; }
.note-methodo li:last-child { margin-bottom: 0; }

/* ---- IMPRESSION (PDF) : ce que le navigateur applique SEULEMENT à l'impression.
   On retire le superflu (boutons, fond gris) et on aère pour un vrai document. */
@media print {
  /* Fond blanc et marges nulles : la feuille A4 fournit déjà ses marges. */
  body { background: #ffffff; }
  .conteneur { max-width: none; padding: 0; }

  /* On masque tout ce qui est interactif (barre de nav, boutons, liens). */
  .barre-haut, .actions-rapport, .no-print, .retour { display: none !important; }

  /* Forcer l'impression des couleurs de fond (badges, ligne gagnante),
     que les navigateurs suppriment par défaut pour économiser l'encre. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Un soumissionnaire par page : saut de page avant chaque bloc... */
  .casser-avant { page-break-before: always; }
  /* ...sauf le tout premier, pour ne pas commencer par une page blanche. */
  .bloc-soumissionnaire:first-of-type { page-break-before: avoid; }

  /* Éviter qu'une ligne de tableau soit coupée en deux entre deux pages. */
  tr { page-break-inside: avoid; }

  /* Tout est ré-ouvert par script avant impression : on masque les chevrons
     (▸/▾) et les bordures de bloc, pour un document propre. */
  .titre-section::before, .titre-bidder::before { display: none; }
  details.bloc-soumissionnaire { border: none; margin: 0; }
}