@charset "UTF-8";

/*
 * Registre des actes administratifs — feuille de style du portail.
 *
 * Aucune dépendance : ni framework, ni police à télécharger, ni domaine tiers.
 * La page se charge donc à l'identique hors ligne et sur un réseau contraint,
 * et il n'y a aucune bibliothèque à tenir à jour.
 *
 * Principe structurant : l'angle droit désigne le document, l'arrondi désigne
 * ce sur quoi on peut agir. Les entrées du registre sont séparées par des
 * filets, comme les lignes d'un registre relié ; seuls les champs et les
 * boutons sont arrondis.
 */

:root {
    color-scheme: light;

    /* Encre des registres, papier sous lumière de bureau. */
    --papier: #f2f4f7;
    --surface: #ffffff;
    --encre: #16233a;
    --encre-doux: #4d5a72;
    --trait: #d9dfe8;
    --trait-fort: #aab6c8;

    --accent: #1f5aa6;
    --accent-sombre: #163f74;
    --accent-voile: #e9f0fa;

    /*
     * Une teinte par type d'acte. Le libellé est toujours écrit en clair :
     * la couleur ne porte jamais seule l'information, comme l'exige le RGAA.
     * Teintes très pâles et texte foncé, pour que 555 entrées se lisent comme
     * un registre nuancé et non comme un semis de pastilles.
     */
    --n1-texte: #1b4f8a;  /* délibération : le bleu de la collectivité */
    --n1-fond: #e5edf8;
    --n2-texte: #463a86;  /* arrêté réglementaire */
    --n2-fond: #eae8f7;
    --n3-texte: #155a60;  /* arrêté individuel */
    --n3-fond: #e0eff1;
    --n4-texte: #1a5641;  /* contrat ou convention */
    --n4-fond: #e3f0ea;
    --n5-texte: #8a3a45;  /* document budgétaire : l'encre rouge des comptes */
    --n5-fond: #f9e9eb;
    --nautre-texte: #4d5a72;
    --nautre-fond: #e9ecf2;
    --npapier-texte: #78530f;  /* acte papier : hors chaîne dématérialisée */
    --npapier-fond: #f8efdb;

    --t-xs: 0.8125rem;
    --t-s: 0.9375rem;
    --t-base: 1.0625rem;
    --t-m: 1.1875rem;
    --t-l: 1.5rem;

    --titre: clamp(1.375rem, 3.5vw, 1.75rem);
    /* Taille du décompte d'actes, dont le logo du fournisseur reprend la
       hauteur de ligne : les deux restent ainsi accordés. */
    --decompte: 1.1875rem;
    --largeur: 62rem;
    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
        "Liberation Sans", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
 * Le « display: none » que le navigateur associe à [hidden] est écrasé par
 * n'importe quelle règle d'auteur posant un display, quelle que soit sa
 * spécificité. Sans cette ligne, les entrées écartées par un filtre restent
 * visibles, puisque .acte est en display: grid.
 */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--police);
    font-size: var(--t-base);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

.contenu {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Pousse le pied de page en bas quand le registre est court. */
main {
    flex: 1 0 auto;
}

/*
 * Intégration en iframe (?entete=0) : la page hôte fournit son propre fond,
 * et le gris du registre y formerait une bande parasite de part et d'autre.
 * La largeur de lecture reste bornée, elle.
 */
.integre {
    background: var(--surface);
}

/* --- Accès clavier ---------------------------------------------------- */

.saut {
    position: absolute;
    left: -9999px;
    z-index: 10;
    padding: 0.75rem 1.25rem;
    background: var(--encre);
    color: #fff;
    border-radius: 0 0 0.375rem 0;
}

.saut:focus {
    left: 0;
    top: 0;
}

/* Titre réservé aux lecteurs d'écran, quand le bandeau est escamoté pour une
   intégration en iframe : la page doit garder un titre de niveau 1. */
.saut-lecture {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:where(a, button, input, select, summary):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

/* --- Bandeau ---------------------------------------------------------- */

.bandeau {
    padding-block: 1.25rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
}

.bandeau h1 {
    margin: 0;
    font-size: var(--titre);
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.15;
}

.bandeau__role {
    margin: 0.125rem 0 0;
    font-size: var(--t-s);
    color: var(--encre-doux);
}

/* --- Barre de recherche et de tri -------------------------------------- */

.barre {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface);
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 1px 0 rgba(22, 35, 58, 0.04);
    padding-block: 1rem;
}

.barre__grille {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}

/*
 * Visible seulement sans JavaScript, où le filtrage demande une validation.
 * Sur sa propre rangée, et non dans une cinquième colonne : celle-ci laissait
 * un écart de grille après le dernier champ, qui ne s'alignait donc plus sur
 * le bord droit — ni sur l'attribution, juste en dessous.
 */
.champ--valider {
    grid-column: 1 / -1;
    align-items: flex-start;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    min-width: 0;
}

.champ label {
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--encre-doux);
}

.champ input,
.champ select {
    width: 100%;
    min-height: 2.875rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    font-size: var(--t-s);
    color: var(--encre);
    background: var(--surface);
    border: 1px solid var(--trait-fort);
    border-radius: 0.375rem;
}

.champ input:hover,
.champ select:hover {
    border-color: var(--accent);
}

.champ input::placeholder {
    color: #8593a8;
}

.barre__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.875rem;
}

.decompte {
    margin: 0;
    font-size: var(--decompte);
    font-weight: 600;
    color: var(--encre);
    /* Chiffres de largeur fixe : le décompte se recalcule à chaque frappe, et
       le texte qui suit ne doit pas se déplacer quand 555 devient 55. */
    font-variant-numeric: tabular-nums;
}

.reinit {
    display: inline-block;
    text-decoration: none;
    padding: 0.375rem 0.75rem;
    font: inherit;
    font-size: var(--t-s);
    color: var(--accent);
    background: none;
    border: 1px solid var(--trait-fort);
    border-radius: 0.375rem;
    cursor: pointer;
}

.reinit:hover {
    background: var(--accent-voile);
    border-color: var(--accent);
}

/* --- Le registre ------------------------------------------------------- */

.registre {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--trait);
}

.acte {
    display: grid;
    grid-template-columns: 6.75rem minmax(0, 1fr);
    gap: 0 1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--trait);
}

.acte:first-child {
    border-top: 0;
}

/* Colonne d'appel : la date donne son rythme au registre. */
.acte__repere {
    font-variant-numeric: tabular-nums;
}

.acte__date {
    display: block;
    line-height: 1.25;
}

.acte__jour {
    font-size: var(--t-l);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.acte__mois {
    font-size: var(--t-s);
}

.acte__an {
    display: block;
    font-size: var(--t-s);
    color: var(--encre-doux);
}

.acte__ref {
    margin: 0.25rem 0 0;
    font-size: var(--t-xs);
    color: var(--encre-doux);
    word-break: break-word;
}

.acte__objet {
    margin: 0;
    font-size: var(--t-m);
    line-height: 1.4;
    max-width: 62ch;
}

/* Étiquettes et action sur une seule ligne, l'action alignée à droite pour
   former une colonne franche que l'œil suit d'une entrée à l'autre. */
.acte__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.625rem;
    margin-top: 0.5rem;
}

.acte__actions {
    margin-left: auto;
}

.etiquette {
    padding: 0.1875rem 0.5rem;
    font-size: var(--t-xs);
    font-weight: 600;
    border-radius: 0.1875rem;
    white-space: nowrap;
}

.nature--1 { color: var(--n1-texte); background: var(--n1-fond); }
.nature--2 { color: var(--n2-texte); background: var(--n2-fond); }
.nature--3 { color: var(--n3-texte); background: var(--n3-fond); }
.nature--4 { color: var(--n4-texte); background: var(--n4-fond); }
.nature--5 { color: var(--n5-texte); background: var(--n5-fond); }
.nature--autre { color: var(--nautre-texte); background: var(--nautre-fond); }
.nature--papier { color: var(--npapier-texte); background: var(--npapier-fond); }

.bouton {
    display: inline-block;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--t-s);
    font-weight: 600;
    color: var(--accent);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 0.375rem;
    text-decoration: none;
    white-space: nowrap;
}

.bouton:hover {
    color: #fff;
    background: var(--accent);
}

.indispo {
    display: inline-block;
    font-size: var(--t-s);
    color: var(--encre-doux);
}

/* --- Pièces jointes ---------------------------------------------------- */

.pj {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--trait);
}

.pj__titre {
    margin: 0 0 0.5rem;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--encre-doux);
}

.pj ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.pj a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: var(--t-s);
    color: var(--accent);
}

.pj a:hover {
    color: var(--accent-sombre);
}

.pj__poids {
    font-size: var(--t-xs);
    color: var(--encre-doux);
}

/* --- États ------------------------------------------------------------- */

.message {
    margin: 0 0 3rem;
    padding: 1.75rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--trait);
    text-align: center;
    color: var(--encre-doux);
}

.message p {
    margin: 0;
    max-width: 44ch;
    margin-inline: auto;
}

.message .reinit {
    margin-top: 1rem;
}

/* --- Pied de page ------------------------------------------------------ */

.pied {
    padding-block: 1.75rem 2.5rem;
    border-top: 1px solid var(--trait);
    font-size: var(--t-s);
    color: var(--encre-doux);
}

.pied p {
    margin: 0;
    max-width: 62ch;
}

.pied p + p {
    margin-top: 0.625rem;
}

.fournisseur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--t-xs);
    color: var(--encre-doux);
}

/* Au pied de page, un filet la détache des explications qui précèdent. */
.fournisseur a {
    display: inline-flex;
    align-items: center;
    border-radius: 0.25rem;
}

/*
 * Le logo fait exactement la hauteur de la ligne du décompte : l'attribution
 * ne fait donc pas grandir la barre. La hauteur est calculée depuis la taille
 * et l'interlignage du texte voisin, et non écrite en dur, pour qu'elle suive
 * si l'un ou l'autre change.
 */
.fournisseur img {
    display: block;
    max-width: 100%;
    height: calc(var(--decompte) * 1.55);
    width: auto;
}

/* Décompte et bouton d'effacement à gauche, attribution à l'extrême droite. */
.barre__pied .fournisseur {
    margin-left: auto;
}

/* --- Écrans étroits ---------------------------------------------------- */

@media (max-width: 46rem) {
    .barre__grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* La recherche garde toute la largeur, les trois menus se partagent
       deux colonnes : le registre reste visible sans faire défiler. */
    .champ--recherche,
    .champ--valider {
        grid-column: 1 / -1;
    }

    /* La date passe en ligne d'appel au-dessus de l'objet. */
    .acte {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        padding: 1rem;
    }

    .acte__actions {
        margin-left: 0;
    }

    .acte__repere {
        display: flex;
        align-items: baseline;
        gap: 0.625rem;
    }

    .acte__date {
        display: flex;
        align-items: baseline;
        gap: 0.3125rem;
    }

    .acte__jour {
        font-size: var(--t-base);
    }

    .acte__an {
        display: inline;
    }

    .acte__ref {
        margin: 0;
    }

    .acte__ref::before {
        content: "— ";
    }
}

/* --- Impression --------------------------------------------------------- */

@media print {
    .barre,
    .saut,
    .bouton,
    .reinit {
        display: none;
    }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .acte {
        break-inside: avoid;
    }

    /* À l'impression, un lien sans son adresse est inexploitable. */
    .pj a::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}