@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Source+Sans+3:wght@400;600&display=swap');
html {
height: 100%;
border: 0px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

body {
height: 100%;
background-color: #DCDBD9;
border: 0px;
color: #333333;
font: normal 100% 'Source Sans 3', Helvetica, Arial, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

h1 {  /*titre g?n?ral des pages*/
color: #7a1512; 
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.1em; 
font-style: normal; 
font-weight: 700; 
line-height: 1.2em;
margin: 5px 12px 14px 0px;
padding: 2px 2px 6px 2px; 
} 

h2 {
background: #7a1512;
border: 0px; 
color: #f6ecd8;
font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
font-size: 1.05em; 
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 3px;
margin: 18px 10px 12px 0px; 
padding: 6px 18px; 
display: inline-block;
}

/* Liens-ancres dans un cartouche h2 : garder la couleur creme, sinon
   le lien (#7a1512) devient illisible sur le fond rouge du h2. */
/* Titres h2 : garder la couleur creme sur TOUT lien/ancre, meme sans href
   (une ancre <a name> n'est ni :link ni :visited, d'ou l'illisibilite). */
h2 a,
h2 a:link,
h2 a:visited {
  color: #f6ecd8;
  text-decoration: none;
}
h2 a:hover,
h2 a:focus {
  color: #ffffff;
  text-decoration: none;
}

form {
border: 0px; 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
} 

#wrapper {  /*cadre blanc*/
background-color: #ffffff;
border: 1px solid #000000;
margin: 0px auto;
min-height:65%;
position: relative;
text-align: left;
width: 960px;
}

#banner {
top: 0px;
border: 1px solid #000000;
background: #000000 url("images/bandeau.jpg") no-repeat;
width: 960px;
height: 95px;
margin:0 auto;
padding:0;
}

#menu {
  margin-top: 0;
  margin-bottom: 0;
}
   
.container {
width: 100%; 
margin: auto;
}

.conteneur {
float: right; 
width: 100%; 
} 

.auteur {  /*noir*/
color: #000; 
font-size: 0.875em;
}

.auteur2 { /*rouge*/
color: #900; 
font-size: 0.875em; 
}

.bleu {
color: #004182; 
font-size: 0.9em; 
}
.brun {
color: #804000; 
font-size: 0.813em; 
font-weight: bold; 
text-align: left; 
}

.calendrier { /*calendrier page d'accueil*/
font-size: 0.750em; 
}

.clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
}

.droite {
font-size: 0.875em; 
position: absolute; 
right: 0px; 
text-align: right; 
}
.encadre {
background-color: #F0DDDF; 
color: #800000;
font-size: 0.9em;
margin: 5px 5px 5px 5px; 
padding: 5px 5px 5px 5px; 
} 

.gauche {
left: 0px; 
position: absolute; 
}

.gris {
color: #999; 
font-size: 0.813em; 
padding: 0px 0px 0px 20px;
}

.gris2 { /* pour les pages editeurs et revues */
color: #999; 
font-size: 0.813em; 
}

.journal { /*page actualit?_index - idem .texto*/
color: #333; 
font-size: 0.875em; 
font-style: normal; 
font-weight: normal; 
text-align: justify;
}

.tete { /*sous-titre page */
background-color: #e4d5b8; 
color: navy; 
font-size: 1em; 
font-style: normal; 
font-weight: bold; 
line-height: 1.3em;
margin: 5px 0px 5px 0px;
padding: 1px 1px 1px 1px;
text-align: left; 
}

.tetesecond { /*sous-titre page */
background-color: #e4d5b3; 
color: navy; 
font-size: 0.85em; 
font-style: normal; 
font-weight: normal; 
line-height: 1.1em;
margin: 5px 0px 5px 0px;
padding: 1px 1px 1px 1px;
text-align: right; 
}

.texto {
color: #333; 
font-size: 0.875em; 
font-style: normal; 
font-weight: normal; 
text-align: justify;
}

.texto li {
color: #333; 
font-size: 0.875em; 
font-style: normal; 
font-weight: normal; 
text-align: justify;
}

.titre {
color: #900; 
font-size: 1.5em; 
font-weight: bold; 
}
/***************************liens******************************/
a:link {
  color: #7a1512;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: #a8342f;
  text-decoration: underline;
}
a:visited {
  color: #6e4a44;
  cursor: pointer;
}
/***************************page accueil******************************/
.gaucheacc {
float: left;
min-height: 550px;
margin: 0px 0px 0px 0px;
width: 230px;
}
#gauchetext {
font-size: 0.875em;
padding: 20px 0px 0px 10px;
text-align: left;
}
.milieuacc {
border-left: 1px solid #000;
border-right: 1px solid #000;
min-height: 550px;
margin: 0px 0px 0px 235px;
width: 520px;
}
#milieutext {
font-size: 0.875em;
padding: 0px 10px 0px 10px;
}
.milieuacc h1 {
border: 0px;
color: #7a1512; 
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
font-size : 2.1em; 
font-style: normal; 
line-height: 1.5em;
overflow: hidden;
margin: 18px 0px 5px 0px;
padding: 0px 0px 0px 10px; 
text-align: left; 
vertical-align: text-bottom; 
}
.droitacc {
float: right;
min-height: 550px;
margin: 0px 0px 0px 0px;
text-align: right;
width: 180px;
}
#droittext {
font-size: 0.875em;
padding: 50px 15px 0px 15px;
text-align: right;
}
#droittext h2 { margin: 18px 0px 12px 0px; }  /* h?rite du bandeau h2, marge propre */
.conteneurdate {
padding: 10px 0px 0px 0px;
text-align: right; 
width: 100%;
}
.dateur {
color: #333333; 
font-size: 0.938em; 
font-weight: bold;
}
.question {
color: #c73621; 
font-size: 0.938em; 
font-weight: bold; 
text-align: left; 
}
.reponse {
color: #804000; 
font-size: 0.938em; 
font-weight: normal; 
text-align: left;
}
/****************************autres pages*******************************/
#col2bis {
margin: 0px 60px 0px 120px;
}
#col2bis p.right {
float: right;
font-size: 0.875em;
margin: 0px 0px 3px 0px;
} 
#col2bis h2 { margin: 18px 0px 12px 0px; }  /* h?rite du bandeau h2, marge propre */
/* --- Images dans les briques de biographie --- */
.brique-fig { margin: 0; }
.brique-fig img {
    max-width: 200px;
    height: auto;
    border: 1px solid #800000;
    display: block;
}
.brique-fig figcaption {
    font-size: 12px;
    color: #555;
    font-style: italic;
    margin-top: 3px;
    max-width: 200px;
}
/* c?t?s */
.brique-img-g { float: left;  margin: 0 12px 8px 0; }
.brique-img-d { float: right; margin: 0 0 8px 12px; }
.brique-img-c { display: block; text-align: center; margin: 8px 0; }
.brique-img-c img,
.brique-img-c figcaption { margin-left: auto; margin-right: auto; }
/* CL? ANTI-D?BORDEMENT : ferme le float ? la fin de chaque brique
   pour qu'une image ne puisse JAMAIS empi?ter sur la brique suivante
   ni bousculer la date d'apr?s. */
.brique-clear {
    clear: both;
}


/***************************page administration******************************/
.gaucheadmin {
float: left;
margin: 0px 0px 0px 20px;
width: 200px;
}
.droiteadmin {
border-left: 1px solid #000;
margin: 0px 0px 0px 205px;
width: 675px;
}
/*************************bibliographies*******************************/
.biblio1 { /*R. ou N. ou E. dans pages bibliographie*/
color: #999;
float: left;
font-weight: lighter; 
font-size: 0.938em; 
margin: 0px 0px 12px 0px;
width: 4em;
}
.biblio2 { /*titres ouvrages dans pages bibliographie*/
color: #7a1512; 
font-size: 0.938em;
font-weight: bold; 
margin: 0px 0px 12px 0px;
}
.biblio3 { /*description ouvrages dans pages bibliographie*/
color: #900; 
font-size: 0.900em;
margin: 0px 0px 12px 90px;
text-indent: -30px;
}
.biblio4 { /*commentaires ouvrages dans pages bibliographie*/
color: #57625C; 
font-size: 0.75em;
margin: 0px 0px 12px 120px;
text-align: justify;
text-indent: -30px;
}
.biblio4bis { /*commentaires sans margin ni indent pour utiliser avec global*/
color: #57625C; 
font-size: 0.75em;
margin: 0px 0px 12px 0px;
text-align: justify;
}
.fiche {
float: right;
margin: 0px 0px 12px 0px;
padding: 0px 0px 0px 0px;
text-indent: 0px;
width: 500px;
}
.global {
margin: 0px 0px 0px 40px;
width: 700px;
}
.couverture {
border: 1px solid #000000; 
clear: both;
display: block;
float: left;
height: 240px;
margin: 3px 6px 2px 0px;
overflow: hidden;
width: 160px;
}
.couverture2 {  /*essai couverture pour pages bibliographies*/
clear: both;
display: block;
margin: 3px 6px 2px 0px;
overflow: hidden;
}
.recompense { /*mention prix litt?raires dans auteurs/bio-bibli.php*/
color: #76763A;
font-size: 0.75em;
font-weight: bold;
margin: 6px 0px 2px 0px;
}
/*==================== Pages livres ==================================================*/
.divise {
background-attachment: scroll;                
background-color: #000000; 
background-position: 0% 50%;
background-repeat: repeat;
color: #C0C0C0;
font-size: 0.75em;
position: relative;
top: 0px;
}
.copyright {
color: #A52A2A;
font-size: 0.75em;
font-weight: normal; 
}
.lettrine {
color: #8a0606; 
font-size: 1.375em;
font-style: normal;
font-weight: bold;
}
.barre {
color: white;
font-size: 1em;
font-weight: bold;
}

h6 /*date et lieu*/ {
color: #333333;
font-size: 0.875em;
font-weight: normal; 
padding: 0px 0px 0px 10px;
}
/*==================== RESUME ==========================*/
.flottante {
background-color: #E4D5B8;
color: #333333;
float: left;
font-size: 0.75em;
height: 2em;
margin: 1px 1px 1px 1px;
padding: 5px 5px 5px 5px;
text-align: center;
width: 115px;
}
.flottvign {
color: #333333;
float: left;
font-size: 0.75em;
margin : 2px 2px 2px 2px;
padding: 0px 7px 3px 0px;
text-align: center;
width: 20%;
}
.flottimage {
color: #333333;
float: left;
font-size: 0.75em;
margin: 2px 2px 2px 2px;
padding: 2px 7px 2px 0px;
text-align: right;
}
.flottroman {
color: Maroon;
display: inline;
float: right;
font-size: 0.75em;
font-weight : normal;
width: auto;
}
.inline {
display: inline;
padding: 0px 0px 0px 7px;
}
.resume {
color: #333333;
float: left;
font-size: 0.75em;
margin: 0px 6px 0px 0px;
padding: 1px 6px 1px 1px;
text-align: justify;
width: 47%;
}
.resume2 {
color: #333333;
font-size: 0.75em;
padding: 1px 2px 1px 1px; 
text-align: justify;
}
.spacer {
clear: both;
}
/*==================== EDITIONS ========================*/
h3 /*photo couverture*/
{
float: left;
height: 10em;
margin:0px 20px 20px 0px;
padding:15px;
width: 100px;
}
h4 /*photo traductions*/
{
float: left;
height: 5em;
margin:5px 20px 30px 0px;
width: 90px;
}
#edition {
color: #A52A2A;
font-size: 0.75em;
list-style-image: none;
padding: 1px 1px 1px 1px;
text-align: left;
}
.rubrique {
background-image: url('images/menu/soustitrevierge.jpg');
color: #8A0606;
font-size: 1em;
font-weight: bold; 
list-style-type: square;
margin: 2px 2px 2px 2px;
text-align: left;
}
/* Chemin corrige en relatif (etait en http:// absolu, provoquait du "contenu mixte"
   sur une page servie en https). A verifier : cette image est-elle bien au meme endroit
   relatif que pour .rubriquediteur ci-dessous ? */
.rubriquediteur {
background-image: url('images/menu/soustitrevierge.jpg');
color: #8A0606;
font-size: 0.750em;
font-weight: bold;
padding: 0.2px 0px 0.2px 0px;
text-align: left;
}
#epigr {
color: #A52A2A;
font-size: 0.750em;
margin: 0px 80px 0px 80px;
text-align: justify; 
}
#prix {
color: #336600;
font-size: 0.810em;
margin: 0px 0px 1px 0px;
text-align: center;
}
.prix {
color: #333333; 
font-size: 0.810em;
margin: 5px 0px 5px 0px;
text-align: justify;
}
.notes {
color: #211800;
font-size: 0.750em;
margin: 0px 0px 1px 0px;
text-align: justify;
}
#pageUne {
background-color: #E4D5B8;
color: #333333;
font-size: 0.750em;
padding: 10px 20px 10px 20px;
text-align: justify;
text-indent: 20px;
}
.first { /*lettrine dans #pageUne*/
color: #333333; 
font-size: 1.5em;
font-style: normal;
font-weight: bold;
}
/**********************biographies**************************/
.biography {
color: #333333; 
font-size: 1em; 
font-style: normal; 
font-weight: normal; 
line-height: 1.5;
margin: auto; 
text-align: justify; 
}
.notice {
color: #333333; 
font-size: 1em; 
font-style: normal; 
font-weight: normal; 
line-height: 1.5; 
margin: auto; 
text-align: justify; 
} 
.noticevos {
color: #333333; 
font-size: 1em; 
font-style: normal; 
font-weight: normal; 
line-height: 1.5;
margin: auto; 
text-align: justify;
}
.leftimage {
border: 1px solid #000000; 
float: left; 
margin: 0px 6px 3px 0px; 
}
.rightimage {
border: 1px solid #000000; 
float: right; 
margin: 0px 0px 20px 0px; 
width: 150px; 
}
/*==================== REVUE DE PRESSE =================*/
.titre1 {
color: #900; 
font-size: 1.5em; 
font-weight: bold; 
} 
.titre2 {
color: #900; 
font-size: 1em; 
}
.pressecorps {
color: #333333;
font-size: 0.75em; 
text-align: justify;
}
.presseref {
color: #8a0606;
font-size: 0.875em;
font-style: normal;
font-weight: normal;
width: 70%;
}
.pressetete {
color: #333333;
font-size: 1em;
font-style: normal;
font-weight: bolder;
text-align: right;
}
.pressetitre {
background-color: #e4d5b8;
color: #8a0606;
float: left;
font-size: 1.5em;
font-weight: bold;
height: 6em;
margin: 0px 12px 4px 0px;
padding: 5px 5px 5px 5px;
text-align: left;
width: 35%;
} 
.pressetitre2 {
background-color: #e4d5b8;
color: #8a0606;
float: left;
font-size: 0.875em;
font-weight: bold;
height: 2em;
margin: 5px 5px 5px 5px;
text-align: left;
width: 50%;
}
/*********************footer************************/
#footer {
width: 960px;
background-color: rgb(0, 0, 0); /* noir plein, aligne sur le noir des bords du bandeau (images/bandeau.jpg) */
clear: both; 
display: block; 
margin: auto;
text-align: center;
color: #ffffff;
padding: 0px;
}

.pied {
text-align: center;
color: #ffffff;
font-size: 0.688em; 
}
.pied a:link {
color: #ffffff;
cursor: pointer;
} 
.pied a:hover {
color: #0F0F0F; 
} 
.pied a:visited {
color: #0F0F0F;
}

.pied-admin {
text-align: left;
color: rgba(0, 0, 0, 0.8); 
font-size: 0.688em; 
}

/***************onglets menus additionnels***************/
.actif {
/* Style A (dossier adouci) 15/08/2026 : l'onglet actif en bordeaux,
   texte creme, fondu dans le panneau. */
background-color: #8a0606; 
border: 1px solid #8a0606; 
border-bottom: 1px solid #8a0606; 
border-radius: 5px 5px 0 0; 
padding: 4px 4px 4px 4px; 
}
.enligne li {
background-color: #e4d5b8; 
color: #333333; 
display: inline; 
list-style-type: none;
margin: 1px 1px 1px 1px; 
padding: 1px 1px 1px 1px; 
width: 11px; 
}
.onglets {
/* Style A : la lourde bordure noire devient le brun doux du site. */
border-bottom: 2px solid #c8b896;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 18px 0px;
}
.onglets li {
/* Style A : coins arrondis en haut, bordure brune (plus noire),
   fond creme. Le float reste inchange (ordre d'origine). */
background-color: #e4d5b8; 
border: 1px solid #c8b896; 
border-bottom: 0; 
border-radius: 5px 5px 0 0; 
float: right;
font-size: 0.7em; 
margin: 1px 1px 0px 0px; 
text-align: center; 
width: 120px; 
} 
.onglets a {
/* Style A : le rouge vif cede la place au bordeaux du site. */
color: #8a0606; 
display: block; 
font-weight: bold; 
text-decoration: none; 
padding: 4px 4px 4px 4px; 
} 
.onglets a:hover {
/* Survol : leger eclaircissement, texte fonce. */
background: #efe6d0; 
color: #6a0505; 
} 
/* Style A : le lien de l'onglet ACTIF passe en creme sur le bordeaux. */
.actif a, .onglets li.actif a { 
color: #f4efe4; 
} 
.actif a:hover, .onglets li.actif a:hover { 
background: #8a0606; 
color: #fff; 
} 
.onglet {
list-style-type: none; 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 18px 0px; 
} 
.onglet li {
background-color: #e4d5b8; 
border: 0; 
font-size: 0.75em; 
margin: 1px 1px 0px 0px; 
padding: 0px 0px 0px 1px;
text-align: left; 
width: 250px; 
} 
.onglet span {
color: #fde5bf; 
font-weight: bolder; 
}
/***********************tableaux**********************/
.table-titre {
background-image: url("images/menu/soustitrevierge.jpg"); 
color: #8a0606; 
font-size: 0.938em; 
font-weight: bold; 
text-align: center; 
}
.table-ligne1 {
background-color: #e4d5b8; 
font-size: 0.875em; 
}
.table-ligne2 {
background-color: #e4d5b0; 
font-size: 0.875em; 
}
.table-separateur {
background-color: #fde5bf; 
color: #8a0606; 
font-size: 0.813em; 
font-weight: bold; 
}
/**********************fieldset***************************/
fieldset {
border: 0px;
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
} 

legend {
background: transparent;
color: #8a0606;
font-size: 0.75em;
font-weight: bold;
padding: 0.5px 0.5px 0.5px 0.5px;
}

.b3 {
font-family : Georgia, "Times New Roman", Times, serif; 
font-size : 0.90em; 
font-weight : normal; 
color : gray; 
text-align : left; 

margin-right : 3px; 
} 
.b4 {
font-family : Georgia, "Times New Roman", Times, serif; 
font-size : 0.90em; 
font-weight : bold; 
color : #a52a2a; 
} 
.b5 {
font-family : Georgia, "Times New Roman", Times, serif; 
font-size : 0.80em; 
font-weight : normal; 
color : #a52a2a; 
text-align : left; 
margin-left : 10px; 
} 
.b6 {
font-family : Georgia, "Times New Roman", Times, serif; 
font-size : 0.70em; 
font-weight : normal; 
text-align : justify; 
margin-right : 20px; 
margin-left : 25px; 
}

/* Sommaire des genres de la bibliographie */
.biblio-sommaire {
    background: #f7f1e3;
    border: 1px solid #d8c9a8;
    padding: 10px 14px;
    margin: 0 0 20px 0;
    font-size: 0.9em;
    line-height: 1.9;
}
.biblio-sommaire b { color: #800000; }
.biblio-sommaire a {
    color: #7a1512;
    text-decoration: none;
    white-space: nowrap;
}
.biblio-sommaire a:hover { color: #8a0606; text-decoration: underline; }
.biblio-sommaire .compte { color: #999; font-size: 0.85em; }
/* Le titre de genre vise par une ancre : petit decalage pour ne pas
   passer sous le haut de la fenetre lors du saut */
.tete { scroll-margin-top: 12px; }
/* Lien "haut de page" discret a cote de chaque intertitre */
.tete .retour-haut {
    font-size: 0.5em; font-weight: normal; color: #b0a080;
    text-decoration: none; margin-left: 10px; vertical-align: middle;
}
.tete .retour-haut:hover { color: #8a0606; }
/* ============================================================
 *  RESPONSIVE ? bascule mobile sous 768px
 *  Ajout? le 03/08/2026. N'affecte QUE les petits ?crans :
 *  au-dessus de 768px, tout l'affichage reste identique.
 *  Principe : le cadre fixe de 960px devient fluide, et les
 *  colonnes c?te ? c?te tombent les unes sous les autres.
 * ============================================================ */
@media (max-width: 768px) {

  /* --- Le cadre g?n?ral : de 960px fixe ? pleine largeur fluide --- */
  #wrapper,
  #banner,
  #footer {
    width: auto;
    max-width: 100%;
  }

  /* Le bandeau : son image de fond doit se redimensionner au lieu
     d'?tre coup?e. On garde le ratio en laissant la hauteur
     s'adapter ? la largeur de l'?cran. */
  #banner {
    background-size: cover;
    background-position: center;
    height: 0;
    padding-bottom: 11.47%;   /* 93/811 = ratio r?el de l'image bandeau.jpg */
  }

  /* --- Marges int?rieures resserr?es sur petit ?cran --- */
  .container {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* --- Pages internes : la colonne se resserre --- */
  #col2bis {
    margin: 0 12px;
  }

  /* ============================================================
   *  ACCUEIL : les 3 colonnes s'empilent
   *  (gauche 230 + milieu 520 + droite 180 ? l'une sous l'autre)
   * ============================================================ */
  .gaucheacc,
  .milieuacc,
  .droitacc {
    float: none;          /* on annule les float gauche/droite */
    width: auto;          /* pleine largeur disponible */
    min-height: 0;        /* plus de hauteur impos?e de 550px */
    margin: 0 0 20px 0;   /* petit espace entre les blocs empil?s */
    text-align: left;     /* la colonne droite ?tait align?e ? droite */
  }

  /* La colonne du milieu avait des bordures lat?rales et une
     grande marge gauche (235px) : on remet tout ? plat. */
  .milieuacc {
    border-left: none;
    border-right: none;
    border-top: 1px solid #000;      /* un filet en haut, plus discret */
    border-bottom: 1px solid #000;
    padding: 12px 0;
  }

  /* --- Images et couvertures : ne jamais d?border --- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* --- Le menu : autoriser le retour ? la ligne des rubriques
     si elles ne tiennent pas sur une seule ligne --- */
  #menu ul {
    flex-wrap: wrap;
  }
  /* --- ACCUEIL : r?ordonner les blocs sur t?l?phone ---
     #wrapper passe en colonne flex ; on cible chaque bloc par
     sa classe/son id pour l'ordonner (insensible aux <br>).
     Ordre voulu : bandeau, menu, LE VIF, C'est ? lire,
     Connaissez-vous, puis le pied. */
  #wrapper {
    display: flex !important;
    flex-direction: column !important;
  }
  #wrapper > a,
  #wrapper > div,
  #wrapper > #menu {
    float: none !important;
    width: auto !important;
  }
  /* Les enfants directs du wrapper s'?tirent en pleine largeur
     (un enfant flex ne s'?tire pas tout seul) */
  #wrapper > * {
    align-self: stretch;
  }
  #wrapper > a      { order: 1; }
  #wrapper > div:not([class]):not([id]) { order: 2; }
  .milieuacc        { order: 3 !important; }
  .droitacc         { order: 4 !important; }
  .gaucheacc        { order: 5 !important; }
  #footer           { order: 6 !important; }
   
  /* --- Vieilles pages ? tableaux de mise en page (auteurs, Pelot, Berma) ---
     Sur mobile, forcer les cellules ? s'empiler pleine largeur au lieu de
     rester c?te ? c?te (sinon le menu lat?ral / le portrait mordent sur le
     texte). Ajout? 04/08 pour le responsive des ~512 vieilles pages. */
  #wrapper table {
    width: 100% !important;
    display: block;
  }
  #wrapper table tr {
    display: block;
    width: 100%;
  }
  #wrapper table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  #wrapper table td img {
    max-width: 100%;
    height: auto;
  }

}

/* ============================================================
   ACCESSIBILIT? GLOBALE ? ajout? le 5 ao?t 2026.
   Remonte les tailles de texte trop petites de tout le site
   vivant (biographies, revues de presse, bibliographies,
   pages livres) et corrige deux gris trop p?les. Plac? en FIN
   de fichier ? ces valeurs priment sur les d?clarations
   d'origine ci-dessus. Hors @media : le confort de lecture
   vaut sur ordinateur ET mobile.

   NB : accueil.php et fiche.php ont D?J? leur propre bloc
   d'accessibilit? dans leur <style> de page, lequel est charg?
   APR?S ce fichier et prime donc en cas de chevauchement ? ces
   deux pages gardent exactement le rendu d?j? valid?. Ce bloc
   sert surtout aux AUTRES pages (recherche, biographies,
   ressources, pages livres) qui n'avaient pas de correctif.

   Ne change AUCUNE mise en page (couleurs/marges/flottements
   intacts) ? seules la taille de police et deux teintes bougent.
   Bar?me : corps de lecture 1em (16px) ; infos secondaires
   0.875em (14px) ; plus rien sous 14px.
   ============================================================ */

/* --- Corps de lecture principal ? 16px --- */
.biography,
.notice,
.noticevos,
.texto,
.texto li,
.journal,
.auteur,
.auteur2,
.bleu {
    font-size: 1em;
}

/* Interligne a?r? pour les longs blocs de lecture
   (.notice/.noticevos/.biography ont d?j? line-height:1.6 plus haut) */
.texto,
.journal {
    line-height: 1.6;
}

/* --- Infos secondaires ? 14px (un cran sous le corps) --- */
.pressecorps,          /* corps des revues de presse : ?tait 0.75em (12px) */
.biblio3,
.biblio4,
.biblio4bis,
.gris,
.gris2,
.brun,
.copyright,
.notes,
.prix,
.recompense,
.divise,
.resume,
.resume2 {
    font-size: 0.875em;
}

/* --- Contrastes : gris et kaki trop p?les sur fond clair --- */
.gris,
.gris2 {
    color: #595959;   /* au lieu de #999 */
}
.recompense {
    color: #5f5f2e;   /* au lieu de #76763A */
}

/* --- Focus clavier visible partout --- */
a:focus,
input:focus,
button:focus,
[tabindex]:focus {
    outline: 3px solid #8a0606;
    outline-offset: 2px;
}

/* ============================================================
   LETTRINE AUTOMATIQUE + FILET ? SIGNATURE ? sous les h1
   Ajout? le 6 ao?t 2026. Option A valid?e par Bernard :
   la 1re lettre de chaque h1 est agrandie automatiquement
   (plus besoin de <span class="lettrine"> dans le HTML), et
   un court filet bordeaux souligne le titre fa?on paraphe.

   NB r?tro-compat : les anciens <h1> qui contiennent encore
   un <span class="lettrine"> ? l'int?rieur restent corrects
   (la classe .lettrine existe toujours plus haut). Sur ces
   titres-l?, ::first-letter agrandit le '<' ... non : il agit
   sur la 1re LETTRE r?elle, donc sur la lettre dans le span ?
   l'effet ne double pas la taille (le span et ::first-letter
   ne se cumulent pas visuellement de fa?on g?nante). Migration
   du HTML possible plus tard, sans urgence.
   ============================================================ */

/* Lettrine L2 : premi?re lettre nettement agrandie, fa?on manuscrit */
h1::first-letter {
    font-size: 1.6em;
    line-height: 0.9;
    color: #8a0606;
    font-weight: bold;
}

/* Filet F3 ? signature ? : court trait bordeaux sous le titre.
   inline-block pour que le h1 s'ajuste ? la largeur du texte,
   et ::after dessine le filet court (70px) align? ? gauche. */
h1::after {
    content: "";
    display: block;
    width: 70px;
    height: 2px;
    background: #8a0606;
    margin-top: 6px;
}