/* ==========================================================================
   Généalogie Dollfus - feuille de style des pages du site (chargée après ../css/global.css)
   Mise en page en CSS (flex / grid) ; les tableaux ne servent plus qu'aux vraies listes de données.
   ========================================================================== */

:root {
   --bleu:        #145689;
   --bleu-clair:  #e8f0f8;
   --bleu-vif:    #2f6fb3;
   --or:          #996600;
   --or-clair:    #f7f1e1;
   --rouge:       #cc3300;
   --vert:        #5b8c1a;
   --texte:       #222a33;
   --texte-doux:  #5d6875;
   --fond:        #f4f5f1;
   --carte:       #ffffff;
   --trait:       #d9dde2;
   --ombre:       0 1px 3px rgba(20, 40, 60, .12), 0 1px 2px rgba(20, 40, 60, .08);
   --rayon:       8px;
}

/* ---------- Base ---------- */

body {
   font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   color: var(--texte);
   background: var(--fond);
   max-width: 1320px;
   margin: 0 auto;
   padding: 10px 22px 40px 22px;
}

h1, h2, h3, h4 { font-family: inherit; line-height: 1.25; }
h2 { font-size: 22px; color: var(--or); font-weight: 600; margin: .6em 0 .4em 0; }
h3 { font-size: 18px; color: var(--bleu); font-weight: 600; margin: .8em 0 .4em 0; }

a:link, a:visited { color: var(--bleu); text-decoration: none; font-family: inherit; }
a:hover { color: var(--rouge); text-decoration: underline; }
a.nom:link, a.nom:visited { font-size: inherit; color: var(--bleu); }
a.nom:hover { color: var(--rouge); }

.note       { font-family: inherit; color: var(--texte-doux); font-size: 12px; }
.consigne   { font-family: inherit; color: var(--or); font-size: 13px; font-weight: 600; }
.copyright  { font-family: inherit; color: #9aa2ab; font-size: 11px; }
.err_msg    { font-family: inherit; color: var(--rouge); font-size: 14px; }
.titre      { font-family: inherit; color: var(--or); font-size: 15px; font-weight: 600; }
.centre-texte { text-align: center; }

/* ---------- Formulaires et boutons ---------- */

form { padding: 0; font-family: inherit; }

input, select, textarea {
   font-family: inherit;
   font-size: 14px;
   color: var(--texte);
   background: #fff;
   border: 1px solid #b9c1ca;
   border-radius: 6px;
   padding: 5px 8px;
   box-sizing: border-box;
}
input[type=checkbox], input[type=radio] { padding: 0; margin: 0 4px; vertical-align: middle; accent-color: var(--bleu); }
textarea { width: 100%; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(47, 111, 179, .35); border-color: var(--bleu-vif); }

input[type=submit], input[type=button], button {
   background: linear-gradient(#ffffff, #eef1f4);
   border: 1px solid #b9c1ca;
   border-radius: 18px;
   color: var(--texte);
   padding: 5px 16px;
   font-size: 13px;
   cursor: pointer;
   transition: background .15s, border-color .15s, box-shadow .15s;
}
input[type=submit]:hover, input[type=button]:hover, button:hover {
   background: var(--bleu-clair);
   border-color: var(--bleu-vif);
   box-shadow: 0 1px 3px rgba(20, 86, 137, .25);
}
input[type=submit].principal { background: var(--bleu); color: #fff; border-color: var(--bleu); }
input[type=submit].principal:hover { background: var(--bleu-vif); }

/* Formulaire en lignes « libellé / champ » */
.formulaire { display: grid; gap: 10px 16px; max-width: 760px; }
.formulaire .ligne { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 12px; align-items: center; }
.formulaire .ligne.haut { align-items: start; }
.formulaire label { color: var(--texte-doux); }
.formulaire .obligatoire, label.obligatoire { color: var(--texte); font-weight: 600; }
.formulaire .actions { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.formulaire .consigne, .formulaire .note { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulaire .ligne { grid-template-columns: 1fr; gap: 4px; } }

.obligatoire { font-weight: 600; }

/* ---------- Mise en page générale ---------- */

.centre        { max-width: 560px; margin: 24px auto; }
.centre-large  { max-width: 820px; margin: 24px auto; }
.espace        { height: 18px; }
.bandeau-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin: 16px 0; }

.carte {
   background: var(--carte);
   border: 1px solid var(--trait);
   border-radius: var(--rayon);
   box-shadow: var(--ombre);
   padding: 14px 18px;
}
.carte > h3:first-child { margin-top: 0; }
.carte-titre {
   margin: -14px -18px 12px -18px;
   padding: 7px 18px;
   border-radius: var(--rayon) var(--rayon) 0 0;
   background: var(--bleu-vif);
   color: #fff;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .02em;
}
.carte-titre.brun  { background: #a99a75; }
.carte-titre.vert  { background: var(--vert); }
.carte-titre.rouge { background: var(--rouge); }

.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
@media (max-width: 900px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }

.titre-page {
   font-size: 20px;
   font-weight: 600;
   color: var(--bleu);
   margin: 14px 0 12px 0;
   padding-bottom: 6px;
   border-bottom: 2px solid var(--trait);
}

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

.entete { display: flex; gap: 18px; align-items: flex-start; margin: 4px 0 14px 0; }
.entete .logo { flex: 0 0 auto; }
.entete-corps { flex: 1 1 auto; min-width: 0; }

.menu {
   display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
   padding: 10px 16px;
   background: var(--carte);
   border: 1px solid var(--trait);
   border-radius: var(--rayon);
   box-shadow: var(--ombre);
   font-size: 13px;
}
.menu-groupe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.menu-droite { margin-left: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--texte-doux); }
.menu-droite b { color: var(--texte); }

.bandeau { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; margin-top: 8px; }
.acces-direct { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acces-direct form { display: flex; gap: 8px; align-items: center; }
.acces-direct input[type=text] { width: 90px; }

.drapeau { display: inline-block; width: 20px; height: 20px; border: 1px solid #333; border-radius: 4px; vertical-align: middle;
   font-size: 9px; line-height: 18px; text-align: center; box-sizing: border-box; }

/* ---------- Accueil ---------- */

.recherche-boites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 920px; margin: 18px auto; }
.recherche-boites .carte { text-align: center; }
.recherche-boites form { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 10px 0 6px 0; }
.recherche-boites img { height: 20px; width: auto; }
@media (max-width: 760px) { .recherche-boites { grid-template-columns: 1fr; } }

.accueil-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-top: 18px; }
@media (max-width: 900px) { .accueil-bas { grid-template-columns: 1fr; } }

/* ---------- Recherche ---------- */

.seek { max-width: 980px; margin: 0 auto; }
.seek-titre { text-align: center; margin: 4px 0 14px 0; }

.onglets { display: flex; justify-content: center; gap: 4px; padding: 4px; margin: 0 auto 16px auto; width: fit-content; max-width: 100%;
   background: #e6eaee; border-radius: 28px; }
.onglet { padding: 7px 22px; border-radius: 22px; color: var(--texte-doux); font-weight: 600; }
.onglet:link, .onglet:visited { color: var(--texte-doux); }
.onglet:hover { background: rgba(255, 255, 255, .7); color: var(--bleu); text-decoration: none; }
.onglet.actif, .onglet.actif:link, .onglet.actif:visited { background: var(--carte); color: var(--bleu); box-shadow: var(--ombre); }

.lettres { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 auto 18px auto; max-width: 760px; }
.lettre { display: block; width: 38px; height: 38px; line-height: 36px; text-align: center; border-radius: 10px;
   background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); font-weight: 700; font-size: 16px; }
.lettre:link, .lettre:visited { color: var(--bleu); }
.lettre:hover { background: var(--bleu-clair); border-color: var(--bleu-vif); text-decoration: none; transform: translateY(-1px); }
.lettre.actif, .lettre.actif:link, .lettre.actif:visited { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.seek-dates { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: center; align-items: center; margin: 6px 0 8px 0; }
.seek-dates label { color: var(--texte-doux); }
.seek-dates input[type=text] { width: 100px; text-align: center; font-size: 16px; }

.seek-resultats { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 6px 18px 14px 18px; margin-top: 8px; }
.seek-entete { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 0; margin-bottom: 6px; border-bottom: 2px solid var(--trait); font-size: 16px; }
.seek-entete b { color: var(--bleu); }
.seek-entete .compteur { margin-left: auto; font-size: 12px; color: #fff; background: var(--bleu-vif); border-radius: 12px; padding: 1px 10px; }
.seek-entete input[type=search] { flex: 1 1 100%; max-width: 320px; }

.liste-noms { column-width: 230px; column-gap: 20px; }
.liste-noms a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; break-inside: avoid; }
.liste-noms a:hover { background: var(--bleu-clair); text-decoration: none; }
.badge { font-size: 11px; color: var(--texte-doux); background: #eef1f4; border-radius: 10px; padding: 0 8px; }

.resultat { display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px 90px; gap: 10px; align-items: center; padding: 7px 8px; border-bottom: 1px solid #edf0f2; }
.resultat:last-child { border-bottom: 0; }
.resultat:hover { background: var(--bleu-clair); text-decoration: none; }
.res-nom { font-weight: 600; }
.res-dates, .res-num { color: var(--texte-doux); font-size: 13px; }
.res-num { text-align: right; }
@media (max-width: 640px) { .resultat { grid-template-columns: 22px 1fr; } .res-dates, .res-num { grid-column: 2; text-align: left; } }

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

.fiche-page { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 12px; }
@media (max-width: 1000px) { .fiche-page { grid-template-columns: 1fr; } }
.fiche-colonne { display: grid; gap: 16px; }
.fiche-titre { font-size: 22px; font-weight: 600; color: var(--or); margin: 6px 0 0 0; }
.fiche-titre .note { font-weight: 400; margin-left: 10px; }

dl.donnees { display: grid; grid-template-columns: 110px 1fr auto; gap: 6px 12px; margin: 0; }
dl.donnees dt { color: var(--texte-doux); }
dl.donnees dd { margin: 0; }
dl.donnees dd.action { text-align: right; }

.relation { display: grid; grid-template-columns: 70px 56px 1fr auto; gap: 4px 10px; padding: 4px 0; border-bottom: 1px solid #eef0f2; align-items: center; }
.relation:last-child { border-bottom: 0; }
.relation .rel-lib { color: var(--texte-doux); }
.relation-pied { text-align: center; padding-top: 6px; }
.icone-sexe { width: 15px; height: 15px; vertical-align: middle; }

.observations textarea { min-height: 120px; background: #fbfbf8; font-family: inherit; line-height: 1.45; }
.sources { font-size: 12px; font-style: italic; color: var(--texte-doux); }

/* ---------- Livre de famille ---------- */

.livre {
   background: #faf8ef;
   border: 1px solid #c9c2a8;
   border-radius: var(--rayon);
   box-shadow: var(--ombre);
   padding: 18px 24px 8px 24px;
   max-width: 1100px;
}
.livre-couple { display: grid; grid-template-columns: 17fr 17fr 33fr 17fr 16fr; gap: 2px 14px; margin-bottom: 12px; }
.livre-couple .s2 { grid-column: span 2; }
.livre-couple .s5 { grid-column: span 5; }
.livre-couple > div { min-height: 20px; }


.livre-nom { font-size: 15px; font-weight: 700; color: #3a3a3a; }
.livre-parents { color: #444; text-align: center; }
.livre-section { font-weight: 700; color: var(--or); margin: 14px 0 6px 0; letter-spacing: .04em; }

table.enfants { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; border-radius: 6px; overflow: hidden; }
table.enfants th { background: #a99a75; color: #fff; font-weight: 600; padding: 6px 8px; text-align: center; font-size: 12px; }
table.enfants td { border: 1px solid #e3dfcd; padding: 6px 8px; vertical-align: top; }
table.enfants td.gauche { text-align: center; }
table.enfants tr:hover td { background: #fbf8ec; }

/* ---------- Ajout d'une fiche ---------- */

.ajout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1000px; align-items: start; }
.ajout .panneau { border-radius: var(--rayon); padding: 14px 18px; border: 1px solid var(--trait); box-shadow: var(--ombre); }
.ajout .panneau.gauche { background: #e3efff; }
.ajout .panneau.droite { background: #fffbd0; }
@media (max-width: 900px) { .ajout { grid-template-columns: 1fr; } }

/* ---------- Tableaux de données (vraies listes) ---------- */

table#tlistes, table#tsimple {
   border: 1px solid var(--trait);
   border-collapse: collapse;
   background: var(--carte);
   font-size: 13px;
   border-radius: var(--rayon);
   box-shadow: var(--ombre);
   overflow: hidden;
}
table#tlistes td, table#tsimple td { padding: 5px 12px; border: 0; border-bottom: 1px solid #edf0f2; }
table#tlistes tr:hover td, table#tsimple tr:hover td { background: var(--bleu-clair); }
.toptlistes, .toptlistes td { background: var(--bleu-vif) !important; color: #fff; font-size: 12px; font-weight: 600; }
table#tlistes tr.toptlistes:hover td, table#tsimple tr.toptlistes:hover td { background: var(--bleu-vif) !important; }
.toptfiche, .toptmoi, .toptaction, .topttexte { font-size: 13px; }

table#ttitre { width: 100%; }

/* Listes alphabétiques (prénoms, familles) */
.liste-groupes { max-width: 760px; margin: 12px auto; }
.liste-groupes .ligne { display: grid; grid-template-columns: 220px 1fr 70px; gap: 10px; padding: 2px 8px; border-bottom: 1px solid #edf0f2; }

/* ---------- Pages d'information ---------- */

.liens-divers { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-width: 980px; margin: 18px auto; }
.liens-divers a { display: block; padding: 12px 16px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon);
   box-shadow: var(--ombre); }
.liens-divers a:hover { background: var(--bleu-clair); text-decoration: none; }

.armes { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: center; margin: 20px auto; padding: 24px;
   background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.armes img { max-width: 100%; height: auto; border-radius: 6px; }

.admin-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; max-width: 900px; margin: 14px auto; }
.admin-menu a { display: block; padding: 10px 14px; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
.admin-menu a:hover { background: var(--bleu-clair); text-decoration: none; }
.legende-cours { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 22px; max-width: 760px; margin: 14px auto; }
.legende-cours div { display: flex; gap: 10px; align-items: center; }

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

.connexion .container { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px 26px 22px 26px; }
.accueil-logo { text-align: center; margin-top: 14px; }

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

@media print {
   body { background: #fff; max-width: none; padding: 0; }
   .menu, input[type=submit], input[type=button] { display: none; }
   .carte, .livre { box-shadow: none; }
}

/* Résultats de requêtes SQL (administration) */
table#tsimple th { background: var(--bleu-vif); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; text-align: left; }
table#tsimple tr:nth-child(even) td { background: #f7f9fb; }
.formulaire.centre, .formulaire.centre-large { margin-left: auto; margin-right: auto; }

/* Ascendance masculine : une ligne par ancêtre, reliées par un trait vertical */
.ascendance { max-width: 640px; margin: 14px auto; padding-left: 14px; }
.ascendance .ancetre { position: relative; padding: 7px 14px; margin: 0 0 14px 14px; background: var(--carte); border: 1px solid var(--trait);
   border-radius: var(--rayon); box-shadow: var(--ombre); }
.ascendance .ancetre::before { content: ""; position: absolute; left: -15px; top: 50%; width: 15px; border-top: 2px solid #8a98a8; }
.ascendance .ancetre::after { content: ""; position: absolute; left: -15px; top: 50%; height: calc(100% + 14px); border-left: 2px solid #8a98a8; }
.ascendance .ancetre.courant { border: 2px solid var(--bleu); }
.ascendance .ancetre.courant::after { display: none; }
.ascendance .ancetre:first-child::before { display: block; }
table#tlistes { margin: 12px auto; }

/* Fenêtre pop-up (<dialog>) */
dialog.modale { border: 0; border-radius: 12px; padding: 18px 24px 20px 24px; width: min(640px, 94vw); max-height: 90vh; overflow-y: auto;
   box-shadow: 0 10px 40px rgba(0, 0, 0, .35); color: var(--texte); }
dialog.modale::backdrop { background: rgba(20, 30, 45, .55); }
dialog.modale h3 { margin-top: 0; }
dialog.modale .formulaire { max-width: none; }
dialog.modale .formulaire .ligne { grid-template-columns: 170px 1fr; gap: 10px; }
dialog.modale .formulaire { gap: 8px; }
button.danger { margin-left: auto; background: #fff; color: #b3261e; border-color: #e0a8a4; }
button.danger:hover { background: #b3261e; color: #fff; border-color: #b3261e; box-shadow: none; }