/* Pages générées par Génialogie (dossier g) : le cadre vient de site.css, ici l'adaptation du contenu des pages
   (arbre d'ascendance, cartes, tableaux). Issu de sl.css, s1.css, sg.css et st.css de l'ancien site. */

/* ---------- Cadre ---------- */

/* Le bandeau reste collé en haut : c'est le <div id="header"> qui colle, pas le <header> qu'il contient */
#header {position:sticky;top:0;z-index:10;}
#header header {position:static;}
/* Les pages générées n'ont pas de <main> : la carte blanche est large, l'arbre a besoin de place */
article:has(> .subarticle) {max-width:1480px;margin:30px auto;padding:6px 0 30px;isolation:isolate;}
@media (max-width:900px) {article:has(> .subarticle) {margin:0;border-radius:0;box-shadow:none;}}
/* isolation : les traits de liaison de l'arbre (.sideT, .sideB, z-index négatif) restent au-dessus du fond blanc de la carte */
.subarticle {display:block;padding:0 5px;}


/* Mesures comme avant : site.css passe tout en border-box, or l'arbre est calculé en content-box
   (largeur des cartes, flèches collées aux cartes) */
.subarticle, .subarticle *, .subarticle *::before, .subarticle *::after {box-sizing:content-box;}

/* L'arbre d'ascendance : mêmes mesures de texte que l'ancien site (police 14,5 px, interligne 1,5 dans les cellules).
   Les cartes sont des blocs en ligne : une ligne de texte plus haute dans la cellule les décale et les flèches ne sont plus centrées */
#t2 td, #t3 td, #t4 td, #t5 td {font-size:14.5px;line-height:1.5;}
/* La page d'une personne avec son arbre retrouve la largeur de l'ancien site (2048 px) */
article:has(#dats) {max-width:2048px;}
body:has(#dats) #header .col, body:has(#dats) .pied .col {max-width:2104px;}

/* Taille de texte de l'ancien site (14,5 px) : site.css met 16,5 px pour les pages de texte, trop gros pour ces pages denses */
.subarticle {font-size:14.5px;}

/* Le rond de naissance (○, U+25CB) n'existe pas dans Inter : le navigateur prenait une police de symboles
   où il est énorme. On lui donne Arial, comme sur l'ancien site, et on le réduit au besoin. */
@font-face {font-family:Rond;src:local("Arial"),local("Liberation Sans"),local("Helvetica");unicode-range:U+25CB;}
.subarticle {font-family:Rond,Inter,"Segoe UI",sans-serif;}

/* Interligne resserré : ces pages sont des listes (unions, enfants, notes) ; l'arbre garde le sien (plus bas) */
.subarticle {line-height:1.4;}
.subarticle li {padding:1px 0;}
.subarticle p {margin-bottom:12px;}

/* Titres plus petits que ceux des pages de texte : ces pages en contiennent beaucoup */
.subarticle h1 {font-size:30px;padding:14px 0 8px;margin-bottom:10px;}
.subarticle h2 {font-size:22px;padding:18px 0 4px;}
.subarticle h3 {font-size:18px;padding:12px 0 2px;}
.subarticle h1, .subarticle h2, .subarticle h3 {font-weight:500;}

/* Téléphone : texte plus petit comme dans l'ancien site, arbre moins décalé, titre qui passe à la ligne */
@media (max-width:640px)
{
	body {font-size:14px;}
	.subarticle {font-size:13px;}
	.subarticle h1.name {font-size:22px;overflow-wrap:anywhere;}
	.decal1 {margin-left:8px;}
	.cellP, .cellU2 {font-size:12px;}
}

/* Bouton « Retour » */
#globalBtn {margin:22px auto 6px;text-align:center;}
p.btn-m0d3n {display:inline-block;margin:5px;padding:0.7em 2.6em;background:var(--nuit);border-radius:8px;}
p.btn-m0d3n a, p.btn-m0d3n a:hover {color:var(--accent-nuit);background:none;font-weight:500;}

/* Le bandeau et le pied suivent la largeur de la carte */
#header .col, .pied .col {max-width:1536px;}

/* Choix du nombre de générations : site.css met les champs et étiquettes en pleine largeur (formulaire de contact) */
#dats input[type="radio"] {width:auto;margin:0 6px 0 0;padding:0;}
#dats label {display:inline;margin:0;font-size:inherit;font-weight:400;}

/* Tableaux des pages (anciens table.site) */
table.site th {padding:10px;color:var(--encre);text-align:center;font-weight:600;background:var(--accent-clair);border:1px solid var(--filet);}
table.site td {padding:10px;vertical-align:top;border:1px solid var(--filet);}
img.floatl {float:left;margin-right:5px;clear:both;}
img.floatr {float:right;margin-left:5px;clear:both;}

/* ---------- Contenu ---------- */

.sideA
{
	position:absolute;
	top:-5px;
	left:-16px;
	height:50%;
	width:11px;
	z-index:139;
	display:inline;
	font-size:13px;
	border-spacing:0;
}	
.sideB
{
	position:absolute;
	top:50%;
	left:0;
	height:50%;
	width:50%;
	border-right:1px solid rgba(36,36,36,0.5);
	z-index:-1;
}	
.sideT
{
	position:absolute;
	top:0;
	left:-50%;
	height:50%;
	width:100%;
	border-right:1px solid rgba(36,36,36,0.5);
	border-top:1px solid rgba(36,36,36,0.5);
	z-index:-1;
}	
.cellP
{
	display:inline-block;
	table-layout:fixed;
	width:calc(100% - 40px);
	border-radius:5px;
	padding:8px;
	margin:10px 10px 20px 10px;
	font-size:13px;
	background:	#F7E5C2;
	box-shadow:10px 10px 5px rgba(136,136,136,0.5);
	z-index:136;
}
.cellP51
{
}
.cellPb
{
	display:inline-block;
	table-layout:fixed;
	width:calc(100% - 40px);
	border-radius:5px;
	padding:8px;
	margin:10px 10px 40px 10px;
	background:	#F7E5C2;
	box-shadow:10px 10px 5px rgba(136,136,136,0.5);
	z-index:136;
}
.cellPt
{
	display:inline-block;
	table-layout:fixed;
	width:calc(100% - 40px);
	border-radius:5px;
	padding:8px;
	margin:40px 10px 20px 10px;
	background:	#F7E5C2;
	box-shadow:10px 10px 5px rgba(136,136,136,0.5);
	z-index:136;
}
.cellU1
{
	position:absolute;
	visibility:hidden;
	top:0;
	left:0;
	width:100%;
	height:200%;
	display:flex;
	z-index:136;
}	
.cellU2
{
	visibility:visible;
	display:inline-block;
	border-radius:5px;
	padding:8px;
	margin:auto;
	font-size:13px;
	text-align:center;
	background:#F7E5C2;
	box-shadow:10px 10px 5px rgba(136,136,136,0.5);
	z-index:136;
	max-width:80%;
}

#t2
{
	border-collapse:collapse;
	margin:0 auto;
	width:66%;
}
#t2 td
{
	width:50%;
	position:relative;
}

#t3
{
	border-collapse:collapse;
	width:100%;
}
#t3 td
{
	width:calc(100%/3);
	position:relative;
}

#t4
{
	border-collapse:collapse;
	width:100%;
}
#t4 td
{
	width:25%;
	position:relative;
}

#t5
{
	border-collapse:collapse;
	width:100%;
}
#t5 td
{
	width:20%;
	position:relative;
}

.ltri
{
	width:11px;
	height:11px;
	margin:0;
	padding:0;
	border:0;
	vertical-align:top;
}
.big1
{
	color:#aa4d57;
	font-weight:600;
	letter-spacing:.02em;
	padding-left:6px;
	padding-right:6px;
}
.sep1
{
	font-size:8px;
	margin:0;
	padding:0;
}
.decal0
{
	margin-top:0;
	margin-bottom:0;
}
.decal0b
{
	margin-bottom:0;
}
.decal2
{
	margin-top:0;
	margin-bottom:8px;
}
.decal1
{
	margin-left:40px;
}
.decaltdl
{
	padding-left:6px;
}
.tgi1
{
	padding:0;
	margin:0;
	border-spacing:0;
	border-collapse:collapse;
	border:0;
}
.sexM
{
	color:RoyalBlue;
}
.sexF
{
	color:DeepPink;
}
.sexU
{
	color:DimGray;
}
h1.name
{
	text-align:left;padding-left:6px;border-bottom:2px solid #e8c98a;padding-bottom:8px;margin-bottom:12px;
	font-size:27px;
	font-weight:400;
	color:#9f6a47;
}
p.big1 {margin-top:22px;border-bottom:1px solid #eadfc8;padding-bottom:3px;}
td.big1 {font-weight:600;}
article .cellP a:hover, article .cellU2 a:hover {background:#fff;color:#8a1c1c;box-shadow:0 0 0 1px #d9b878;border-radius:3px;}
.altname1
{
	font-size:18px;
	font-style:normal;
}
.altname2
{
	font-size:18px;
	font-style:italic;
}


ul.notes li
{
	overflow-wrap: anywhere;
}

@media screen and (max-width:1800px)
{
	.cellP51
	{
		padding-top:1.5em;
		padding-bottom:1.5em;
	}
	.cellP
	{
		/*overflow:hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		white-space:nowrap;
		height:8em;*/
	}
	.cellU2
	{
		/*overflow:hidden;
		white-space: pre-line;
		text-overflow:ellipsis;
		white-space:nowrap;*/
	}
}
@media screen and (max-width:1440px)
{
	#dat5{display:none}
	.cellP, .cellU2
	{
		/*overflow:visible;
		white-space:normal;
		height:auto;*/
	}
}
@media screen and (max-width:1080px)
{
	#dat4{display:none}
}
@media screen and (max-width:640px)
{
	#dat3{display:none}
}

table.bigtable {width:96%;margin:0 auto;max-width:2520px;border:1px solid var(--filet);border-collapse:collapse;}
table.bigtable tr td, td.header {padding:10px;border:1px solid var(--filet);overflow-wrap:break-word;}
table.bigtable tr:first-child td, table.bigtable th {font-weight:600;background:var(--accent-clair);}