/* =============================================
   main.css — Feuille de style principale
   Ged'la chance
   =============================================
   FICHIER DEFINITIF
   =============================================

   SOMMAIRE
   ─────────
   1.  Variables CSS (couleurs, typographie, espacements, nav)
   2.  Reset & base
   3.  Grille 12 colonnes
   4.  Navigation latérale (.nav, .nav__logo, .nav__link, sous-menus)
   5.  Bouton hamburger mobile (.nav__toggle, overlay, bouton fermer)
   6.  Barre du haut (.topbar, champ de recherche rapide, bouton connexion)
   7.  Contenu principal (.main, .page)
   8.  En-tête de page (.page-header)
   9.  Héro (.hero, logo)
   10. Cartes (.card, .card--placeholder)
   11. Moteur de recherche (.search-card, .search-form, .search-input)
   12. Boutons (.btn, .btn-primary, .btn-white)
   13. Résultats de recherche (.result-list, .result-item, pagination)
   14. Fiche individu (.individual-header, .detail-list, notes, badges)
   15. Page de connexion (.auth-*, formulaires, alertes)
   16. Animations (@keyframes fadeUp)
   17. Responsive mobile (< 900px, < 480px)
   18. Badges rôles utilisateurs
   19. Onglets invite-tabs (base.php)
   20. Scroll horizontal isolé (.scroll-wrapper / .scroll-inner)
   21. Tableau de parenté (.kinship-table)
   21. Gestion des anniversaires
   ============================================= */


/* =============================================
   1. VARIABLES CSS
   ─────────────────
   Toutes les couleurs, polices et espacements du site sont définis ici.
   ⚠ Pour changer la largeur du menu, modifiez UNIQUEMENT --nav-width.
   ============================================= */
:root {
    --color-primary:       #252AD9;
    --color-primary-dark:  #1a1fa0;
    --color-primary-light: #e8e9fb;
    --color-dark:          #0f0f1a;
    --color-mid:           #5a5a7a;
    --color-light:         #f5f5fa;
    --color-white:         #ffffff;
    --color-border:        #e0e0f0;
    --color-success:       #1a9a5a;
    --color-error:         #c0392b;

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --gap:       1.25rem;
    --radius:    0.5rem;
    --radius-lg: 1.25rem;
    --shadow-sm: 0 1px 4px rgba(37,42,217,0.07);
    --shadow-md: 0 4px 24px rgba(37,42,217,0.12);
    --shadow-lg: 0 12px 48px rgba(37,42,217,0.18);

    /* ⚠ Pour changer la largeur du menu, modifiez UNIQUEMENT ici */
    --nav-width:  280px;
    --topbar-h:   56px;
    --transition: 0.2s cubic-bezier(.4,0,.2,1);
}


/* =============================================
   2. RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    background:  var(--color-light);
    color:       var(--color-dark);
    min-height:  100vh;
    display:     flex;
    overflow-x:  hidden;
}
a       { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
img     { max-width: 100%; display: block; }


/* =============================================
   3. GRILLE 12 COLONNES
   ─────────────────────
   Utilisation : <div class="grid"><div class="col-6">…</div></div>
   Sur mobile (< 900px), col-6, col-4, col-3 passent en pleine largeur.
   ============================================= */
.grid {
    display:               grid;
    grid-template-columns: repeat(12, 1fr);
    gap:                   var(--gap);
    width:                 100%;
}
.col-1  { grid-column: span 1;  }
.col-2  { grid-column: span 2;  }
.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }


/* =============================================
   4. NAVIGATION LATÉRALE
   ──────────────────────
   Positionnée en fixed à gauche, pleine hauteur.
   Sur mobile, cachée par transform translateX(-100%) et révélée par .open.
   ============================================= */
body.nav-open {
    /* Bloque le scroll de la page derrière le menu mobile ouvert */
    overflow: hidden;
}

.nav {
    /* La variable --nav-width est le seul endroit à modifier pour
       changer la largeur du menu sur toute la page. */
    width:     var(--nav-width);
    min-width: var(--nav-width); /* empêche le rétrécissement en flex */
    position:  fixed;
    top: 0; left: 0;
    height:    100vh;
    background: var(--color-dark);
    display:    flex;
    flex-direction: column;
    padding:    1.5rem 1.25rem;
    z-index:    100;
    transition: transform var(--transition);
    overflow-y: auto;
}

/* Logo centré dans son conteneur */
.nav__logo {
    display:         flex;
    align-items:     center;     /* centrage vertical */
    justify-content: center;     /* centrage horizontal */
    margin-bottom:   1.75rem;
    padding-bottom:  1.5rem;
    min-height:      80px;
}

/* Logo non carré : largeur libre, hauteur contrainte à 48px */
.nav__logo-img {
    max-width:   calc(var(--nav-width) - 2.5rem);
    max-height:  100px;
    width:  auto;
    height: auto;
    object-fit: contain;
}

/* Liens de niveau 1 */
.nav__menu {
    list-style:     none;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.nav__link,
.nav__toggle-item {
    display:     flex;
    align-items: center;
    gap:         0.7rem;
    padding:     0.6rem 0.9rem;
    border-radius: var(--radius);
    color:       rgba(255,255,255,0.6);
    font-size:   0.88rem;
    font-weight: 500;
    width:       100%;
    background:  none;
    border:      none;
    cursor:      pointer;
    transition:  background var(--transition), color var(--transition);
    text-align:  left;
}

.nav__link:hover,
.nav__toggle-item:hover {
    background:     rgba(255,255,255,0.07);
    color:          var(--color-white);
    text-decoration: none;
}
.nav__link.active,
.nav__item.active > .nav__link {
    background: var(--color-primary);
    color:      var(--color-white);
}

.nav__icon {
    font-size:  0.95rem;
    width:      1.1rem;
    text-align: center;
    flex-shrink: 0;
    color:      rgba(255,255,255,0.5);
}
.nav__link.active .nav__icon,
.nav__item.active > .nav__link .nav__icon {
    color: var(--color-white);
}

/* Chevron décoratif (non cliquable, animé par la classe .open du <li> parent) */
.nav__chevron {
    margin-left:    auto;
    font-size:      0.65rem;
    opacity:        0.4;
    transition:     transform var(--transition);
    pointer-events: none;
}
.nav__item.open > .nav__toggle-item .nav__chevron {
    transform: rotate(180deg);
}

/* Sous-menu niveau 2 : accordéon CSS (max-height 0 → 400px) */
.nav__submenu {
    list-style:  none;
    max-height:  0;
    overflow:    hidden;
    transition:  max-height 0.28s ease;
}
.nav__item.open > .nav__submenu {
    max-height: 400px;
}

.nav__sublink {
    display:     flex;
    align-items: center;
    gap:         0.55rem;
    padding:     0.45rem 0.75rem 0.45rem 2.5rem;
    border-radius: var(--radius);
    color:       rgba(255,255,255,0.45);
    font-size:   0.82rem;
    transition:  color var(--transition), background var(--transition);
}
.nav__sublink:hover {
    color:          var(--color-white);
    background:     rgba(255,255,255,0.07);
    text-decoration: none;
}
.nav__sublink.active {
    color:      var(--color-white);
    background: var(--color-primary);
}

/* Icône petite dans les sous-menus */
.nav__icon--sm {
    font-size:  0.78rem;
    width:      0.9rem;
    text-align: center;
    flex-shrink: 0;
    opacity:    0.6;
}


/* =============================================
   5. BOUTON HAMBURGER (mobile)
   ─────────────────────────────
   Positionné DANS la topbar (pas en fixed).
   Caché sur desktop, visible sur mobile (< 900px).
   ============================================= */
.nav__toggle {
    display:        none; /* caché sur desktop */
    align-items:    center;
    justify-content: center;
    background:     var(--color-primary);
    color:          var(--color-white);
    border:         none;
    border-radius:  var(--radius);
    width:          36px;
    height:         36px;
    font-size:      1rem;
    cursor:         pointer;
    flex-shrink:    0;
    transition:     background var(--transition);
    z-index:        200;
}
.nav__toggle:hover { background: var(--color-primary-dark); }

/* Overlay sombre derrière le menu mobile */
.nav__overlay {
    display:        block;
    position:       fixed;
    inset:          0;
    background:     rgba(0,0,0,0.45);
    z-index:        99;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--transition);
}
.nav__overlay.active {
    opacity:        1;
    pointer-events: auto;
}

/* Bouton « × » pour fermer le menu (mobile uniquement) */
.nav__close {
    display:         none; /* caché sur desktop */
    align-items:     center;
    justify-content: center;
    position:        absolute;
    top:   0.75rem;
    right: 0.75rem;
    background:   rgba(255,255,255,0.1);
    color:        rgba(255,255,255,0.7);
    border:       none;
    border-radius: var(--radius);
    width:        36px;
    height:       36px;
    font-size:    1.1rem;
    cursor:       pointer;
    transition:   background var(--transition), color var(--transition);
}
.nav__close:hover {
    background: rgba(255,255,255,0.2);
    color:      var(--color-white);
}


/* =============================================
   6. BARRE DU HAUT (topbar)
   ──────────────────────────
   position: sticky → NE PAS mettre overflow-x: hidden sur .main
   (casserait le sticky sur iOS/Safari).
   ============================================= */
.topbar {
    height:        var(--topbar-h);
    background:    var(--color-white);
    border-bottom: 1px solid var(--color-border);
    display:       flex;
    align-items:   center; /* centrage vertical de tous les enfants */
    padding:       0 1.25rem;
    gap:           0.75rem;
    position:      sticky;
    top:           0;
    z-index:       50;
}

/* Champ de recherche rapide dans la topbar */
.topbar__search {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    background:  var(--color-light);
    border:      1px solid var(--color-border);
    border-radius: 999px;
    padding:     0 1rem;
    height:      36px;
    flex:        1;
    max-width:   340px;
    transition:  border-color var(--transition);
}
.topbar__search:focus-within { border-color: var(--color-primary); }

.topbar__search-icon {
    color:      var(--color-mid);
    font-size:  0.82rem;
    flex-shrink: 0;
}

.topbar__search-input {
    border:      none;
    background:  transparent;
    font-family: var(--font-body);
    color:       var(--color-dark);
    outline:     none;
    width:       100%;
    font-size:   16px; /* 16px minimum pour éviter le zoom iOS */
}

/* Supprimer l'icône de recherche native sur iOS */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}

/* Bouton « Connexion » dans la topbar */
.topbar__login {
    margin-left: auto;
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--color-primary);
    padding:     0 0.9rem;
    height:      34px;
    border-radius: 999px;
    border:      1.5px solid var(--color-primary);
    transition:  all var(--transition);
    white-space: nowrap;
}
.topbar__login:hover {
    background:     var(--color-primary);
    color:          white;
    text-decoration: none;
}


/* =============================================
   7. CONTENU PRINCIPAL
   ─────────────────────
   .main pousse son contenu à droite de la nav via margin-left.
   .page contient la page elle-même avec padding et max-width.
   overflow-x: hidden sur .page (OK car la topbar n'est pas dans .page).
   NE PAS mettre overflow-x: hidden sur .main (casserait sticky topbar).
   ============================================= */
.main {
    margin-left:    var(--nav-width); /* s'adapte automatiquement si --nav-width change */
    flex:           1;
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
}

.page {
    flex:       1;
    padding:    2rem 1.75rem;
    max-width:  1300px;
    width:      100%;
    overflow-x: hidden;
}


/* =============================================
   8. EN-TÊTE DE PAGE
   ============================================= */
.page-header {
    margin-bottom: 2rem;
    animation:     fadeUp 0.4s ease both;
}
.page-header__title {
    font-family:    var(--font-display);
    font-size:      1.9rem;
    color:          var(--color-dark);
    font-weight:    700;
    letter-spacing: -0.02em;
}
.page-header__subtitle {
    font-size:  0.9rem;
    color:      var(--color-mid);
    margin-top: 0.3rem;
}


/* =============================================
   9. HÉRO
   ============================================= */
.hero {
    text-align: center;
    padding:    2rem 1rem 1.5rem;
    animation:  fadeUp 0.5s ease both;
}

/* Logo non carré : 80% max de la largeur, hauteur auto */
.hero__logo {
    max-width:  80%;
    max-height: 220px;
    width:  auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto 1.25rem;
}

.hero__subtitle {
    color:      var(--color-mid);
    font-size:  1rem;
    max-width:  480px;
    margin:     0 auto 2rem;
    line-height: 1.6;
}


/* =============================================
   10. CARTES
   ───────────
   .card-anim : card sans fond blanc (utilisée dans les grilles
                pour appliquer l'animation sans double bordure).
   .card--placeholder : card en pointillés pour les zones vides.
   ============================================= */
.card {
    background:    var(--color-white);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.75rem;
    box-shadow:    var(--shadow-sm);
    animation:     fadeUp 0.4s ease both;
}
.card + .card { margin-top: var(--gap); }

.card-anim { animation: fadeUp 0.4s ease both; }

.card__title {
    font-family:   var(--font-display);
    font-size:     1.1rem;
    color:         var(--color-dark);
    margin-bottom: 1rem;
}
.card__subtitle {
    font-family:   var(--font-display);
    font-size:     0.9rem;
    color:         var(--color-dark);
    margin-bottom: 0.5rem;
    margin-top:    1rem;
}

.card--placeholder {
    border-style:    dashed;
    background:      transparent;
    box-shadow:      none;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      200px;
    gap:             0.75rem;
}
.placeholder__icon { font-size: 2rem; opacity: 0.12; }
.placeholder__text {
    color:       var(--color-mid);
    font-size:   0.88rem;
    text-align:  center;
    line-height: 1.6;
}


/* =============================================
   11. MOTEUR DE RECHERCHE
   ────────────────────────
   .search-card : fond dégradé bleu sur les pages de recherche.
   .search-form : flex avec retour à la ligne sur petits écrans.
   .search-btn  : ne rétrécit jamais (flex: 0 0 auto).
   ============================================= */
.search-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a1fa0 100%);
    border:     none;
    color:      var(--color-white);
    overflow:   hidden;
    position:   relative;
}
/* Cercle décoratif en coin haut-droit */
.search-card::before {
    content:       '';
    position:      absolute;
    top:  -80px; right: -80px;
    width:  240px;
    height: 240px;
    border-radius: 50%;
    background:    rgba(255,255,255,0.05);
    pointer-events: none;
}
.search-card .card__title  { color: var(--color-white); font-size: 1.2rem; }
.search-card__subtitle     { color: rgba(255,255,255,0.65); font-size: 0.84rem; margin-bottom: 1.1rem; }

/*
  Formulaire de recherche :
  - flex-wrap: wrap → le bouton passe à la ligne si la place manque (iPad)
  - Sur mobile (< 600px) → flex-direction: column + btn pleine largeur
  - flex: 1 1 180px est désactivé sur .search-input (problème multilignes)
*/
.search-form {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.6rem;
    position:  relative;
    z-index:   1;
}

.search-input {
    /* flex: 1 1 180px désactivé : causait des problèmes de multilignes */
    min-width:   0;    /* évite le dépassement dans flex */
    padding:     0.75rem 1rem;
    border-radius: var(--radius);
    border:      2px solid rgba(255,255,255,0.25);
    background:  rgba(255,255,255,0.12);
    color:       var(--color-white);
    font-family: var(--font-body);
    font-size:   16px; /* 16px minimum pour éviter le zoom iOS */
    height:      44px;
    line-height: normal;
    -webkit-appearance: none;
    backdrop-filter: blur(6px);
    outline:     none;
    transition:  border-color var(--transition), background var(--transition);
}
.search-input::placeholder { color: rgba(255,255,255,0.5); }
.search-input:focus {
    border-color: rgba(255,255,255,0.6);
    background:   rgba(255,255,255,0.18);
}

/* Le bouton « Rechercher » ne rétrécit jamais */
.search-btn {
    flex:        0 0 auto;
    white-space: nowrap;
}


/* =============================================
   12. BOUTONS
   ───────────
   .btn         : classe de base (padding, radius, font, transitions)
   .btn-primary : fond bleu, texte blanc
   .btn-white   : fond blanc, texte bleu (avec bordure selon contexte)
   .btn--full   : pleine largeur
   a.btn-primary: surcharge pour les liens <a> habillés en bouton
   ============================================= */
.btn {
    padding:       0.75rem 1.4rem;
    border-radius: var(--radius);
    border:        none;
    cursor:        pointer;
    font-family:   var(--font-body);
    font-size:     0.88rem;
    font-weight:   600;
    transition:    all var(--transition);
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
    text-decoration: none;
}
.btn-white       { background: var(--color-white); color: var(--color-primary); }
.btn-white:hover { background: var(--color-primary-light); transform: translateY(-1px); text-decoration: none; }

.btn-primary       { background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }

.btn--full { width: 100%; justify-content: center; }

/* Surcharge pour <a class="btn-primary"> : force la couleur du texte */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited { color: var(--color-white); text-decoration: none; }
a.btn-primary:hover   { color: var(--color-white); background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }


/* =============================================
   13. RÉSULTATS DE RECHERCHE
   ───────────────────────────
   .result-item        : lien cliquable (toute la card)
   .result-item.inactive : fond grisé (individu non réconcilié)
   .result-item__badge : badge arbre ou badge rôle en bas à gauche
   ============================================= */
.results-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   1rem;
}
.results-count { font-size: 0.8rem; color: var(--color-mid); }
.results-empty { color: var(--color-mid); font-size: 0.88rem; line-height: 1.6; }
.result-list   { display: flex; flex-direction: column; gap: 0.4rem; }

.result-item {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding:        0.85rem 1rem;
    background:     var(--color-white);
    border:         1px solid var(--color-border);
    border-radius:  var(--radius);
    transition:     all var(--transition);
    text-decoration: none;
    color:          inherit;
    animation:      fadeUp 0.3s ease both;
}
.result-item:hover {
    border-color:   var(--color-primary);
    box-shadow:     0 0 0 3px var(--color-primary-light);
    transform:      translateX(2px);
    text-decoration: none;
}
.result-item__name { font-size: 0.9rem; color: var(--color-dark); }
.result-item__meta { font-size: 0.75rem; color: var(--color-mid); margin-top: 0.1rem; }

.result-item__badge {
    font-size:    0.72rem;
    font-weight:  600;
    padding:      0.2rem 0.6rem;
    border-radius: 999px;
    background:   var(--color-primary-light);
    color:        var(--color-primary);
    white-space:  nowrap;
    flex-shrink:  0;
    margin-top:   0.5rem;
    margin-left:  1.5rem;
}

.result-item.inactive { background: var(--color-light); }

/* Pagination */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-top:      1rem;
    padding-top:     1rem;
    border-top:      1px solid var(--color-border);
}
.pagination__btn {
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--color-primary);
    padding:       0.4rem 0.9rem;
    border:        1.5px solid var(--color-primary);
    border-radius: 999px;
    transition:    all var(--transition);
}
.pagination__btn:hover { background: var(--color-primary); color: white; text-decoration: none; }
.pagination__info { font-size: 0.78rem; color: var(--color-mid); }


/* =============================================
   14. FICHE INDIVIDU
   ───────────────────
   .individual-header        : flex avec avatar + nom
   .individual-header__avatar: cercle coloré selon le sexe
   .sex-m / .sex-f / .sex-u  : fond coloré de l'avatar
   .sex-blank-*              : icône de sexe inline (dans les listes)
   .detail-list              : grille 2 colonnes (étiquette + valeur)
   .detail-list dt.spacer-*  : séparateurs d'espacement dans les dl
   .notes-text               : corps des notes (pre-wrap via white-space)
   .badge--title             : badge de titre dynastique (fond jaune)
   ============================================= */
.individual           { text-align: left; }
.individual-details-small { font-size: 0.8rem; text-align: left; }

.individual-header {
    display:     flex;
    align-items: flex-start;
    gap:         1.25rem;
}
.individual-header__avatar {
    width:         52px;
    height:        52px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     1.3rem;
    flex-shrink:   0;
    font-style:    normal;
    line-height:   1;
}
.sex-m { background: #dce8fb; color: #1a4fa0; }
.sex-f { background: #fce4f0; color: #a01a5f; }
.sex-u { background: var(--color-light); color: var(--color-mid); }

/* Icônes de sexe inline (dans family.php, individual.php, etc.) */
.sex-blank-m { margin-right: 0.4rem; color: #1a4fa0; vertical-align: middle; }
.sex-blank-f { margin-right: 0.4rem; color: #a01a5f; vertical-align: middle; }
.sex-blank-u { margin-right: 0.4rem; color: var(--color-mid); vertical-align: middle; }

/* Grille 2 colonnes : étiquettes (3/10) + valeurs (7/10) */
.detail-list {
    display:               grid;
    grid-template-columns: 3fr 7fr;
    gap:                   0rem 1.25rem;
    font-size:             0.88rem;
    align-items:           baseline;
}
.detail-list dt,
.detail-list dd { margin: 0; padding: 0.15rem 0; }
.detail-list dt {
    color:          var(--color-mid);
    font-weight:    600;
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    word-break:     break-word;
}
.detail-list dd { color: var(--color-dark); }

/* Séparateurs d'espacement dans les dl/dt/dd */
.detail-list dt.spacer,
.detail-list dd.spacer    { padding: 0; margin: 0; }
.detail-list dt.spacer-sm,
.detail-list dd.spacer-sm { height: 0.5rem; }
.detail-list dt.spacer-md,
.detail-list dd.spacer-md { height: 1rem; }
.detail-list dt.spacer-lg,
.detail-list dd.spacer-lg { height: 2rem; }

.children-list {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    font-size:      0.88rem;
}
.children-list li {
    padding:       0.3rem 0;
    border-bottom: 1px solid var(--color-border);
}
.children-list li:last-child { border-bottom: none; }

/* Notes GEDCOM : white-space supprimé (SafeNotes autorise <br> via pre-wrap) */
.notes-text { font-size: 0.88rem; line-height: 1.7; color: var(--color-mid); }

/* Badge de titre dynastique (ex : « Roi de France ») */
.badge       { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; margin-right: 0.35rem; margin-bottom: 0.35rem; }
.badge--title { background: #fff3cd; color: #7a5000; border: 1px solid #f0d060; }


/* =============================================
   15. PAGE DE CONNEXION
   ──────────────────────
   .auth-wrapper : conteneur centré à 420px max
   .form-group / .form-row : layout des champs
   .form-input   : champ générique (largeur 100%, focus bleu)
   .alert        : messages de succès / erreur
   ============================================= */
.auth-wrapper { max-width: 420px; margin: 2rem auto; }
.auth-logo    { text-align: center; margin-bottom: 1.25rem; }
.auth-logo img {
    max-width: 80%; max-height: 80px;
    width: auto; height: auto;
    object-fit: contain; margin: 0 auto;
}
.auth-card       { padding: 2rem; }
.auth-card__title {
    font-family:  var(--font-display);
    font-size:    1.5rem;
    text-align:   center;
    color:        var(--color-dark);
    margin-bottom: 1.5rem;
}
.auth-card__hint { color: var(--color-mid); font-size: 0.88rem; margin-bottom: 1.25rem; line-height: 1.6; }
.auth-links      { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.25rem; font-size: 0.82rem; }

/* Formulaires */
.form-group { margin-bottom: 1rem; font-size: 16px; }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; font-size: 16px; }
.form-label { display: block; font-size: 16px; font-weight: 600; color: var(--color-mid); margin-bottom: 0.35rem; }
.form-label small { font-weight: 400; }
.form-input {
    width:         100%;
    padding:       0.7rem 0.9rem;
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius);
    font-family:   var(--font-body);
    font-size:     16px; /* 16px minimum pour éviter le zoom iOS */
    color:         var(--color-dark);
    background:    var(--color-white);
    outline:       none;
    transition:    border-color var(--transition);
}
.form-input:focus { border-color: var(--color-primary); }

/* Alertes */
.alert {
    padding:      0.75rem 1rem;
    border-radius: var(--radius);
    font-size:    0.85rem;
    margin-bottom: 1rem;
    display:      flex;
    align-items:  center;
    gap:          0.5rem;
}
.alert--error   { background: #fdecea; color: var(--color-error);   border: 1px solid #f5c6c6; }
.alert--success { background: #e8f8f0; color: var(--color-success); border: 1px solid #a3e0c0; }


/* =============================================
   16. ANIMATIONS
   ───────────────
   fadeUp : utilisé sur .card, .card-anim, .page-header, .result-item
   Les délais sur .card:nth-child(2/3) créent un effet de cascade léger.
   ============================================= */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card:nth-child(2) { animation-delay: 0.07s; }
.card:nth-child(3) { animation-delay: 0.14s; }


/* =============================================
   17. RESPONSIVE — MOBILE (< 900px)
   ───────────────────────────────────
   Principaux changements :
   • Le menu se cache à gauche (translateX) et s'ouvre par .open
   • .main passe en margin-left: 0 (pleine largeur)
   • La topbar a max-width: 100vw overflow: hidden (sans casser sticky)
   • Les étiquettes (.masque-label) disparaissent → icônes seules
   • Les onglets n'affichent le label que pour l'onglet actif
   • La grille passe en colonne unique (col-6, col-4, col-3 → span 12)
   • .detail-list et .form-row passent en mono-colonne
   ============================================= */
@media (max-width: 900px) {

    .topbar { padding: 0 1rem; gap: 0.75rem; max-width: 100vw; overflow: hidden; }

    /* Hamburger : fond transparent sur fond topbar blanc */
    .nav__toggle {
        display:          flex;
        background:       transparent;
        color:            var(--color-primary);
        border:           1.5px solid var(--color-border);
    }
    .nav__toggle:hover { background: var(--color-primary-light); }

    .page { padding: 1.25rem 1rem; }

    /* Champ de recherche topbar : prend tout l'espace restant */
    .topbar__search { flex: 1; max-width: none; }

    .search-input {
        font-size:    16px;             /* empêche le zoom automatique iOS */
        height:       44px;             /* hauteur touch-friendly */
        padding-top:  0;
        padding-bottom: 0;
        line-height:  44px;
        -webkit-appearance: none;       /* supprime le style natif iOS */
        box-sizing:   border-box;
    }

    /* Menu : caché par défaut, révélé par .open */
    .nav { transform: translateX(-100%); box-shadow: none; z-index: 101; }
    .nav__close { display: flex; width: 36px; height: 36px; }
    .nav.open   { transform: translateX(0); box-shadow: var(--shadow-lg); }

    .nav__overlay { display: block; }

    /* Contenu principal : pleine largeur.
       NOTE : overflow-x: hidden intentionnellement absent →
       le mettre casserait position:sticky de la topbar sur iOS. */
    .main { margin-left: 0; max-width: 100vw; }

    /* Labels masqués sur mobile (boutons connexion, pagination, onglets) */
    .topbar__login-label   { display: none; }
    .pagination__btn-text  { display: none; }
    .masque-label          { display: none; } 

    /* Labels d'onglets : masqués sauf pour l'onglet actif */
    .masque-label-onglet                    { display: none;   }
    .ind-tab.active .masque-label-onglet    { display: inline; }

    /* Grille : toutes les colonnes en pleine largeur */
    .col-6, .col-4, .col-3 { grid-column: span 12; }

    .hero__logo { max-height: 180px; }

    /* Fiche individu et formulaires : mono-colonne */
    .detail-list { grid-template-columns: 1fr; }
    .form-row    { grid-template-columns: 1fr; }
}

/* RESPONSIVE — TRÈS PETIT (< 480px) */
@media (max-width: 480px) {
    .page { padding: 1rem 0.75rem; }
    .card { padding: 1.25rem; }
    /* Le bouton « Rechercher » passe sous le champ */
    .search-form { flex-direction: column; }
    .search-btn  { width: 100%; justify-content: center; }
}


/* =============================================
   18. BADGES RÔLES UTILISATEURS
   ────────────────────────────────
   Utilisés dans bases.php, base.php, list_owners.php.
   ============================================= */
.badge--owner     { background: #fff3cd; color: #7a5000; border: 1px solid #f0d060; }
.badge--delegated { background: #e8f0fb; color: #1a4fa0; border: 1px solid #b0c8f0; }
.badge--reader    { background: var(--color-primary-light); color: var(--color-primary); border: 1px solid #c0c8f8; }


/* =============================================
   19. ONGLETS INVITE-TABS
   ────────────────────────
   Utilisés dans base.php (onglets Lecteurs / Délégués / Propriétaire).
   Les onglets individuels (.ind-tab) sont définis directement dans
   individual.php via une balise <style> inline.
   ============================================= */
.invite-tabs {
    display:       flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
    gap:           0;
}
.invite-tab {
    flex:           1;
    padding:        0.55rem 0.75rem;
    background:     none;
    border:         none;
    border-bottom:  2px solid transparent;
    margin-bottom: -2px; /* chevauchement pour couvrir la bordure de .invite-tabs */
    font-family:    var(--font-body);
    font-size:      0.82rem;
    font-weight:    600;
    color:          var(--color-mid);
    cursor:         pointer;
    transition:     color var(--transition), border-color var(--transition);
    white-space:    nowrap;
}
.invite-tab:hover  { color: var(--color-primary); }
.invite-tab.active {
    color:               var(--color-primary);
    border-bottom-color: var(--color-primary);
}


/* =============================================
   20. SCROLL HORIZONTAL ISOLÉ
   ────────────────────────────
   Utilisé dans family.php, _ind_tab2.php, KinshipCalculator (résultat).
   Le scroll est confiné au conteneur : ni la topbar ni le reste de la page
   ne bougent.
   ⚠ NE PAS mettre overflow-x: hidden sur .main (casserait sticky topbar).
   ============================================= */
.scroll-wrapper {
    overflow-x:  auto;           /* ascenseur horizontal si nécessaire */
    overflow-y:  visible;
    max-width:   100%;           /* ne dépasse jamais la card parente */
    -webkit-overflow-scrolling: touch; /* scroll fluide iOS */
}
.scroll-inner {
    min-width: max-content;      /* s'étend autant que le contenu le nécessite */
    font-size: 0.88rem;          /* taille fixe, ne s'hérite plus des ul/li imbriqués */
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    text-size-adjust:         100%;
}
/* Stabiliser la police dans les listes imbriquées */
.scroll-inner ul,
.scroll-inner li {
    font-size:   inherit;
    line-height: inherit;
}


/* =============================================
   21. TABLEAU DE PARENTÉ
   ───────────────────────
   Généré par KinshipCalculator::buildResult() (HTML brut).
   .kinship-table : tableau pleine largeur sans collapse des bordures.
   ============================================= */
.kinship-table {
    width:            100%;
    font-size:        0.88rem;
    border-collapse:  collapse;
}
.kinship-table td { vertical-align: top; }
.kinship-table td[align="center"] { text-align: center; }}


/* =============================================
   22. GESTION DES ANNIVERSAIRES
   ───────────────────────
   Page et widget "birthday"
   ============================================= */
/* ═══════════════════════════════════════════════════════════════════
   Anniversaires — classes CSS à ajouter dans votre feuille de style
   ═══════════════════════════════════════════════════════════════════ */
/* Introduction "Aujourd'hui, 20 mai :" */
.bd-intro {
    color: var(--color-text);
    margin: 0 0 6px 0;
    font-size: 0.88rem;
    font-weight: 600;
}

/* Message "pas d'anniversaire" */
.bd-empty {
    color: var(--color-mid);
    font-size: 0.9rem;
    margin: 0;
}

/* Âge entre parenthèses */
.bd-age {
    color: var(--color-mid);
    font-size: 0.82em;
    margin-left: 0.25rem;
}

/* Conteneur liste (réutilise .result-list du site) */
.bd-result-list {
    margin-bottom: 0;
}

/* Item individuel : reprend exactement .result-item
   On surcharge uniquement ce qui doit différer pour le contexte anniversaire */
.bd-result-item {
    /* Pas de décalage d'animation ici — les items sont statiques */
    animation: none;
    /* Légèrement moins haut que dans la recherche */
    padding: 0.45rem 0.6rem;
}

/* Nom dans un item anniversaire */
.bd-result-name {
    font-size: 0.9rem;
}

/* ── Calendrier mensuel ───────────────────────────────────────────── */

/* Conteneur des blocs par jour */
.bd-calendar {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bd-calendar__empty {
    font-size: 0.88rem;
    font-weight: 500;
    color:#999;
    margin:0;
}

/* Bloc d'un jour */
.bd-calendar__day {
    padding: 10px 0;
}
.bd-calendar__day:last-child {
    padding-bottom: 0;
}
     
/* Libellé de date ("3 mai") */
.bd-calendar__date {
    margin: 0 0 6px 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Badge "aujourd'hui" / "demain" */
.bd-today-badge {
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--color-primary);
    color: #fff;
    border-radius: 20px;
    padding: 1px 8px;
    text-transform: lowercase;
}
.bd-today-badge--tomorrow {
    background: var(--color-mid);
}