/* ============================================================
   Personnalisation du thème 12
   Version de travail : présentation de la page d'accueil
   Les fichiers originaux du thème restent inchangés.
   ============================================================ */

/* --- Fond général : bleu foncé avec dégradé vertical --- */
body.publicbody {
    background: linear-gradient(to bottom, #10183f 0%, #17245f 48%, #3f5fa8 100%) fixed !important;
    color: #000000;
}

/* --- En-tête : bleu dans le même esprit que le dégradé marron d'origine --- */
#cb-main > header {
    background: linear-gradient(to bottom, #17245f 0%, #3f5fa8 100%) !important;
}

/* On conserve la structure et les dimensions originales du thème. */
.row {
    width: 100%;
    box-sizing: border-box;
}

/* --- Barre de navigation --- */
.desktop-nav.cb-nav {
    position: relative;
    z-index: 100;
}

/* --- Page d'accueil --- */
.home-wrapper {
    margin-top: 10px !important;
}

.home-main {
    width: 100%;
    table-layout: fixed;
}

.home-welcome {
    width: 68%;
    padding-right: 8px;
}

.home-memories {
    width: 32%;
    padding-left: 8px;
}

.home-card {
    box-sizing: border-box;
    height: 100%;
    min-height: 280px;
    padding: 14px 16px 16px 16px;
    border: 2px solid #f28c1b;
    border-radius: 16px;
    background: #eef2f7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.home-card h2 {
    margin: 0 0 10px 0 !important;
    color: #17245f !important;
    font-size: 25px !important;
    text-align: center !important;
}

.home-welcome-text {
    color: #000000;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 15px;
    line-height: 1.45;
}

.home-welcome-text p {
    margin: 9px 0 !important;
}

.home-welcome-text a {
    color: #17245f;
}

/* --- Diaporama --- */
.home-slideshow {
    position: relative;
    width: 100%;
    height: 225px;
    overflow: hidden;
    border-radius: 10px;
    background: #17245f;
    border: 1px solid #f28c1b;
}

.home-slideshow-images {
    position: absolute;
    inset: 0;
}

.home-slideshow-images img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.home-slideshow-images img.active {
    opacity: 1;
}

.home-slideshow-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 7px;
    background: rgba(10, 16, 45, .72);
    color: #ffffff;
    text-align: center;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 13px;
}

.home-slideshow-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    color: #ffffff;
    text-align: center;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 14px;
}

/* --- Bloc Top 100 --- */
.home-surnames {
    margin-top: 10px !important;
}

.home-surnames .layout-item-3 {
    border-color: #f28c1b !important;
    background: #eef2f7 !important;
    border-radius: 16px !important;
}

/* --- Pied de page --- */
.cb-footer {
    background: linear-gradient(to bottom, #17245f 0%, #17245f 100%) !important;
}

/* --- Mobile : retour à une seule colonne --- */
@media (max-width: 800px) {
    .home-welcome,
    .home-memories {
        display: block;
        width: 100%;
        padding: 0 0 10px 0;
    }

    .home-card {
        min-height: 0;
    }

    .home-slideshow {
        height: 240px;
    }
}

/* --- Bandeau familial (Image de l'arbre) --- */
.cb-tng-area.home-banner {
    margin: 7px 20px 10px 20px !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 3px solid #17245f !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    line-height: 0 !important;
}

.cb-tng-area.home-banner img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: contain !important;
}

/* --- Textes de bienvenue additionnels --- */
.welcome-text-large {
    font-size: 1.25em !important;
    line-height: 1.65 !important;
}

.welcome-title {
    font-size: 1.5em !important;
    font-weight: bold !important;
    color: #1e293b !important;
}

.btn-container {
    text-align: center !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}

/* Bouton contribution / appel à l'action */
.btn-contribuer,
a.contrib-button, 
.contrib-button, 
a[href*="suggest"], 
.tng-contrib-btn {
    background: #ff6b00 !important;
    background-color: #ff6b00 !important;
    color: #ffffff !important;
    border: 1px solid #ea580c !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.btn-contribuer:hover,
a.contrib-button:hover, 
.contrib-button:hover, 
a[href*="suggest"]:hover {
    background: #1e40af !important;
    background-color: #1e40af !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px rgba(0,0,0,0.15) !important;
}

/* ==========================================================================
   CHARTE TNG : BLEU MARINE / BLEU-GRIS / ORANGE & MENU JAUNE-MOUTARDE
   ========================================================================== */

/* 1. TABLEAUX FICHE INDIVIDUELLE ET OVERRIDE GLOBAL ANTI-MARRON */
td.fieldname, 
.fieldname,
.fieldnameback, 
.tablesaw-cell-label,
td.fieldnameback,
.brown, 
.brownbar, 
.brownback, 
td.brownback, 
th.brownback {
    background: #1e40af !important;
    background-color: #1e40af !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

td.header, 
.header,
tr.header td {
    background: #1e40af !important;
    background-color: #1e40af !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

td.databack, 
.databack,
td.description,
.datadiv,
.lightback {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

.fieldnameback label,
.fieldnameback span,
.fieldnameback td,
.tablesaw-cell-label label,
.tablesaw-cell-label span,
label, 
span.label, 
.fieldnameback *, 
.fieldname * {
    background: transparent !important;
    background-color: transparent !important;
}

.fieldnameback a, 
.brownback a,
.datalist a:hover, 
td.databack a:hover, 
td.description a:hover {
    color: #ffffff !important;
}

.fieldnameback a:hover, 
.brownback a:hover {
    color: #ff6b00 !important;
}

/* 2. STATISTIQUES & ALPHABET */
.bar, 
td.bar, 
div.bar {
    background: #1e40af !important;
    background-color: #1e40af !important;
}

/* 3. BOUTONS ET LETTRES TNG */
.snlink, 
a.snlink, 
.snlink:visited,
.pagne-letter,
a.pagne-letter,
.pagne-letter a,
td.pagne-letter,
#alphabet a, 
.alphabet a, 
a.alphastat,
.alphastat,
.pagenav a, 
a.page-link, 
.sn-button, 
a.sn-button,
a.pagne-button,
.pagne-button,
input.pagne-button {
    background: #1e40af !important;
    background-color: #1e40af !important;
    color: #ffffff !important;
    border: 1px solid #1e3a8a !important;
    border-radius: 4px !important;
    text-shadow: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.snlink:hover, 
a.snlink:hover, 
.pagne-letter:hover,
a.pagne-letter:hover,
#alphabet a:hover, 
.alphabet a:hover, 
a.alphastat:hover,
.pagenav a:hover, 
.sn-button:hover, 
a.sn-button:hover,
a.pagne-button:hover {
    background: #ff6b00 !important;
    background-color: #ff6b00 !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

/* 4. SÉLECTEUR DE GÉNÉRATIONS (.verysmall) */
select.verysmall, 
.verysmall {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1e40af !important;
    border: 1px solid #1e3a8a !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-weight: bold !important;
}

select.verysmall option {
    background: #ffffff !important;
    color: #1e40af !important;
}

/* 5. BANDEAU DE MENU PRINCIPAL */

/* Nettoyage du conteneur parent */
.cb-tng-area,
div.cb-tng-area {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Force la div parente à annuler ses marges HTML de 10px */
div[style*="margin-left: 10px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

/* Conteneur principal du menu (orange foncé) */
.menucontainer {
    background: #d97706 !important;
    background-color: #d97706 !important;
    background-image: none !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Conteneur interne TNG (orange clair en fond + suppression de l'ombre) */
div.innercontainer {
    background: #f97316 !important;
    background-color: #f97316 !important;
    background-image: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    height: auto !important;
}

/* Liens du menu principal */
ul.tngdd, ul.tngdd li, ul.tngdd .menulink {
    background: transparent !important;
    border: none !important;
}

.menucontainer a, div.innercontainer a, ul.tngdd a {
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.menucontainer a:hover, div.innercontainer a:hover, ul.tngdd a:hover {
    background: #1e40af !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}

/* --- Sous-menu déroulant --- */

/* Fond orange plus clair et coins arrondis */
ul.tngdd ul, 
ul.tngdd ul li {
    background-color: #f97316 !important;
    background: #f97316 !important;
    border: none !important;
    border-radius: 6px !important;
}

/* Texte des éléments du sous-menu */
ul.tngdd ul a, 
ul.tngdd ul a:link, 
ul.tngdd ul a:visited {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Effet de survol du sous-menu : bleu nuit */
ul.tngdd ul a:hover, 
ul.tngdd ul li:hover {
    background-color: #17245f !important;
    background: #17245f !important;
    color: #ffffff !important;
    border-radius: 4px !important;
}
/* --- Panneau de recherche rapide (dropdown) --- */

/* Fond bleu nuit, bordure orange et suppression du beige natif */
ul.tngdd ul li a,
.slidedown, 
#searchdrop {
    background: #17245f !important;
    background-color: #17245f !important;
    color: #ffffff !important;
    border: 2px solid #d97706 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
    padding: 12px 16px !important;
}

/* Titres et textes dans le panneau */
.slidedown, 
.slidedown *, 
#searchdrop * {
    color: #ffffff !important;
}

/* Liens en haut du panneau */
.slidedown a, 
#searchdrop a {
    color: #f97316 !important;
    text-decoration: underline !important;
}

.slidedown a:hover, 
#searchdrop a:hover {
    color: #ffffff !important;
}

/* Champs de saisie (Prénom, Nom, ID) */
.slidedown input[type="text"], 
#searchdrop input[type="text"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

/* Bouton Chercher */
.slidedown input[type="submit"], 
#searchdrop input[type="submit"],
.slidedown input[type="button"] {
    background: #d97706 !important;
    background-color: #d97706 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 14px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

.slidedown input[type="submit"]:hover, 
#searchdrop input[type="submit"]:hover,
.slidedown input[type="button"]:hover {
    background: #f97316 !important;
    background-color: #f97316 !important;
}
/* --- 1. Bouton Accéder à l'arbre familial (Accueil UNIQUEMENT) --- */
.home-wrapper a[href*="familychart"],
.cb-content-layout a[href*="familychart"] {
    background: #ff6b00 !important;
    background-color: #ff6b00 !important;
    color: #ffffff !important;
    border: 3px solid #ea580c !important;
    border-radius: 40px !important;
    padding: 18px 50px !important;
    font-weight: bold !important;
    font-size: 1.6em !important;
    text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
}

.home-wrapper a[href*="familychart"]:hover,
.cb-content-layout a[href*="familychart"]:hover {
    background: #1e40af !important;
    background-color: #1e40af !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02);
}

/* --- 2. Barre d'onglets fiches (Personnes, Ancêtres, Famille...) --- */
#tngnav a {
    background: #ffffff !important;
    color: #17245f !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    display: inline-block !important;
}

/* Onglet actif ou survolé */
#tngnav a:hover,
#tngnav li.active a,
#tngnav .active a {
    background: #ff6b00 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

/* Survol : passage au bleu nuit */
a[href*="familychart"]:hover,
a[href*="familychart.php"]:hover {
    background: #1e40af !important;
    background-color: #1e40af !important;
    border-color: #1e3a8a !important;
    color: #ffffff !important;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}
/* --- Titre du bloc Top 100 Surnames --- */
.home-surnames h2 {
    background: #17245f !important;
    background-color: #17245f !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold !important;
    font-variant: normal !important; /* Annule l'effet petites capitales TNG */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 10px 20px !important;
    margin: 0 0 15px 0 !important;
    border: 2px solid #d97706 !important;
    border-radius: 10px !important;
    display: block !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
/* --- Correctif visibilité sur la page de l'arbre (familychart) --- */

/* 1. Textes de consigne et options au-dessus de l'arbre */
body.familychartbody .cb-tng-area,
body.familychartbody span.normal,
.mag-icons,
.mag-icons span,
.mag-icons a {
    color: #ffffff !important;
}

/* 2. Liens d'action (Changer de conjoint, parents, etc.) */
.mag-icons a:link,
.mag-icons a:visited {
    color: #ff9d42 !important; /* Orange clair lisible sur fond sombre */
    text-decoration: underline !important;
}

.mag-icons a:hover {
    color: #ffffff !important;
}

/* 3. Passe les loupes PNG sombres en blanc brillant */
.mag-icons img {
    filter: brightness(0) invert(1) !important;
}
/* Forcer la couleur orange sur les textes et liens au-dessus du tableau */
.cb-tng-area span.normal,
.cb-tng-area span.normal a,
div.cb-tng-area span.normal {
    color: #ff6b00 !important;
    font-weight: bold !important;
}
/* --- 1. Page d'accueil : conservée en fond sombre --- */
body.index, 
body.index.publicbody {
    background: #17245f !important;
    background-color: #17245f !important;
    color: #ffffff !important;
}

/* --- 2. Pages d'arbre : bleu très clair uni sur tous les conteneurs --- */
body.publicbody:not(.index),
body.publicbody:not(.index) #outer,
body.publicbody:not(.index) .cb-sheet,
body.publicbody:not(.index) .cb-tng-area {
    background: #e0f2fe !important;
    background-color: #e0f2fe !important;
    color: #0f172a !important;
}

/* --- 3. Textes d'instructions et loupes en sombre --- */
body.publicbody:not(.index) .cb-tng-area span.normal,
body.publicbody:not(.index) .cb-tng-area span.normal a {
    color: #0f172a !important;
    font-weight: 600 !important;
}

body.publicbody:not(.index) .mag-icons img {
    filter: none !important;
}
/* --- Nom/Prénom : Texte bleu marine sur fond bleu ciel avec bordure orange --- */
body.publicbody:not(.index) #nameheader,
body.publicbody:not(.index) .header,
body.publicbody:not(.index) h1.header {
    background: transparent !important;
    background-color: transparent !important;
    color: #17245f !important;
    border: 2px solid #ff6b00 !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
    margin-top: 10px !important;
}

/* Couleur du nom, du prénom et des dates */
body.publicbody:not(.index) #nameheader h1,
body.publicbody:not(.index) #nameheader span,
body.publicbody:not(.index) #nameheader * {
    color: #17245f !important;
}
/* --- Correction finale Contactez-nous : suppression du cadre + survol bleu --- */
ul.tngdd ul li:has(a[href*="suggest"]),
ul.tngdd ul li:has(a[href*="contact"]) {
    background: #f97316 !important;
    background-color: #f97316 !important;
    border: none !important;
}

/* Retirer le cadre bleu permanent du lien */
ul.tngdd ul li a[href*="suggest"],
ul.tngdd ul li a[href*="contact"] {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    display: block !important;
    width: 100% !important;
}

/* Survol bleu identique aux autres */
ul.tngdd ul li:has(a[href*="suggest"]):hover,
ul.tngdd ul li:has(a[href*="contact"]):hover,
ul.tngdd ul li a[href*="suggest"]:hover,
ul.tngdd ul li a[href*="contact"]:hover {
    background: #17245f !important;
    background-color: #17245f !important;
    color: #ffffff !important;
}
/* --- Harmonisation des étiquettes des personnes (Fond orange plus prononcé) --- */
.fambox, 
.mfambox {
    background-color: #ffedd5 !important;
    border: 2px solid #17245f !important;
    border-radius: 10px !important;
    box-shadow: 0 3px 6px rgba(23, 36, 95, 0.15) !important;
}

/* Texte à l'intérieur des étiquettes en bleu marine */
.fambox a, 
.mfambox a,
.fambox span, 
.mfambox span {
    color: #17245f !important;
    font-weight: 600 !important;
}

/* Effet au survol des étiquettes */
.fambox:hover, 
.mfambox:hover {
    background-color: #fed7aa !important;
    border-color: #ff6b00 !important;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.25) !important;
}
/* --- Boutons Zoom Charts --- */
#zoom-in,
#zoom-out,
#reset {
    background: #ff6b00 !important;
    background-color: #ff6b00 !important;
    color: #ffffff !important;
    border: 3px solid #17245f !important;
    border-radius: 6px !important;
}
/* --- Liens au survol : Family Preview --- */
td.databack a:hover,
td.description a:hover {
    color: #ff6b00 !important;
}
/* --- Liens des personnes dans Chronology --- */
[class^="chronology_rank"] a,
[class^="chronology_rank"] a:visited,
[class^="chronology_rank"] a:hover {
    color: #ff6b00 !important;
}
/* --- Menu déroulant OpenArch --- */
#openarch_search #sources {
    background: #ff6b00 !important;
    background-color: #ff6b00 !important;
    color: #ffffff !important;
    border: 3px solid #17245f !important;
    border-radius: 6px !important;
}

#openarch_search #sources option {
    background-color: #ff6b00 !important;
    color: #ffffff !important;
}
/* --- Liens des informations personnelles --- */
td.databack a,
td.databack a:visited {
    color: #17245f !important;
    text-decoration: underline;
}

td.databack a:hover {
    color: #ff6b00 !important;
}
/* --- Bulle personnalisée des noms de famille --- */
.surnames-cloud a[data-tooltip] {
    position: relative;
}

.surnames-cloud a[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #ff6b00;
    color: #ffffff;
    border: 2px solid #17245f;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
/* ==================================================
   FENÊTRE DE CONNEXION — HARMONISATION
   ================================================== */

/* Fond général de la fenêtre */
#LB_window {
    background: #edf3fa !important;
    background-color: #edf3fa !important;
}

/* Bandeau supérieur */
#LB_window .LB_closeAjaxWindow {
    background: #17245f !important;
    background-color: #17245f !important;
}

/* Zone intérieure */
#LB_window .LB_content {
    background: #edf3fa !important;
    background-color: #edf3fa !important;
}

/* --------------------------------------------------
   BOUTON « CONNEXION »
   -------------------------------------------------- */

#loginsubmit {
    background: #f4b183 !important;
    background-color: #f4b183 !important;
    color: #17245f !important;
    border: 2px solid #17245f !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------
   LES DEUX BOUTONS « OK »
   -------------------------------------------------- */

form[name="form2"] input[type="submit"] {
    background: #f4b183 !important;
    background-color: #f4b183 !important;
    color: #17245f !important;
    border: 2px solid #17245f !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------
   SURVOL DES TROIS BOUTONS
   -------------------------------------------------- */

#loginsubmit:hover,
form[name="form2"] input[type="submit"]:hover {
    background: #ff6b00 !important;
    background-color: #ff6b00 !important;
    color: #ffffff !important;
}