/* App familiale — feuille de style principale.
   Volontairement écrite à la main, sans framework CSS ni préprocesseur :
   pas de dépendance externe, pas d'étape de build nécessaire. */

:root {
    --couleur-fond: #f4f6f8;
    --couleur-texte: #1b2b34;
    --couleur-primaire: #1e405a;
    --couleur-primaire-clair: #2d6e96;
    --couleur-accent: #d98e04;
    --couleur-bordure: #d7dee3;
    --couleur-surface: #ffffff;
    --hauteur-entete: 3.5rem;
    --largeur-menu: 16rem;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    line-height: 1.5;
}

a {
    color: var(--couleur-primaire-clair);
}

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--hauteur-entete);
    padding: 0 1rem;
    background-color: var(--couleur-primaire);
    color: #ffffff;
}

.entete__titre {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.entete__titre a {
    color: #ffffff;
    text-decoration: none;
}

.entete__spacer {
    flex: 1;
}

/* Bandeau mode admin (tâche #29.3c) */
.bandeau-mode-admin {
    position: sticky;
    top: var(--hauteur-entete);
    z-index: 19;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background-color: #fdf0dc;
    color: #96560a;
    font-size: 0.85rem;
    font-weight: 600;
}

.bandeau-mode-admin__form {
    margin: 0;
}

.bandeau-mode-admin__bouton {
    background: transparent;
    border: 1px solid #96560a;
    border-radius: 0.35rem;
    color: #96560a;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* Bandeau hors ligne — Liste de courses uniquement (tâche #11bis, spec
   § « v2 — Utilisation HORS LIGNE »). Même patron visuel que .bandeau-mode-admin. */
.bandeau-hors-ligne {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background-color: #fdf0dc;
    color: #96560a;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 0.35rem;
    text-align: center;
}

/* Bouton menu sandwich (hamburger) */
.bouton-menu {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.bouton-menu__barre {
    display: block;
    width: 1.5rem;
    height: 2px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 1px;
}

.bouton-menu[aria-expanded="true"] .bouton-menu__barre:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.bouton-menu[aria-expanded="true"] .bouton-menu__barre:nth-child(2) {
    opacity: 0;
}

.bouton-menu[aria-expanded="true"] .bouton-menu__barre:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Navigation latérale ---------- */

.mise-en-page {
    display: flex;
    min-height: calc(100vh - var(--hauteur-entete));
}

.nav-principale {
    position: fixed;
    top: var(--hauteur-entete);
    left: 0;
    bottom: 0;
    width: var(--largeur-menu);
    background-color: var(--couleur-surface);
    border-right: 1px solid var(--couleur-bordure);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 15;
}

.nav-principale.est-ouverte {
    transform: translateX(0);
}

.nav-principale__liste {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.nav-principale__lien {
    display: block;
    padding: 0.75rem 1.25rem;
    color: var(--couleur-texte);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.nav-principale__lien:hover,
.nav-principale__lien:focus {
    background-color: var(--couleur-fond);
    border-left-color: var(--couleur-primaire-clair);
}

/* Sélecteur d'espace actif (tâche #29.3, partie A) */
.nav-principale__espace {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--couleur-bordure);
    margin-bottom: 0.25rem;
}

.selecteur-espace__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5a6b74;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}

.selecteur-espace__select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
    font-size: 0.9rem;
    font-family: inherit;
    background: #ffffff;
}

.selecteur-espace__select:focus {
    outline: 2px solid var(--couleur-primaire-clair);
    outline-offset: 1px;
}

/* Voile derrière le menu ouvert (mobile/tablette) */
.voile-menu {
    display: none;
    position: fixed;
    inset: var(--hauteur-entete) 0 0 0;
    background-color: rgba(15, 35, 51, 0.4);
    z-index: 10;
}

.voile-menu.est-visible {
    display: block;
}

/* ---------- Contenu principal ---------- */

.contenu-principal {
    flex: 1;
    width: 100%;
    padding: 1.25rem;
}

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

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

.champ {
    margin-bottom: 1rem;
}

.champ label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.champ input[type="email"],
.champ input[type="password"],
.champ input[type="text"],
.champ input[type="date"],
.champ input[type="number"],
.champ select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
    font-size: 1rem;
    background: #ffffff;
    font-family: inherit;
}

.champ input:focus,
.champ select:focus {
    outline: 2px solid var(--couleur-primaire-clair);
    outline-offset: 1px;
}

/* Bouton « œil » sur les champs mot de passe (tâche #33, cadrée 2026-08-23) —
   cf. partials/champ-mot-de-passe.blade.php. Espace réservé au bouton via
   padding-right (spécificité supérieure à ".champ input[type=...]" ci-dessus,
   l'emporte sans !important) ; wrapper positionné pour ancrer le bouton dedans. */
.champ-mot-de-passe {
    position: relative;
}

.champ-mot-de-passe input[type="password"],
.champ-mot-de-passe input[type="text"] {
    padding-right: 2.75rem;
}

.bouton-oeil {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.35rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--couleur-primaire-clair);
}

.bouton-oeil:focus {
    outline: 2px solid var(--couleur-primaire-clair);
    outline-offset: 1px;
}

/* Piège CSS : une règle d'auteur (ex. ".bouton { display: … }") prime TOUJOURS sur la
   feuille de style par défaut du navigateur, même à spécificité égale ou inférieure —
   contrairement à [hidden] tout seul, un élément `hidden` ET `.bouton` (ou toute classe
   fixant `display`) resterait donc visible sans cette règle explicite. Rencontré avec
   #bouton-supprimer-evenement (Calendrier, tâche #13), corrigé ici une fois pour toutes. */
.bouton[hidden] {
    display: none;
}

.bouton {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    background-color: var(--couleur-primaire);
    color: #ffffff;
    border: none;
    border-radius: 0.35rem;
    font-size: 1rem;
    cursor: pointer;
}

.bouton:hover {
    background-color: var(--couleur-primaire-clair);
}

.erreurs {
    color: #a3241f;
    background-color: #fbe9e7;
    border: 1px solid #f2b8b2;
    border-radius: 0.35rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.succes {
    color: #1e5e35;
    background-color: #e6f4ea;
    border: 1px solid #b7dfc3;
    border-radius: 0.35rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.page-connexion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.page-connexion .carte {
    width: 100%;
    max-width: 24rem;
}

/* ---------- Points de rupture responsives ---------- */

/* Tablette et plus : le menu reste rétractable (sandwich) mais un peu plus large */
@media (min-width: 768px) {
    :root {
        --largeur-menu: 18rem;
    }

    .contenu-principal {
        padding: 1.75rem;
    }
}

/* Ordinateur : menu ouvert en permanence en colonne fixe, plus de sandwich */
@media (min-width: 1100px) {
    .bouton-menu {
        display: none;
    }

    .voile-menu {
        display: none !important;
    }

    .nav-principale {
        position: sticky;
        top: var(--hauteur-entete);
        height: calc(100vh - var(--hauteur-entete));
        transform: none;
    }

    .mise-en-page {
        gap: 0;
    }

    .contenu-principal {
        margin-left: 0;
        padding: 2rem;
    }
}

/* ---------- Finance : cartes résumé + tableau des mouvements ---------- */

.cartes-resume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.carte-resume {
    margin-bottom: 0;
    text-align: center;
}

.carte-resume__libelle {
    margin: 0 0 0.35rem;
    color: #5a6b74;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.carte-resume__montant {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--couleur-texte);
}

.carte-resume__montant--positif {
    color: #1e7a3d;
}

.carte-resume__montant--negatif {
    color: #a3241f;
}

/* ---------- Tâches : pastilles de priorité + liste ---------- */

.pastille {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.pastille--urgent {
    background-color: #fbe9e7;
    color: #a3241f;
}

.pastille--a_faire {
    background-color: #fdf0dc;
    color: #96560a;
}

.pastille--en_attente {
    background-color: #e6eef4;
    color: #2d6e96;
}

.pastille--fait {
    background-color: #e6f4ea;
    color: #1e5e35;
}

/* ---------- Administration : pastilles de statut invitation/compte (tâche #21) ---------- */

.pastille--utilisee {
    background-color: #e6f4ea;
    color: #1e5e35;
}

.pastille--expiree {
    background-color: #f4f6f8;
    color: #5a6b74;
}

.pastille--actif {
    background-color: #e6f4ea;
    color: #1e5e35;
}

.pastille--invite {
    background-color: #e6eef4;
    color: #2d6e96;
}

.pastille--desactive {
    background-color: #fbe9e7;
    color: #a3241f;
}

.pastille--a_reconfigurer_2fa {
    background-color: #fdf0dc;
    color: #96560a;
}

.pastille--admin {
    background-color: #1e405a;
    color: #fff;
}

/* ---------- Administration : pastilles de statut Retours (tâche #23bis) ----------
   Même triade de couleurs que les pastilles de priorité des tâches ci-dessus
   (urgent/a_faire/fait) — même sémantique de progression (à traiter → en cours →
   traité), cohérence délibérée avec la palette déjà en place plutôt qu'un nouveau
   jeu de couleurs. */
.pastille--nouveau {
    background-color: #fbe9e7;
    color: #a3241f;
}

.pastille--en_cours {
    background-color: #fdf0dc;
    color: #96560a;
}

.pastille--traite {
    background-color: #e6f4ea;
    color: #1e5e35;
}

.filtres-priorite {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filtres-priorite a {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--couleur-bordure);
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--couleur-texte);
}

.filtres-priorite a.actif {
    background-color: var(--couleur-primaire);
    color: #ffffff;
    border-color: var(--couleur-primaire);
}

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

.liste-taches li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
}

.liste-taches li:last-child {
    border-bottom: none;
}

.tache__titre {
    font-weight: 600;
    flex: 1 1 12rem;
}

.tache__echeance {
    font-size: 0.85rem;
    color: #5a6b74;
}

.tache__echeance--retard {
    color: #a3241f;
    font-weight: 600;
}

.tache__assigne {
    font-size: 0.85rem;
    color: #5a6b74;
}

/* ---------- Contacts : pastilles de catégorie + fiches + filtre ---------- */

.pastille--administration {
    background-color: #e6eef4;
    color: #2d6e96;
}

.pastille--assurance {
    background-color: #efe6f4;
    color: #6a3d96;
}

.pastille--sante {
    background-color: #fbe9e7;
    color: #a3241f;
}

.pastille--logement {
    background-color: #e6f4ea;
    color: #1e5e35;
}

.pastille--vehicule {
    background-color: #fdf0dc;
    color: #96560a;
}

.pastille--autre {
    background-color: #eceff1;
    color: #5a6b74;
}

.filtres-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.filtres-contacts .champ {
    margin-bottom: 0;
    flex: 1 1 14rem;
}

.fiches-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.fiche-contact {
    margin-bottom: 0;
}

.fiche-contact__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fiche-contact__nom {
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.fiche-contact__ligne {
    font-size: 0.9rem;
    margin: 0.2rem 0;
}

.fiche-contact__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.montant-positif {
    color: #1e7a3d;
    font-weight: 600;
}

.montant-negatif {
    color: #a3241f;
    font-weight: 600;
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tableau th,
.tableau td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--couleur-bordure);
    white-space: nowrap;
}

.tableau th {
    color: #5a6b74;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Zébrage + survol (tâche #23bis) : lisibilité d'un tableau dense — s'applique à
   TOUT tableau `.tableau` du projet (comptes, invitations, espaces, partages,
   budgets, retours), pas seulement à celui qui en a fait la demande. */
.tableau tbody tr:nth-child(even) {
    background-color: var(--couleur-fond);
}

.tableau tbody tr:hover {
    background-color: #e6eef4;
}

/* ---------- Tableau de bord : accès rapides ---------- */

.acces-rapides {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.acces-rapides .bouton {
    text-align: center;
    text-decoration: none;
}

/* Tablette et plus : les accès rapides passent en ligne (colonne unique sur mobile
   uniquement, cf. spec tableau de bord § Écrans). */
@media (min-width: 768px) {
    .acces-rapides {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .acces-rapides .bouton {
        flex: 1 1 10rem;
    }
}

/* ---------- Liste de courses ---------- */

.ajout-course {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ajout-course .champ {
    flex: 1 1 12rem;
    margin-bottom: 0.5rem;
}

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

.liste-courses li {
    display: flex;
    /* flex-wrap (tâche #11bis) : laisse le panneau de saisie prix
       (.liste-courses__saisie-prix, flex-basis:100%) tomber sur sa propre
       ligne sous la case/le libellé/le bouton supprimer. */
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
}

.liste-courses li:last-child {
    border-bottom: none;
}

.liste-courses__supprimer-formulaire {
    margin: 0;
}

/* display:contents (tâche #11bis lot 2/2) : la case ET le panneau de saisie
   prix qu'il contient (.liste-courses__saisie-prix, flex-basis:100%)
   deviennent des items flex DIRECTS de .liste-courses li — sans ça, le
   panneau reste coincé dans la largeur "auto" de ce <form>, constaté en
   vérification navigateur (texte de l'article poussé à côté d'un panneau
   étroit au lieu de passer dessous, pleine largeur). N'affecte ni la
   soumission du formulaire ni FormData — uniquement le rendu visuel. */
.liste-courses__case-formulaire {
    display: contents;
}

/* Case à cocher large, pensée pour un doigt sur mobile (spec § Décisions v1). */
.liste-courses__case {
    width: 1.75rem;
    height: 1.75rem;
    accent-color: var(--couleur-primaire);
    cursor: pointer;
    flex-shrink: 0;
}

.liste-courses__libelle {
    flex: 1 1 auto;
    font-size: 1rem;
}

.liste-courses__libelle--achete {
    text-decoration: line-through;
    color: #8a97a0;
}

.liste-courses__quantite {
    color: #5a6b74;
    font-size: 0.9rem;
}

.liste-courses__categorie {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: #eceff1;
    color: #5a6b74;
    font-size: 0.75rem;
}

.liste-courses__supprimer {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--couleur-bordure);
    background: #ffffff;
    color: #a3241f;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Liste de courses — prix/enseigne/lieu (tâche #11bis lot 2/2) ---------- */

.liste-courses__prix {
    display: inline-block;
    margin-left: 0.5rem;
    font-weight: 600;
    color: var(--couleur-primaire);
}

.liste-courses__lieu {
    display: inline-block;
    margin-left: 0.5rem;
    color: #5a6b74;
    font-size: 0.85rem;
}

/* Panneau de saisie prix (cocher) / correction (article déjà acheté) — révélé
   par liste-courses-hors-ligne.js, jamais construit deux fois (les inputs
   existent dès le rendu Blade, seule leur visibilité change). */
.liste-courses__saisie-prix {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: #f4f6f7;
    border-radius: 0.35rem;
}

/* [hidden] doit l'emporter sur `.liste-courses__saisie-prix { display:flex }`
   ci-dessus (même spécificité que la règle UA `[hidden] { display:none }`,
   mais chargée après elle) — sans ce correctif, TOUS les panneaux restent
   visibles en permanence quel que soit l'attribut `hidden` posé/retiré par
   liste-courses-hors-ligne.js (bug réel constaté en vérification navigateur). */
.liste-courses__saisie-prix[hidden] {
    display: none;
}

.liste-courses__saisie-prix .champ {
    flex: 1 1 8rem;
    margin-bottom: 0;
}

.liste-courses__saisie-actions {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.liste-courses__saisie-erreur {
    flex-basis: 100%;
    margin: 0;
    color: #a3241f;
    font-size: 0.85rem;
}

.liste-courses__suggestion-texte {
    flex-basis: 100%;
    margin: 0;
    color: #5a6b74;
    font-size: 0.85rem;
}

/* ---------- Finance : liste des budgets en "comptes" (tâche #15) ---------- */

.comptes-budgets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.compte-budget {
    margin-bottom: 0;
    text-decoration: none;
    color: inherit;
    display: block;
}

.compte-budget__nom {
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.compte-budget__description {
    color: #5a6b74;
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

.compte-budget__solde {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.compte-budget__detail {
    color: #5a6b74;
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
}

/* Badge générique (pastille discrète) — réutilisé par les comptes bancaires
   (tâche #32 : type + perso/commun), même style que .liste-courses__categorie. */
.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: #eceff1;
    color: #5a6b74;
    font-size: 0.75rem;
}

/* ---------- Documents : explorateur de dossiers (tâche #16) ---------- */

.fil-ariane {
    font-size: 0.9rem;
    color: #5a6b74;
    margin-bottom: 0.75rem;
    word-break: break-word;
}

.fil-ariane a {
    text-decoration: none;
}

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

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

.liste-dossiers li,
.liste-documents li,
.liste-tags li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
}

.liste-dossiers li:last-child,
.liste-documents li:last-child,
.liste-tags li:last-child {
    border-bottom: none;
}

.element-nom {
    flex: 1 1 auto;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.element-detail {
    color: #5a6b74;
    font-size: 0.85rem;
}

.element-actions {
    display: flex;
    gap: 0.75rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.element-actions form {
    margin: 0;
}

.element-actions button {
    background: none;
    border: none;
    padding: 0;
    color: #a3241f;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
}

/* Bouton stylé comme un lien standard (couleur primaire, pas le rouge "danger"
   de .element-actions button ci-dessus) — ex. déclencheur de modale non
   destructeur, comme "Partager" (tâche #28). Sélecteur `.element-actions
   .bouton-lien` volontairement PLUS spécifique que `.element-actions button`
   pour le supplanter quand les deux s'appliquent. */
.bouton-lien,
.element-actions .bouton-lien {
    background: none;
    border: none;
    padding: 0;
    color: var(--couleur-primaire-clair);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

/* ---------- Arbre généalogique (tâche #30) ---------- */

/* Conteneur du rendu dTree (public/js/arbre.js) — SVG dessiné par D3 à
   l'intérieur, potentiellement plus large que l'écran (grand arbre) : défilement/
   zoom mobile (spec § Rendu « responsive ») via overflow, jamais de recadrage
   forcé qui écraserait le graphe. Hauteur fixe raisonnable, pas de recalcul JS
   au resize (simplicité assumée, comme le reste du projet). */
.arbre-genealogique__conteneur {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
}

/* ---------- Documents : partage — page publique (tâche #28, lot 2/2) ---------- */

/* Conteneur du layout resources/views/layouts/partage-public.blade.php — plus
   large que .page-connexion (24rem, pensé pour un formulaire de connexion
   étroit) : ce layout doit aussi accueillir une galerie de documents. */
.page-partage-public {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Modificateur pour les vues étroites de ce layout (mot de passe/erreur) —
   pas de sélecteur dédié dans app.css pour .page-connexion .carte ici, car
   .page-partage-public n'est pas lui-même une carte de connexion générique. */
.page-partage-public__carte-etroite {
    max-width: 26rem;
    margin: 0 auto;
}

.galerie-partage__case {
    margin-right: 0.25rem;
    flex-shrink: 0;
}

/* ---------- Documents : afficher / imprimer (tâche #17) ---------- */

.visionneuse-document {
    background: #ffffff;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.visionneuse-document img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.visionneuse-document iframe {
    width: 100%;
    min-height: 75vh;
    border: none;
    display: block;
}

/* À l'impression (window.print(), déclenché depuis documents/afficher.blade.php) :
   ne garder que le document, sans le menu ni les boutons d'action. */
@media print {
    .no-print,
    header,
    nav {
        display: none !important;
    }

    .visionneuse-document {
        border: none;
        padding: 0;
    }

    .visionneuse-document iframe {
        min-height: 100vh;
    }
}

/* ---------- Calendrier (tâche #13) ---------- */

.calendrier-entete .bouton {
    white-space: nowrap;
}

#calendrier {
    /* FullCalendar (height:'auto' dans public/js/calendrier.js) dimensionne lui-même
       sa hauteur ; on ne fixe ici qu'une largeur responsive pleine carte. */
    width: 100%;
}

.champ input[type="color"] {
    width: 4rem;
    height: 2.4rem;
    padding: 0.2rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
    background: #ffffff;
    cursor: pointer;
}

.champ input[type="datetime-local"] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
    font-size: 1rem;
    background: #ffffff;
    font-family: inherit;
}

.champ--case {
    display: flex;
    align-items: center;
}

/* Modale de création/édition d'événement : un seul <form>, jamais reconstruit
   (cf. resources/views/calendrier/index.blade.php) — seule sa visibilité
   change ici, en CSS pur, piloté par la classe "est-visible" (public/js/calendrier.js). */
.modale {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
}

.modale.est-visible {
    display: block;
}

.modale__voile {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 35, 51, 0.5);
}

.modale__contenu {
    position: relative;
    max-width: 32rem;
    margin: 5vh auto;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--couleur-surface);
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 35, 51, 0.25);
}

.modale__entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.modale__fermer {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--couleur-texte);
    padding: 0.25rem 0.5rem;
}

@media (max-width: 30rem) {
    .modale__contenu {
        margin: 0;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ---------- Documents : tags (tâche #19) ---------- */

.tag {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background-color: var(--couleur-fond);
    border: 1px solid var(--couleur-bordure);
    color: var(--couleur-texte);
}

.liste-tags-document {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    /* Force les tags sur leur propre ligne dans les listes flex (.liste-documents li),
       plutôt que de se glisser entre le nom et le détail. */
    flex-basis: 100%;
}

.tag-formulaire-renommer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    margin: 0;
}

.tag-formulaire-renommer input[type="text"] {
    flex: 1 1 auto;
    min-width: 8rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
    font-size: 0.95rem;
    font-family: inherit;
}

.tag-formulaire-renommer button {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--couleur-primaire-clair);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
}

.cases-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

/* ---------- Documents : "Tous les fichiers" (tâche #20) ---------- */

.filtres-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0;
}

.filtres-documents .champ {
    margin-bottom: 0;
    flex: 1 1 12rem;
}

/* ---------- Messagerie (tâche #14) ---------- */

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

.liste-messages li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--couleur-bordure);
}

.liste-messages li:last-child {
    border-bottom: none;
}

.liste-messages__non-lu .element-nom {
    font-weight: 700;
}

.corps-message {
    white-space: pre-line;
    line-height: 1.5;
}

.bandeau-synchro {
    background: #eef4f8;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.4rem;
    padding: 0.6rem 0.9rem;
    color: #5a6b74;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.bandeau-synchro--erreur {
    background: #fdecea;
    color: #7a1f1f;
}

/* ---------- Pagination générique (socle P0 messagerie, tâche #14) ---------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.pagination span[aria-disabled="true"] {
    color: #9aa7ad;
}

/* ---------- Coffre-fort (tâche #25) ---------- */

/* Piège CSS connu du projet : [hidden] perd TOUJOURS face à une règle d'auteur
   fixant `display`, quelle que soit la spécificité — règle explicite requise
   dès qu'une classe avec `display` peut coexister avec `[hidden]`. */
.coffre-champs-type {
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.35rem;
    padding: 0.25rem 1rem 1rem;
    margin: 1rem 0;
}

.coffre-champs-type[hidden] {
    display: none;
}

.fiche-secret[hidden] {
    display: none;
}

/* ---------- Bulle de retours (tâche #23) ---------- */

.bulle-retours {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 500;
}

.bulle-retours__bouton {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: none;
    background: var(--couleur-accent, #1e405a);
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.bulle-retours__panneau {
    position: absolute;
    right: 0;
    bottom: 3.75rem;
    width: min(20rem, calc(100vw - 2rem));
    max-height: min(28rem, calc(100vh - 6rem));
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 1rem;
}

/* Piège CSS connu du projet : [hidden] perd face à une règle d'auteur display. */
.bulle-retours__panneau[hidden] {
    display: none;
}

.bulle-retours__entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.bulle-retours__titre {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.bulle-retours__fermer {
    border: none;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    color: #5a6b74;
}

/* Capture directe (tâche #26) — bouton + statut sous le champ d'import de fichier. */
.bulle-retours__capture-directe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.bulle-retours__capture-directe .bouton {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.bulle-retours__capture-directe span {
    font-size: 0.8rem;
    color: #5a6b74;
}

@media (max-width: 480px) {
    .bulle-retours {
        right: 0.5rem;
        bottom: 0.5rem;
    }
}