/*
  Cabinet Richard Sturm : feuille de style de l'ancien site (style.css, 2011), reprise telle quelle
  pour l'ordinateur (zone #main de 766 px), complétée d'un mode mobile sous 800 px.
  Retirés : lightbox.css (plan d'accès en image, déjà désactivé), styles de formulaires et de
  messages d'erreur (aucun formulaire sur le site), table.contact_table (inutilisée).
*/

body {
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  margin: 0;
  background: #ffffff;
}

img { border: none; margin: 0; }

a { color: #9a7f82; }
a:hover { text-decoration: none; }
a.nodeco { text-decoration: none; }

/* En-tête : bandeau brun, dégradé clair en bas, logo centré, menu en images */

#header {
  height: 296px;
  background: #483030 url(/images/bg_top.gif) repeat-x bottom;
  border-bottom: solid 5px #d8c0c0;
  margin: 0;
  border-top: solid 1px #483030;
}

#logo { margin-top: 32px; }
#logo img { vertical-align: bottom; }

#menu .menu-item { display: inline-block; }
#menu .menu-item .on { display: none; }
#menu .menu-item:hover .off,
#menu .menu-item:focus-visible .off,
#menu .menu-item.active .off { display: none; }
#menu .menu-item:hover .on,
#menu .menu-item:focus-visible .on,
#menu .menu-item.active .on { display: inline; }
#menu .menu-item:focus-visible { outline: 2px solid #9a7f82; outline-offset: -6px; }

/* Contenu */

#main {
  min-height: 300px;
  text-align: left;
  margin: auto;
  width: 766px;
  overflow: auto;
  padding-bottom: 35px;
}

#left {
  float: left;
  clear: none;
  position: relative;
  margin: 35px 25px 0 45px;
  border: solid 1px #cccccc;
  width: 380px;
  min-height: 50px;
  padding: 2px;
}

#left #image img { display: block; max-width: 100%; height: auto; }
#left div.txt { padding: 15px; text-align: justify; }

/* Pleine largeur (Contact, Équipe, Politique de confidentialité) : l'ancien #left élargi sans cadre */
#left.full {
  width: 680px;
  border: none;
}

#right {
  position: relative;
  float: left;
  clear: none;
  margin: 5px 45px 0 25px;
  width: 235px;
  min-height: 50px;
  padding-top: 35px;
  color: #8c8c8c;
}

#right .domaines ul {
  margin-left: 20px;
  padding: 0;
  line-height: 20px;
}

#right .domaines a {
  color: #9a7f82;
  text-decoration: none;
}

#right .domaines li {
  list-style-image: url(/images/right_li.gif);
  padding: 0 0 5px 0;
  margin-top: 5px;
  border-bottom: solid 1px #d8d8d8;
}

/* Titres : h2.h1 reprend le style des h1 de l'ancien site (titres de la colonne de droite, membres) */

h1, .h1 {
  color: #786060;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 22px;
  font-style: italic;
  font-weight: normal;
  line-height: 25px;
  /* Marge par défaut des h1 des navigateurs, celle de l'ancien site. */
  margin: 0.67em 0;
}
.underline { width: 100%; border-bottom: dotted 1px #9a7f82; padding-bottom: 10px; color: #9a7f82; }
/* L'ancien site, en mode « presque standard » (doctype XHTML 1.0), ne grandissait pas la ligne du complément ;
   en HTML5, sa hauteur héritée de 25 px ajoutait 2,5 px au titre (line-height 1) et le texte descendait de 3 px
   (top -3px, mesuré au pixel). */
.header_small { font-size: 14px; line-height: 1; position: relative; top: -3px; }

.brown { color: #9a7f82; }

p.indent { padding-left: 20px; }

ul { text-align: left; }
li { list-style-type: circle; padding: 3px 0; }

/* Équipe */

.member {
  padding: 15px 0 30px 0;
  margin: 0 0 20px 85px;
  border-bottom: dotted 1px #b5a1a3;
  float: left;
  clear: both;
  overflow: auto;
  width: 500px;
}
.member .h1 { line-height: 18px; margin-bottom: 0; }

/* Contact */

.map { margin-top: 11px; }
.map iframe { display: block; max-width: 100%; }

/* Pied de page */

#footer {
  background: #483030;
  min-height: 30px;
  padding: 28px 16px;
  color: #9a7f82;
}
#footer a { color: #9a7f82; }

/* Mobile et petite tablette : une colonne, texte agrandi, menu en grille 2 × 2 */

@media (max-width: 800px) {
  body { font-size: 15px; line-height: 23px; }

  /* Bandeau brun pour le logo, puis le menu sur deux lignes. Les GIF du menu portent la tranche
     du dégradé bg_top.gif qui se trouvait derrière eux (72 à 171 px) : chaque cellule la reprend
     en fond pour que les images s'y fondent. */
  #header { height: auto; background: #483030; }
  #logo { margin: 20px 0; }
  #logo img { width: 130px; height: auto; }

  #menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    line-height: 0;
  }
  #menu .sep { display: none; }
  #menu .menu-item {
    text-align: center;
    background: url(/images/bg_top.gif) repeat-x 0 -72px;
  }
  #menu .menu-item img { max-width: 100%; height: auto; }

  #main { width: auto; padding: 0 16px 35px; }
  #left, #left.full, #right {
    float: none;
    width: auto;
    margin: 24px 0 0;
  }
  #left div.txt { padding: 16px; text-align: left; }
  #right { padding-top: 0; }

  .member { float: none; width: auto; margin-left: 0; }

  /* Tableau de la politique de confidentialité : une cellule sous l'autre */
  #left.full table, #left.full tbody, #left.full tr, #left.full th, #left.full td { display: block; width: auto !important; }
  #left.full th, #left.full td { padding: 8px; }
  #left.full tr + tr { border-top: 1px solid currentColor; }

  #footer { font-size: 13px; line-height: 20px; }
}