/* Time-stamp: <2026-09-06 10:26:37 Yvon Henel (TdS)> */
/* Création : 2026-08-31T16:00:43+0200 */

body{margin:0;padding:0;}

#site{
    width:90%;
    margin:auto;
    background-color: white;
    display:grid;
    grid-gap:5px;
    grid-template-columns:1fr 3fr 1fr;
    grid-template-areas:
	"header header header"
	"aside main nav"
	"footer footer footer";
}

header {
    background-color: #FFEFD5;
    grid-area:header;
    text-align:center;
    font-weight:bold;
    font-size:3rem;
    text-shadow: 2px 2px 5px gray;
    margin:0 0;
    padding:1rem 0;
}

nav {
    background-color: white;
    background-image: url(../icones/fond1.jpg);
    background-repeat: repeat;
    border: none;
    grid-area:nav;
}

footer {
    background-color: LightSteelBlue;
    grid-area:footer;
    text-align:center;
    margin: 1rem 0;
    padding: 1rem 0;
}

main {
    background-color: white;
    grid-area:main;
}

aside {
    background-color: white;
    background-image: url(./icones/fond1.jpg);
    background-repeat: repeat;
    border: none;
    grid-area:aside;
}

#ici {
    font-weight: bold;
}

.texte{
    width:50ch;
    margin:auto;
    max-width:80%;
    text-align:justify;
    padding:0 0 2rem 0;
    line-height: 1.3;
    text-indent: 2rem;
    hyphens:auto;
}

.texte p {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

.hyphenate{hyphens:auto;}

.donthyphenate{hyphens:none;}

div.titre{
    border-bottom-style: double;
    border-width: 6px;
    border-color: gray;
    text-align:center;
    padding: 6px 0px;
    margin: 0 0 1rem 0;
}

div.description{
    text-indent: 0;
    text-align:center;
    border-style: solid;
    border-width: 4px;
    border-color: green;
    border-radius: 25px;
    padding: 20px;
    margin-bottom: 1rem;
}

div.source{
    text-align:left;
    border-style: solid;
    border-width: 4px;
    border-color: Crimson;
    border-radius: 25px;
    padding: 10px 20px;
    margin:2rem 0;
}

div.source a.bnf::before {
    content: url(../icones/logo-BnF-s.png);
    padding-right: 6px;
}

div.source a.archive-org::before {
    content: url(../icones/logo-intarch-s.png);
    padding-right: 12px;
}

span.site{
    font-family:monospace;
    font-size:140%; 
}

div.poeme{
    display: block;
    hyphens: none;
    text-indent: 0;
    background-color: #FFFACD; /* lemonchiffon */
    color: black;
    display: block;
    margin: 2ex 0%; 
    padding: 2ex 0ex 2ex 4ex;
}

div.strophe{
    display: block;
    margin-bottom: 2ex;
}

.auteur{
    font-size:2rem;
    font-weight: bold;
    text-align:center;
}

.ndf{font-variant: small-caps;}

nav, aside {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: LightSkyBlue; 
}

nav ul {
  position: fixed;
  top: 200px; /* pb à régler */
  height: auto;
  list-style-type: none;
  /* border-style: solid; */
  /* border-width: 2px; */
  /* border-color: red; */
  text-align: center;
  padding:0px;
  margin:0px;
}

nav ul li, aside img {
  display: block;
  text-align: center;
  font-weight: bold;
  background-color: Linen; 
  box-shadow: 10px 10px 5px DarkSlateGrey;
  margin: 20px 0px;
  padding: 10px 15px;
  border-radius: 10px;
  transition: .15s;
}

nav ul li{
    width:90%;
}

nav a {
  color: DarkSlateGrey;
}

div.notes, div.notetds, div.tds-notes {
    width:60ch;
    margin:auto;
    max-width:80%;
    margin-top:1rem;
    margin-bottom:1rem;
    text-align:left;
    line-height: 1.4;
    background-color: LightGoldenRodYellow;
    text-indent: 1rem;
}

div.notes {
    padding: 0.5rem 6px 0.5rem 0;
    border-top-style: solid;
    border-width: 2px;
    border-color: RebeccaPurple;
}

div.notes div.note{
    margin-bottom: 9px;
    padding: 6px 3px 3px 3px;
    border-bottom: solid;
    border-width: 2px;
    border-color: RebeccaPurple;
}

div.notes div.note p{
    margin-bottom:6px;
    margin-top:3px;
}

div.notetds, div.tds-notes{
    border-style: solid;
    border-width: 3px;
    border-color: Teal;
    padding: 6px 6px 3px 6px;
    font-family: sans-serif;
}

div.tds-notes div.note{
    margin-bottom: 1rem;
}

div.notetds p:first-child::before{
    content: "[ nTdS ] ";
}

a.retour{
    display: inline-block;
    text-align:center;
    text-indent: 0px;
    border-style: solid;
    border-width: 2px;
    background-color: Linen; 
    box-shadow: 10px 10px 5px DarkSlateGrey;
    margin: 0px 2px 0px 6px;
    padding: 2px 6px;
    /* border-radius: 0px 10px ; */
    font-variant: small-caps;
}

blockquote{
    background-color: #E0FFFF;
    margin: 0;
    padding: 1em 40px;
}

div.signature{
    margin: 1rem 0;
    padding: 0 2rem;
    text-align: right;
}

span:lang(LAT) {font-style:italic;}

sub, sup {
 font-size: 65%; /* était 75%, j'aime pas */
 line-height: 0;
 position: relative;
 vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* TEXT ALIGNMENT */
/* @N «t» pour «texte», «a» pour «alignement», */
/* @N «gch» pour «gauche», «drt» pour «droite», «cnt» pour «centré», «jst» pour «justifié». */

.tagch{text-align:left;}
.tadrt{text-align:right;}
.tacnt{
    text-indent: 0;
    text-align:center;
}
.tajst{text-align:justify;}

/* @N «t» pour «texte», «dl» pour «dernière ligne», «a» pour «alignement», */
/* @N «gch» pour «gauche», «drt» pour «droite», «cnt» pour «centré». */
.tdlagch{text-align:left;}
.tdladrt{text-align:right;}
.tdlacnt{text-align:center;}

/* @N «p» pour «police» */
.pital{font-style: italic;}
.psmcp{font-variant: small-caps;}
.pgras{font-weight:bold;}

.pt00{font-size:100%;}
.pt01{font-size:119%;}
.pt02{font-size:141%;}
.pt03{font-size:168%;}
.pt04{font-size:200%;}
.pt05{font-size:238%;}
.pt06{font-size:283%;}
.pt07{font-size:336%;}
.pt08{font-size:400%;}
.pt09{font-size:476%;}
.pt10{font-size:566%;}
.pt11{font-size:673%;}
.pt12{font-size:800%;}

.sansrenf{text-indent:0;}

/* Liens divers */

a.adn{font-style:normal;}

a.bnf{}

a.source{}

/* Images popup (une par page) */

.calque:target {
  visibility: visible;
  opacity: 1;
}

.calque {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0; bottom: 0; left: 0; right: 0;
  background-color: rgba(0,0,0,0.4);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

 /* PB : faut-il adapter le popup à l'image ou le contraire ? */

.popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  width: 60vw;
  height: 94vh;
  /* padding: 6px; */
  transition: all 5s ease-in-out;
}

.popup img {
  background-color: Linen;
  border-style:solid;
  border-color: Black;
  border-width: 1px;
  box-shadow: none;
  margin: 0 0 10px 0;
  padding: 0;
  border-radius: 0;
  transition: none;
}

.popup img:hover {
  box-shadow: none;
}

.popup .fermer {
  transition: all 200ms;
  font-size: 40px;
  font-weight: bold;
  text-decoration: none;
  padding: 5px 15px;
  margin: 3px 4px;
  display: inline-block;
  color: Black;
  cursor: pointer;
  background: #6AAAE9; 
  background: linear-gradient(to top, #6AAAE9 0%, #2b80e0 100%);
  background: -moz-linear-gradient(to top, #6AAAE9 0%, #2b80e0 100%);
  background: -webkit-linear-gradient(to top, #6AAAE9 0%, #2b80e0 100%);
  background: -o-linear-gradient(to top, #6AAAE9 0%, #2b80e0 100%);
  border: 1px solid #338bf6;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  box-shadow:0px 0px 4px 2px rgba(0, 0, 0, 0.35), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
  -moz-box-shadow:0px 0px 4px 2px rgba(0, 0, 0, 0.35), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
  -webkit-box-shadow:0px 0px 4px 2px rgba(0, 0, 0, 0.35), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
  -o-box-shadow:0px 0px 4px 2px rgba(0, 0, 0, 0.35), inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);
  order: 1;
}

.popup .fermer:hover {
  background: linear-gradient(to top, #5eb3ff 0%, #6AAAE9 100%);
  background: -moz-linear-gradient(to top, #5eb3ff 0%, #6AAAE9 100%);
  background: -webkit-linear-gradient(to top, #5eb3ff 0%, #6AAAE9 100%);
  background: -o-linear-gradient(to top, #5eb3ff 0%, #6AAAE9 100%);
}

.popup .fermer:active {
  opacity:0.8;
}