:root {
  /* Charte graphique Alyneia */
  --couleur-primaire: #003366;
  --couleur-accent: #cc3366;
  --couleur-accent-fonce: #a3284f;
  --couleur-primaire-claire: #eef4f8;
  --couleur-texte: #1c2733;
  --couleur-bordure: #d9e1e8;
  --vert: #1f8a4c;
  --jaune: #b8860b;
  --rouge: #c62828;
  --gris: #6b7683;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--couleur-texte);
  background: #f6f8fa;
  margin: 0;
}

header.app-header {
  background: var(--couleur-primaire);
  color: white;
  padding: 0.75rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--couleur-accent);
}

header.app-header a { color: white; text-decoration: none; font-weight: 600; }
header.app-header nav a { margin-left: 1rem; font-weight: 400; opacity: 0.9; }
header.app-header nav a:hover { opacity: 1; text-decoration: underline; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }

.carte {
  background: white;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--couleur-bordure); }
th { background: var(--couleur-primaire-claire); font-size: 0.85rem; text-transform: uppercase; }

.voyant { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.4rem; }
.voyant-vert { background: var(--vert); }
.voyant-jaune { background: var(--jaune); }
.voyant-rouge { background: var(--rouge); }
/* Palier intermédiaire de la conformité documentaire. */
.voyant-orange { background: #e67e22; }
.voyant-gris { background: var(--gris); }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: var(--couleur-primaire-claire); }

.bouton {
  display: inline-block;
  background: var(--couleur-primaire);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}
.bouton:hover { opacity: 0.92; }
.bouton.secondaire { background: white; color: var(--couleur-primaire); border: 1px solid var(--couleur-primaire); }
.bouton.danger { background: var(--rouge); }

.champ { margin-bottom: 1rem; }
.champ label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
/* Une case à cocher se lit sur une ligne, à côté de son intitulé. La règle était
   réservée aux blocs `.champ` : ailleurs, la case retombait sur la disposition en
   colonne des autres champs et se retrouvait décrochée au-dessus de son libellé. */
label.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
}
label.radio-inline input { width: auto; flex: none; margin: 0; }
.champ label.radio-inline { margin-right: 1.5rem; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 6px;
  font-size: 0.95rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--couleur-accent);
}

/* Sur téléphone, minmax(180px) ne tenait qu'une tuile par ligne : huit indicateurs
   occupaient huit écrans, dont cinq à zéro. */
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.25rem; }
.stat-tuile { background: white; border: 1px solid var(--couleur-bordure); border-radius: 8px; padding: 1rem; }
.stat-tuile .valeur { font-size: 1.6rem; font-weight: 700; color: var(--couleur-primaire); line-height: 1.15; }
.stat-tuile .libelle { font-size: 0.85rem; color: var(--gris); }

.message-erreur { background: #fdecea; color: var(--rouge); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.message-succes { background: #eaf7ee; color: var(--vert); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }

.etapes { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.etapes span { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--couleur-primaire-claire); font-size: 0.8rem; }
.etapes span.active { background: var(--couleur-primaire); color: white; }

/* --- Identité visuelle Espace PME --- */
header.app-header .marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.logo-entete {
  height: 52px;
  width: auto;
  display: block;
}
.nom-produit {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}
.logo-accueil {
  max-width: 300px;
  width: 60%;
  height: auto;
  margin: 0 auto 1rem;
  display: block;
}
@media (max-width: 600px) {
  .logo-entete { height: 40px; }
  .logo-accueil { width: 75%; }
}

/* --- Police de marque Designosaur ---
   Réservée aux titres de la page d'accueil et au nom du produit : c'est une police
   d'affichage, peu lisible en petits caractères et dépourvue de quelques signes
   (apostrophe typographique, tiret cadratin, points de suspension, degré). Le reste de
   l'application garde la police système, plus lisible pour un usage de gestion. */
@font-face {
  font-family: "Designosaur";
  src: url("/static/fonts/designosaur.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* le texte reste lisible pendant le chargement de la police */
}

.accueil h1,
.accueil h2,
header.app-header .nom-produit {
  font-family: "Designosaur", -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
}
.accueil h1 { font-size: 2rem; line-height: 1.15; }
@media (max-width: 600px) {
  .accueil h1 { font-size: 1.5rem; }
}

/* --- Accents rose (#cc3366) ---
   Le rose sert à guider le regard : action principale, prix, étape en cours.
   Le bleu marine reste la couleur de structure, pour ne pas diluer l'accent. */

.bouton.accent { background: var(--couleur-accent); }
.bouton.accent:hover { background: var(--couleur-accent-fonce); opacity: 1; }

/* Titres de section soulignés d'un filet rose */
.accueil h2 {
  border-bottom: 3px solid var(--couleur-accent);
  padding-bottom: 0.35rem;
  display: inline-block;
}

/* Prix des formules */
.accueil .stat-tuile .valeur { color: var(--couleur-accent); }
.accueil .stat-tuile { border-top: 3px solid var(--couleur-accent); }

/* Numéros du déroulé « Comment ça marche » */
.accueil table th {
  background: var(--couleur-accent);
  color: white;
  text-align: center;
}

/* Étape en cours du tunnel de souscription */
.etapes span.active { background: var(--couleur-accent); }

/* Liens de contenu */
main a:not(.bouton) { color: var(--couleur-accent-fonce); }
main a:not(.bouton):hover { color: var(--couleur-accent); }

/* Choix d'une offre : puce alignée en haut, la description pouvant tenir sur 2 lignes */
.champ label.radio-inline.offre {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  background: white;
}
.champ label.radio-inline.offre:hover { border-color: var(--couleur-accent); }
.champ label.radio-inline.offre input { margin-top: 0.2rem; }
.champ label.radio-inline.offre small { color: var(--gris); }

/* --- Icônes --- */
.ico-offre {
  width: 30px; height: 30px;
  color: var(--couleur-accent);
  display: block;
  margin-bottom: 0.4rem;
}

.etapes-accueil {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.etapes-accueil li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--couleur-bordure);
}
.etapes-accueil li:last-child { border-bottom: none; }
.etapes-accueil svg {
  width: 26px; height: 26px;
  flex: 0 0 26px;      /* l'icône ne doit pas se comprimer sur écran étroit */
  color: var(--couleur-accent);
  margin-top: 0.15rem;
}
.etapes-accueil strong { color: var(--couleur-primaire); }

/* Carte de formule cliquable sur la page d'accueil */
.accueil .offre-lien {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.accueil .offre-lien:hover,
.accueil .offre-lien:focus-visible {
  border-color: var(--couleur-accent);
  box-shadow: 0 3px 12px rgba(0, 51, 102, .12);
  transform: translateY(-2px);
}
.accueil .offre-lien:focus-visible { outline: 2px solid var(--couleur-accent); outline-offset: 2px; }
.offre-action {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--couleur-accent);
}
/* Le survol ne doit pas être le seul indice : conservé au clavier et au toucher */
@media (hover: none) {
  .accueil .offre-lien { border-color: var(--couleur-bordure); }
}

/* --- Page contact --- */
.piege {            /* champ anti-robot : retiré du flux sans display:none, que
                       certains robots détectent */
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.grille-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.plan {
  width: 100%;
  height: 300px;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
}
@media (max-width: 720px) {
  .grille-contact { grid-template-columns: 1fr; }
  .plan { height: 240px; }
}

.faq {
  border-bottom: 1px solid var(--couleur-bordure);
  padding: 0.7rem 0;
}
.faq:last-of-type { border-bottom: none; }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--couleur-primaire);
}
.faq summary:hover { color: var(--couleur-accent); }
.faq p { margin: 0.5rem 0 0; }

/* --- Widget de messagerie --- */
.widget-contact {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.widget-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--couleur-accent);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.widget-bouton:hover { background: var(--couleur-accent-fonce); }
.widget-bouton svg { width: 20px; height: 20px; }

.widget-panneau {
  order: -1;                 /* le panneau s'ouvre au-dessus du bouton */
  width: min(330px, calc(100vw - 2.2rem));
  background: white;
  border: 1px solid var(--couleur-bordure);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.widget-entete {
  background: var(--couleur-primaire);
  color: white;
  padding: 0.7rem 1rem;
  font-weight: 600;
}
.widget-corps { padding: 0.9rem 1rem 1rem; max-height: 60vh; overflow-y: auto; }
.widget-corps .champ { margin-bottom: 0.7rem; }
.widget-corps label { font-size: 0.85rem; }

/* Saisie d'un numéro international : indicatif à gauche, numéro à droite */
.telephone {
  display: flex;
  gap: 0.5rem;
}
.telephone select {
  flex: 0 0 auto;
  max-width: 12rem;
  width: auto;
}
.telephone input { flex: 1; }
@media (max-width: 520px) {
  .telephone { flex-direction: column; }
  .telephone select { max-width: none; }
}

/* Navigation entre les étapes de souscription */
.navigation-etapes {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.4rem;
}

/* Avertissement d'expiration du tunnel de souscription */
.modale-fond {
  position: fixed;
  inset: 0;
  z-index: 100;                /* au-dessus du widget de messagerie (z-index 60) */
  background: rgba(0, 20, 51, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modale-fond[hidden] { display: none; }
.modale {
  background: white;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  padding: 1.4rem 1.6rem;
  max-width: 27rem;
}
.modale h2 { margin-top: 0; }

/* Déclaration de plusieurs dirigeants */
.bloc-dirigeants {
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  padding: 0.8rem 1rem 1rem;
  margin-bottom: 1rem;
}
.bloc-dirigeants legend { font-weight: 600; padding: 0 0.4rem; }
.ligne-dirigeant {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.ligne-dirigeant input, .ligne-dirigeant select { flex: 1 1 8rem; min-width: 0; }
.ligne-dirigeant button { flex: 0 0 auto; }

/* Bandeau permanent de l'instance de démonstration */
.bandeau-demo {
  background: var(--couleur-accent);
  color: white;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Pages de documentation publique */
.documentation h2 { margin-top: 1.8rem; }
.documentation table th { width: 34%; text-align: left; vertical-align: top; }
.documentation li { margin-bottom: 0.35rem; }
.documentation hr { border: none; border-top: 1px solid var(--couleur-bordure); margin: 2rem 0; }

/* Modification d'un utilisateur, dépliée sous sa ligne */
.ligne-modification {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-end;
}
.ligne-modification label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  flex: 1 1 10rem;
}
.ligne-modification label.radio-inline {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  /* Alignée sur la ligne de saisie des autres champs, dont le libellé occupe la
     ligne du dessus. */
  padding-bottom: 0.5rem;
}

/* Navigation principale, présente sur toutes les pages une fois connecté */
/* --- Navigation en colonne -------------------------------------------------
   La colonne se lit en trois plans, dans l'ordre où l'on arrive le matin : ce qui
   attend une action, ce qu'on ouvre chaque jour, ce qu'on règle une fois par
   trimestre. Une liste de vingt liens de même poids ne disait rien de tout cela :
   il fallait ouvrir chaque écran pour découvrir qu'il était vide. */
.corps-application {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
}
.corps-application.sans-menu { grid-template-columns: minmax(0, 1fr); }
/* Colonne explicite : placé automatiquement, le contenu se rangeait sous le menu. */
.corps-application > main { grid-column: 2; max-width: 1100px; margin: 1.5rem auto;
  padding: 0 1.5rem; width: 100%; }
.corps-application.sans-menu > main { grid-column: 1; }

.cadre-navigation {
  grid-column: 1;
  background: white;
  border-right: 1px solid var(--couleur-bordure);
  min-height: calc(100vh - 4.6rem);
}
.cadre-navigation > .bascule-menu { display: none; }

.menu-lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 0.7rem 2rem;
  font-size: 0.9rem;
  max-height: 100vh;
  overflow-y: auto;
}
.menu-lateral a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--couleur-texte);
  text-decoration: none;
  padding: 0.36rem 0.6rem;
  border-radius: 7px;
  border-left: 3px solid transparent;
}
.menu-lateral a .texte { flex: 1; min-width: 0; }
.menu-lateral .ico { width: 1.05rem; height: 1.05rem; flex: none; opacity: 0.72; }
.menu-lateral a:hover { background: var(--couleur-primaire-claire); text-decoration: none; }
/* La page ouverte se repère sans lire : c'est ce qui manque le plus dans un menu long. */
.menu-lateral a.actif {
  background: var(--couleur-primaire-claire);
  border-left-color: var(--couleur-accent);
  color: var(--couleur-primaire);
  font-weight: 600;
}
.menu-lateral a.actif .ico { opacity: 1; color: var(--couleur-accent); }

/* Champ de recherche : c'est un bouton déguisé, la saisie a lieu dans la palette. */
.champ-recherche {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.86rem;
  color: #6b7a90;
  background: #f4f7fa;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}
.champ-recherche:hover { border-color: var(--couleur-accent); color: var(--couleur-texte); }
.champ-recherche .ico { width: 1rem; height: 1rem; flex: none; }
.champ-recherche span { flex: 1; }
.champ-recherche kbd {
  font: inherit; font-size: 0.7rem; color: #8a97a6;
  border: 1px solid var(--couleur-bordure); border-radius: 4px;
  padding: 0.05rem 0.3rem; background: white;
}

.entree-sommet { font-weight: 600; }

/* Ce qui attend une action. Le bloc ne montre que des compteurs non nuls : rempli de
   zéros, il cesserait d'être lu au bout d'une semaine. */
.bloc-alertes {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0.65rem 0 0.1rem;
  padding: 0.5rem 0.4rem 0.45rem;
  background: #fff8f1;
  border: 1px solid #f2ddc7;
  border-radius: 9px;
}
.bloc-alertes.vide { background: #f4f8f5; border-color: #dce9e0; }
.bloc-alertes .titre-groupe { padding-bottom: 0.35rem; }
.menu-lateral .alerte {
  padding: 0.3rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1.25;
  align-items: flex-start;
  border-left: none;
}
.menu-lateral .alerte:hover { background: #fdeedd; }
.menu-lateral .alerte .puce {
  width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none;
  background: var(--jaune); margin-top: 0.35rem;
}
.menu-lateral .alerte.urgent .puce { background: var(--rouge); }
.menu-lateral .alerte.urgent { color: #96201f; font-weight: 600; }
.rien-en-attente {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0.15rem 0.45rem 0.1rem;
  font-size: 0.85rem; color: #3d6b50;
}
.rien-en-attente .ico { width: 0.95rem; height: 0.95rem; }

/* Pastille de charge : le chiffre se lit sans ouvrir la page. */
.pastille {
  flex: none;
  min-width: 1.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--couleur-primaire);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

/* Les gestes d'ouverture ne sont pas des destinations : ils se détachent. */
.actions-menu { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.7rem 0 0.1rem; }
.menu-lateral .alerte-reste { font-size: 0.8rem; color: #8a6d3b; padding: 0.15rem 0.45rem; }
.menu-lateral .menu-action {
  color: white;
  background: var(--couleur-accent);
  font-weight: 600;
  border-left: none;
  justify-content: flex-start;
}
.menu-lateral .menu-action:hover { background: var(--couleur-accent-fonce); }
.menu-lateral .menu-action .ico { opacity: 1; }
.menu-lateral .actions-menu a + a {
  background: white;
  color: var(--couleur-accent);
  border: 1px solid var(--couleur-accent);
}
.menu-lateral .actions-menu a + a:hover { background: #fdf1f5; }

.menu-groupe-lateral { display: flex; flex-direction: column; margin-top: 0.85rem; }
.titre-groupe {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #7d8b9c;
  padding: 0 0.6rem 0.25rem;
}
/* Les réglages restent repliés : ils encombraient une colonne parcourue vingt fois
   par jour pour y chercher tout autre chose. */
.menu-groupe-lateral.repliable > summary {
  display: flex; align-items: center; gap: 0.4rem;
  cursor: pointer; list-style: none; padding-bottom: 0.35rem;
}
.menu-groupe-lateral.repliable > summary::-webkit-details-marker { display: none; }
.menu-groupe-lateral.repliable > summary .ico { width: 0.85rem; height: 0.85rem; }
.menu-groupe-lateral.repliable > summary:hover { color: var(--couleur-primaire); }

.menu-pied { margin-top: auto; padding-top: 1.2rem; }
.menu-lateral .menu-discret { color: #7d8b9c; font-size: 0.85rem; }
.menu-lateral .menu-discret:hover { color: var(--rouge); background: #fdf0f0; }

/* Compte : replié dans l'en-tête, il ne prend la parole que si on le demande. */
.menu-compte { position: relative; }
.menu-compte > summary {
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer; list-style: none; padding: 0.2rem 0.3rem; border-radius: 999px;
}
.menu-compte > summary::-webkit-details-marker { display: none; }
.menu-compte > summary:hover { background: rgba(255, 255, 255, 0.12); }
.pastille-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--couleur-accent); color: white;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em;
}
.nom-compte { font-size: 0.9rem; }
.volet-compte {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30;
  min-width: 14rem; padding: 0.5rem;
  background: white; color: var(--couleur-texte);
  border: 1px solid var(--couleur-bordure); border-radius: 9px;
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.16);
}
.volet-compte .role-compte {
  margin: 0.2rem 0.5rem 0.5rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.85rem; font-weight: 600;
}
.volet-compte .role-compte small { font-weight: 400; color: #6b7a90; }
.volet-compte a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.5rem; border-radius: 6px;
  color: var(--couleur-texte); font-weight: 400;
}
.volet-compte a:hover { background: var(--couleur-primaire-claire); text-decoration: none; }
.volet-compte .ico { width: 1rem; height: 1rem; opacity: 0.7; }

/* Palette de recherche : atteindre un dossier sans traverser le menu. */
dialog.palette {
  width: min(38rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--couleur-bordure);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(16, 32, 51, 0.28);
  margin-top: 12vh;
}
dialog.palette::backdrop { background: rgba(16, 32, 51, 0.42); }
.palette-entete {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--couleur-bordure);
}
.palette-entete .ico { width: 1.1rem; height: 1.1rem; color: #6b7a90; flex: none; }
.palette-entete input {
  flex: 1; border: none; outline: none; font: inherit; font-size: 1rem;
  background: transparent; padding: 0.2rem 0;
}
.palette-entete .fermer {
  border: 1px solid var(--couleur-bordure); background: #f4f7fa; color: #6b7a90;
  border-radius: 5px; font: inherit; font-size: 0.72rem; padding: 0.15rem 0.4rem;
  cursor: pointer;
}
.palette-resultats { max-height: min(26rem, 60vh); overflow-y: auto; padding: 0.4rem; }
.palette-titre {
  margin: 0.5rem 0.6rem 0.25rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: #7d8b9c;
}
.palette-aide { margin: 1.2rem 0.7rem; color: #7d8b9c; font-size: 0.9rem; }
a.palette-resultat {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 7px;
  color: var(--couleur-texte); text-decoration: none;
}
a.palette-resultat .ico { width: 1.05rem; height: 1.05rem; opacity: 0.7; flex: none; }
.palette-libelle { font-weight: 600; }
.palette-detail {
  flex: 1; min-width: 0; text-align: right;
  font-size: 0.8rem; color: #7d8b9c;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Surlignage au clavier comme à la souris : la flèche et le curseur désignent la
   même ligne, sinon on ne sait plus où Entrée va mener. */
a.palette-resultat:hover, a.palette-resultat.survole {
  background: var(--couleur-primaire-claire);
}
a.palette-resultat.survole { outline: 2px solid var(--couleur-accent); outline-offset: -2px; }

/* Sous 60rem la colonne mangerait l'écran : le menu se replie derrière un bouton. */
@media (max-width: 60rem) {
  .corps-application { grid-template-columns: minmax(0, 1fr); }
  .corps-application > main { grid-column: 1; }
  .cadre-navigation {
    border-right: none;
    border-bottom: 1px solid var(--couleur-bordure);
    min-height: 0;
  }
  .cadre-navigation > .bascule-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.6rem 1rem;
    font-weight: 600;
    color: var(--couleur-primaire);
  }
  .menu-lateral { position: static; max-height: none; padding-bottom: 1rem; }
  .menu-pied { margin-top: 1.2rem; }
  .corps-application > main { padding: 0 1rem; }
  /* L'en-tête se chevauchait faute de pouvoir passer à la ligne. */
  header.app-header { flex-wrap: wrap; gap: 0.3rem 0.8rem; padding: 0.6rem 1rem; }
  header.app-header nav { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
  header.app-header nav a { margin-left: 0; }
  .nom-compte { display: none; }
  .logo-entete { height: 40px; }
}

/* Sélecteur de colonnes de la liste des dossiers */
.grille-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.2rem 0.8rem;
  margin: 0.6rem 0 0.9rem;
}

/* Actions d'une fiche ou d'une ligne : les destructives sont rejetées à l'opposé
   des actions courantes, pour qu'un clic de trop ne les atteigne pas. */
.barre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.barre-actions .action-a-droite { margin-left: auto; }
.ico { width: 1em; height: 1em; vertical-align: -0.12em; fill: currentColor; }

/* Actions irréversibles : discrètes et à l'écart.
   Un bouton rouge pleine largeur au milieu d'actions courantes invite au clic ;
   une suppression doit demander une intention, pas un réflexe. */
.lien-danger {
  color: var(--rouge, #c0392b);
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  padding: 0;
  background: none;
  border-radius: 0;
  opacity: .75;
}
.lien-danger:hover { opacity: 1; text-decoration: none; border-bottom-style: solid; }

/* Fenêtre modale d'écriture au client */
.fenetre {
  width: min(38rem, calc(100vw - 2rem));
  border: none;
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  color: var(--couleur-texte, inherit);
}
.fenetre::backdrop { background: rgba(0, 20, 51, .55); }
.fenetre h2 { margin-top: 0; }
.fenetre textarea { width: 100%; }

/* Tableau large : défilement horizontal, colonnes d'identification figées.
   Sans cela, ajouter des colonnes rendait la lecture impossible — on perdait de vue
   à quelle société correspondait la ligne parcourue. */
.table-defilante {
  /* Les deux axes défilent dans le cadre. Sans hauteur bornée, cent dossiers
     allongeaient la page et l'on perdait la ligne d'en-tête au premier écran passé. */
  overflow: auto;
  max-height: min(70vh, 40rem);
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--couleur-bordure);
  border-radius: 6px;
}
/* macOS masque les barres jusqu'à ce qu'on défile : rien ne dirait qu'il reste des
   colonnes à droite ou des lignes en dessous. Elles restent visibles.
   `scrollbar-width` désactiverait ces pseudo-éléments : on le réserve à qui les ignore. */
@supports not selector(::-webkit-scrollbar) {
  .table-defilante { scrollbar-width: thin; scrollbar-color: var(--gris) var(--couleur-primaire-claire); }
}
.table-defilante::-webkit-scrollbar { width: 10px; height: 10px; -webkit-appearance: none; }
.table-defilante::-webkit-scrollbar-track {
  background: var(--couleur-primaire-claire); border-radius: 5px;
}
.table-defilante::-webkit-scrollbar-thumb {
  background: var(--gris); border-radius: 5px; border: 2px solid var(--couleur-primaire-claire);
}
.table-defilante::-webkit-scrollbar-thumb:hover { background: var(--couleur-primaire); }
.table-defilante::-webkit-scrollbar-corner { background: var(--couleur-primaire-claire); }

.table-defilante table { min-width: 100%; }
/* L'en-tête suit le défilement vertical : sans lui, on ne sait plus quelle colonne
   on lit dès la dixième ligne. */
.table-defilante thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--couleur-primaire-claire);
}
/* Les actions tenaient sur trois lignes dans leur cellule étroite, portant chaque
   ligne à 115 px : cinq dossiers remplissaient l'écran. Elles restent d'un tenant,
   le tableau défilant pour les atteindre. */
.table-defilante .barre-actions { flex-wrap: nowrap; }
.table-defilante .barre-actions .action-a-droite { margin-left: 0.4rem; }
.table-defilante th,
.table-defilante td { white-space: nowrap; }
.table-defilante .gelee {
  position: sticky;
  z-index: 2;
  background: white;
}
/* Coin haut-gauche : figé dans les deux sens, il passe devant tout le reste. */
.table-defilante thead .gelee {
  z-index: 5;
  background: var(--couleur-primaire-claire);
}
/* Les décalages sont posés par le script : fixés en dur, ils se chevauchaient dès que
   le contenu d'une colonne changeait de largeur. */
.table-defilante .gelee-1 { left: 0; }
/* Trait de séparation : sans lui, la colonne figée se confond avec ce qui défile. */
.table-defilante .gelee-3 { box-shadow: 1px 0 0 var(--couleur-bordure); }

/* Visionneuse de documents */
.fenetre-large { width: min(60rem, calc(100vw - 2rem)); }
#cadre-apercu {
  width: 100%;
  height: min(70vh, 40rem);
  border: 1px solid var(--couleur-bordure);
  border-radius: 6px;
  background: white;
}
#cadre-apercu[hidden] { display: none; }


/* Bandeau de consultation de l'espace d'un client : couleur distincte du bandeau de
   démonstration, les deux pouvant être affichés en même temps. */
.bandeau-incarnation {
  background: #6b3fa0;
  color: #fff;
  padding: .5rem 1rem;
  text-align: center;
  font-size: .9rem;
}
.bandeau-incarnation a { color: #fff; font-weight: 600; }


/* Écran de tri : la liste des scans et le panneau d'affectation restent côte à côte,
   le panneau suivant le défilement — on renseigne l'expéditeur en regardant la pièce. */
.tri-numerisation { display: grid; grid-template-columns: 1fr 22rem; gap: 1rem; align-items: start; }
.panneau-affectation { position: sticky; top: 1rem; }
@media (max-width: 60rem) { .tri-numerisation { grid-template-columns: 1fr; }
  .panneau-affectation { position: static; } }


/* Actions des listes en icônes. Le libellé reste dans le document — lu par les lecteurs
   d'écran, affiché au survol — car une icône seule ne se devine pas : « réattribuer »
   et « retrait effectué » n'ont pas de symbole évident. */
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--bordure, #d5dbe3);
  border-radius: 6px;
  background: #fff;
  color: var(--couleur-primaire, #12305c);
  cursor: pointer;
  line-height: 1;
}
.bouton-icone:hover { background: var(--fond-clair, #f2f5f9); text-decoration: none; }
.bouton-icone .ico { width: 1.15rem; height: 1.15rem; }
.bouton-icone.danger { color: var(--rouge, #c0392b); border-color: #e6c3bd; }
.bouton-icone[disabled] { opacity: .45; cursor: not-allowed; }

/* Libellé réservé aux lecteurs d'écran : retiré de l'affichage, pas du document. */
.libelle-invisible {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* Actions d'une ligne de tableau : une seule rangée, alignée, qui passe à la ligne
   seulement si la largeur l'impose. */
td.barre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
td.barre-actions form { display: flex; align-items: center; gap: .35rem; margin: 0; }
td.barre-actions select { max-width: 11rem; }


/* Tuiles d'indicateurs cliquables : chacune ouvre la liste qu'elle compte. */
a.stat-tuile { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s; }
a.stat-tuile:hover { box-shadow: 0 2px 10px rgba(18, 48, 92, .15); text-decoration: none; }
a.stat-tuile:hover .libelle { text-decoration: underline; }

/* --- Espace client ---------------------------------------------------------
   « Quelle est mon adresse ? » est la question la plus posée : sa réponse ouvre la
   page, prête à être collée dans un formulaire administratif. */
.carte-adresse { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.carte-adresse .adresse {
  margin: 0.35rem 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.5;
  font-weight: 600;
  white-space: pre-line;
}
.carte-adresse .titre-groupe { padding-left: 0; }

/* Ce qui reste à faire, en gestes plutôt qu'en états. */
.liste-actions { margin: 0; padding-left: 1.1rem; }
.liste-actions li { margin-bottom: 0.4rem; }
.liste-actions li a { font-weight: 600; }
.liste-actions li small {
  display: block; color: #6b7a90;
  /* Les libellés de pièces sont longs : la ligne se coupe plutôt que de
     déborder de la carte. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lien-suite { margin: 0.8rem 0 0; }
.carte .rien-en-attente { padding: 0; }

/* --- Tableau de bord -------------------------------------------------------
   Les tuiles ne répètent plus les compteurs de la colonne : elles portent ce que le
   menu ne dira jamais — la taille et le revenu du portefeuille. */
.stat-tuile .appoint { font-size: 0.78rem; color: #8a97a6; margin-top: 0.3rem; }
a.stat-tuile { text-decoration: none; display: block; }
a.stat-tuile:hover { border-color: var(--couleur-accent); text-decoration: none; }
.stat-tuile.alerte-tuile { border-color: #f0c9a0; background: #fff8f1; }
.stat-tuile.alerte-tuile .valeur { color: var(--rouge); }

/* Ce qui traîne se voit : quatorze jours d'attente ne se lisent pas dans un nombre. */
tr.ligne-en-retard td { background: #fff8f1; }
tr.ligne-en-retard td:first-child a { font-weight: 600; }
td.colonne-action { text-align: right; white-space: nowrap; }
.date-echeance {
  display: inline-block; min-width: 6.2rem;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--couleur-primaire);
}
.liste-actions li .date-echeance + a { margin-left: 0.2rem; }

/* --- Dépôt d'une pièce -----------------------------------------------------
   Le formulaire tenait dans une cellule de tableau : date, fichier et bouton s'y
   écrasaient sur une ligne, et la consigne de fraîcheur y devenait illisible. Chaque
   pièce a maintenant son bloc, et le formulaire respire sur deux colonnes. */
.piece {
  border: 1px solid var(--couleur-bordure);
  border-radius: 9px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.piece.a-fournir { border-left: 3px solid var(--couleur-accent); }
.piece:last-child { margin-bottom: 0; }
.piece-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.piece-entete h3 { margin: 0; font-size: 1rem; }
.piece-entete .reference { margin: 0.2rem 0 0; color: #7d8b9c; }
.piece-etat { text-align: right; font-size: 0.88rem; white-space: nowrap; }
.piece .consigne { margin: 0.45rem 0 0; color: #8a6d3b; }
.piece .message-erreur { margin: 0.5rem 0 0; }

/* Replié, l'essentiel se lit sur une ligne ; déplié, on remplace la pièce. */
details.piece > summary { cursor: pointer; list-style: none; }
details.piece > summary::-webkit-details-marker { display: none; }
details.piece > summary::after {
  content: "Remplacer cette pièce";
  display: block; margin-top: 0.4rem;
  font-size: 0.82rem; color: var(--couleur-accent);
}
details.piece[open] > summary::after { content: "Replier"; }
.piece-corps { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--couleur-bordure); }
.actions-piece { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.actions-piece .nom-fichier { font-size: 0.82rem; color: #7d8b9c; }

.depot-piece {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  margin-top: 0.7rem;
}
.depot-piece .champ { display: flex; flex-direction: column; gap: 0.25rem; }
.depot-piece .champ > span { font-size: 0.8rem; color: #6b7a90; }
.depot-piece .champ input[type="date"] { padding: 0.4rem 0.5rem; }
.depot-piece .champ-fichier { flex: 1; min-width: 14rem; }
.depot-piece .champ-fichier input { font-size: 0.85rem; }
.depot-piece button { flex: none; }

@media (max-width: 45rem) {
  .piece-entete { flex-direction: column; gap: 0.35rem; }
  .piece-etat { text-align: left; }
  .depot-piece { flex-direction: column; align-items: stretch; }
  .depot-piece button { width: 100%; }
}

/* Dépôt côté équipe : le sélecteur de pièce prend la largeur, les dates suivent. */
.depot-equipe { align-items: flex-end; }
.depot-piece .champ-large { flex: 1 1 16rem; }
.depot-piece .champ-large select { padding: 0.4rem 0.5rem; width: 100%; }
.depot-piece .champ[hidden] { display: none; }