@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Figtree:wght@400;500;600&display=swap");

/* Palette dérivée du logo (vert d'eau du chêne et du monogramme DM).
   --couleur-accent : vert profond, assez sombre pour le texte et les liens.
   --couleur-logo : le vert exact du logo, pour les aplats et les filets.
   --couleur-lignee : bronze, réservé aux repères de lignée (arbre, BR). */
:root {
    --couleur-texte: #1b2b29;
    --couleur-texte-doux: #566664;
    --couleur-fond: #edf2f0;
    --couleur-surface: #ffffff;
    --couleur-accent: #0a6b5d;
    --couleur-accent-fonce: #07524a;
    --couleur-logo: #0d8f7e;
    --couleur-accent-clair: #dcece8;
    --couleur-bordure: #d3dedb;
    --couleur-champ-fond: #f7faf9;
    --couleur-lignee: #a8741f;
    --couleur-lignee-clair: #f5ead5;
    --couleur-erreur: #b3261e;
    --couleur-succes: #1f6b3a;
    --police-titres: "Barlow Condensed", "Arial Narrow", sans-serif;
    --police-texte: "Figtree", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--couleur-texte);
    background: var(--couleur-fond);
}

h1, h2, h3, .entete .logo, legend, .formulaire-vertical legend {
    font-family: var(--police-titres);
    font-weight: 600;
    letter-spacing: 0.01em;
}

a { color: var(--couleur-accent); text-underline-offset: 0.15em; }
a:hover { color: var(--couleur-accent-fonce); }

:focus-visible {
    outline: 2px solid var(--couleur-logo);
    outline-offset: 2px;
}

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

.entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--couleur-surface);
    border-bottom: 3px solid var(--couleur-logo);
    padding: 0.5rem 1.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.entete nav { display: flex; gap: 0.25rem 0.35rem; align-items: center; flex-wrap: wrap; }
.entete nav a {
    font-family: var(--police-titres);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--couleur-texte);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}
.entete nav a:hover { background: var(--couleur-accent-clair); color: var(--couleur-accent-fonce); }
.entete nav a.actif { color: var(--couleur-accent); box-shadow: inset 0 -2px 0 var(--couleur-logo); border-radius: 4px 4px 0 0; }
.entete .logo {
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--couleur-accent);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 1rem;
    padding: 0;
}
.entete .logo:hover { background: none; color: var(--couleur-accent-fonce); }
.logo-entete { height: 36px; width: auto; }
.entete .utilisateur { display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; color: var(--couleur-texte-doux); flex-wrap: wrap; }

@media (max-width: 600px) {
    .entete nav { gap: 0.1rem; }
    .entete nav a { font-size: 1rem; padding: 0.15rem 0.45rem; }
    .entete .logo { font-size: 1.2rem; }
    .entete .utilisateur { font-size: 0.8rem; gap: 0.6rem; }
}

.contenu {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

img { max-width: 100%; }

/* Écran de smartphone : marges réduites, tableaux défilables
   horizontalement plutôt que de faire déborder toute la page, et champs en
   16px pour éviter qu'iOS ne zoome automatiquement au clic dans un champ. */
@media (max-width: 600px) {
    body { font-size: 0.95rem; }
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.25rem; }
    h3, .sous-titre { font-size: 1.05rem; }
    legend { font-size: 1.1rem; }
    .contenu { padding: 0.85rem; }
    .entete { padding: 0.5rem 0.85rem; }
    .fiche { grid-template-columns: 1fr; }
    .fiche dt { margin-top: 0.5rem; font-size: 0.85rem; }
    input[type=text], input[type=email], input[type=password],
    input[type=date], input[type=number], select {
        font-size: 16px;
    }
}

.tableau-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tableau-scroll .tableau-resultats { min-width: 480px; }

/* ---------- Arbre de lignée ----------
   Sur petit/moyen écran : bloc repliable (<details>) en haut de page. À
   partir de 1100px : colonne fixe à gauche, toujours dépliée. Les traits
   verticaux relient les enfants à leur parent, comme les branches d'un arbre. */
.panneau-arbre {
    background: var(--couleur-accent-clair);
    border-bottom: 1px solid var(--couleur-bordure);
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
}
.arbre-details summary { cursor: pointer; }
.arbre-details[open] summary { margin-bottom: 0.4rem; }

@media (min-width: 1100px) {
    body {
        display: grid;
        grid-template-columns: 290px 1fr;
        grid-template-rows: auto 1fr;
    }
    .entete { grid-column: 1 / -1; grid-row: 1; }
    .panneau-arbre {
        grid-column: 1;
        grid-row: 2;
        position: sticky;
        top: 0;
        align-self: start;
        max-height: 100vh;
        overflow-y: auto;
        border-bottom: none;
        border-right: 1px solid var(--couleur-bordure);
        padding: 1.1rem 1rem 2rem 1.25rem;
    }
    .contenu { grid-column: 2; grid-row: 2; }
    /* Sur grand écran, le pavé GLOBAL reste toujours déplié : on désactive
       le repliage natif de son <summary> de titre. Sélecteur volontairement
       précis (enfant direct) : un sélecteur descendant générique
       toucherait aussi les <summary> de chaque personne de l'arbre, les
       rendant non cliquables et cachant leur flèche. */
    .panneau-arbre > .arbre-details > summary {
        cursor: default;
        pointer-events: none;
        list-style: none;
    }
    .panneau-arbre > .arbre-details > summary::-webkit-details-marker { display: none; }
    .panneau-arbre > .arbre-details > summary::marker { content: ''; }
}

.arbre-titre {
    font-family: var(--police-titres);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--couleur-accent);
    margin: 0 0 0.15rem;
}
.arbre-liste { list-style: none; margin: 0.4rem 0 0; padding-left: 0; font-size: 0.9rem; }
.panneau-arbre > .arbre-details > .arbre-liste { padding-left: 0; }
.arbre-liste .arbre-liste {
    margin: 0.1rem 0 0.2rem 0.55rem;
    padding-left: 0.75rem;
    border-left: 1.5px solid #9fc3bc;
}
.arbre-liste li { margin: 0.15rem 0; }
.arbre-liste summary { cursor: pointer; }
.arbre-liste a { text-decoration: none; color: var(--couleur-texte); border-radius: 3px; }
.arbre-liste a:hover { color: var(--couleur-accent); text-decoration: underline; }
.arbre-actif {
    font-weight: 600;
    color: var(--couleur-lignee) !important;
    background: var(--couleur-lignee-clair);
    padding: 0 0.3rem;
}

/* ---------- Mise en page des blocs ---------- */

/* Sur écran large, les pavés (.bloc) et les blocs de formulaire (fieldset)
   regroupés dans .grille-blocs passent sur 2 colonnes. */
@media (min-width: 900px) {
    .contenu:has(.grille-blocs) {
        max-width: 1300px;
    }
    .grille-blocs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        align-items: start;
    }
    .grille-blocs > .formulaire-vertical-pleine-largeur {
        grid-column: 1 / -1;
    }
}

/* Titre de page : le nom de la personne est le centre de la fiche. */
h1 {
    margin-top: 0;
    font-size: 2.6rem;
    line-height: 1.05;
    font-weight: 600;
    color: var(--couleur-accent-fonce);
}

.formulaire-recherche, .formulaire-fiche {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}

.champ { display: flex; flex-direction: column; gap: 0.25rem; }
.champ label { font-size: 0.85rem; font-weight: 500; color: var(--couleur-texte-doux); }
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], select {
    padding: 0.5rem 0.6rem;
    border: 1px solid #bccbc8;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--couleur-champ-fond);
    color: var(--couleur-texte);
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=date]:focus, input[type=number]:focus, select:focus {
    outline: none;
    border-color: var(--couleur-logo);
    box-shadow: 0 0 0 3px rgba(13, 143, 126, 0.2);
    background: white;
}

button {
    background: var(--couleur-accent);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.45rem 1rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}
button:hover { background: var(--couleur-accent-fonce); }

.lien-annuler { margin-left: 0.5rem; align-self: center; }

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

.actions-fiche { margin: 0.5rem 0 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.actions-fiche a {
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--couleur-accent);
    border-radius: 4px;
    background: var(--couleur-surface);
}
.actions-fiche a:hover { background: var(--couleur-accent); color: white; }
.actions-fiche a[href*="supprimer"] { color: var(--couleur-erreur); border-color: var(--couleur-erreur); }
.actions-fiche a[href*="supprimer"]:hover { background: var(--couleur-erreur); color: white; }

.formulaire-vertical { flex-direction: column; align-items: stretch; }
.formulaire-vertical fieldset { border: 1px solid var(--couleur-bordure); border-radius: 4px; margin-bottom: 1rem; padding: 0.75rem 1rem 1rem; }
.formulaire-vertical legend { padding: 0 0.4rem; font-size: 1.25rem; color: var(--couleur-accent); }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.champ-duo { display: flex; gap: 0.75rem; margin-top: 0.75rem; flex-wrap: wrap; }
.champ-duo .champ { flex: 1 1 220px; }
.champ-duo .champ-etroit { flex: 0 1 140px; }
.champs-case { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.champs-case label { display: flex; align-items: center; gap: 0.4rem; font-weight: normal; }
.succes-bandeau { background: #e2f1e7; color: var(--couleur-succes); padding: 0.6rem 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #b9dcc4; }

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

.tableau-resultats {
    width: 100%;
    border-collapse: collapse;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
}
.tableau-resultats th, .tableau-resultats td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--couleur-bordure);
}
.tableau-resultats th {
    background: var(--couleur-accent-clair);
    font-family: var(--police-titres);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--couleur-accent-fonce);
}
.tableau-resultats tbody tr:hover { background: #f3f8f7; }

/* ---------- Fiche individu ---------- */

.bloc {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: 6px;
    padding: 1rem 1.25rem 1.1rem;
    margin-bottom: 1.25rem;
}
.bloc h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    font-size: 1.5rem;
    color: var(--couleur-accent);
    border-bottom: 2px solid var(--couleur-accent-clair);
}
.sous-titre { font-size: 1.15rem; color: var(--couleur-accent); margin: 1rem 0 0.4rem; border-top: 1px solid var(--couleur-bordure); padding-top: 0.75rem; }

.alerte-anomalie {
    margin-top: 0.6rem;
    background: #fdecea;
    color: var(--couleur-erreur);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.fiche { display: grid; grid-template-columns: 200px 1fr; gap: 0.35rem 1rem; margin: 0; }
.fiche dt { color: var(--couleur-texte-doux); }
.fiche dd { margin: 0; font-weight: 500; }

.liste-liens { margin: 0; padding-left: 1.2rem; }
.liste-liens li { margin: 0.2rem 0; }
.liste-liens li::marker { color: var(--couleur-logo); }
.discret { color: var(--couleur-texte-doux); font-size: 0.85rem; font-weight: 400; }
.fiche-mineur { font-size: 0.8rem; color: var(--couleur-texte-doux); }

.badge-ex {
    display: inline-block;
    background: var(--couleur-lignee-clair);
    color: #7a5212;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.3rem;
}

.erreur { color: var(--couleur-erreur); }
.succes { color: var(--couleur-succes); }

/* ---------- Connexion ---------- */

.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: var(--couleur-fond);
}
.carte-login {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-top: 4px solid var(--couleur-logo);
    border-radius: 6px;
    padding: 2rem;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.carte-login form { display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }
.carte-login button { padding: 0.6rem 1rem; font-size: 1rem; }
.logo-login { max-width: 140px; height: auto; margin-bottom: 0.5rem; }
.carte-login h1 { font-size: 1.9rem; margin: 0 0 0.15rem; }
.sous-titre-login { color: var(--couleur-texte-doux); margin: 0 0 1.25rem; font-size: 0.95rem; }

/* ---------- Mailing : annonce de décès ---------- */
.discret-mailing { color: var(--couleur-texte-doux); font-size: 0.9rem; }
.resultats-deces { display: flex; flex-direction: column; max-width: 420px; }
.resultats-deces button { text-align: left; background: white; color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); border-top: 0; padding: 0.35rem 0.6rem; cursor: pointer; }
.resultats-deces button:hover { background: var(--couleur-accent-clair); }
.barre-editeur { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 0.75rem 0 0.25rem; }
.barre-editeur button { padding: 0.25rem 0.55rem; }
.editeur-deces { background: white; border: 1px solid var(--couleur-bordure); border-radius: 6px; min-height: 14rem; padding: 0.75rem 1rem; line-height: 1.5; }

/* Champ qui occupe deux colonnes de la grille, et note tenant sur une seule ligne. */
.champ-large { grid-column: span 2; }
.ligne-unique { white-space: nowrap; margin: 0.25rem 0 0; }
@media (max-width: 600px) {
    .champ-large { grid-column: auto; }
    .ligne-unique { white-space: normal; }
}

/* Libellé et zone de saisie sur la même ligne (Atr0, Atr1). */
.champ-ligne { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.champ-ligne > label:first-child { flex: 0 0 auto; min-width: 3rem; }
.champ-ligne .champs-case { margin-top: 0; }

/* Email 1 et Email 2 : libellé et saisie sur une ligne, les deux côte à côte. */
.champ-email { flex: 1 1 320px; flex-wrap: nowrap; }
.champ-email > label { min-width: 0; white-space: nowrap; }
.champ-email input { flex: 1 1 auto; min-width: 0; }

/* Barre de recherche gardée en haut de la fiche de modification. */
.recherche-rapide {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    background: var(--couleur-fond);
    border-bottom: 1px solid var(--couleur-bordure);
    margin: -0.5rem -0.5rem 0.75rem;
    padding: 0.5rem;
}
.recherche-rapide input[type=text] { flex: 1 1 140px; min-width: 0; }

/* ---------- Version condensée sur PC ---------- */
@media (min-width: 900px) {
    body { font-size: 0.9rem; line-height: 1.4; }
    .entete { padding: 0.3rem 1.25rem; }
    .entete nav a { font-size: 1rem; padding: 0.1rem 0.5rem; }
    .entete .logo { font-size: 1.25rem; }
    .logo-entete { height: 30px; }
    .entete .utilisateur { font-size: 0.82rem; }
    .contenu { padding: 0.9rem 1.25rem; }
    h1 { font-size: 2rem; margin-bottom: 0.4rem; }
    .bloc { padding: 0.65rem 0.9rem 0.75rem; margin-bottom: 0.85rem; }
    .bloc h2 { font-size: 1.25rem; margin-bottom: 0.5rem; padding-bottom: 0.25rem; }
    .sous-titre { font-size: 1rem; margin: 0.6rem 0 0.3rem; padding-top: 0.5rem; }
    .grille-blocs { gap: 0.85rem; }
    .fiche { grid-template-columns: 170px 1fr; gap: 0.15rem 0.75rem; }
    .liste-liens li { margin: 0.1rem 0; }
    .formulaire-recherche, .formulaire-fiche { padding: 0.65rem 0.9rem; gap: 0.65rem; margin-bottom: 1rem; }
    .formulaire-vertical fieldset { padding: 0.5rem 0.75rem 0.7rem; margin-bottom: 0.7rem; }
    .formulaire-vertical legend { font-size: 1.1rem; }
    .grille-champs { gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .champ-duo { margin-top: 0.5rem; gap: 0.5rem; }
    .champ label { font-size: 0.8rem; }
    input[type=text], input[type=email], input[type=password],
    input[type=date], input[type=number], select { padding: 0.3rem 0.5rem; font-size: 0.88rem; }
    button { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
    .actions-fiche { margin: 0.3rem 0 0.8rem; }
    .actions-fiche a { padding: 0.2rem 0.7rem; font-size: 0.85rem; }
    .tableau-resultats th, .tableau-resultats td { padding: 0.28rem 0.6rem; }
    .tableau-resultats th { font-size: 1rem; }
    .panneau-arbre { font-size: 0.85rem; }
    .arbre-titre { font-size: 1.2rem; }
    .arbre-liste li { margin: 0.05rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    button { transition: none; }
}

/* Page Anomalies : un contrôle = un bloc repliable. */
.controle { background: var(--couleur-surface); border: 1px solid var(--couleur-bordure); border-radius: 6px; padding: 0.4rem 0.9rem; margin: 0 0 0.6rem; }
.controle summary { cursor: pointer; padding: 0.15rem 0; }
.controle[open] summary { margin-bottom: 0.4rem; }
.controle-ok { margin: 0.2rem 0; color: var(--couleur-texte-doux); }

/* Bouton de retour vers la liste des anomalies, dans la barre de recherche des fiches. */
.bouton-retour-anomalies { margin-left: auto; padding: 0.3rem 0.9rem; border: 1px solid var(--couleur-lignee); border-radius: 4px; background: var(--couleur-lignee-clair); color: #7a5212; text-decoration: none; font-weight: 500; font-size: 0.9rem; white-space: nowrap; }
.bouton-retour-anomalies:hover { background: var(--couleur-lignee); color: white; }

/* Actions sur l'adresse (fiche et formulaire). */
.actions-adresse { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0 0; }
.bloc .actions-adresse a { text-decoration: none; font-weight: 500; font-size: 0.9rem; padding: 0.25rem 0.8rem; border: 1px solid var(--couleur-accent); border-radius: 4px; background: var(--couleur-surface); }
.bloc .actions-adresse a:hover { background: var(--couleur-accent); color: white; }
.actions-adresse .lien-danger { color: var(--couleur-erreur); border-color: var(--couleur-erreur); }
.bloc .actions-adresse .lien-danger:hover, .actions-adresse .lien-danger:hover { background: var(--couleur-erreur); color: white; }
fieldset .actions-adresse a { text-decoration: none; font-weight: 500; font-size: 0.9rem; padding: 0.25rem 0.8rem; border: 1px solid var(--couleur-erreur); border-radius: 4px; }

/* Adresse proposée à la suppression : bloc teinté en rouge pâle. */
.alerte-adresse-supprimee { border-color: var(--couleur-erreur); background: #fdf4f3; }

/* Champs modifiables dans les tableaux d'anomalies. */
.controle td input[type=text] { width: 100%; min-width: 7rem; }
.controle td select { min-width: 4rem; }
.statut-enregistrement { font-size: 0.85rem; margin-left: 0.4rem; }
.statut-enregistrement.ok { color: var(--couleur-succes); }
.statut-enregistrement.ko { color: var(--couleur-erreur); }
.form-fiche-anomalie { display: inline; margin: 0; padding: 0; border: 0; }

/* Fenêtre « Localités » ouverte depuis une fiche : pas d'arbre, contenu pleine largeur. */
@media (min-width: 1100px) {
    body.sans-arbre { display: block; }
}

/* Fenêtre « texte mariage pour le Lien ». */
.texte-lien p { margin: 0.4rem 0; line-height: 1.5; }
.texte-lien strong { font-weight: 700; }