/*                                                      */
/*                                                      */
/*     CSS commun a toutes les pages - 31 oct 2025      */
/*                                                      */
/*                                                      */

*         { margin: 0; padding: 0; }
html      { overflow-y: scroll; }

body      { background: #0d1d26; margin: 0; padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            font-size: 13px; color: #bbbbbb; }

img       { border: 0; }

p         { margin: 0px 0px 8px 0px; line-height: 19px; }

h1        { margin: 0px 0px 35px 0px; font-size: 13px; font-weight: normal; line-height: 19px; }

h2        { margin: 40px 0px 35px 0px; font-size: 13px; font-weight: normal; line-height: 19px; color: #8bc7ec; }

h3        { margin: 0px 0px 6px 0px; font-size: 13px; font-weight: normal; line-height: 19px; color: #8bc7ec; }

h4        { margin: 0px 0px 8px 0px; font-size: 15px; font-weight: bold; line-height: 19px; color: #8bc7ec; font-style: italic; }

/* la note en bas des neuf vignettes de la page sommaire d'une galerie */
h5        { margin: 10px 0px 20px 0px; line-height: 20px; font-size: 11px; font-weight: normal; color: #bbbbbb; text-align: left; }

/* la petite legende grise ferrée à droite pour les photos des galeries */
h6        { margin: 6px 0px 20px 0px; font-size: 11px; font-weight: normal; color: #666666; text-align: right; }

/* taille de texte réduite */
.note11   { line-height: 20px; font-size: 11px; font-weight: normal; }
.italic11 { line-height: 14px; font-size: 11px; font-weight: normal; font-style: italic; }

/* les textes francais et anglais sous les galeries */
.frtexte  { margin: 9px 0px 0px 0px; font-size: 12px; line-height: 19px; color: #bbbbbb; }
.frsigne  { margin: 9px 0px 0px 0px; font-size: 12px; line-height: 19px; color: #8b8b8b; }
.frciter  { margin: 6px 0px 20px 0px; font-size: 12px; font-weight: normal; color: #8b8b8b; text-align: right; }
.engtexte { margin: 9px 0px 0px 0px; font-size: 12px; line-height: 19px; color: #94acbb; font-style: italic; }
.engsigne { margin: 9px 0px 0px 0px; font-size: 12px; line-height: 19px; color: #6d7f8a; font-style: italic; }
.engciter { margin: 6px 0px 20px 0px; font-size: 12px; font-weight: normal; color: #8b8b8b; text-align: right; font-style: italic; }

.expos    { margin: 0px 0px 10px 0px; font-size: 13px; font-weight: normal; line-height: 19px; color: #5f94b7; }

td        { vertical-align: top; padding-right: 6px; }

a         { text-decoration: none; color: #bbbbbb; }
a:focus   { outline: 0; }
a:hover   { text-decoration: none; color: #ffffff; }

/* placement du logo et du menu */
.logo    { position: absolute; left: 92px; top: 66px; width: 164px; height: 72px; }
.topos   { position: absolute; left: 0px; top: 181px; width: 250px; text-align: right; }
.bandeau { position: absolute; left: 315px; top: 118px; width: 715px; text-align: left; }

/* css utilises dans le menu */
.titreoff         { padding-bottom: 14px; color: #476d87; }
.titreon          { padding-bottom: 14px; color: #8bc7ec; }
.topo             { padding-top: 16px; font-size: 13px; color: #64a1bd; }
.galerie          { padding-top: 4px; color: #ffffff; }
.galerievue       { padding-top: 4px; color: #ffffff; }
.galerievue a     { color: #ffffff; }
.separateur       { padding-top: 0px; }
.rubrique         { padding-top: 4px; padding-right: 14px; color: #8bc7ec; float: left; }
.rubrique a       { text-decoration: none; color: #406579; }
.rubrique a:focus { outline: 0; }
.rubrique a:hover { text-decoration: none; color: #8bc7ec; }

/* utiliser #page pour englober les mises en page */
.page  { position: absolute; left: 315px; top: 192px; width: 580px; text-align: justify; }
.cols  { width: 715px; text-align: justify; float: left; }
.full  { position: absolute; left: 315px; top: 200px; text-align: justify; }

/* mise en page des galeries 9x9 */
.pack  { width: 520px; }
.mini  { width: 172px; height: 172px; float: left; }

/* mise en page des galeries horizontales */
.galh  { padding: 0px; overflow: auto; position: relative; border: 0px; width: 1160px; margin: 0px; white-space: nowrap; }
.gali  { padding: 12px 6px 0px 6px; display: inline-block; border: 0px; text-align: center; vertical-align: top; }
.gald  { padding: 12px 6px 0px 12px; display: inline-block; border: 0px; text-align: center; vertical-align: top; }
.galf  { padding: 12px 12px 0px 6px; display: inline-block; border: 0px; text-align: center; vertical-align: top; }

/* mise en page en deux colonnes */
.col1  { width: 310px; float: left; }
.col2  { width: 270px; float: left; }

/* mise en page des publications */
.etal   { width: 715px; clear: both; }
.presse { width: 110px; height: 145px; float: left; }
.media  { width: 220px; height: 150px; float: left; }
.mediatitre { width: 205px; height: 18px; padding-top: 5px; background-color: #1e3d4d; text-align: center; font-size: 11px; }

/* mise en page des liens */
.lienbox    { height: 70px; }
.lienlogo   { width: 105px; float: left; }
.lientext   { width: 600px; }

/* mise en page des Textes */
.textest    { margin: 40px 0px 0px 0px; font-size: 14px; color: #8bc7ec; font-style: italic; }
.textesn    { margin: 4px 0px 0px 0px; font-size: 12px; color: #9a9a9a; text-align: left; }
.textese    { margin: 12px 0px 0px 0px; font-size: 13px; color: #bbbbbb; line-height: 22px; }
.textesf    { margin: 4px 0px 0px 0px; font-size: 12px; color: #9a9a9a; text-align: left; }
.textesc    { margin: 4px 0px 0px 0px; font-size: 13px; color: #8bc7ec; line-height: 19px; }

/* tableaux des expos */
.expotable  { width: 715px; }
.expocase1  { text-align: left; }
.expocase2  { text-align: center; }
.expocase3  { text-align: right; }

/* utiliser #video1 pour englober les deux blocs utilisant video2 */
/* dans ce cas (affichage des videos), ne pas utiliser .page */
#video1 { position: absolute; left: 315px; top: 200px; width: 910px; }
#video2 { width: 450px; height: 376px; float: left;}
#videotitre  { width: 420px; height: 26px; padding-top: 9px; background-color: #1e3d4d; text-align: center; }
.video1 { position: absolute; left: 315px; top: 200px; width: 910px; }
.video2 { width: 450px; height: 376px; float: left;}
.videotitre  { width: 420px; height: 26px; padding-top: 9px; background-color: #1e3d4d; text-align: center; }
/* video4 affiche une video grand format, toujours dans le bloc video1 */
#video4 { width: 870px; height: 555px; float: left;}
#videotitre4 { width: 870px; height: 26px; padding-top: 9px; background-color: #1e3d4d; text-align: center; }
.video4 { width: 870px; height: 555px; float: left;}
.videotitre4 { width: 870px; height: 26px; padding-top: 9px; background-color: #1e3d4d; text-align: center; }

/* masquage pour les textes ENG */
.goenglish { cursor: pointer; background-color: #0f2633; }
.goenglish::before { content: "⬇️ "; }
.collapsed > .goenglish::before { content: "➡️ "; }
.details { max-width: 50em; }