/* =====================================================================
   Collectif Fizeau — feuille de style unique
   ---------------------------------------------------------------------
   Priorité : lisibilité et gros repères cliquables. La plateforme sera
   utilisée par des foyers très inégalement à l'aise avec l'informatique,
   souvent depuis un téléphone. Tout est pensé mobile d'abord.
   ===================================================================== */

:root {
    --encre:          #14212e;
    --encre-douce:    #566575;
    --encre-legere:   #8b95a3;

    /* Le fond n'est pas gris neutre mais très légèrement bleuté : il
       réchauffe l'ensemble sans qu'on sache dire pourquoi. */
    --fond:           #eef2f7;
    --fond-creux:     #e3e9f1;
    --surface:        #ffffff;
    --bordure:        #dfe4ea;
    --bordure-forte:  #c4ccd6;

    /* Le bleu de la maison, celui des immeubles de l'icône. */
    --accent:         #1a5a86;
    --accent-fonce:   #143954;
    --accent-vif:     #2a7ab0;
    --accent-clair:   #e8f0f6;

    --succes:         #1d7a4e;
    --succes-fond:    #e6f4ec;
    --erreur:         #b3261e;
    --erreur-fond:    #fceceb;
    --alerte:         #8a5a00;
    --alerte-fond:    #fdf3e0;

    --rayon:          14px;
    --rayon-petit:    9px;

    /* Deux couches : un contact net sous l'élément, une diffusion large et
       très pâle. C'est ce qui distingue une carte posée d'une carte plate. */
    --ombre:          0 1px 2px rgba(20, 33, 46, .05),
                      0 6px 20px -6px rgba(20, 33, 46, .10);
    --ombre-forte:    0 2px 4px rgba(20, 33, 46, .06),
                      0 16px 40px -12px rgba(20, 33, 46, .22);

    --largeur:        min(1120px, 100% - 2rem);
    --transition:     140ms ease;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    font-size: 14px;
}

body {
    margin: 0;
    color: var(--encre);
    -webkit-font-smoothing: antialiased;

    /* Un halo bleuté très pâle sous l'en-tête : la page se détache du
       bandeau sans qu'on ait besoin d'une bordure de plus. */
    background:
        radial-gradient(1100px 380px at 50% -140px, #dbe7f3 0%, rgba(219, 231, 243, 0) 72%),
        var(--fond);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Titres --------------------------------------------------------- */

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6rem; font-weight: 650; }
h1 { font-size: 1.8rem; letter-spacing: -.022em; }
h2 { font-size: 1.2rem; letter-spacing: -.012em; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: .18em; transition: color var(--transition); }
a:hover { color: var(--accent-vif); }

/* Un anneau de focus unique pour tout le site : franc, jamais agressif. */
:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 2px; border-radius: 4px; }

/* --- Structure ------------------------------------------------------ */

.conteneur { width: var(--largeur); margin-inline: auto; }

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--bordure);
    /* Translucide et floutée là où c'est supporté : le contenu deviné sous
       le bandeau l'ancre à la page au lieu de l'y coller. */
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .entete { background: var(--surface); }
}

.entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.015em;
    color: var(--encre);
    text-decoration: none;
}
.marque__texte { white-space: nowrap; }
.marque__texte span { color: var(--accent); }

.marque__logo {
    width: 36px;
    height: 36px;
    flex: none;
    padding: 5px;
    border-radius: 10px;
    background: var(--accent-fonce);
    color: #fff;
}
.marque__logo svg { display: block; width: 100%; height: 100%; }

.nav {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
    align-items: center;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    color: var(--encre-douce);
    text-decoration: none;
    font-size: .94rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}
.nav a svg { width: 17px; height: 17px; flex: none; opacity: .7; }
.nav a:hover { background: var(--fond-creux); color: var(--encre); }
.nav a:hover svg { opacity: 1; }

.nav a[aria-current="page"],
.nav a[aria-current="page"]:hover {
    background: var(--accent-fonce);
    color: #fff;
    font-weight: 600;
}
.nav a[aria-current="page"] svg { opacity: 1; }

.burger {
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--encre);
    cursor: pointer;
}

.burger svg { width: 22px; height: 22px; display: block; }

/* Trois traits quand le menu dort, une croix quand il est ouvert : le
   bouton dit ce qu'il fera, pas ce qu'il vient de faire. */
.burger[aria-expanded="false"] .burger__fermer { display: none; }
.burger[aria-expanded="true"]  .burger__ouvrir { display: none; }

.burger[aria-expanded="true"] {
    background: var(--accent-fonce);
    border-color: var(--accent-fonce);
    color: #fff;
}

/* Une inscription en attente ne doit pas dormir sous un menu replié. */
.burger__point {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--erreur);
    border: 2px solid var(--surface);
}

.pastille {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 .35rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: var(--erreur);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25rem;
}

.contenu { padding: 1.75rem 0 4rem; }

.pied {
    border-top: 1px solid var(--bordure);
    padding: 1.4rem 0 2.5rem;
    color: var(--encre-legere);
    font-size: .85rem;
}
.pied a { color: var(--encre-douce); }

/* --- Ajout à l'écran d'accueil --------------------------------------- */

.installer__entete {
    display: flex;
    gap: 1.1rem;
    align-items: center;
}

.installer__icone { border-radius: 18px; box-shadow: var(--ombre-forte); flex: none; }

.installer__etapes { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.installer__etapes li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .85rem 0;
    border-bottom: 1px solid var(--bordure);
}
.installer__etapes li:last-child { border-bottom: none; padding-bottom: 0; }

.installer__numero {
    flex: none;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-clair);
    color: var(--accent-fonce);
    font-size: .85rem;
    font-weight: 700;
}

/* Le rappel discret proposé aux téléphones, en pied des pages internes. */
.invite-installation {
    display: none;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--encre-douce);
    font-size: .88rem;
}
.invite-installation svg { flex: none; color: var(--accent); }
.invite-installation--visible { display: inline-flex; }

.page-auth .invite-installation { margin: 1.25rem auto 0; max-width: 30rem; }

/* --- Cartes --------------------------------------------------------- */

.carte {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.carte__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.carte__entete h2 { margin: 0; position: relative; padding-left: .7rem; }

/* Un filet coloré devant chaque titre de carte : le repère le plus léger
   qui soit pour découper une page longue. */
.carte__entete h2::before {
    content: "";
    position: absolute;
    left: 0; top: .18em; bottom: .18em;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}

.carte--etroite { max-width: 480px; margin-inline: auto; }

.sous-titre { color: var(--encre-douce); margin-top: -.25rem; }

/* --- Formulaires ---------------------------------------------------- */

.champ { margin-bottom: 1.1rem; }

label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .35rem;
}

.aide {
    display: block;
    font-weight: 400;
    font-size: .9rem;
    color: var(--encre-douce);
    margin-top: .3rem;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], select, textarea {
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: var(--surface);
    color: var(--encre);
    font: inherit;
    font-size: 16px; /* < 16px déclenche un zoom automatique sur iPhone */
}

input:hover, select:hover, textarea:hover { border-color: var(--encre-legere); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(42, 122, 176, .18);
}

/* Le sélecteur de fichier ressemble à une zone de dépôt : la bordure
   pointillée dit qu'il manque encore quelque chose. */
input[type="file"] {
    width: 100%;
    padding: .65rem;
    border: 1px dashed var(--bordure-forte);
    border-radius: var(--rayon-petit);
    background: var(--fond);
    font: inherit;
    font-size: .92rem;
}

textarea { min-height: 8rem; resize: vertical; }

.champ--erreur input, .champ--erreur select, .champ--erreur textarea {
    border-color: var(--erreur);
    background: var(--erreur-fond);
}

.message-erreur {
    display: block;
    color: var(--erreur);
    font-size: .875rem;
    margin-top: .35rem;
}

.case {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: .95rem;
    line-height: 1.45;
}
.case input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .2rem;
    flex: none;
    accent-color: var(--accent);
}

/* --- Boutons -------------------------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--rayon-petit);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: .98rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 33, 46, .12);
    transition: background var(--transition), box-shadow var(--transition),
                transform var(--transition);
}
.bouton:hover {
    background: var(--accent-fonce);
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(20, 57, 84, .4);
}
/* L'enfoncement au clic : un retour qu'on ne remarque que s'il manque. */
.bouton:active { transform: translateY(1px); box-shadow: none; }

.bouton--large { width: 100%; }

.bouton--secondaire {
    background: var(--surface);
    color: var(--encre);
    border-color: var(--bordure-forte);
    box-shadow: none;
}
.bouton--secondaire:hover {
    background: var(--fond-creux);
    color: var(--encre);
    border-color: var(--encre-legere);
    box-shadow: none;
}

.bouton--danger { background: var(--erreur); }
.bouton--danger:hover { background: #8e1d17; }

.bouton--petit { padding: .4rem .7rem; font-size: .875rem; }

.lien-discret {
    background: none;
    border: none;
    padding: 0;
    color: var(--encre-douce);
    font: inherit;
    font-size: .9rem;
    text-decoration: underline;
    cursor: pointer;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}
.actions--fin { justify-content: flex-end; }

/* --- Messages ------------------------------------------------------- */

.alerte {
    border: 1px solid;
    border-radius: var(--rayon-petit);
    padding: .85rem 1rem;
    margin-bottom: 1.1rem;
    font-size: .95rem;
}
.alerte--succes { background: var(--succes-fond); border-color: #b9dfca; color: #145638; }
.alerte--erreur { background: var(--erreur-fond); border-color: #f0c4c1; color: #8e1d17; }
.alerte--info   { background: var(--accent-clair); border-color: #c3d8e6; color: var(--accent-fonce); }
.alerte--attention { background: var(--alerte-fond); border-color: #eed9ac; color: var(--alerte); }

/* --- Étiquettes ----------------------------------------------------- */

.etiquette {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .01em;
    background: var(--fond-creux);
    color: var(--encre-douce);
    border: 1px solid var(--bordure);
    white-space: nowrap;
    vertical-align: middle;
}
.etiquette--comite   { background: var(--accent-clair); color: var(--accent-fonce); border-color: #c3d8e6; }
.etiquette--attente  { background: var(--alerte-fond);  color: var(--alerte);       border-color: #eed9ac; }
.etiquette--valide   { background: var(--succes-fond);  color: #145638;             border-color: #b9dfca; }
.etiquette--inactif  { background: #eceff2;             color: var(--encre-legere); }

/* --- Listes --------------------------------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }

.liste > li {
    padding: .95rem 0;
    border-bottom: 1px solid var(--bordure);
}
.liste > li:last-child { border-bottom: none; }
.liste > li:first-child { padding-top: 0; }

.ligne {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ligne__principal { flex: 1 1 16rem; min-width: 0; }

/* Une ligne retirée de la vue des membres.
   Deux signaux qui ne demandent aucune lecture : un liseré sur le bord
   gauche, là où l'œil descend la liste, et un contenu pâli. L'étiquette,
   elle, garde sa pleine opacité — c'est le mot qui explique les deux
   autres, il ne doit pas s'effacer avec eux. */
.liste > li.ligne-masquee {
    position: relative;
    padding-left: 1rem;
}

.liste > li.ligne-masquee::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6rem;
    bottom: .6rem;
    width: 3px;
    border-radius: 2px;
    background: var(--alerte);
}

.liste > li.ligne-masquee:first-child::before { top: 0; }

.ligne-masquee .ligne__titre a,
.ligne-masquee .ligne__meta,
.ligne-masquee .actions { opacity: .5; }

.ligne-masquee .ligne__titre .etiquette { opacity: 1; }
.ligne__titre { font-weight: 600; }
.ligne__meta { color: var(--encre-douce); font-size: .875rem; }

/* Une liste vide n'est pas une page cassée : la bordure pointillée dessine
   l'emplacement de ce qui viendra s'y ranger. */
.vide {
    text-align: center;
    color: var(--encre-douce);
    padding: 2.25rem 1rem;
    background: var(--fond);
    border: 1px dashed var(--bordure-forte);
    border-radius: var(--rayon-petit);
}

/* --- Tableaux ------------------------------------------------------- */

.tableau-defilant { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}
th, td {
    text-align: left;
    padding: .7rem .6rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: middle;
}
th { font-size: .88rem; text-transform: uppercase; letter-spacing: .03em; color: var(--encre-douce); }
tbody tr:last-child td { border-bottom: none; }

/* --- Grille de chiffres clés ---------------------------------------- */

.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.chiffre {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.15rem 1.2rem;
}

/* Un liseré en tête de tuile, comme l'onglet d'un dossier. */
.chiffre::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-fonce), var(--accent-vif));
}

.chiffre__valeur {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--accent-fonce);
    /* Chiffres à largeur fixe : une tuile ne tressaute pas quand sa valeur
       change. */
    font-variant-numeric: tabular-nums;
}
.chiffre__libelle { color: var(--encre-douce); font-size: .875rem; margin-top: .15rem; }

/* --- Page d'authentification ---------------------------------------- */

.page-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}
.page-auth__marque {
    text-align: center;
    margin-bottom: 1.75rem;
}

.page-auth__logo {
    width: 76px;
    height: 76px;
    margin: 0 auto .9rem;
    padding: 9px;
    border-radius: 20px;
    background: var(--accent-fonce);
    color: #fff;
    box-shadow: var(--ombre-forte);
}
.page-auth__logo svg { display: block; width: 100%; height: 100%; }

.page-auth__marque strong { font-size: 1.5rem; display: block; letter-spacing: -.02em; }
.page-auth__marque span {
    display: block;
    max-width: 30rem;
    margin: .35rem auto 0;
    color: var(--encre-douce);
    font-size: .95rem;
}

.liens-auth {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .93rem;
    color: var(--encre-douce);
}
.liens-auth a { display: inline-block; margin: .2rem .4rem; }

/* --- Résultats de vote ----------------------------------------------
   La barre double le chiffre : elle donne l'écart entre options en un coup
   d'œil, là où des pourcentages seuls demandent une comparaison mentale. */

.resultat__barre {
    margin-top: .4rem;
    height: 8px;
    border-radius: 4px;
    background: var(--fond);
    border: 1px solid var(--bordure);
    overflow: hidden;
}

.resultat__barre span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    /* Une option à 0 % doit rester invisible, pas afficher un moignon. */
    min-width: 0;
}

/* --- Fil d'actualité -------------------------------------------------
   Une chronologie plutôt qu'une liste : un rail vertical relie les
   événements d'une même journée, chacun marqué d'une pastille qui dit sa
   nature. Le flux se parcourt alors sans lire, ce qui compte à mesure qu'il
   s'allonge. */

.fil__jour {
    margin: 1.5rem 0 .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--encre-legere);
}
.fil__jour:first-child { margin-top: 0; }

.fil {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Le rail passe derrière les pastilles, et s'arrête à la dernière : le
   prolonger dans le vide suggérerait une suite qui n'existe pas. */
.fil::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 1.1rem;
    bottom: 1.1rem;
    width: 2px;
    background: var(--bordure);
}

.fil__entree {
    position: relative;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .55rem 0;
}

.fil__pastille {
    position: relative;
    z-index: 1;
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--bordure);
    color: var(--encre-legere);
}

.fil__pastille svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fil__pastille--document   { color: var(--accent);   border-color: #c3d8e6; background: var(--accent-clair); }
.fil__pastille--dossier    { color: var(--alerte);   border-color: #eed9ac; background: var(--alerte-fond); }
.fil__pastille--discussion { color: var(--succes);   border-color: #b9dfca; background: var(--succes-fond); }
.fil__pastille--compte     { color: var(--encre-douce); border-color: var(--bordure-forte); }
.fil__pastille--scrutin    { color: var(--accent-fonce); border-color: #c3d8e6; background: var(--accent-clair); }
.fil__pastille--neutre     { color: var(--encre-legere); }

.fil__contenu {
    min-width: 0;
    padding-top: .15rem;
}

.fil__libelle {
    display: inline-block;
    font-weight: 550;
    color: var(--encre);
    text-decoration: none;
    line-height: 1.45;
}
.fil__libelle:hover { color: var(--accent-fonce); text-decoration: underline; }

.fil__meta {
    margin-top: .15rem;
    color: var(--encre-legere);
    font-size: .85rem;
}

@media (max-width: 640px) {
    .fil::before { left: 13px; }
    .fil__pastille { width: 28px; height: 28px; }
    .fil__pastille svg { width: 14px; height: 14px; }
    .fil__entree { gap: .7rem; }
}

/* --- Liens ouvrant une nouvelle fenêtre ------------------------------ */

.icone-externe {
    width: .7em;
    height: .7em;
    margin-left: .35em;
    /* Le picto suit la ligne de base du texte plutôt que sa boîte : il reste
       ainsi aligné sur le mot qui le précède, quelle que soit la taille. */
    vertical-align: baseline;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* Visible des lecteurs d'écran, invisible à l'œil : sert à annoncer une
   information que le pictogramme ne porte que visuellement. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Divers --------------------------------------------------------- */

.separateur { height: 1px; background: var(--bordure); border: 0; margin: 1.5rem 0; }

.texte-discret { color: var(--encre-douce); font-size: .9rem; }

.formulaire-en-ligne { display: inline; }

@media (max-width: 640px) {
    .entete__barre { flex-wrap: wrap; gap: .5rem; }

    .burger { display: inline-flex; }

    /* Le menu passe sous le bandeau et n'existe que déplié : sur un écran
       étroit, sept onglets en file occupaient deux lignes en permanence et
       repoussaient le contenu vers le bas à chaque page. */
    .nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .1rem;
        padding-bottom: .6rem;
    }
    .nav--ouvert { display: flex; }

    .nav a {
        border-radius: var(--rayon-petit);
        padding: .7rem .8rem;
    }

    /* Se déconnecter n'est pas une rubrique de plus : un filet l'en sépare,
       et son retrait évite de le confondre avec les liens qui précèdent. */
    .nav .formulaire-en-ligne {
        display: block;
        margin-top: .4rem;
        padding-top: .5rem;
        border-top: 1px solid var(--bordure);
    }
    .nav-deconnexion {
        display: block;
        width: 100%;
        text-align: left;
        padding: .7rem .8rem !important;
    }

    h1 { font-size: 1.4rem; }
    .carte { padding: 1.1rem; }
}

/* --- Cibles tactiles -------------------------------------------------
   Le texte a rétréci, pas les doigts. Sur un écran tactile, les éléments
   sur lesquels on appuie retrouvent une hauteur confortable — le confort
   de visée ne dépend pas de la taille du texte qu'ils portent.

   Le test porte sur la finesse du pointeur, pas sur la largeur de l'écran :
   une tablette large se manipule au doigt, un petit portable à la souris. */

@media (pointer: coarse) {
    .nav a          { padding-top: .85rem; padding-bottom: .85rem; }
    .bouton         { padding-top: .9rem;  padding-bottom: .9rem; }
    .bouton--petit  { padding-top: .6rem;  padding-bottom: .6rem; }
}


/* --- Fenêtre de confirmation ----------------------------------------
   Réservée aux actions irréversibles. Elle explique avant de demander :
   un « supprimer ? » sec se confirme sans réfléchir, une liste de ce qui
   va disparaître se lit. */

.modale {
    width: min(34rem, calc(100% - 2rem));
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    color: var(--encre);
    box-shadow: var(--ombre-forte);
}

.modale::backdrop { background: rgba(20, 33, 46, .55); }

.modale__corps { padding: 1.5rem; }
.modale__corps h2 { margin-top: 0; }

.modale__liste { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.modale__liste li { margin-bottom: .45rem; }

.modale__pied {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bordure);
    background: var(--fond);
    border-radius: 0 0 var(--rayon) var(--rayon);
}


/* --- Un fil de discussion --------------------------------------------
   Ce qu'on vient y chercher, ce sont les mots des voisins. Le nom, l'heure,
   l'appartement, les fichiers joints et les commandes de modération servent
   à les situer, pas à être lus.

   La hiérarchie tient à trois réglages, sans qu'aucun cadre ni aucune
   couleur de fond ne soit nécessaire : le texte des messages est le seul
   élément agrandi, le seul à pleine encre, et le seul à respirer. */

.fil-messages { list-style: none; margin: 0; padding: 0; }

.message {
    display: flex;
    gap: .9rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--bordure);
}
.message:first-child { padding-top: 0; }
.message:last-child  { padding-bottom: 0; border-bottom: none; }

/* La pastille dit qui parle avant qu'on ait rien lu. Sa couleur est
   dérivée du nom, donc stable : suivre un échange entre deux voisins se
   fait en survolant cette colonne. */
.message__avatar {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
}

.message__corps { flex: 1 1 auto; min-width: 0; }

.message__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .15rem .5rem;
    margin: 0 0 .35rem;
    line-height: 1.4;
}
.message__auteur { font-weight: 650; font-size: .92rem; }
.message__meta   { color: var(--encre-douce); font-size: .85rem; }

/* Le seul élément agrandi de la page. */
.message__texte {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--encre);
}

.message--masque .message__texte,
.message--masque .pieces { opacity: .5; }

/* Les pièces jointes deviennent des pastilles : posées à côté du texte,
   elles cessent de se lire comme des lignes qui le prolongent. */
.pieces {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
}
.pieces li { margin: 0; padding: 0; border: 0; }

.pieces a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .3rem .65rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    background: var(--fond);
    color: var(--encre-douce);
    font-size: .85rem;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition);
}
.pieces a:hover {
    background: var(--accent-clair);
    border-color: #c3d8e6;
    color: var(--accent-fonce);
}
.pieces a svg { flex: none; }

/* Un nom de fichier peut être très long. Sur un écran étroit, il doit se
   tronquer plutôt que pousser la pastille hors de la page. */
.pieces a { min-width: 0; }
.pieces__nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pieces__taille { flex: none; color: var(--encre-douce); }

/* La modération reste à portée sans jamais peser : presque effacée au
   repos, elle se précise quand le pointeur entre dans le message. Jamais
   masquée pour autant — sur un écran tactile, il n'y a pas de survol. */
.message__actions {
    margin-top: .7rem;
    font-size: .85rem;
    color: var(--encre-douce);
}
/* Une commande qu'on peine à lire est un défaut, pas de la retenue : la
   discrétion vient de la taille et de la place, jamais du contraste. */
.message__actions .lien-discret {
    font-size: .85rem;
    color: var(--encre-douce);
    text-decoration: none;
}
.message:hover .message__actions .lien-discret,
.message:focus-within .message__actions .lien-discret {
    color: var(--encre);
    text-decoration: underline;
}

.message__actions .lien-discret:hover,
.message__actions .lien-discret:focus-visible {
    color: var(--erreur);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .message { gap: .7rem; }
    .message__avatar { width: 32px; height: 32px; font-size: .76rem; }
    .message__texte { font-size: 1.05rem; }
}

/* Correction de son propre message : replié, discret, et sans concurrence
   avec le texte qu'il permet de reprendre. */
.message__correction {
    margin-top: .7rem;
    font-size: .85rem;
}

.message__correction > summary {
    display: inline-block;
    cursor: pointer;
    color: var(--encre-douce);
    list-style: none;
}
.message__correction > summary::-webkit-details-marker { display: none; }
.message__correction > summary::before { content: "\270E\00A0"; }
.message__correction > summary:hover { color: var(--accent); }

.message__correction[open] > summary { margin-bottom: .6rem; font-weight: 600; }
.message__correction textarea { min-height: 6rem; }


/* Retrait d'une entrée du fil, reservé au compte technique.
   Presque invisible au repos : ce fil se lit, il ne se gère pas. La croix
   ne se propose qu'à la ligne survolée, et reste atteignable au clavier. */
.fil__retrait {
    flex: none;
    margin-left: auto;
    align-self: flex-start;
}

.fil__retrait button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--encre-legere);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition),
                color var(--transition);
}

.fil__entree:hover .fil__retrait button,
.fil__retrait button:focus-visible { opacity: 1; }

.fil__retrait button:hover,
.fil__retrait button:focus-visible {
    background: var(--erreur-fond);
    color: var(--erreur);
}

/* Sur un ecran tactile il n'y a pas de survol : la croix reste visible,
   simplement discrete. */
@media (pointer: coarse) {
    .fil__retrait button { opacity: .55; }
}


/* --- Tableau de fréquentation -----------------------------------------
   Une seule série, donc pas de légende : le titre de la carte dit ce qui
   est tracé. Colonnes fines à tête arrondie posées sur une ligne de base,
   grille en filets pâles, et deux valeurs seulement au-dessus des barres —
   le record et aujourd'hui. Le reste passe par la bulle et par le tableau. */

.graphe {
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: 13rem auto;
    column-gap: .5rem;
    margin-top: .5rem;
}

.graphe__axe {
    position: relative;
    grid-row: 1;
    color: var(--encre-douce);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.graphe__axe span {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    line-height: 1;
}

.graphe__zone {
    position: relative;
    grid-row: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;                          /* l'écart de surface entre colonnes */
    border-bottom: 1px solid var(--bordure-forte);
}

.graphe__grille {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bordure);
    pointer-events: none;
}

/* La colonne entière est la cible de survol : bien plus large et haute que
   la barre, pour qu'un jour à une seule visite reste facile à pointer. */
.graphe__colonne {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: default;
    outline: none;
}
.graphe__colonne:hover,
.graphe__colonne:focus-visible { background: var(--fond); }
.graphe__colonne:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-vif); }

.graphe__barre {
    position: relative;
    width: 100%;
    max-width: 24px;
    min-height: 3px;
    border-radius: 4px 4px 0 0;        /* arrondie en tête, carrée au pied */
    background: var(--accent-vif);
}

.graphe__valeur {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 3px;
    color: var(--encre);
    font-size: .8rem;
    font-weight: 650;
    line-height: 1;
}

.graphe__dates {
    grid-column: 2;
    display: flex;
    gap: 2px;
    margin-top: .4rem;
    color: var(--encre-douce);
    font-size: .78rem;
}
.graphe__dates span {
    flex: 1 1 0;
    text-align: center;
    white-space: nowrap;
}

.graphe__bulle {
    position: absolute;
    top: -.4rem;
    transform: translate(-50%, -100%);
    padding: .4rem .6rem;
    border-radius: var(--rayon-petit);
    background: var(--encre);
    color: #fff;
    font-size: .82rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--ombre);
    z-index: 2;
}

.graphe__table { margin-top: 1.1rem; font-size: .9rem; }
.graphe__table summary { cursor: pointer; color: var(--encre-douce); }
.graphe__table table { margin-top: .6rem; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

.suivi__colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0 1.25rem;
}

.rubriques { list-style: none; margin: 0; padding: 0; }
.rubriques li { padding: .45rem 0; }
.rubriques__ligne {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .93rem;
}
.rubriques__nombre { font-weight: 650; font-variant-numeric: tabular-nums; }

.rubriques__piste {
    display: block;
    height: 6px;
    margin-top: .3rem;
    border-radius: 3px;
    background: var(--fond-creux);
    overflow: hidden;
}
.rubriques__piste span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--accent-vif);
}

@media (max-width: 640px) {
    .graphe { grid-template-rows: 10rem auto; }
}

/* Un intitulé qui s'étire sur deux lignes ne doit pas renvoyer son chiffre
   à la ligne : le libellé prend la place, le chiffre garde la sienne. */
.suivi__colonnes .ligne { flex-wrap: nowrap; align-items: baseline; }
.suivi__colonnes .ligne > span { flex: 1 1 auto; min-width: 0; }
.suivi__colonnes .ligne > strong { flex: none; font-variant-numeric: tabular-nums; }

/* Le sélecteur de période : une rangée, des raccourcis d'abord, la période
   libre repliée derrière. La sélection est franche, le survol à peine lavé. */
.periodes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .5rem .75rem;
    margin: .25rem 0 .4rem;
}

.periodes__raccourcis { display: flex; flex-wrap: wrap; gap: .3rem; }

.periodes__raccourcis a,
.periodes__perso > summary {
    display: inline-block;
    padding: .38rem .8rem;
    border: 1px solid var(--bordure-forte);
    border-radius: 999px;
    background: var(--surface);
    color: var(--encre-douce);
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background var(--transition), color var(--transition);
}
.periodes__perso > summary::-webkit-details-marker { display: none; }

.periodes__raccourcis a:hover,
.periodes__perso > summary:hover { background: var(--fond-creux); color: var(--encre); }

.periodes__raccourcis a[aria-current="true"],
.periodes__perso > summary[aria-current="true"] {
    background: var(--accent-fonce);
    border-color: var(--accent-fonce);
    color: #fff;
    font-weight: 600;
}

.periodes__perso form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin-top: .5rem;
    padding: .7rem .85rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    background: var(--surface);
}
.periodes__perso label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-weight: 500;
    font-size: .9rem;
}
.periodes__perso input[type="date"] { width: auto; padding: .4rem .55rem; }

.periodes__legende { margin: 0 0 1rem; color: var(--encre-douce); font-size: .9rem; }

/* L'état présent, en une rangée de quatre chiffres sobres. */
.suivi__etat {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem 1.25rem;
}
.suivi__etat strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--accent-fonce);
}
.suivi__etat span { color: var(--encre-douce); font-size: .88rem; }

/* Une tranche incomplète : même teinte, allégée. La bulle et le tableau
   disent combien de jours elle couvre. */
/* La transparence porte sur la couleur, pas sur l'élément : l'étiquette
   posée au-dessus de la barre reste ainsi à pleine encre. */
.graphe__barre--partielle { background: rgba(42, 122, 176, .42); }

.graphe__note {
    grid-column: 2;
    order: 3;
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .55rem 0 0;
    color: var(--encre-douce);
    font-size: .8rem;
}
.graphe__temoin {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px 2px 0 0;
    background: rgba(42, 122, 176, .42);
}
.graphe__dates { order: 2; }