/* Portail procloud.ovh : ajustements par-dessus Pico CSS 2 (assets/vendor/pico-2.1.1.min.css).
   Aucun JavaScript : le menu mobile est un <details>, les tableaux deviennent des fiches sur petit écran. */

:root { --ok: #1a7f37; --alerte: #b35900; --erreur: #c62828; }
@media (prefers-color-scheme: dark) { :root { --ok: #4ac26b; --alerte: #f0a14a; --erreur: #ff7b72; } }

/* En-tête : liens en ligne sur grand écran, menu déroulant sur mobile */
header.container { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1rem; }
nav .marque { text-decoration: none; }
nav .qui { color: var(--pico-muted-color); }
.nav-mobile { display: none; }
@media (max-width: 900px) {
  .nav-large { display: none; }
  .nav-mobile { display: flex; }
  .nav-mobile details.dropdown ul li form, .nav-mobile details.dropdown ul li button { width: 100%; margin: 0; }
}
.petit { padding: .3rem .7rem; font-size: .85rem; margin: 0; width: auto; }
form.enligne { display: inline; margin: 0; }
form.enligne button { margin: 0; }

/* Cartes des sites */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
a.carte { display: block; padding: 1rem 1.1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
          background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow); color: inherit; text-decoration: none; }
a.carte:hover, a.carte:focus-visible { border-color: var(--pico-primary); }
a.carte h2 { font-size: 1.1rem; margin: 0; }
a.carte p { color: var(--pico-muted-color); margin: .5rem 0; min-height: 1.5em; }
.entete { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.entete h2 { margin: 0; font-size: 1.1rem; }
.domaine { font-size: .85rem; color: var(--pico-muted-color); overflow-wrap: anywhere; }
h2.section { font-size: 1.15rem; margin-top: 1.5rem; }

/* Badges */
.badge { font-size: .75rem; padding: .1rem .55rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.badge.public, .badge.ok { color: var(--ok); }
.badge.protege { color: var(--alerte); }
.badge.prive { color: var(--pico-muted-color); }

/* Formulaires en carte */
form.boite { padding: 1.1rem 1.2rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
             background: var(--pico-card-background-color); box-shadow: var(--pico-card-box-shadow); margin-bottom: 1.2rem; }
form.boite h2 { font-size: 1.1rem; }
form.boite button[type=submit], form.boite > button { width: auto; }
label.case { display: flex; align-items: center; gap: .5rem; }
fieldset { margin-bottom: 1rem; }

/* Messages */
.message { padding: .7rem .9rem; border-radius: var(--pico-border-radius); border-left: 4px solid var(--pico-primary);
           background: var(--pico-card-sectioning-background-color); overflow-wrap: anywhere; }
.message.ok { border-left-color: var(--ok); }
.message.erreur { border-left-color: var(--erreur); }
.aide { color: var(--pico-muted-color); font-size: .9rem; }

/* Tableaux */
table { font-size: .88rem; }
td.date { white-space: nowrap; }
td.actions { display: flex; flex-wrap: wrap; gap: .3rem; }
tr.inactif td { opacity: .55; }
tr.ev-refus td, tr.ev-echec_connexion td { color: var(--erreur); }
tr.ev-admin td { color: var(--alerte); }

/* Filtres du journal */
.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .5rem; align-items: end; margin: 1rem 0; }
.filtres label { display: grid; gap: .2rem; margin: 0; font-size: .85rem; color: var(--pico-muted-color); }
.filtres input, .filtres select, .filtres button { margin: 0; }
.filtres a { align-self: center; }
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; }

/* Petits écrans : chaque ligne de tableau devient une fiche étiquetée */
@media (max-width: 700px) {
  table.fiches thead { display: none; }
  table.fiches, table.fiches tbody, table.fiches tr, table.fiches td { display: block; width: 100%; }
  table.fiches tr { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
                    margin-bottom: .75rem; padding: .4rem .6rem; background: var(--pico-card-background-color); }
  table.fiches td { border: none; padding: .2rem 0; white-space: normal; overflow-wrap: anywhere; }
  table.fiches td[data-label]::before { content: attr(data-label) " : "; font-weight: 600; color: var(--pico-muted-color); }
  td.actions { padding-top: .5rem; }
}