/* Feuille de style du service "Analyse GedCom" (cf. index.php).
 *
 * Sortie de la page pour la meme raison que assets/app.js : index.php melangeait 365 lignes de style,
 * 1400 lignes de script et le balisage, ce qui rendait chaque modification risquee. Chargee avec
 * ?v=GNET_PAGE_VERSION, le numero deja bumpe a chaque modification servant de cassage de cache.
 */
body { font-family: Roboto, "Segoe UI", sans-serif; background: #f8fafc; color: #334155; margin: 0;
       display: flex; flex-direction: column; min-height: 100vh; }
header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 10px 24px; display: flex;
         justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
header h1 { font-size: 1.05em; margin: 0; }
header a { color: #64748b; text-decoration: none; font-size: .9em; }
header a:hover { color: #4fa066; }
.back { color: #64748b; text-decoration: none; font-size: .9em; }
.back:hover { color: #4fa066; }
.account-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #cbd5e1;
                border-radius: 6px; color: #64748b; text-decoration: none; font-size: .8em; font-weight: 600; }
.account-btn:hover { background: #f1f5f9; color: #4fa066; border-color: #4fa066; }
.lang-select { font-size: .8em; font-weight: 600; color: #64748b; border: 1px solid #cbd5e1; border-radius: 6px;
                padding: 4px 6px; background: #fff; cursor: pointer; }
.lang-select:hover { border-color: #4fa066; }
/* Pleine largeur (demande utilisateur) : ce service affiche des tableaux de personnes, des listes de
   lieux et des repartitions qui gagnent tous a s'etaler. La marge maximale evite seulement que le texte
   ne coure d'un bord a l'autre sur un ecran tres large, ou il deviendrait penible a lire. */
/* padding horizontal identique a celui de <header> (24px) : sans cela le contenu de la page
   ne s'alignerait pas sur le titre et la barre de compte, tous deux pleine largeur. */
main { max-width: none; margin: 0; padding: 20px 24px 60px; flex: 1; width: 100%; box-sizing: border-box; }
/* Les blocs de TEXTE SUIVI gardent une largeur de lecture : une phrase qui court sur 2 500 px devient
   penible a suivre (l'oeil perd sa ligne au retour). Ce plafond ne s'applique qu'a eux - tableaux, listes
   de lieux, carte et repartitions occupent bien toute la largeur, ce qui est l'objet de la demande. */
main > .tab-panel > .outils-intro,
main > .tab-panel > .empty,
.couverture-total { max-width: 90ch; }
footer.gnet-footer { flex-shrink: 0; background: #fff; border-top: 1px solid #e2e8f0; padding: 6px 16px;
         display: flex; justify-content: space-between; align-items: center; font-size: .75em; }
footer.gnet-footer .gnet-footer-brand { color: #4fa066; font-weight: 700; }
footer.gnet-footer .gnet-footer-version { color: #000; }

section.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px;
               margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,.04); }
section.card h2 { margin: 0 0 12px; font-size: 1.1em; }
.btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px;
       background: #4fa066; color: #fff; text-decoration: none; border: none; border-radius: 8px;
       font-size: .9em; font-weight: 600; cursor: pointer; }
.btn:hover { background: #3d8552; }
.btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }
.btn-secondary { background: #f1f5f9; color: #334155; }
.btn-secondary:hover { background: #e2e8f0; }
.badge-soon { display: inline-block; font-size: .72em; background: #eff6ff; color: #1d4ed8;
              border-radius: 6px; padding: 2px 7px; font-weight: 600; }

/* Carte d'import : presentation a gauche, zone de depot en pave compact cale en haut a droite. */
.upload-entete { display: flex; gap: 22px; align-items: flex-start; }
.upload-texte { flex: 1 1 auto; min-width: 0; }
.upload-texte h2 { margin-top: 0; }
.upload-desc { color: #64748b; font-size: .9em; margin-top: -6px; }

.dropzone { border: 2px dashed #cbd5e1; border-radius: 12px; text-align: center;
            cursor: pointer; transition: border-color .15s, background .15s;
            flex: 0 0 auto; width: 290px; padding: 16px 14px; align-self: flex-start; }
.dropzone:hover, .dropzone.dragover { border-color: #4fa066; background: #f0faf3; }
.dropzone p { margin: 0; font-size: .92em; line-height: 1.35; }
.dropzone-icon { font-size: 1.7em; margin-bottom: 6px; line-height: 1; }
.dropzone-hint { font-size: .78em; color: #94a3b8; margin-top: 8px !important; }
/* Sous 760px la colonne de droite n'a plus la place d'exister : la zone repasse sous le texte, pleine
   largeur (elle reste nettement plus basse qu'avant, cf. padding ci-dessus). */
@media (max-width: 760px) {
    .upload-entete { flex-direction: column; gap: 14px; }
    .dropzone { width: 100%; }
}
.file-current { font-size: .85em; color: #64748b; margin-top: 10px; }

/* Choix du format de téléchargement (.ged ou .zip), aligné avec les boutons de la barre de résultats. */
.format-choix { display: inline-flex; align-items: center; gap: 6px; margin: 12px 8px 0 0;
                font-size: .85em; color: #64748b; }
.format-choix select { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 8px;
                       font-size: .95em; background: #fff; cursor: pointer; }
.format-choix select:hover { border-color: #4fa066; }

/* --- Barre alphabétique (filtre par initiale) ---------------------------------------------------- */
.alpha-bar { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 12px; }
.alpha-btn { min-width: 26px; padding: 3px 6px; border: 1px solid #e2e8f0; background: #fff;
             border-radius: 6px; font-size: .82em; font-weight: 600; color: #64748b; cursor: pointer; }
.alpha-btn:hover:not(:disabled) { border-color: #4fa066; color: #4fa066; }
.alpha-btn.active { background: #4fa066; border-color: #4fa066; color: #fff; }
/* Lettre sans aucune entrée : laissée VISIBLE mais inerte, pour que la barre garde toujours le même
   gabarit d'un onglet à l'autre - et c'est en soi une information ("aucun patronyme en W"). */
.alpha-btn:disabled { color: #cbd5e1; cursor: default; background: #f8fafc; }
.alpha-btn-tous { min-width: auto; }

/* --- Barre de pays (filtre des lieux) ------------------------------------------------------------
   Reprend le gabarit de la barre alphabetique - meme role, meme place, meme geste - avec le nombre de
   lieux en pastille. Posee AU-DESSUS des initiales : on choisit d'abord le pays, puis la lettre. */
.pays-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.pays-btn { display: inline-flex; align-items: center; gap: 6px; }
.pays-nb { background: #eef2f6; color: #475569; border-radius: 999px; padding: 0 6px; font-size: .9em; }
.pays-btn.active .pays-nb { background: rgba(255,255,255,.25); color: #fff; }

/* --- Fiche personne + mini-arbre ---------------------------------------------------------------- */
.indiv-table tbody tr { cursor: pointer; }
.indiv-table tbody tr:hover { background: #f0faf3; }

.fiche-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(15,23,42,.6);
                 display: flex; align-items: center; justify-content: center; padding: 16px; }
.fiche-overlay[hidden] { display: none; }
.fiche-boite { position: relative; background: #fff; border-radius: 14px; width: 100%; max-width: 760px;
               max-height: 92vh; overflow-y: auto; padding: 22px 26px 26px;
               box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.fiche-fermer { position: absolute; top: 8px; right: 12px; width: 34px; height: 34px; border: none;
                background: none; color: #94a3b8; font-size: 1.8em; line-height: 1; cursor: pointer;
                border-radius: 6px; }
.fiche-fermer:hover { background: #f1f5f9; color: #475569; }
.fiche-nom { margin: 0 34px 12px 0; font-size: 1.2em; color: #1e293b; }
.fiche-infos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 20px;
               font-size: .9em; }
.fiche-infos dt { color: #64748b; font-weight: 600; }
.fiche-infos dd { margin: 0; color: #334155; }

/* Le schema se lit de haut en bas : parents / la personne et ses conjoints / enfants. Chaque rangee est
   centree et les traits verticaux marquent la filiation - une mise en page en colonnes suffit ici, sans
   recourir a un trace SVG qu'il faudrait recalculer a chaque navigation. */
.fiche-arbre { border-top: 1px solid #e2e8f0; padding-top: 16px; }
.arbre-rangee { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.arbre-libelle { text-align: center; font-size: .72em; font-weight: 700; color: #94a3b8;
                 text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.arbre-trait { width: 2px; height: 18px; background: #cbd5e1; margin: 0 auto; }
.arbre-bloc { margin-bottom: 2px; }
.arbre-case { border: 1px solid #cbd5e1; border-radius: 9px; padding: 8px 12px; background: #fff;
              text-align: center; min-width: 132px; cursor: pointer; }
.arbre-case:hover { border-color: #4fa066; background: #f0faf3; }
.arbre-case .arbre-case-nom { font-size: .88em; font-weight: 600; color: #1e293b; line-height: 1.25; }
.arbre-case .arbre-case-dates { font-size: .76em; color: #94a3b8; margin-top: 2px; }
/* Mention "la branche continue" : discrete mais dans la couleur d'accent, pour se lire comme une
   invitation a poursuivre plutot que comme une donnee de plus. */
.arbre-case .arbre-case-suite { font-size: .74em; color: #4fa066; font-weight: 600; margin-top: 3px; }
/* mention placee AU-DESSUS (ascendants) : la marge doit passer en dessous, sinon elle colle au nom */
.arbre-case .arbre-case-suite:first-child { margin-top: 0; margin-bottom: 3px; }
.arbre-case.arbre-centre .arbre-case-suite { color: rgba(255,255,255,.9); }
/* La personne consultee : mise en avant et non cliquable (elle est deja affichee). */
.arbre-case.arbre-centre { background: #4fa066; border-color: #4fa066; cursor: default; }
.arbre-case.arbre-centre .arbre-case-nom { color: #fff; }
.arbre-case.arbre-centre .arbre-case-dates { color: rgba(255,255,255,.85); }
.arbre-vide { font-size: .82em; color: #94a3b8; text-align: center; padding: 4px 0; }

.progress-block { text-align: center; padding: 10px 0; }
.progress-bar { height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; margin-top: 10px; }
.progress-bar.indeterminate .progress-fill { width: 40%; height: 100%; background: #4fa066;
        animation: indet 1.1s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.error-msg { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
             padding: 10px 14px; font-size: .88em; margin-top: 12px; }
.warning-msg { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
               padding: 10px 14px; font-size: .85em; margin-bottom: 14px; }
.success-msg { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
               padding: 10px 14px; font-size: .85em; margin-top: 10px; }
/* banniere "decouverte libre" affichee au visiteur anonyme (cf. data-gnet-auth="anonyme") : ton neutre
   et non alarmant, il ne s'agit pas d'une erreur mais d'une simple annonce du moment ou la connexion
   sera demandee. */
.decouverte-msg { color: #1e40af; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
               padding: 10px 14px; font-size: .85em; margin: 0 0 14px; }

.geoloc-stats-line { font-size: .9em; font-weight: 600; color: #1e293b; margin-bottom: 10px; }
.map-container { height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; margin-bottom: 4px; }
/* Bouton plein ecran : pousse a droite de la barre des modes (margin-left:auto sur une ligne flex).
   Volontairement sobre - c'est une commande d'affichage, pas une action sur les donnees. */
.map-plein-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
                 padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
                 color: #334155; font: inherit; font-size: .85em; cursor: pointer;
                 transition: background .12s, border-color .12s; }
.map-plein-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.map-plein-btn:focus-visible { outline: 2px solid #4fa066; outline-offset: 2px; }

/* Plein ecran. UNE seule mise en page pour les deux chemins d'activation : l'API du navigateur (le bloc
   passe alors en couche superieure et occupe l'ecran) et le repli en position fixe quand elle est
   refusee. La carte prend toute la hauteur restante grace a flex:1 - hauteur fixe de 420px annulee. */
#mapBloc.carte-plein-ecran { position: fixed; inset: 0; z-index: 10001; margin: 0;
                             padding: 14px; box-sizing: border-box; background: #fff;
                             display: flex; flex-direction: column; }
#mapBloc.carte-plein-ecran .map-container { flex: 1 1 auto; height: auto; min-height: 0;
                                            margin-bottom: 8px; }
#mapBloc.carte-plein-ecran .map-mode-toggle { flex: 0 0 auto; }
#mapBloc.carte-plein-ecran .map-hint { flex: 0 0 auto; margin-bottom: 0; }
/* Fond blanc de la zone hors carte quand le navigateur donne le plein ecran a ce bloc : sans cela,
   certains navigateurs peignent du noir autour. */
#mapBloc:fullscreen { background: #fff; }
.map-mode-toggle { margin-bottom: 10px; }
.map-hint { font-size: .8em; color: #94a3b8; margin: 0 0 16px; }
.geoloc-panel { margin-bottom: 18px; }
.geoloc-estimate { font-size: .88em; color: #64748b; margin: 0 0 10px; }
.geoloc-checkbox { display: flex; align-items: flex-start; gap: 6px; font-size: .85em; color: #64748b;
                    margin-bottom: 10px; cursor: pointer; }
.geoloc-checkbox input { margin-top: 3px; flex-shrink: 0; }

/* Tuiles menant a leur onglet (cf. data-tab) : le chiffre "18 lieux" invite naturellement au clic,
   autant qu'il y conduise. "Familles" n'a pas d'onglet dedie et reste donc volontairement inerte. */
.stat-card-lien { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.stat-card-lien:hover { border-color: #4fa066; box-shadow: 0 4px 12px rgba(79,160,102,.15); }
.stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.carte-hote:not(:empty) { margin-top: 16px; }
.apropos-faits { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.apropos-faits > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.apropos-faits dt { flex: 0 0 150px; font-size: .84em; color: #94a3b8; }
.apropos-faits dd { margin: 0; font-size: .9em; color: #334155; }
.stat-card { flex: 1; min-width: 130px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
             padding: 14px 16px; box-shadow: 0 4px 15px rgba(0,0,0,.04); text-align: center; }
.stat-value { font-size: 1.5em; font-weight: 700; color: #4fa066; line-height: 1.2; }
.stat-label { font-size: .78em; color: #64748b; margin-top: 2px; }

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
#searchInput { flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid #cbd5e1;
               border-radius: 8px; font-size: .95em; }
.result-count { color: #64748b; font-size: .85em; font-weight: 600; white-space: nowrap; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn, .map-mode-btn { padding: 8px 14px; border: 1px solid #cbd5e1; background: #fff; border-radius: 8px;
           font-size: .85em; font-weight: 600; color: #64748b; cursor: pointer; }
.tab-btn.active, .map-mode-btn.active { background: #4fa066; border-color: #4fa066; color: #fff; }
/* L'attribut [hidden] doit l'emporter sur les "display: flex/inline-flex" declares plus bas dans
   cette feuille : sans cela, un element masque par le JS reste affiche. Constate sur trois cas -
   le filtre du rapport de controle (les deux sous-vues montraient la meme chose), le depliage du
   contenu des balises, et le bouton de geolocalisation, visible alors qu'il devait rester cache.
   La regle est posee ICI, avant les classes concernees, et gagne par son !important. */
[hidden] { display: none !important; }
.tab-panel[hidden] { display: none; }
/* --- Mise en page : menu a gauche, contenu a droite --- */
.gedcom-layout { display: flex; gap: 20px; align-items: flex-start; }
.gedcom-contenu { flex: 1; min-width: 0; } /* min-width:0 : sans lui, un tableau large deborderait */
.gedcom-menu { flex-shrink: 0; width: 232px; transition: width .18s ease;
               overflow-y: auto; overscroll-behavior: contain; }

/* --- Ecrans larges : page non defilante, menu detache en haut a gauche -------------------------
   La PAGE ne defile plus : c'est le contenu, et lui seul, qui defile dans son propre cadre. Le menu
   sort donc completement du flux et reste plante en haut a gauche de l'ecran, toujours accessible,
   quelle que soit la longueur de la liste affichee.

   Deux points sans lesquels rien ne fonctionne :
     - min-height: 0 sur <main>. Un element flex refuse par defaut de se reduire sous la taille de son
       contenu : sans cette ligne il deborderait au lieu de defiler, et la page recommencerait a
       defiler elle-meme.
     - la marge gauche de <main>, qui reserve la place du menu. Celui-ci est fixe par rapport a la
       FENETRE alors que <main> est centre : sans cette reserve, le menu recouvrirait le contenu des
       que la fenetre se resserre. La marge suit l'etat replie/deploye du menu.
   Le calage vertical vient de --gnet-menu-haut, mesure au chargement (cf. placerMenu) : la hauteur du
   bandeau inter-sites depend de la largeur de la fenetre, une valeur ecrite en dur serait fausse une
   fois sur deux. */
@media (min-width: 781px) {
    html { height: 100%; }
    body { height: 100%; min-height: 0; overflow: hidden; }
    /* width:auto et NON 100% : sur ces ecrans <main> recoit une marge gauche qui reserve la place du menu
       fixe (regle suivante). Or une largeur de 100% se calcule sur le conteneur ENTIER, marges non
       deduites : le contenu depassait donc de la largeur du menu sur la droite, et body{overflow:hidden}
       le coupait net au lieu d'ouvrir une barre de defilement. Avec width:auto, la largeur est ce qui
       reste une fois les marges retirees - le comportement normal d'un bloc. */
    main { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 auto; width: auto; }
    /* La gouttiere de gauche n'a de sens QUE lorsque le menu est affiche, donc une fois un fichier
       analyse. Au premier chargement il n'y a pas encore de menu : la carte de depot doit rester
       centree, et non poussee de cote par la place reservee a un element absent. */
    body.gedcom-avec-menu main { margin-left: var(--gnet-menu-largeur, 264px); margin-right: auto; }
    .gedcom-layout { display: block; } /* le menu n'est plus un frere du contenu */
    /* Detache du cadre, le menu ne beneficie plus du fond blanc de la carte qui l'entourait : il
       porte donc le sien, sans quoi il flotterait sur le contenu en transparence. z-index 30 le place
       au-dessus de la page mais SOUS la fiche d'une personne (900) et la modale de connexion (10000),
       qui doivent toutes deux le recouvrir. */
    .gedcom-menu { position: fixed; top: var(--gnet-menu-haut, 84px); left: 16px; z-index: 30;
                   max-height: calc(100vh - var(--gnet-menu-haut, 84px) - 16px);
                   background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
                   padding: 12px; box-sizing: border-box;
                   box-shadow: 0 4px 18px rgba(15, 23, 42, .07); }
    .gedcom-menu.replie { padding: 10px 6px; }
}
.menu-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
               border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; cursor: pointer;
               font: inherit; font-size: .88em; font-weight: 600; color: #334155; margin-bottom: 12px; }
.menu-toggle:hover { border-color: #4fa066; color: #4fa066; }
.menu-toggle-traits { display: inline-flex; flex-direction: column; gap: 3px; flex-shrink: 0;
                      width: 18px; }
.menu-toggle-traits i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.menu-nav { display: flex; flex-direction: column; gap: 14px; }
.menu-groupe-titre { display: flex; align-items: center; gap: 9px; padding: 4px 10px 7px;
                     font-size: .78em; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .05em; color: #94a3b8; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px;
             border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer;
             font: inherit; font-size: .9em; color: #475569; text-align: left; }
.menu-item:hover { background: #f1f5f9; color: #334155; }
.menu-item.active { background: #4fa066; border-color: #4fa066; color: #fff; font-weight: 600; }
.menu-ico { width: 19px; height: 19px; flex-shrink: 0; }
.menu-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Replie : ne restent que les pictogrammes, le menu passe de 232 a 52 px. */
.gedcom-menu.replie { width: 52px; }
.gedcom-menu.replie .menu-txt { display: none; }
.gedcom-menu.replie .menu-toggle,
.gedcom-menu.replie .menu-item { justify-content: center; padding-left: 6px; padding-right: 6px; }
.gedcom-menu.replie .menu-groupe-titre { justify-content: center; padding: 4px 0 7px;
                                         border-bottom: 1px solid #e2e8f0; margin-bottom: 4px; }
/* Sous 780 px, le menu passe au-dessus du contenu et s'y etale horizontalement. */
@media (max-width: 780px) {
    .gedcom-layout { flex-direction: column; }
    .gedcom-menu, .gedcom-menu.replie { width: 100%; }
    .menu-nav { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
    .menu-groupe { flex: 1 1 210px; }
}
/* Outils : onglet d'action, detache des onglets de consultation par un filet et un fond distinct. */
.tab-btn-outils { margin-right: 14px; border-right: 1px solid #e2e8f0; padding-right: 16px; font-weight: 700; }
.outils-intro { color: #64748b; font-size: .92em; margin: 0 0 16px; }
.confidentialite-msg { margin: 10px 0 0; padding: 8px 11px; border: 1px solid #e2e8f0; border-radius: 8px;
                       background: #f8fafc; color: #64748b; font-size: .82em; line-height: 1.45; }
.confidentialite-msg strong { color: #334155; }
.outil-bloc { border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
              background: #fbfdfc; }
.outil-bloc h3 { margin: 0 0 4px; font-size: 1em; color: #334155; }
.outil-desc { margin: 0 0 12px; color: #64748b; font-size: .88em; }
.outil-choix { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer;
               font-size: .92em; color: #334155; }
.outil-choix input { margin-top: 3px; flex-shrink: 0; }
.outil-exemple { color: #64748b; font-style: normal; font-size: .9em; white-space: nowrap; }
.outil-note { color: #64748b; font-size: .85em; margin: 0; }
.outil-etat { color: #64748b; font-size: .82em; margin: 8px 0 0; font-style: italic; }
.outil-parametre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
                   font-size: .9em; color: #334155; }
.outil-parametre input[type="number"] { width: 76px; }
.outil-parametre input { border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 8px; font: inherit; }
.outil-parametre input:focus { outline: none; border-color: #4fa066; }
.controle-resume { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Pastilles de categories : ce sont des BOUTONS de filtrage, pas des etiquettes. D'ou le curseur, le
   retour au survol et l'etat actif - sans ces trois signaux, rien n'indiquerait qu'on peut cliquer.
   font/color hérités : un <button> ne les prend pas du parent. */
.controle-cat { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px;
                border-radius: 999px; font-size: .85em; background: #f1f5f9; color: #334155;
                border: 1px solid transparent; font-family: inherit; cursor: pointer;
                transition: background .12s, border-color .12s; }
.controle-cat:hover { background: #e2e8f0; border-color: #cbd5e1; }
.controle-cat:focus-visible { outline: 2px solid #4fa066; outline-offset: 2px; }
.controle-cat b { font-size: 1.05em; }
.controle-cat-erreur { background: #fee2e2; color: #991b1b; }
/* Categorie isolee : fond plein, pour qu'on voie d'un coup d'oeil que la liste est restreinte et
   laquelle des pastilles la commande. */
.controle-cat-actif { background: #2f6b45; color: #fff; border-color: #2f6b45; }
.controle-cat-actif:hover { background: #275a3a; border-color: #275a3a; }
.controle-parfait { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 8px;
                    padding: 10px 13px; font-size: .92em; margin: 0; }
.controle-liste { display: flex; flex-direction: column; gap: 6px; }
/* flex-wrap + min-width:0 : un nom tres long ("Lambert Adhemar de Monteil seigneur de Monteil, de La
   Garde, de Valaurie & de La Chaux") ne pouvait pas retrecir et ejectait le detail HORS de la carte.
   Il passe desormais a la ligne a l'interieur du cadre. */
.controle-item { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
                 padding: 8px 11px; border-radius: 8px;
                 background: #f8fafc; border: 1px solid #eef2f6; font-size: .88em; }
.controle-item-erreur { border-color: #fecaca; background: #fef6f6; }
.controle-gravite { flex-shrink: 0; font-size: .72em; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .04em; border-radius: 4px; padding: 2px 6px;
                    background: #e2e8f0; color: #64748b; }
.controle-gravite-erreur { background: #fecaca; color: #991b1b; }
.controle-personne { font-weight: 600; color: #334155; min-width: 0; overflow-wrap: anywhere; }
.controle-detail { color: #475569; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.tab-btn-controles { margin-left: 14px; border-left: 1px solid #e2e8f0; padding-left: 16px; }
.vivants-apercu, .notes-apercu { margin-top: 14px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.notes-liste { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.note-item { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 7px 10px;
             border-radius: 8px; background: #fef6f6; border: 1px solid #fecaca; font-size: .85em; }
.note-motif { flex-shrink: 0; font-size: .72em; font-weight: 700; text-transform: uppercase;
              letter-spacing: .04em; border-radius: 4px; padding: 2px 6px;
              background: #fecaca; color: #991b1b; }
.note-motif-mot { background: #fed7aa; color: #9a3412; }
.note-texte { color: #475569; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.vivants-titre { margin: 0 0 8px; font-size: .88em; font-weight: 600; color: #334155; }
.vivants-liste { display: flex; flex-wrap: wrap; gap: 5px 8px; max-height: 260px; overflow-y: auto; }
.vivant-item { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 9px;
               border-radius: 999px; background: #f1f5f9; font-size: .84em; color: #334155;
               max-width: 100%; overflow-wrap: anywhere; }
.vivant-annee { color: #64748b; font-size: .92em; }
.vivant-estimee { background: #fef3c7; color: #92400e; }
.vivant-estimee .vivant-annee { color: #b45309; }
.tags-liste { display: flex; flex-direction: column; gap: 4px; }
.tag-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 5px 8px;
             border-radius: 8px; }
.tag-ligne:hover { background: #f8fafc; }
.tag-voir { border: none; background: none; padding: 0; cursor: pointer; font: inherit;
            font-size: .8em; color: #4fa066; text-decoration: underline; }
.tag-voir:hover { color: #3d8552; }
.tag-sans-valeur { font-size: .8em; color: #94a3b8; font-style: italic; }
.tag-valeurs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 0 2px 26px; }
.tag-valeur { font-family: ui-monospace, Consolas, monospace; font-size: .78em; color: #475569;
              background: #eef2f6; border-radius: 4px; padding: 2px 7px; max-width: 100%;
              word-break: break-all; }
.tag-choix { display: inline-flex; align-items: center; gap: 6px; font-size: .9em; color: #334155;
             cursor: pointer; }
.tag-choix code { font-family: ui-monospace, Consolas, monospace; background: #eef2f6;
                  border-radius: 4px; padding: 1px 5px; }
.tag-choix .tag-nb { color: #94a3b8; font-size: .85em; }
/* Medias : les chemins sont longs, on les laisse se couper plutot que deborder horizontalement. */
.media-list { display: flex; flex-direction: column; gap: 6px; }
.media-item { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
              padding: 7px 10px; border-radius: 8px;
              background: #f8fafc; border: 1px solid #eef2f6; }
.media-type { flex-shrink: 0; font-size: .72em; font-weight: 700; text-transform: uppercase;
              letter-spacing: .04em; color: #64748b; background: #e2e8f0; border-radius: 4px;
              padding: 2px 6px; }
/* Une couleur par provenance : vert pour ce qui voyage avec le fichier ou reste accessible partout,
   orange pour ce qui ne le sera pas ailleurs que sur l'ordinateur de son auteur. */
.media-type-url { color: #166534; background: #dcfce7; }
.media-type-archive { color: #166534; background: #dcfce7; }
.media-type-local { color: #9a3412; background: #fed7aa; }
.media-type-relatif { color: #854d0e; background: #fef3c7; }
.media-item-local { border-color: #fed7aa; background: #fffaf5; }
.media-chemin { font-family: ui-monospace, Consolas, monospace; font-size: .85em; color: #334155;
                word-break: break-all; }
a.media-chemin { color: #2563eb; }
.media-count { flex-shrink: 0; margin-left: auto; font-size: .8em; color: #94a3b8; }

table.indiv-table { width: 100%; border-collapse: collapse; font-size: .87em; }
table.indiv-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0;
                        color: #64748b; font-size: .82em; white-space: nowrap; }
table.indiv-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; }
table.indiv-table tbody tr:hover { background: #f8fafc; }
.table-wrap { overflow-x: auto; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f1f5f9;
        border-radius: 20px; font-size: .85em; cursor: pointer; border: 1px solid transparent; color: #334155; }
.chip:hover { background: #e2e8f0; border-color: #cbd5e1; }
.chip .chip-count { color: #94a3b8; font-weight: 600; }

.empty { color: #94a3b8; font-size: .9em; font-style: italic; }

.group-section > summary { cursor: pointer; font-weight: 700; font-size: 1em; padding: 4px;
        color: #1e293b; list-style: none; display: flex; align-items: center; gap: 8px; }
.group-section > summary::-webkit-details-marker { display: none; }
.group-section > summary::before { content: "▶"; font-size: .7em; color: #94a3b8; transition: transform .15s; }
.group-section[open] > summary::before { transform: rotate(90deg); }
.raw-content { margin: 12px 0 0; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0;
        border-radius: 8px; color: #334155; font-family: Consolas, "Courier New", monospace;
        font-size: .8em; line-height: 1.45; white-space: pre; overflow: auto; max-height: 420px; }

/* --- Graphiques (onglets "A propos" et "Statistiques") --------------------------------------------
   Dessines en CSS, sans bibliotheque : deux graphiques simples ne justifient pas une dependance de plus,
   ni le risque qu'elle ne se charge pas. Les hauteurs et largeurs de barres sont posees en pourcentage
   par le JS, tout le reste est ici. */
.graphe-bloc { margin: 0 0 22px; }
.graphe-bloc h3 { margin: 0 0 4px; font-size: 1em; color: #334155; }
.graphe-note { margin: 0 0 14px; color: #94a3b8; font-size: .82em; }

/* Histogramme vertical : les barres partagent la largeur, la hauteur porte la valeur. Les annees sont
   posees a l'HORIZONTALE sur une rangee distincte, sous l'axe. Pivotees a -45 degres sous les barres,
   elles ressortaient minuscules et rognees par le bas du cadre ; a plat elles se lisent d'un coup, et la
   place ne manque pas (au plus 16 periodes, cf. GNET_STAT_MAX_BARRES). Les deux rangees partagent le
   meme partage de largeur (flex: 1 1 0 et le meme gap), donc chaque annee tombe sous sa barre. */
.histo-barres { display: flex; align-items: flex-end; gap: 4px; height: 190px;
                border-bottom: 1px solid #cbd5e1; }
.histo-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end;
             align-items: center; gap: 4px; min-width: 0; height: 100%; }
.histo-val { font-size: .76em; color: #475569; font-weight: 600; }
.histo-barre { width: 100%; background: linear-gradient(180deg, #6ec18a, #4fa066);
               border-radius: 4px 4px 0 0; min-height: 2px; }
.histo-col-vide .histo-barre { background: #e2e8f0; }
.histo-axe { display: flex; gap: 4px; margin-top: 6px; }
.histo-lib { flex: 1 1 0; min-width: 0; text-align: center; font-size: .78em; color: #475569;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pyramide : une ligne par tranche d'age, hommes a gauche, femmes a droite, tranche au centre. */
.pyramide-legende { display: flex; gap: 14px; margin-bottom: 10px; font-size: .8em; }
.pyr-cle { display: inline-flex; align-items: center; gap: 6px; color: #64748b; }
.pyr-cle::before { content: ''; width: 11px; height: 11px; border-radius: 3px; }
.pyr-cle-h::before { background: #4f7fa0; }
.pyr-cle-f::before { background: #b06e9a; }
.pyr-cle-i::before { background: #cbd5e1; }
.pyramide { display: flex; flex-direction: column; gap: 3px; }
.pyr-ligne { display: flex; align-items: center; gap: 8px; }
.pyr-cote { flex: 1 1 0; display: flex; align-items: center; gap: 6px; min-width: 0; }
.pyr-gauche { justify-content: flex-end; }
.pyr-cote i { display: block; height: 15px; border-radius: 3px; min-width: 0; }
.pyr-gauche i { background: #4f7fa0; border-radius: 3px 0 0 3px; }
.pyr-droite i { background: #b06e9a; border-radius: 0 3px 3px 0; }
.pyr-cote-i i { background: #cbd5e1; }
.pyr-nb { font-size: .74em; color: #64748b; flex-shrink: 0; min-width: 18px; }
.pyr-gauche .pyr-nb { text-align: right; }
.pyr-tranche { flex: 0 0 62px; text-align: center; font-size: .76em; color: #475569; }

/* Anniversaires : une ligne de titre par mois, puis les personnes de ce mois. Le regroupement vaut mieux
   qu'une colonne "mois" repetee - c'est ainsi qu'on lit un calendrier. */
.anniv-liste { display: flex; flex-direction: column; gap: 2px; }
.anniv-mois { margin: 12px 0 4px; font-size: .82em; font-weight: 700; text-transform: uppercase;
              letter-spacing: .05em; color: #4fa066; border-bottom: 1px solid #e2e8f0; padding-bottom: 3px; }
.anniv-mois:first-child { margin-top: 0; }
.anniv-ligne { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap;
               padding: 4px 8px; border-radius: 6px; font-size: .88em; }
.anniv-ligne:hover { background: #f8fafc; }
.anniv-jour { flex: 0 0 28px; text-align: right; font-weight: 700; color: #334155; }
.anniv-nom { flex: 1 1 200px; min-width: 0; color: #334155; overflow-wrap: anywhere; }
.anniv-age { flex-shrink: 0; font-size: .88em; color: #94a3b8; }

/* --- Statistiques de parente (enfants, unions, generations) ------------------------------------------ */
/* Trois chiffres mis en avant, puis leurs repartitions en barres. Les barres sont dessinees en CSS pur
   (largeur en pourcentage du maximum) : pas de bibliotheque de graphiques pour trois histogrammes. */
.parente-cartes { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.parente-carte { flex: 1 1 170px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
                 padding: 14px 16px; }
.parente-valeur { font-size: 1.9em; font-weight: 700; color: #4fa066; line-height: 1.1; }
.parente-libelle { font-size: .85em; color: #334155; margin-top: 2px; }
.parente-qui { font-size: .78em; color: #94a3b8; margin-top: 4px; }
.parente-alerte { flex: 1 1 100%; margin: 0; font-size: .82em; color: #92400e;
                  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; }
.parente-repartitions { display: flex; gap: 26px; flex-wrap: wrap; }
.parente-section { flex: 1 1 260px; min-width: 240px; }
.parente-section h4 { margin: 0 0 8px; font-size: .85em; color: #334155; font-weight: 600; }
.parente-ligne { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: .8em; }
.parente-cle { width: 2.4em; text-align: right; color: #64748b; flex-shrink: 0; }
.parente-barre { flex: 1; background: #eef2f7; border-radius: 3px; height: 11px; overflow: hidden; }
.parente-barre i { display: block; height: 100%; background: #4fa066; }
.parente-nb { width: 4.5em; color: #64748b; flex-shrink: 0; }

/* --- Couverture du controle : ce qui a ete verifie --------------------------------------------------- */
.couverture-bloc { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
                   padding: 14px 18px; margin-bottom: 18px; }
.couverture-bloc h3 { margin: 0 0 2px; font-size: 1em; color: #166534; }
.couverture-total { margin: 0 0 12px; font-size: .85em; color: #166534; }
.couverture-total b { font-size: 1.35em; }
.couverture-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.couverture-item { background: #fff; border: 1px solid #d7ead9; border-radius: 8px; padding: 8px 12px; }
.couverture-nb { font-size: 1.15em; font-weight: 700; color: #166534; }
.couverture-lib { font-size: .78em; color: #475569; }
.couverture-renvois { margin: 12px 0 0; font-size: .78em; color: #64748b; }


/* Bandeau d'invitation a creer un compte, affiche a un visiteur anonyme apres son analyse du jour.
   Ton volontairement sobre (ambre, pas rouge) : ce n'est pas une erreur, c'est une information - le
   visiteur a bien obtenu son analyse complete. */
.essai-bandeau { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
        gap: 12px; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px;
        background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.essai-bandeau[hidden] { display: none !important; }
.essai-bandeau-texte { flex: 1; min-width: 220px; line-height: 1.45; font-size: .93em; }


/* Tableau des quantites par type d'evenement. Deux colonnes seulement : le libelle, qui peut etre long
   en allemand, prend la place restante ; le nombre est aligne a droite pour que les ordres de grandeur
   se comparent d'un coup d'oeil, chiffres des unites sous chiffres des unites. */
/* Largeur plafonnee : sur un grand ecran, une table a 100 % renverrait le nombre a plusieurs
   centaines de pixels de son libelle, et la ligne deviendrait penible a suivre. */
.evenements-table { width: 100%; max-width: 520px; border-collapse: collapse; margin-top: 10px; }
.evenements-table th, .evenements-table td { padding: 6px 10px; border-bottom: 1px solid #e2e8f0;
        text-align: left; font-size: .93em; }
.evenements-table th { background: #f1f5f9; color: #475569; font-weight: 600; }
.evenements-table td.evenements-nb, .evenements-table th.evenements-nb { text-align: right;
        font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.evenements-table tbody tr:hover { background: #f8fafc; }
/* Ligne de total : separee d'un filet plus marque, sans fond, pour se lire comme un resultat et non
   comme une ligne de plus. */
.evenements-table tr.evenements-total td { border-top: 2px solid #cbd5e1; border-bottom: none;
        font-weight: 700; color: #1e293b; }


/* Detail d'un type d'evenement : une ligne par occurrence, en trois colonnes souples (qui, quand,
   ou). flex-wrap + min-width:0 : un nom ou un lieu tres long doit pouvoir retrecir et passer a la
   ligne plutot que deborder de la carte (meme piege que la liste des anomalies). */
.evenement-liste { display: flex; flex-direction: column; gap: 6px; }
.evenement-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
        padding: 7px 11px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0;
        font-size: .9em; }
.evenement-qui { font-weight: 600; color: #1e293b; min-width: 0; overflow-wrap: anywhere; }
/* Nature de l'occurrence (diplome, profession, type d'un evenement generique) : mise en avant,
   c'est souvent l'information la plus utile de la ligne. */
.evenement-quoi { color: #2f6b45; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.evenement-quand { color: #475569; white-space: nowrap; }
.evenement-ou { color: #64748b; min-width: 0; overflow-wrap: anywhere; }