/* mon-auto.com
   Refonte responsive 21/08/2026 : suppression de la colonne de menu de droite,
   contenu renvoye dans un footer a 3 colonnes, largeurs fixes (962 px)
   converties en largeurs fluides. */

/* elements */

*, *::before, *::after { box-sizing: border-box }

body { margin: 0 0 20px 0; text-align: center; background: #F8F8F8;
       -webkit-text-size-adjust: 100% }
body, td, input, select, textarea { font: normal 100%/1.5 "Trebuchet MS", Helvetica, Arial, sans-serif; letter-spacing: .3px }
img { display: block; border: none; max-width: 100%; height: auto }
h1 { font-size: 1.6rem; line-height: 1.25 }
h2 { font-size: 1.3rem; line-height: 1.3 }
hr { color: #DDD; background: #DDD; height: 1px; margin: 0; border: 0 }
p { margin: 10px 0 }
a { text-decoration: none; color: #2468A2; font-weight: normal }
a:hover { color: #F86A1C }


/* Id's — largeurs fluides bornees a l'ancienne largeur fixe */

#hdr, #mnu, #bdy, #ftr, #ftr_img {
  width: 100%;
  max-width: 962px;
  margin: auto;
  text-align: left;
  background: #FFF;
}

#hdr {
  background: url(images/front.jpg) no-repeat center center;
  background-size: cover;
  min-height: 160px;
  display: flex;
  align-items: center;
}
#mnu { background: #FFF url("images/bkg_mnu.gif") no-repeat bottom center; min-height: 41px }
#bdy { margin-top: 15px; background: #FFF url("images/bkg_bdy.gif") no-repeat top center }
#ftr { background: #FFF url("images/bkg_ftr.gif") no-repeat top center; min-height: 45px }

/* le texte occupe desormais toute la largeur */
#lft { float: none; width: 100% }


/* classes */

.inr { padding: 15px }
.clr { clear: both }

/* blocs de contenu jadis en 351 px : deux colonnes fluides */
.w1 { float: left; width: calc(50% - 8px) }
.w2 { float: left; width: calc(33% - 8px) }
.w3 { float: left; width: 100% }
.spcr { width: 16px; float: left }

.imgfr { float: right; margin: 0 0 5px 5px; max-width: 45% }
.imgfl { float: left; margin: 0 5px 5px 0; max-width: 45% }
.more { display: block; text-align: right; margin-top: 5px }
.pad { padding: 2px; border: 1px solid #CCC }
.img-fluide { max-width: 100%; height: auto }


/* pseudos */

h1 span, h2 span { color: #2468A2; display: block }

#ftr .inr { padding-bottom: 6px }
#ftr p { margin: 3px 0 }
#hdr h1 { color: #FFF; margin: 0; padding: 10px 15px; font-size: 2.4rem;
          text-shadow: 0 1px 4px rgba(0,0,0,.55) }
#hdr h1 a { color: #FFF }
#hdr .style2 { font-size: 1rem; display: block; font-weight: normal }
#lft hr { margin: 10px 0 15px 0 }
#nws b { color: #F86A1C }

ul.menu, ul.menu li { list-style: none; margin: 0; padding: 0 }
ul.menu { position: relative; display: flex; flex-wrap: wrap; float: none }
ul.menu li { line-height: 1.3em; vertical-align: middle }
ul.menu li:empty { display: none }
ul.menu li a { display: block; padding: 12px 14px; text-decoration: none; color: #000; font-weight: bold }
ul.menu li a:hover { color: #2468A2 }


#atn { text-align: center; margin: 20px 0 }


/** rajouté par moi **/

.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 10px;
}

.alignright, img.alignright {
display: inline;
float: right;
margin-left: 10px;
}

.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}

/* tableaux */
table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-of-type(odd) {
  background: #ddd;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}


/* ------------------------------------------------------------------ */
/* FOOTER — 3 colonnes                                                 */
/* ------------------------------------------------------------------ */

#ftr {
  margin-top: 20px;
  border-top: 3px solid #2468A2;
}

#ftr-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 30px;
  padding: 10px 0 6px 0;
}

.ftr-col { min-width: 0 }

.ftr-col h4 {
  font-size: 1rem;
  color: #2468A2;
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #DDD;
}

.ftr-col ul { list-style: none; margin: 0; padding: 0 }

.ftr-col li { padding: 0 0 7px 0; line-height: 1.4; font-size: .95rem }

.ftr-col a { color: #333 }
.ftr-col a:hover { color: #F86A1C }

.ftr-copy { color: #777; font-size: .85rem; margin-top: 12px }


/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                          */
/* ------------------------------------------------------------------ */

/* tablette */
@media (max-width: 860px) {
  #hdr { min-height: 130px }
  #hdr h1 { font-size: 1.9rem }
  .w1, .w2 { width: 100%; float: none }
  .spcr { display: none }
  #ftr-cols { gap: 8px 20px }
}

/* mobile */
@media (max-width: 560px) {
  body { margin-bottom: 0 }
  #hdr {
    min-height: 110px;
    background-size: cover;
  }
  #hdr h1 { font-size: 1.45rem; padding: 8px 12px }
  #hdr .style2 { font-size: .9rem }
  #mnu { background-image: none; border-bottom: 2px solid #2468A2 }
  ul.menu { display: block }
  ul.menu li a {
    padding: 12px 14px;
    border-bottom: 1px solid #EEE;
  }
  #bdy { margin-top: 8px; background-image: none }
  .inr { padding: 12px }
  h1 { font-size: 1.35rem }
  h2 { font-size: 1.15rem }
  .imgfr, .imgfl { float: none; max-width: 100%; margin: 0 0 10px 0 }
  #ftr { background-image: none }
  #ftr-cols {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ftr-col { margin-bottom: 10px }
  .ftr-col li a { display: inline-block; padding: 3px 0 }
  /* tableaux : defilement horizontal plutot que page elargie */
  table { display: block; overflow-x: auto; white-space: nowrap }
}