/* Compléments à Pico.css */

/* Pico affiche tout <small> qui suit un champ comme une aide SOUS le champ (bloc + marge négative).
   Derrière une case à cocher ou un bouton radio, le texte du libellé s'intercale : la précision
   doit alors rester sur la même ligne, sinon elle chevauche le libellé. */
label > input:is([type="checkbox"], [type="radio"]) ~ small {
  display: inline;
  width: auto;
  margin: 0 0 0 .3rem;
}

form.en-ligne { margin: 0; }
form.en-ligne button { margin: 0; padding: .3rem .8rem; }

article.etroit { max-width: 32rem; margin-inline: auto; }

button.large { width: 100%; }

.message { padding: .6rem .9rem; border-radius: .4rem; }
.message.erreur { background: #fdecea; color: #8a1c13; }
.message.succes { background: #e8f5e9; color: #1b5e20; }

.grille-indicateurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}
.chiffre { font-size: 2.2rem; font-weight: 700; margin: 0; }

.entete-page {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: space-between; align-items: center; margin-bottom: 1rem;
}
.entete-page h2 { margin: 0; }
.entete-page [role="button"] { margin: 0 0 0 .4rem; }

.actions-ligne { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.actions-ligne select { width: auto; margin: 0; padding: .3rem 2rem .3rem .6rem; }
.actions-ligne button { margin: 0; padding: .3rem .8rem; width: auto; }

dl.coordonnees { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
dl.coordonnees dt { font-weight: 600; }
dl.coordonnees dd { margin: 0; }

label.case { display: flex; align-items: center; gap: .5rem; margin-top: 1.8rem; }

/* ---- V0.2 : listes, tâches, commentaires ---- */
form.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
form.filtres select { width: auto; margin: 0; }

.priorite { font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; white-space: nowrap; }
.priorite-basse   { background: #eceff1; color: #455a64; }
.priorite-normale { background: #e3f2fd; color: #0d47a1; }
.priorite-haute   { background: #fff3e0; color: #e65100; }
.priorite-urgente { background: #fdecea; color: #b71c1c; font-weight: 600; }

td.en-retard { color: #b71c1c; font-weight: 600; }
tr.fermee td { opacity: .55; }
td.montant { text-align: right; white-space: nowrap; }

table.taches select.statut-tache { margin: 0; padding: .2rem 1.8rem .2rem .5rem; font-size: .85rem; width: auto; }

.texte-libre { white-space: pre-line; }

.commentaire { border-left: 3px solid var(--pico-primary-border, #1976d2); padding: .3rem 0 .3rem .8rem; margin-bottom: .8rem; }
.commentaire-entete { display: flex; gap: .6rem; align-items: baseline; }

fieldset.choix-assignes { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
fieldset.choix-assignes legend { width: 100%; }
fieldset.choix-assignes label { margin: 0; }

ul.liste-simple { list-style: none; padding: 0; }
ul.liste-simple li { display: flex; gap: .6rem; align-items: center; }
button.petit { padding: .05rem .45rem; font-size: .8rem; margin: 0; }

/* ---- V0.3 : dégradations, documents ---- */
.gravite { font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; white-space: nowrap; }
.gravite-mineure    { background: #eceff1; color: #455a64; }
.gravite-moyenne    { background: #fff8e1; color: #8d6e00; }
.gravite-importante { background: #fff3e0; color: #e65100; }
.gravite-critique   { background: #fdecea; color: #b71c1c; font-weight: 600; }

.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.vignettes figure { margin: 0; }
.vignettes img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: block; }
.vignettes figcaption { display: flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: center; font-size: .85rem; margin-top: .3rem; }
.vignettes figcaption span { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galerie input[type="file"] { margin-bottom: .3rem; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ---- V0.3.5 : calendrier ---- */
.cal-barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.cal-groupe { display: flex; gap: .3rem; flex-wrap: wrap; }
.cal-groupe [role="button"] { margin: 0; padding: .3rem .8rem; }
.cal-filtres { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin-bottom: 1rem; font-size: .9rem; }
.cal-case { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.cal-case input { margin: 0; }
.cal-pastille { display: inline-block; min-width: 1.5em; text-align: center; border-radius: .3rem;
  background: var(--cal-fond); color: var(--cal-texte); font-size: .85em; }
.cal-moi { margin-left: auto; }

/* élément : fond = couleur de la catégorie, symbole devant le titre */
.cal-el { position: relative; display: flex; gap: .25rem; align-items: baseline; text-decoration: none;
  background: var(--cal-fond); color: var(--cal-texte); border-radius: .3rem; padding: .05rem .35rem;
  margin: .12rem 0; font-size: .78rem; line-height: 1.35; }
/* pas de filter/transform au survol : ils créeraient un contexte d'empilement qui piégerait l'infobulle
   sous les éléments des cases suivantes ; on élève plutôt l'élément entier */
.cal-el:hover, .cal-el:focus-visible { z-index: 30; outline: 2px solid var(--cal-fond); outline-offset: 1px; }
.cal-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-heure { font-weight: 600; white-space: nowrap; }
.cal-termine { opacity: .5; }
.cal-termine .cal-titre { text-decoration: line-through; }
.cal-retard { box-shadow: inset 0 0 0 2px #b71c1c; font-weight: 600; }
/* continuité des éléments sur plusieurs jours */
.cal-debut  { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -.35rem; }
.cal-milieu { border-radius: 0; margin-left: -.35rem; margin-right: -.35rem; }
.cal-fin    { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -.35rem; }

/* infobulle : survol à la souris, ou focus au clavier */
.bulle { display: none; position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); width: max-content;
  max-width: 19rem; background: #263238; color: #fff; padding: .45rem .6rem; border-radius: .35rem;
  font-size: .8rem; font-weight: 400; line-height: 1.4; white-space: normal; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.cal-el:hover .bulle, .cal-el:focus-visible .bulle { display: block; }

/* vue mois */
.cal-mois { border: 1px solid var(--pico-muted-border-color, #ddd); border-radius: .4rem; }
.cal-ligne { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-entetes div { text-align: center; font-size: .8rem; font-weight: 600; padding: .3rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd); }
.cal-case-jour { min-height: 6.5rem; padding: .2rem .35rem; border-right: 1px solid var(--pico-muted-border-color, #ddd);
  border-bottom: 1px solid var(--pico-muted-border-color, #ddd); min-width: 0; }
.cal-ligne .cal-case-jour:last-child { border-right: none; }
.cal-case-jour.hors-mois { background: rgba(127,127,127,.06); }
.cal-case-jour.hors-mois .cal-num { opacity: .45; }
.cal-num { font-size: .8rem; font-weight: 600; text-decoration: none; }
.aujourdhui .cal-num { background: var(--pico-primary, #1976d2); color: #fff; border-radius: 1rem; padding: 0 .45rem; }
.cal-plus { display: block; font-size: .75rem; }
/* les infobulles des colonnes de droite s'ouvrent vers la gauche */
.cal-ligne .cal-case-jour:nth-child(n+5) .bulle { left: auto; right: 0; }

/* vue semaine */
.cal-semaine-vue { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.cal-colonne { border: 1px solid var(--pico-muted-border-color, #ddd); border-radius: .4rem; padding: .3rem; min-height: 10rem; min-width: 0; }
.cal-colonne header { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: .3rem; }
.cal-colonne header a { text-decoration: none; }
.cal-colonne.aujourdhui { border-color: var(--pico-primary, #1976d2); border-width: 2px; }
.cal-colonne:nth-child(n+5) .bulle { left: auto; right: 0; }
.cal-ajout { font-weight: 700; }
.cal-vide { opacity: .5; }

/* vues jour / agenda : résumé en clair */
.cal-liste .cal-el { font-size: .95rem; padding: .35rem .6rem; flex-wrap: wrap; margin: .3rem 0; }
.cal-liste .cal-el .cal-titre { white-space: normal; font-weight: 600; }
.cal-liste .cal-debut, .cal-liste .cal-milieu, .cal-liste .cal-fin { border-radius: .3rem; margin-left: 0; margin-right: 0; }
.cal-resume { flex-basis: 100%; font-size: .82rem; opacity: .92; }
.cal-journee { margin-bottom: 1rem; }
.cal-journee h4 { margin: .4rem 0; font-size: 1rem; }
.cal-journee.aujourdhui h4 a { color: var(--pico-primary, #1976d2); }

.cal-apercu { padding: .15rem .6rem; border-radius: .3rem; font-size: .85rem; }

/* téléphone : la vue mois ne garde que les symboles, la semaine s'empile */
@media (max-width: 720px) {
  .cal-case-jour { min-height: 4.2rem; padding: .15rem; }
  .cal-mois .cal-titre, .cal-mois .cal-heure, .cal-mois .bulle { display: none; }
  .cal-mois .cal-el { justify-content: center; padding: 0; font-size: .7rem; }
  .cal-mois .cal-debut, .cal-mois .cal-milieu, .cal-mois .cal-fin { margin-left: 0; margin-right: 0; border-radius: .3rem; }
  .cal-semaine-vue { grid-template-columns: 1fr; }
  .cal-colonne { min-height: 0; }
  .cal-moi { margin-left: 0; }
  .cal-plus-texte { display: none; }
}

/* ---- V0.3.6 : envois par e-mail ---- */
.interne { font-size: .7rem; padding: .05rem .4rem; border-radius: 1rem; background: #fff3e0; color: #e65100;
  text-transform: uppercase; letter-spacing: .03em; }
label.desactive { opacity: .5; }
.vignette-choix { display: block; margin: 0; cursor: pointer; }
.vignette-choix img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .4rem; display: block; }
.vignette-choix span { display: flex; gap: .3rem; align-items: center; font-size: .85rem; margin-top: .2rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.option-signaler { margin-top: 1rem; padding: .5rem .7rem; border-radius: .4rem; background: rgba(25,118,210,.08); }
.apercu-mail { background: #ffffff; color: #1f2933; }
.statut-envoi { font-size: .8rem; padding: .1rem .5rem; border-radius: 1rem; white-space: nowrap; }
.statut-en_cours { background: #e3f2fd; color: #0d47a1; }
.statut-envoye   { background: #e8f5e9; color: #1b5e20; }
.statut-simule   { background: #eceff1; color: #455a64; }
.statut-echec    { background: #fdecea; color: #b71c1c; font-weight: 600; }
pre.corps-envoye { white-space: pre-wrap; font-size: .85rem; }

/* ---- V0.3.7 : réunions du conseil ---- */
.barre-reunion { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.barre-reunion [role="button"] { margin: 0; }
.point-odj { border-left: 3px solid var(--pico-primary-border, #1976d2); padding: .2rem 0 .6rem .9rem; margin-bottom: 1.4rem; }
.point-entete { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.point-entete h4 { margin: 0; }
.point-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.point-objet { margin: .1rem 0 .3rem; }
.point-description { font-style: italic; opacity: .85; }
.notes-point textarea { margin-bottom: .3rem; }
button.petit-bouton { padding: .25rem .8rem; font-size: .85rem; width: auto; }
.decision { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; margin: .5rem 0;
  padding: .45rem .7rem; border-radius: .4rem; background: rgba(25, 118, 210, .08); }
.decision-marque { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pico-primary, #1976d2); }
.decision .texte-libre { flex: 1 1 18rem; }
.decision-tache { font-size: .85rem; flex-basis: 100%; }
.form-decision summary { font-size: .9rem; }
select.choix-presence { margin: 0; padding: .2rem 1.8rem .2rem .5rem; width: auto; font-size: .9rem; }
.onglets { margin-bottom: 1rem; }
tr.a-venir td:first-child { font-weight: 600; }

/* ---- V0.3.8 : partenaires ---- */
.badge-interne { font-size: .72rem; padding: .05rem .45rem; border-radius: 1rem; background: #fdecea; color: #8a1c13; white-space: nowrap; }
.bloc-partage { border-left: 3px solid #6a1b9a; }
.fil-echanges { border-left: 3px solid #6a1b9a; }
.fil-echanges .commentaire { border-left-color: #6a1b9a; }
.commentaire-externe { background: rgba(106, 27, 154, .06); border-radius: 0 .4rem .4rem 0; }
.organisation { font-size: .75rem; padding: .05rem .45rem; border-radius: 1rem; background: #f3e5f5; color: #4a148c; }
.aide-fil { margin-top: -.3rem; }
details.contact { margin-bottom: .4rem; }

a.carte-lien { text-decoration: none; color: inherit; }
a.carte-lien article:hover { outline: 2px solid var(--pico-primary-border, #1976d2); }

/* ---- V0.3.10 : partage à une personne ---- */
details.partage-personnes { margin: .4rem 0 .8rem; }
details.partage-personnes fieldset.choix-assignes { margin-bottom: .4rem; }

/* ---- V0.4.0 : rappels ---- */
label.reglage-nombre { margin-left: 2.6rem; }
label.reglage-nombre input[type="number"] { width: 5.5rem; display: inline-block; margin: 0 .4rem; padding: .25rem .5rem; height: auto; }

/* ---- V0.6.0 : recherche, données personnelles ---- */
li.recherche-menu { position: relative; }
li.recherche-menu form { margin: 0; }
li.recherche-menu input[type="search"] { margin: 0; width: 13rem; padding-top: .3rem; padding-bottom: .3rem; height: auto; }
#recherche-apercu { position: absolute; right: 0; top: 100%; z-index: 50; }
.recherche-liste { min-width: 22rem; max-width: 30rem; max-height: 70vh; overflow-y: auto;
  background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius); box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: .3rem 0; }
.recherche-liste a { display: block; padding: .3rem .8rem; text-decoration: none; line-height: 1.3; }
.recherche-liste a:hover, .recherche-liste a:focus { background: var(--pico-secondary-focus); }
.recherche-liste a small { display: block; color: var(--pico-muted-color); font-size: .78rem; }
.recherche-groupe { padding: .4rem .8rem .1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--pico-muted-color); }
.recherche-liste a.recherche-tout { border-top: 1px solid var(--pico-muted-border-color); margin-top: .3rem; font-size: .85rem; }
.recherche-vide { display: block; padding: .4rem .8rem; color: var(--pico-muted-color); }
ul.recherche-resultats { list-style: none; padding: 0; }
ul.recherche-resultats li { margin-bottom: .5rem; }
footer.pied-page { text-align: center; padding: 1.5rem 0 2rem; color: var(--pico-muted-color); }
.texte-politique h4 { margin: 1.2rem 0 .3rem; }
.texte-politique h4:first-child { margin-top: 0; }
@media (max-width: 900px) { li.recherche-menu input[type="search"] { width: 9rem; } }

/* ---- V0.6.1 : réunions partagées ---- */
.badge-partenaires { font-size: .7rem; font-weight: 500; background: #e6f6ec; color: #1f7a44;
  border-radius: .8rem; padding: .05rem .5rem; margin-left: .4rem; vertical-align: middle; white-space: nowrap; }
#exterieurs form.grid { grid-template-columns: 1fr auto; align-items: start; margin-top: .5rem; }
.message.info { background: #eaf2fb; color: #0d3b66; }

/* ---- V0.7.0 : doléances, plan d'entretien ---- */
.statut-doleance, .etat-entretien { font-size: .8rem; border-radius: .8rem; padding: .05rem .55rem; white-space: nowrap; }
.statut-recue { background: #fff4e5; color: #8a4b00; }
.statut-en_cours, .statut-transmise { background: #eaf2fb; color: #0d3b66; }
.statut-repondue { background: #e6f6ec; color: #1f7a44; }
.statut-close { background: #eef1f4; color: #52606d; }
.etat-en_retard { background: #fdecea; color: #a11d1d; font-weight: 600; }
.etat-jamais { background: #fff4e5; color: #8a4b00; }
.etat-bientot { background: #eaf2fb; color: #0d3b66; }
.etat-a_jour { background: #e6f6ec; color: #1f7a44; }
.etat-inactif { background: #eef1f4; color: #52606d; }
tr.ligne-retard td:first-child { border-left: 3px solid #c62828; }

.chiffre.alerte { color: #c62828; }

/* ---- V0.7.1 : en-tête sur deux lignes ---- */
.entete-site { padding-top: .3rem; }
nav.barre-compte { justify-content: flex-end; border-bottom: 1px solid var(--pico-muted-border-color);
  min-height: 0; margin-bottom: .2rem; }
nav.barre-compte ul { flex-wrap: wrap; justify-content: flex-end; margin: 0; }
nav.barre-compte li { padding: .15rem .55rem; font-size: .82rem; }
nav.barre-compte a, nav.barre-compte .lien-bouton { color: var(--pico-muted-color); }
nav.barre-compte a:hover, nav.barre-compte .lien-bouton:hover { color: var(--pico-primary); }
button.lien-bouton { background: none; border: 0; padding: 0; margin: 0; font-size: inherit; width: auto;
  text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
nav.barre-travail { flex-wrap: wrap; row-gap: .2rem; }
nav.barre-travail ul { flex-wrap: wrap; }
nav.barre-travail li { padding-left: .45rem; padding-right: .45rem; }
nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: .3em;
  text-decoration-thickness: 2px; }

/* ---- V0.7.2 : création d'une entreprise à la volée ---- */
.choix-intervenant details.nouvel-intervenant { margin: -.4rem 0 .8rem; padding: .5rem .8rem;
  border-left: 3px solid var(--pico-muted-border-color); }
.choix-intervenant details.nouvel-intervenant summary { margin-bottom: .3rem; }
.choix-intervenant details.nouvel-intervenant[open] { background: var(--pico-card-sectioning-background-color, #f7f9fb); }

/* ---- V0.9.0 : parcours types ---- */
.barre-parcours { display: flex; gap: 3px; height: .7rem; margin: .2rem 0 .9rem; }
.barre-parcours .segment { flex: 1; border-radius: 3px; background: var(--pico-muted-border-color, #dde3ea); }
.barre-parcours .segment.fait { background: #2e8b57; }
.barre-parcours .segment.sans_objet { background: repeating-linear-gradient(45deg, #e5e8ec 0 4px, #f4f6f8 4px 8px); }
.barre-parcours.compacte { display: inline-flex; width: 6.5rem; height: .5rem; margin: 0 .4rem 0 0; vertical-align: middle; gap: 2px; }
.barre-parcours.complete .segment.fait { background: #1f7a45; }
.parcours header .compte-parcours { margin-left: .5rem; font-weight: 600; }
.badge-partage { font-size: .72rem; padding: .05rem .45rem; border-radius: 1rem; background: #e7f1fb; color: #134a7c; margin-left: .4rem; white-space: nowrap; }
ol.etapes-parcours { padding-left: 0; list-style: none; margin-bottom: 1rem; }
ol.etapes-parcours li.etape { list-style: none; padding: .35rem 0; border-bottom: 1px solid var(--pico-muted-border-color); margin: 0; }
.ligne-etape { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ligne-etape .libelle-etape { flex: 1 1 12rem; }
li.etape.fait .libelle-etape { color: var(--pico-muted-color); }
li.etape.sans_objet .libelle-etape { color: var(--pico-muted-color); text-decoration: line-through; }
.ligne-etape .detail-etape { color: var(--pico-muted-color); }
.note-etape { margin: .15rem 0 0 1.9rem; font-size: .85rem; color: var(--pico-muted-color); }
details.edition-etape { margin: .1rem 0 0 1.9rem; }
details.edition-etape summary { font-size: .8rem; }
.rappel-rgpd { display: block; color: #8a5a00; margin: -.4rem 0 .5rem; }
.parcours .boutons { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.parcours .boutons form { margin: 0; }
.progression-liste { white-space: nowrap; font-size: .8rem; color: var(--pico-muted-color); }
.etapes-modele { margin: .2rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--pico-muted-color); }
.petit-lien { font-size: .8rem; margin-left: .6rem; font-weight: normal; }
tr.inactif td { opacity: .6; }

/* ---- V0.9.3 : paramètres ---- */
nav.ariane { font-size: .82rem; margin: -.4rem 0 .6rem; color: var(--pico-muted-color); }
nav.ariane a { text-decoration: none; }
.grille-parametres { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.grille-parametres article { margin: 0; }
ul.liste-parametres { padding-left: 0; margin: 0; }
ul.liste-parametres li { list-style: none; margin: 0 0 .75rem; }
ul.liste-parametres li small { display: block; color: var(--pico-muted-color); }